# test | 仲夏夜之梦
四、列表（UL/OL/LI） 无序列表（圆点）： 有序列表（数字）： 小案例：展示清单与步骤 小作业：做一个“今日任务清单” 五、语义化布局（Header/Nav/Main/Section/Article/Aside/Footer） 语义化标签让结构更清晰，搜索引擎更友好： 语义化标签的要点：这些标签表达了“这是什么内容”，而不是“怎么显示”。更容易被...

Skip to content

# test

约 2076 字大约 7 分钟

2025-11-02

## 四、列表（UL/OL/LI）

无序列表（圆点）：

index.html

    <ul>
      <li>学习笔记</li>
      <li>工具推荐</li>
      <li>友情链接</li>
    </ul>

有序列表（数字）：

index.html

    <ol>
      <li>需求与原型</li>
      <li>API 设计</li>
      <li>联调与验收</li>
    </ol>

小案例：展示清单与步骤

index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <title>列表案例</title>
        <link rel="stylesheet" href="style.css">
        <script defer src="app.js"></script>
      </head>
      <body>
        <h2>我的清单</h2>
        <ul>
          <li>学习笔记</li>
          <li>工具推荐</li>
          <li>友情链接</li>
        </ul>
        <h2>项目步骤</h2>
        <ol>
          <li>需求与原型</li>
          <li>API 设计</li>
          <li>联调与验收</li>
        </ol>
      </body>
    </html>

style.css

    ul, ol { margin: .5rem 0 1rem; padding-left: 1.5rem; }
    li { margin: .25rem 0; }

app.js

    document.querySelectorAll('li').forEach(li => li.addEventListener('click', () => li.classList.toggle('done')));

小作业：做一个“今日任务清单”

index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <title>今日任务清单</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <h1>今天要做的事</h1>
        <ul>
          <li>阅读 30 分钟</li>
          <li>练习 1 个算法题</li>
          <li>整理房间</li>
        </ul>
      </body>
    </html>

