Day 1|HTML5:一个商城首页的骨架,从 DOCTYPE 到语义化

今天不写一行 JS,也不写一行 CSS。只把 HTML 这一件事讲透。

文末有一个完整的 index.html,复制保存就能打开看效果------它把今天讲的所有标签都用上了。


一、HTML 到底是什么

HTML 不是编程语言,它是标记语言 。它只做一件事:告诉浏览器,这段内容是什么。

  • 是标题?是段落?是图片?是导航?是表格?
  • 浏览器拿到这些信息后,再去排版、渲染、给搜索引擎索引、给读屏软件朗读。

所以:HTML 写得越"对",后面的 CSS、JS、SEO、无障碍才越好做。


二、文档结构:每个页面的固定开头

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MiniMall - 首页</title>
    <meta name="description" content="MiniMall 商城,提供数码、家电、服饰等商品">
    <meta name="keywords" content="商城,数码,家电">
    <link rel="icon" href="/favicon.ico">
    <!-- 分享卡片 -->
    <meta property="og:title" content="MiniMall">
    <meta property="og:description" content="好物不贵">
    <meta property="og:image" content="/share.jpg">
</head>
<body>
    ...
</body>
</html>

要点:

项 说明
<!DOCTYPE html> 声明这是 HTML5,不写会进怪异模式,布局乱掉
lang="zh-CN" 影响翻译提示、读屏发音、搜索引擎地域判断
charset="UTF-8" 必须第一行之一,否则中文乱码
viewport 响应式的门票,没有它手机端字会小到看不见
description 搜索结果里标题下面那行灰字,直接影响点击率
og:* 微信、钉钉、Twitter 分享时显示的卡片内容

三、语义化标签:把 div soup 换成人话

新手最容易犯的错:全篇 <div>。语义化标签的作用是让机器读懂结构。

html 复制代码
<header>     页头:logo、搜索框、登录入口
<nav>        导航栏:分类菜单、面包屑
<main>       页面主体内容,一个页面只能有一个
<section>    有明确主题的一块:热销区、新品区
<article>    独立完整的内容:一篇商品详情、一篇博客
<aside>      侧边栏:筛选条件、推荐位
<footer>     页脚:版权、备案、联系方式

对照关系(记这个就行):

  • div = 没有语义的容器(用来做布局)
  • section = 有主题的分块
  • article = 能单独拎出去发布的内容
  • aside = 和主体相关但可分离的附属内容

四、文本类标签

html 复制代码
<h1>~<h6>   标题层级,h1 一页只用一个,且不要跳级(h1 直接接 h3 是错的)
<p>          段落
<br>         换行(别用它代替段落)
<hr>         主题分隔线
<strong>     重要(加粗+语义)
<em>         强调(斜体+语义)
<b> / <i>    纯样式加粗/斜体,无语义
<mark>       高亮(搜索结果关键词常用)
<del> / <ins> 删除线 / 下划线(改价、划线价场景)
<sub> / <sup> 下标 / 上标(化学式、脚注)
<code> / <pre> 代码、保留空格换行
<blockquote> 长引用(cite 属性放来源 URL)
<q>          短引用(自动加引号)
<time datetime="2026-01-15">1月15日</time>  机器可读时间
<address>    联系信息(页脚常用)
<small>      附属小字(免责声明、版权)
<span>       无语义行内容器,专门给 CSS/JS 挂钩用

五、列表

html 复制代码
<ul><li>商品A</li><li>商品B</li></ul>          无序列表:导航、标签、规格项
<ol><li>第一步</li><li>第二步</li></ol>        有序列表:步骤、排行榜
<dl><dt>运费</dt><dd>满99免邮</dd></dl>        定义列表:键值对(商品参数最合适)

商品参数表用 <dl>,比一堆 <div> 专业得多,也利于 SEO。


六、链接与图片

html 复制代码
<a href="/detail.html" target="_blank" rel="noopener noreferrer">详情</a>
<a href="/a.pdf" download>下载说明书</a>
<a href="mailto:hi@example.com">联系我们</a>
<a href="tel:4001234567">拨打电话</a>
<a href="#comments">跳到评论区</a>          锚点跳转

