si-meng-spec/SiMengWebSite_Notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2f55fc7184b2c9f9a1be6b2d4f3e35eb49a38613
SiMengWebSite_Notes/docs/notes/programming/web/basic-syntax/html-lists-and-semantic-layout.md
Kawaxxxsaki 474f335e94 docs(web): 添加HTML列表与语义布局文档 
添加关于HTML列表(ul/ol/li)和语义化标签(header/nav/main等)的详细文档，包含基础语法说明、代码示例和练习作业，帮助初学者掌握HTML结构化编写
2025-11-02 20:50:33 +08:00

12 KiB
Raw Blame History

title, createTime, permalink
title createTime permalink
test 2025/11/02 20:47:50 /programming/web/basic-syntax/html-lists-and-semantic-layout/

四、列表（UL/OL/LI）

无序列表（圆点）：

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

有序列表（数字）：

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

小案例：展示清单与步骤 ::: code-tabs @tab 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>

@tab style.css

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

@tab app.js

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

:::

小作业：做一个“今日任务清单” ::: code-tabs @tab 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>

@tab 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）

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

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

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

小案例：语义化布局入门 ::: code-tabs @tab 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>

@tab 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; }

@tab 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');
}));

:::

小作业：用语义标签搭一个博客首页 ::: code-tabs @tab 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>

@tab 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）

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

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

小案例：信息表格 ::: code-tabs @tab 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>

@tab 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; }

@tab app.js

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

:::

小作业：制作“课程表” ::: code-tabs @tab 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>

@tab style.css

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

:::

七、媒体（Audio/Video/Source）

<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">。

小案例：嵌入音视频 ::: code-tabs @tab 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>

@tab style.css

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

:::

小作业：添加一段你喜欢的音乐与视频 ::: code-tabs @tab 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>

@tab 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 ::: code-tabs @tab 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>

@tab style.css

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

@tab 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} 次`;
});

:::

小作业：做一个带计数的按钮 ::: code-tabs @tab 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>

@tab style.css

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

@tab 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）。

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

延伸阅读：