style.css

    body { font-family: system-ui; margin: 2rem; }
    li { cursor: pointer; }
    .done { text-decoration: line-through; color: #888; }

## 五、语义化布局（Header/Nav/Main/Section/Article/Aside/Footer）

语义化标签让结构更清晰，搜索引擎更友好：

index.html

    <header>
      <h1>我的网站</h1>
      <nav>
        <a href="/blog/">博客</a>
        <a href="/notes/">笔记</a>
      </nav>
      <!-- 注意：更复杂的导航通常配合 CSS/JS 做响应式菜单 -->
      <!-- 小提示：块级容器的外层仍可使用 <div> 来做网格或栅格布局 -->
      <!-- 例如 <div class="container"> 包裹全站 -->
      <!-- 只是这些语义标签会让搜索引擎更理解结构 -->
      <!-- 语义标签与 <div> 并不冲突，可以配合使用 -->
      <!-- 选择语义标签能让你的 HTML 更“有含义”而非只是分区 -->
      <!-- 如果仅用于布局、无明确语义，用 <div> 即可 -->
      <!-- 这段说明旨在帮助你建立语义化与布局之间的直觉 -->
      <!-- 逐步养成好的结构化写法 -->
      <!-- 让内容更可维护，更易被机器理解 -->
      <!-- （继续往下看，还会介绍 Article/Section 等） -->

> 语义化标签的要点：这些标签表达了“这是什么内容”，而不是“怎么显示”。更容易被搜索引擎和读屏工具理解。

小案例：语义化布局入门

index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <title>语义化布局案例</title>
        <link rel="stylesheet" href="style.css">
        <script defer src="app.js"></script>
      </head>
      <body>
        <header>
          <h1>我的网站</h1>
          <nav>
            <a href="#home">首页</a>
            <a href="#blog">博客</a>
          </nav>
        </header>
        <main>
          <section>
            <h2>最新文章</h2>
            <article>
              <h3>用语义标签改造你的页面</h3>
              <p>示例段落：用 header/nav/main/section/article/aside/footer 组织结构。</p>
            </article>
          </section>
          <aside>
            <h2>侧栏</h2>
            <p>这里可以放导航、标签云或广告位。</p>
          </aside>
        </main>
        <footer>© 2025 祀梦</footer>
      </body>
    </html>

style.css

    body { font-family: system-ui; margin: 0; }
    header, footer { padding: 1rem 2rem; background: #f7f7f7; }
    nav { display: flex; gap: 1rem; }
    main { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; padding: 1rem 2rem; }
    article { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
    aside { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }

app.js

    document.querySelectorAll('nav a').forEach(a => a.addEventListener('click', () => {
      document.querySelectorAll('nav a').forEach(x => x.classList.remove('active'));
      a.classList.add('active');
    }));

小作业：用语义标签搭一个博客首页

index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <title>博客首页</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <header>
          <h1>博客名称</h1>
          <nav>
            <a href="#">首页</a>
            <a href="#">归档</a>
            <a href="#">关于</a>
          </nav>
        </header>
        <main>
          <section>
            <article>
              <h2>第一篇文章标题</h2>
              <p>摘要内容……</p>
            </article>
            <article>
              <h2>第二篇文章标题</h2>
              <p>摘要内容……</p>
            </article>
          </section>
          <aside>
            <h2>侧栏</h2>
            <p>分类、标签或个人简介。</p>
          </aside>
        </main>
        <footer>© 2025 你的名字</footer>
      </body>
    </html>

style.css

    /* 与案例类似的栅格布局样式 */
    main { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; padding: 1rem 2rem; }
    article { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
    aside { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }

## 六、表格（Table/TR/TH/TD）

index.html

    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>职业</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>祀梦</td>
          <td>开发者</td>
        </tr>
      </tbody>
    </table>

小提示：表格样式通常用 CSS 来美化（边框、间距、对齐等）。

小案例：信息表格

index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <title>信息表格案例</title>
        <link rel="stylesheet" href="style.css">
        <script defer src="app.js"></script>
      </head>
      <body>
        <table>
          <thead>
            <tr><th>姓名</th><th>职业</th><th>城市</th></tr>
          </thead>
          <tbody>
            <tr><td>祀梦</td><td>开发者</td><td>上海</td></tr>
            <tr><td>小李</td><td>产品经理</td><td>杭州</td></tr>
            <tr><td>小王</td><td>设计师</td><td>北京</td></tr>
          </tbody>
        </table>
      </body>
    </html>

style.css

    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .5rem .75rem; text-align: left; }
    thead th { background: #f7f7f7; }
    tbody tr:nth-child(odd) { background: #fafafa; }

app.js

    document.querySelectorAll('tbody tr').forEach(tr => tr.addEventListener('click', () => tr.classList.toggle('highlight')));

小作业：制作“课程表”

index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <title>课程表</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <table>
          <thead>
            <tr><th>时间</th><th>课程</th><th>教室</th></tr>
          </thead>
          <tbody>
            <tr><td>周一 9:00</td><td>数学</td><td>A101</td></tr>
            <tr><td>周三 14:00</td><td>英语</td><td>B302</td></tr>
            <tr><td>周五 10:00</td><td>计算机</td><td>C210</td></tr>
          </tbody>
        </table>
      </body>
    </html>

style.css

    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .5rem .75rem; }
    thead th { background: #f0f0f0; }

## 七、媒体（Audio/Video/Source）

index.html

    <audio src="bgm.mp3" controls loop></audio>

    <video src="intro.mp4" controls width="480" poster="cover.jpg" muted></video>
    <!-- 常用属性：controls / autoplay / loop / muted / poster（封面） -->

补充说明：

- `controls` 提供播放控制；一般不建议隐藏，保证可用性。
- `autoplay` 可能被浏览器限制；若需自动播放，通常需同时设置 `muted`。
- `preload` 控制预加载策略（`none`/`metadata`/`auto`），根据页面性能需求选择。
- `poster` 为视频未播放时的封面图；音频没有封面属性。
- 使用 `<source>` 指定多种格式与 MIME 类型，提升兼容性：`<source src="xxx.mp4" type="video/mp4">`。

小案例：嵌入音视频

index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <title>媒体案例</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <h2>背景音乐</h2>
        <audio src="bgm.mp3" controls loop></audio>
        <h2>介绍视频</h2>
        <video src="intro.mp4" controls width="480" poster="cover.jpg" muted></video>
      </body>
    </html>

style.css

    video { display: block; margin-top: .5rem; }

小作业：添加一段你喜欢的音乐与视频

index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <title>我的媒体</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <audio src="music.mp3" controls></audio>
        <video src="movie.mp4" controls width="480" poster="cover.jpg"></video>
      </body>
    </html>

style.css

    audio, video { display: block; margin: .5rem 0; }

## 八、全局常用属性（任何标签几乎都能用）

- `id`：唯一标识，用于 JS/CSS 精确选择。
- `class`：分组与样式选择（上一课已讲）。
- `style`：内联样式（不推荐大量使用，建议写到 CSS 文件）。
- `title`：悬停提示文字。
- `data-*`：自定义数据属性（如 `data-user-id="42"`）。
- `aria-*`：无障碍相关属性，帮助读屏工具理解（如 `aria-label`）。

小案例：使用 id/class/data/title/aria

index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <title>全局属性案例</title>
        <link rel="stylesheet" href="style.css">
        <script defer src="app.js"></script>
      </head>
      <body>
        <button id="likeBtn" class="btn" title="点赞一下" data-count="0" aria-label="点赞">👍 喜欢</button>
        <p id="msg" class="note" aria-live="polite">点击按钮试试。</p>
      </body>
    </html>

style.css

    .btn { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
    .note { color: #555; }

app.js

    const btn = document.getElementById('likeBtn');
    const msg = document.getElementById('msg');
    btn.addEventListener('click', () => {
      const count = Number(btn.dataset.count || 0) + 1;
      btn.dataset.count = String(count);
      msg.textContent = `已点赞 ${count} 次`;
    });

小作业：做一个带计数的按钮

index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <title>计数按钮</title>
        <link rel="stylesheet" href="style.css">
        <script defer src="app.js"></script>
      </head>
      <body>
        <button id="counter" class="btn" title="点击增加" data-count="0">点击我</button>
        <p id="status" class="note">当前计数：0</p>
      </body>
    </html>

style.css

    .btn { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
    .note { margin-top: .5rem; }

app.js

    const counter = document.getElementById('counter');
    const statusEl = document.getElementById('status');
    counter.addEventListener('click', () => {
      const count = Number(counter.dataset.count || 0) + 1;
      counter.dataset.count = String(count);
      statusEl.textContent = `当前计数：${count}`;
    });

## 结尾：先结构清晰，再上样式与交互

写网页像搭房子：先把房间（结构标签）安排好，再选家具颜色（CSS），最后加智能设备（JS）。

建议你先用这些常用标签做一个“个人名片页”，含标题、段落、头像图片、导航链接和一个简单表单。练熟后再加样式与交互。

延伸阅读：

- HTML 规范与参考（MDN）：https://developer.mozilla.org/en-US/docs/Web/HTML
- 无障碍与语义化：https://developer.mozilla.org/en-US/docs/Glossary/Semantics