<img src="p.jpg" alt="iPhone 17 深空黑色正面图" width="300" height="400" loading="lazy">
<figure>
  <img src="p.jpg" alt="...">
  <figcaption>图1:产品外观</figcaption>
</figure>

要点:

  • alt 不能省,图片加载失败时显示它,也是读屏软件的唯一依据。
  • width/height 写上可以避免页面加载时抖动(CLS 指标)。
  • loading="lazy" 首屏之外的图片延迟加载,提升打开速度。
  • target="_blank" 必须配 rel="noopener noreferrer",否则有安全风险。

七、表格(后台数据展示必用)

html 复制代码
<table>
  <caption>订单列表</caption>
  <thead><tr><th scope="col">订单号</th><th scope="col">金额</th></tr></thead>
  <tbody><tr><td>20260101001</td><td>199.00</td></tr></tbody>
  <tfoot><tr><td>合计</td><td>199.00</td></tr></tfoot>
</table>
  • thead/tbody/tfoot 分开,打印和滚动表头时才有意义。
  • scope="col" / scope="row" 让表头和单元格对应起来,无障碍必备。
  • colspan / rowspan 合并行列(合并单元格报表常用)。

八、表单(最复杂也最重要的一块)

html 复制代码
<form action="/search" method="GET" autocomplete="on" novalidate>
  <fieldset>
    <legend>搜索条件</legend>

    <label for="kw">关键词</label>
    <input id="kw" name="kw" type="search" placeholder="输入商品名"
           required minlength="2" maxlength="50" autocomplete="off">

    <input type="text" name="phone" pattern="^1[3-9]\d{9}$" title="请输入11位手机号">
    <input type="email" name="email">
    <input type="number" name="qty" min="1" max="99" step="1" value="1">
    <input type="range" name="price" min="0" max="9999">
    <input type="date" name="start">
    <input type="color" name="color">
    <input type="file" name="img" accept="image/*" multiple>
    <input type="hidden" name="csrf" value="xxx">

    <input type="radio" name="sort" value="price" id="s1"><label for="s1">价格</label>
    <input type="checkbox" name="onlyStock" id="c1"><label for="c1">仅看有货</label>

    <select name="cate" multiple size="3">
      <optgroup label="数码"><option value="phone">手机</option></optgroup>
    </select>

    <textarea name="remark" rows="3" maxlength="200" placeholder="备注"></textarea>

    <button type="submit">搜索</button>
    <button type="reset">重置</button>
    <button type="button" disabled>不可点</button>
  </fieldset>
</form>

表单核心规则(背下来):

  1. 每个 input 都要有 label ,用 for 关联 id,点击文字也能聚焦。
  2. 优先用对的 type :email/number/date/tel/search,手机端会弹出对应键盘。
  3. 校验优先用原生属性 :required/pattern/min/max/minlength/maxlength,JS 只是补充。
  4. radio 的 name 要相同 才能互斥;checkbox 的 name 通常带 [] 表示数组。
  5. 敏感操作加隐藏字段做 CSRF 令牌。
  6. autocomplete 合理设置能提升填写效率(地址、姓名、手机号)。

九、多媒体与嵌入

html 复制代码
<audio src="bg.mp3" controls preload="metadata"></audio>
<video src="demo.mp4" controls width="640" poster="cover.jpg">
  <track kind="subtitles" src="zh.vtt" srclang="zh" label="中文">
  您的浏览器不支持视频
</video>
<iframe src="https://www.bilibili.com/blackboard/html5mobileplayer.html"
        width="560" height="315" frameborder="0"
        allowfullscreen loading="lazy" referrerpolicy="no-referrer"></iframe>
<embed src="manual.pdf" type="application/pdf" width="500" height="400">
  • controls 不加就没有播放控件。
  • poster 是视频封面,影响首屏观感。
  • <track> 做字幕,外贸站必备。
  • iframe 一定要设 loading="lazy",否则拖慢整页。

