随着电商的发展，越来越多的人选择在网上购物。本文将介绍一种常用的HTML主界面购物代码。
<html>
<head>
<title>购物页面</title>
</head>
<body>
<h1>欢迎来到购物页面</h1>
<form action="#" method="post">
<fieldset>
<legend>商品信息</legend>
<label for="productName">商品名称:</label>
<input type="text" id="productName" name="productName"><br>
<label for="productNum">商品数量:</label>
<input type="number" id="productNum" name="productNum"><br>
<label for="productPrice">商品单价:</label>
<input type="text" id="productPrice" name="productPrice"><br>
<button type="submit">添加商品</button>
</fieldset>
</form>
<table>
<thead>
<tr>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>1</td>
<td>10.00</td>
<td>10.00</td>
</tr>
<tr>
<td>商品2</td>
<td>2</td>
<td>8.00</td>
<td>16.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总价:</td>
<td>26.00</td>
</tr>
</tfoot>
</table>
</body>
</html>
该代码包含一个表单和一个表格，用于添加商品和展示已添加的商品。
表单包括商品名称、数量和单价的输入框以及一个添加商品的按钮。
表格包括四列：商品名称、数量、单价和总价。已添加的商品将根据输入的数量和单价计算总价并显示在表格中。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
