前端实践及工具使用｜豆包MarsCode AI 刷题在电商网站的商品列表页，以下是一些 HTML 语义化的做法：整体

在电商网站的商品列表页，以下是一些 HTML 语义化的做法：

整体布局

可以使用<main>标签包裹商品列表的主要内容，表明这是页面的核心部分。例如：<main id="product - list - main">，里面放置所有商品相关信息。

商品分组

对于一组商品，可以用<section>标签来划分。比如按类别划分商品，<section class="clothes - section">可以用于包含所有服装类商品。

单个商品呈现

每个商品可以用<article>标签包裹，代表一个独立完整的内容单元。如<article class="product - item">。

xml
 代码解读
复制代码
-   商品图片部分可以使用`<img>`标签，并添加有语义的`alt`属性来描述图片内容，例如`<img src="product1.jpg" alt="红色连衣裙正面图">`。
-   商品名称使用`<h3>`标签来突出显示，如`<h3>时尚红色连衣裙</h3>`，表明这是商品的重要标题信息。
-   商品价格部分可以使用`<span class="price - tag">199元</span>`，语义上可以方便区分价格内容。
-   可以添加一个简短的商品描述，使用`<p class="product - desc">这款连衣裙采用优质面料，时尚修身设计。</p>`。

排序和筛选功能

排序选项（如按价格升序、降序，按销量排序等）可以放在<nav>标签内，作为导航性质的功能模块，例如<nav class="sort - nav"><ul><li>按价格升序</li><li>按销量排序</li></ul></nav>。筛选功能（如筛选颜色、尺码等）也可以用<form>标签包裹相关的筛选选项，如<form class="filter - form"><label for="color - filter">颜色筛选：</label><select id="color - filter"><option>红色</option><option>蓝色</option></select></form>。

商品促销信息

对于正在促销的商品，可以使用<mark>标签来突出显示促销内容。比如，如果商品在打折，可以这样写：<p>原价<del>299元</del>，现价<mark>199元</mark></p>，其中<del>表示删除的原价，<mark>很直观地展示出促销价格。

商品评分和评论数量

可以用<div class="rating - section">包裹商品评分相关内容。里面用<meter>标签来展示评分数值，例如<meter value="4" min="0" max="5">4分</meter>表示商品评分为 4 分（满分 5 分）。再搭配<span class="review - count">(123条评论)</span>来显示评论数量，语义上更明确地传达了商品受消费者关注的程度。

商品库存状态

利用<data>标签来表示商品库存相关数据。例如<data value="in - stock">有货</data>或者<data value="out - stock">缺货</data>，这样可以让机器更好地理解商品库存状态，同时方便进行样式设置和数据交互。

商品品牌信息

为商品品牌单独设置语义标签，如<p class="brand - info"><strong>品牌：</strong> <span class="brand - name">ABC品牌</span></p>，用<strong>突出品牌关键词，<span>包裹品牌名称，方便对品牌部分进行样式和内容的管理。

商品链接

为每个商品添加链接时，使用<a>标签并添加有意义的href属性指向商品详情页。例如<a href="product - details.html?id=123" class="product - link">查看商品详情</a>，这不仅方便用户导航，也有助于搜索引擎理解页面结构。

示例

diff
 代码解读