十、HTML5 交互新标签(不用 JS 也能交互)

html 复制代码
<details open>
  <summary>常见问题</summary>
  <p>支持7天无理由退货。</p>
</details>

<progress value="70" max="100"></progress>   进度条
<meter value="0.6" min="0" max="1"></meter>   仪表盘式刻度

<dialog open>
  <p>弹窗内容</p>
  <form method="dialog"><button>关闭</button></form>
</dialog>

<template id="tpl">...</template>             客户端模板,JS 克隆使用

details/summary 是做 FAQ、折叠面板最轻量的方案,很多站点还在用 JS 硬写。

dialog 是原生模态框,按 ESC 能关闭,焦点管理浏览器帮你做了。


十一、全局属性(所有标签都能用)

属性 用途
id 唯一标识,锚点和 JS 查询用
class 样式和 JS 批量选择
data-* 自定义数据,如 data-spu-id="1001",JS 用 dataset 读取
title 鼠标悬停提示(别滥用)
hidden 隐藏元素,比 display:none 语义更准
tabindex 控制 Tab 键顺序,0 进顺序,-1 可编程聚焦
contenteditable 让元素可编辑(简易富文本原型)
draggable 拖拽配合 Drag & Drop API
style 内联样式(尽量不用)
aria-label / role 无障碍补充,图标按钮必加 aria-label

十二、SEO 与无障碍:三句话记住

  1. 标题层级不乱跳,h1 只有一个。
  2. 图片有 alt,按钮有 aria-label,表单有 label。
  3. 能用语义标签就别用 div + class 模拟。

再加一条工程习惯:注释写清楚区块起止。

html 复制代码
<!-- /header -->
<!-- /main: product-list -->

页面一长,这条能救命。


今日小项目:MiniMall 首页骨架

目标 :一个纯 HTML 文件,包含页头、导航、轮播占位、商品列表、参数表、FAQ、搜索表单、侧边栏、页脚。

用法 :复制下面全部内容 → 存成 index.html → 双击打开。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MiniMall - 企业级商城实战演示站</title>
  <meta name="description" content="MiniMall:一个从零搭建的企业级商城,本文是第1天:HTML5语义化骨架">
  <meta name="keywords" content="HTML5,商城,语义化,前端实战">
  <link rel="icon" href="data:,">
  <style>
    /* 只为看得清结构,不是重点 */
    * { box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; margin: 0; color: #222; line-height: 1.6; }
    header, nav, main, aside, footer, section, article { padding: 16px; }
    header { background: #f8f9fa; border-bottom: 2px solid #e9ecef; }
    nav { background: #222; color: #fff; display: flex; gap: 16px; flex-wrap: wrap; }
    nav a { color: #fff; text-decoration: none; }
    nav a:hover { text-decoration: underline; }
    .banner { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; text-align: center; padding: 48px 16px; }
    .container { display: flex; gap: 0; max-width: 1200px; margin: 0 auto; }
    main { flex: 3; }
    aside { flex: 1; background: #f8f9fa; border-left: 1px solid #e9ecef; }
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
    .card { border: 1px solid #e9ecef; border-radius: 8px; padding: 12px; }
    .card img { width: 100%; height: 160px; object-fit: cover; background: #eee; border-radius: 4px; }
    .price { color: #e53935; font-weight: bold; font-size: 18px; }
    .old { text-decoration: line-through; color: #999; font-size: 13px; margin-left: 8px; }
    table { width: 100%; border-collapse: collapse; margin: 12px 0; }
    th, td { border: 1px solid #e9ecef; padding: 8px; text-align: left; }
    th { background: #f8f9fa; }
    form label { display: block; margin-top: 10px; font-weight: 500; }
    form input, form select, form textarea { width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px; }
    button { background: #222; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin-top: 12px; }
    button:hover { background: #444; }
    footer { background: #222; color: #ccc; text-align: center; }
    footer a { color: #fff; }
    mark { background: #fff3cd; }
    @media (max-width: 768px) { .container { flex-direction: column; } }
  </style>
</head>
<body>

<!-- ========== 页头 ========== -->
<header>
  <h1><a href="/" style="text-decoration:none;color:inherit;">MiniMall</a></h1>
  <p><small>企业级商城实战 · 第1天 · HTML5 语义化骨架</small></p>
  <!-- 搜索表单:GET 提交,语义化 input 类型 -->
  <form action="/search" method="GET" role="search">
    <label for="kw">搜索商品</label>
    <input type="search" id="kw" name="kw" placeholder="输入关键词,如「耳机」" required minlength="1" maxlength="50">
    <input type="hidden" name="from" value="header">
    <button type="submit">搜索</button>
  </form>
</header>

<!-- ========== 导航 ========== -->
<nav aria-label="主导航">
  <a href="#home">首页</a>
  <a href="#phone">手机数码</a>
  <a href="#home-appliance">家用电器</a>
  <a href="#clothes">服饰</a>
  <a href="#rank">排行榜</a>
  <a href="#help">帮助中心</a>
  <a href="mailto:service@minimall.com">联系客服</a>
  <a href="tel:4001234567">400-123-4567</a>
</nav>

<!-- ========== 横幅 ========== -->
<div class="banner">
  <h2>新春焕新季</h2>
  <p>全场满 <mark>299 减 50</mark>,部分商品 <del>原价</del> <ins>限时价</ins></p>
  <p><time datetime="2026-02-01">2月1日</time> 起至 <time datetime="2026-02-15">2月15日</time></p>
  <a href="#goods" style="color:#fff;text-decoration:underline;">立即查看 ↓</a>
</div>

<div class="container">

<!-- ========== 主体内容 ========== -->
<main id="home">

  <!-- 商品列表:section + article + figure -->
  <section id="goods" aria-labelledby="goods-title">
    <h2 id="goods-title">热销商品</h2>
    <div class="grid">

      <article class="card">
        <figure>
          <img src="" alt="无线降噪耳机 黑色 头戴式" width="300" height="160" loading="lazy">
          <figcaption>图1:降噪耳机外观</figcaption>
        </figure>
        <h3><a href="/detail.html" target="_blank" rel="noopener">无线降噪耳机 Pro</a></h3>
        <p>主动降噪 · 40h 续航 · 蓝牙<sup>5.3</sup></p>
        <p><span class="price">¥299</span><span class="old">¥599</span></p>
        <p><small>库存:<meter value="3" min="0" max="100">3件</meter> 仅剩 3 件</small></p>
        <button type="button" data-spu-id="1001" data-action="add-cart">加入购物车</button>
      </article>

      <article class="card">
        <figure>
          <img src="" alt="机械键盘 87键 茶轴" width="300" height="160" loading="lazy">
          <figcaption>图2:机械键盘</figcaption>
        </figure>
        <h3><a href="#">机械键盘 87 键</a></h3>
        <p>热插拔轴体 · PBT 键帽 · 三模连接</p>
        <p><span class="price">¥199</span></p>
        <p>进度:<progress value="72" max="100"></progress> 已售 72%</p>
        <button type="button" data-spu-id="1002" data-action="add-cart">加入购物车</button>
      </article>

      <article class="card">
        <figure>
          <img src="" alt="4K 显示器 27英寸 IPS" width="300" height="160" loading="lazy">
          <figcaption>图3:显示器</figcaption>
        </figure>
        <h3><a href="#">4K 显示器 27"</a></h3>
        <p>IPS 面板 · Type-C 反向供电 90W</p>
        <p><span class="price">¥1299</span><span class="old">¥1699</span></p>
        <button type="button" data-spu-id="1003" data-action="add-cart">加入购物车</button>
      </article>

    </div>
  </section>

  <!-- 商品参数:dl 与 table 两种写法对比 -->
  <section id="params" aria-labelledby="params-title">
    <h2 id="params-title">商品参数</h2>
    <p>同一份数据,两种 HTML 写法:</p>

    <h4>写法一:定义列表(适合键值少的场景)</h4>
    <dl>
      <dt>品牌</dt><dd>MiniMall 自营</dd>
      <dt>型号</dt><dd>MM-2026-A</dd>
      <dt>重量</dt><dd>256 g</dd>
      <dt>化学式示例</dt><dd>H<sub>2</sub>O(下标)、E=mc<sup>2</sup>(上标)</dd>
    </dl>

    <h4>写法二:表格(适合多 SKU 对比)</h4>
    <table>
      <caption>表1:三个 SKU 参数对比</caption>
      <thead>
        <tr><th scope="col">参数</th><th scope="col">标准版</th><th scope="col">Pro</th><th scope="col">Max</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">续航</th><td>30h</td><td>40h</td><td>50h</td></tr>
        <tr><th scope="row">降噪</th><td>---</td><td>有</td><td>自适应</td></tr>
        <tr><th scope="row">价格</th><td>¥199</td><td>¥299</td><td>¥399</td></tr>
      </tbody>
      <tfoot>
        <tr><td colspan="4">数据来源:官方规格页,更新于 <time datetime="2026-01-10">2026-01-10</time></td></tr>
      </tfoot>
    </table>
  </section>

  <!-- 下单表单:覆盖主要 input 类型 -->
  <section id="order" aria-labelledby="order-title">
    <h2 id="order-title">快速下单</h2>
    <form action="/order" method="POST" autocomplete="on">
      <fieldset>
        <legend>收货信息</legend>
        <label for="uname">姓名 <abbr title="required">必填</abbr></label>
        <input type="text" id="uname" name="name" required minlength="2" maxlength="20" autocomplete="name" placeholder="张三">

        <label for="uphone">手机号</label>
        <input type="tel" id="uphone" name="phone" pattern="^1[3-9]\d{9}$" autocomplete="tel" placeholder="13800000000" title="请输入11位手机号">

        <label for="uemail">邮箱(接收订单通知)</label>
        <input type="email" id="uemail" name="email" autocomplete="email" placeholder="you@example.com">

        <label for="uaddr">地址</label>
        <textarea id="uaddr" name="address" rows="3" maxlength="200" autocomplete="street-address" placeholder="省市区 + 详细地址"></textarea>
      </fieldset>

      <fieldset>
        <legend>商品选项</legend>
        <label>版本</label>
        <input type="radio" name="ver" value="std" id="v1" checked><label for="v1" style="display:inline;width:auto;">标准版 ¥199</label>
        <input type="radio" name="ver" value="pro" id="v2"><label for="v2" style="display:inline;width:auto;">Pro ¥299</label>
        <input type="radio" name="ver" value="max" id="v3"><label for="v3" style="display:inline;width:auto;">Max ¥399</label>

        <label for="color">颜色</label>
        <select id="color" name="color">
          <optgroup label="经典色">
            <option value="black" selected>曜石黑</option>
            <option value="white">珍珠白</option>
          </optgroup>
          <optgroup label="限定色">
            <option value="blue">深海蓝</option>
          </optgroup>
        </select>

        <label for="qty">数量</label>
        <input type="number" id="qty" name="qty" min="1" max="10" step="1" value="1">

        <label for="budget">心理价位区间</label>
        <input type="range" id="budget" name="budget" min="0" max="5000" step="100" value="500">

        <label for="invoice">上传发票信息(可选)</label>
        <input type="file" id="invoice" name="invoice" accept=".pdf,.jpg,.png" multiple>

        <label><input type="checkbox" name="gift" value="1"> 需要礼品包装</label>
        <label><input type="checkbox" name="agree" required> 我已阅读并同意 <a href="/terms" target="_blank">《用户协议》</a></label>

        <input type="hidden" name="csrf_token" value="demo-token-12345">
        <input type="hidden" name="sku_id" value="1001-pro-black">
      </fieldset>

      <button type="submit">提交订单</button>
      <button type="reset">重置</button>
      <button type="button" disabled title="活动未开始">立即购买(未开始)</button>
    </form>
  </section>

  <!-- 多媒体:音视频与嵌入 -->
  <section id="media" aria-labelledby="media-title">
    <h2 id="media-title">商品视频与音频介绍</h2>
    <video src="demo.mp4" controls width="100%" poster="cover.jpg" preload="metadata">您的浏览器不支持 video 标签</video>
    <p><audio src="intro.mp3" controls preload="metadata">您的浏览器不支持 audio 标签</audio> 产品介绍语音版</p>
    <p>说明书预览:<embed src="manual.pdf" type="application/pdf" width="100%" height="300"></p>
  </section>

  <!-- 列表:导航、排行、键值 -->
  <section id="lists" aria-labelledby="lists-title">
    <h2 id="lists-title">三种列表的实际用法</h2>
    <h4>无序列表:面包屑导航</h4>
    <nav aria-label="面包屑">
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/digital">数码</a></li>
        <li><a href="/audio">音频</a></li>
        <li aria-current="page">降噪耳机 Pro</li>
      </ul>
    </nav>

    <h4>有序列表:下单流程</h4>
    <ol>
      <li>选择规格与数量</li>
      <li>填写收货信息</li>
      <li>支付订单</li>
      <li>等待发货</li>
    </ol>

    <h4>定义列表:售后政策</h4>
    <dl>
      <dt>退换货</dt><dd>7天无理由,15天质量问题换新</dd>
      <dt>保修</dt><dd>主机1年,电池6个月</dd>
      <dt>客服</dt><dd>工作日 9:00--18:00</dd>
    </dl>
  </section>

  <!-- 交互:details/summary 做 FAQ,零 JS -->
  <section id="help" aria-labelledby="help-title">
    <h2 id="help-title">常见问题</h2>
    <details>
      <summary>支持哪些支付方式?</summary>
      <p>支持微信支付、支付宝、银联云闪付。企业采购可对公转账。</p>
    </details>
    <details open>
      <summary>发货时效是多久?</summary>
      <p>工作日 16:00 前下单当日发出,预计 2--3 天送达。</p>
    </details>
    <details>
      <summary>如何开发票?</summary>
      <p>下单时勾选开票,电子发票将在确认收货后发送至邮箱。</p>
    </details>
  </section>

  <!-- 其他文本语义演示 -->
  <section>
    <h2>文本语义速查</h2>
    <p><strong>strong:重要内容</strong>,<em>em:强调语气</em>,<b>b:纯加粗</b>,<i>i:纯斜体</i>。</p>
    <p>原价 <del>599</del>,现价 <ins>299</ins>,关键词 <mark>降噪</mark> 高亮。</p>
    <blockquote cite="https://developer.mozilla.org/docs/Web/HTML">
      <p>HTML 是 Web 的核心标记语言,用于定义内容的含义与结构。</p>
    </blockquote>
    <p>引文出处:<cite>MDN Web Docs</cite></p>
    <pre><code>&lt;article class="card"&gt;
  &lt;h3&gt;商品名称&lt;/h3&gt;
  &lt;p class="price"&gt;¥299&lt;/p&gt;
&lt;/article&gt;</code></pre>
    <address>
      商家信息:MiniMall 自营旗舰店 · <a href="mailto:shop@minimall.com">shop@minimall.com</a>
    </address>
  </section>

</main>

<!-- ========== 侧边栏 ========== -->
<aside aria-label="辅助信息">
  <h3>筛选条件</h3>
  <form action="/filter" method="GET">
    <label for="cate">分类</label>
    <select id="cate" name="cate" multiple size="4">
      <option value="phone">手机</option>
      <option value="audio" selected>音频</option>
      <option value="pc">电脑办公</option>
      <option value="home">家电</option>
    </select>

    <label for="brand">品牌</label>
    <input list="brands" id="brand" name="brand" placeholder="输入或选择">
    <datalist id="brands">
      <option value="MiniMall">
      <option value="SoundPro">
      <option value="KeyMaster">
    </datalist>

    <label><input type="checkbox" name="stock" checked> 仅看有货</label>
    <label><input type="checkbox" name="freeShip"> 包邮</label>
    <button type="submit">应用筛选</button>
  </form>

  <h3>销量排行</h3>
  <ol>
    <li><a href="#">降噪耳机 Pro</a></li>
    <li><a href="#">机械键盘 87 键</a></li>
    <li><a href="#">4K 显示器 27"</a></li>
  </ol>

  <h3>订阅优惠</h3>
  <form action="/subscribe" method="POST">
    <label for="sub-email" hidden>邮箱</label>
    <input type="email" id="sub-email" name="email" placeholder="你的邮箱" required>
    <button type="submit">订阅</button>
  </form>

  <h3>公告</h3>
  <p hidden id="notice-old">已过期公告(hidden 属性演示)</p>
  <p contenteditable="true" style="border:1px dashed #ccc;padding:8px;" title="可编辑区域演示">这段文字可以点进来直接编辑(contenteditable 演示)</p>
</aside>

</div><!-- /.container -->

<!-- ========== 页脚 ========== -->
<footer>
  <nav aria-label="页脚导航">
    <a href="/about">关于我们</a> |
    <a href="/terms">用户协议</a> |
    <a href="/privacy">隐私政策</a> |
    <a href="/sitemap.xml">站点地图</a>
  </nav>
  <p><small>&copy; 2026 MiniMall. 保留所有权利。</small></p>
  <p><small>本页面为《企业级平台技术底座》第1天配套演示,<a href="#home">回到顶部 ↑</a></small></p>
</footer>

<!-- 模板:后续 JS 渲染商品卡片用 -->
<template id="product-tpl">
  <article class="card">
    <img src="" alt="" width="300" height="160" loading="lazy">
    <h3></h3>
    <p class="price"></p>
    <button type="button" data-action="add-cart">加入购物车</button>
  </article>
</template>

</body>
</html>
这个页面覆盖了今天的全部要点

✅ DOCTYPE / lang / charset / viewport / meta SEO / OG

✅ header / nav / main / section / article / aside / footer

✅ h1--h4 层级、p、br、hr、blockquote、cite、address、small、time

✅ strong / em / b / i / mark / del / ins / sub / sup / code / pre

✅ ul / ol / dl + optgroup / datalist

✅ a(target/rel/download/mailto/tel/锚点/aria-current)

✅ img(alt/width/height/loading=lazy)+ figure/figcaption

✅ table(thead/tbody/tfoot/caption/th scope/colspan)

✅ form 全套:label/fieldset/legend + 所有 input 类型 + 校验属性 + select/textarea/button

✅ audio / video(poster/track)/ embed / iframe

✅ details/summary、progress、meter、dialog、template

✅ 全局属性:id/class/data-*/title/tabindex/contenteditable/draggable/hidden/style/aria-label/role

✅ SEO 与无障碍:alt、label、scope、aria-labelledby、aria-current、heading 层级


明天做什么

Day 2:CSS 盒模型 ------ 给今天的骨架加上真正的布局。

我们会把这个页面的商品卡片、表格、表单,从"能看"变成"好看",同时讲清楚 content-box vs border-box 这个坑(90% 的布局问题都源于此)。

你可以先把上面的 index.html 打开看看,试着往里面加一个商品卡片、加一列表格参数。动手改一遍,比读十遍记得牢。

相关推荐
AI源码1 小时前
鲜花商城(HTML 版)
前端·html
hiahiahia1231 小时前
Message 和对话
服务器·前端·数据库
溪语流沙2 小时前
【Web全栈进阶】Composition API与组件通信:props深入、emit、插槽
前端·css·vue.js
ZoeLandia2 小时前
TypeScript 03:泛型与工具类型
前端·typescript
code_Bo2 小时前
从策划到上线:我和 AI 一起做了个微信记账小程序
前端·ai编程·cursor
Shirley~~2 小时前
Three.js加载Gltf模型并播放动画
前端·3d
Data analyse4562 小时前
Session超时与浏览器休眠的计时校验
大数据·前端·数据库·数据分析
星始流年2 小时前
AI 时代,软件程序员未来 10—15 年的职业前景
前端·后端·ai编程
猪猪拆迁队2 小时前
跨电脑复制共享-局域网直连踩坑
前端·后端·go