复制代码
-  ```

电商网站商品列表页 /* 这里可以添加一些基本的样式设置，方便查看效果 */ body { font-family: Arial, sans-serif; } article.product-item { border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; } h3 { margin-top: 0; } img { max-width: 100%; height: auto; } .price-tag { color: red; font-weight: bold; } .rating-section { margin-top: 10px; } meter { width: 100px; } .review-count { margin-left: 10px; } .brand-info { margin-top: 5px; } .brand-name { font-weight: bold; } .product-link { display: block; text-align: center; margin-top: 10px; text-decoration: none; color: blue; background-color: #f9f9f9; padding: 5px; }

xml
 代码解读
复制代码
<main id="product-list-main">

    <!-- 商品分组，这里假设是服装类商品分组 -->
    <section class="clothes-section">

        <!-- 单个商品呈现 -->
        <article class="product-item">
            <!-- 商品图片 -->
            <img src="product1.jpg" alt="时尚红色连衣裙正面图">
            <!-- 商品名称 -->
            <h3>时尚红色连衣裙</h3>
            <!-- 商品价格 -->
            <p>原价<del>299元</del>，现价<mark>199元</mark></p>
            <!-- 商品描述 -->
            <p class="product-desc">这款连衣裙采用优质面料，时尚修身设计。</p>
            <!-- 商品评分和评论数量 -->
            <div class="rating-section">
                <meter value="4" min="0" max="5">4分</meter>
                <span class="review-count">(123条评论)</span>
            </div>
            <!-- 商品库存状态 -->
            <p><data value="in-stock">有货</data></p>
            <!-- 商品品牌信息 -->
            <p class="brand-info"><strong>品牌：</strong> <span class="brand-name">ABC品牌</span></p>
            <!-- 商品链接 -->
            <a href="product-details.html?id=123" class="product-link">查看商品详情</a>
        </article>

        <!-- 另一个单个商品呈现 -->
        <article class="product-item">
            <img src="product2.jpg" alt="蓝色牛仔裤正面图">
            <h3>经典蓝色牛仔裤</h3>
            <p>价格：<span class="price-tag">249元</span></p>
            <p class="product-desc">经典直筒牛仔裤，舒适耐穿。</p>
            <div class="rating-section">
                <meter value="3.5" min="0" max="5">3.5分</meter>
                <span class="review-count">(87条评论)</span>
            </div>
            <p><data value="in-stock">有货</data></p>
            <p class="brand-info"><strong>品牌：</strong> <span class="brand-name">XYZ品牌</span></p>
            <a href="product-details.html?id=456" class="product-link">查看商品详情</a>
        </article>

    </section>

</main>

<!-- 排序选项 -->
<nav class="sort-nav">
    <ul>
        <li>按价格升序</li>
        <li>按销量排序</li>
    </ul>
</nav>

<!-- 筛选功能 -->
<form class="filter-form">
    <label for="color-filter">颜色筛选：</label>
    <select id="color-filter">
        <option>红色</option>
        <option>蓝色</option>
        <option>其他</option>
    </select>
    <label for="size-filter">尺码筛选：</name>
    <select id="size-filter">
        <option>s</option>
        <option>m</option>
        <option>l</option>
        <option>xl</option>
    </select>
</form>

开发工具

一、代码编辑器

（一）Visual Studio Code（VS Code）

不具体介绍了

（二）构建工具

Webpack

安装与配置
- 首先，确保在项目中安装了 Node.js。然后在项目根目录打开命令行终端，执行npm install webpack webpack-cli --save-dev安装 Webpack 和其命令行工具。
- 在项目根目录创建webpack.config.js文件，配置 Webpack 的基本选项。例如，定义入口文件（entry）为./src/index.js（假设项目的 JavaScript 入口文件在src目录下的index.js），输出路径（output）为./dist/bundle.js（将打包后的文件输出到dist目录下的bundle.js）。
- 配置加载器（module.rules），例如，如果项目使用了 ES6 语法和 Sass 样式，需要安装babel-loader和sass-loader等相关加载器。在webpack.config.js中配置如下：

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    },
    {
      test: /.scss$/,
      use: ['style-loader', 'css-loader','sass-loader']
    }
  ]
}

配置插件（plugins），如安装html-webpack-plugin来自动生成 HTML 文件并引入打包后的资源。在webpack.config.js中配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  })
]

运行与打包
- 在命令行终端执行npx webpack（如果全局安装了 Webpack 可以直接执行webpack），Webpack 会根据配置文件进行打包操作。打包完成后，在dist目录下会生成打包后的文件，包括bundle.js和自动生成的 HTML 文件（如果配置了html-webpack-plugin）。

前端实践及工具使用｜ 豆包MarsCode AI 刷题