--- title: html 列表与语义布局 createTime: 2025/11/02 20:47:50 permalink: /programming/web/basic-syntax/html-lists-and-semantic-layout/ --- ## 四、列表（UL/OL/LI） 无序列表（圆点）： ```html title="index.html" ``` 有序列表（数字）： ```html title="index.html"
  1. 需求与原型
  2. API 设计
  3. 联调与验收
``` **小案例：展示清单与步骤** ::: code-tabs @tab index.html ```html 列表案例

我的清单

项目步骤

  1. 需求与原型
  2. API 设计
  3. 联调与验收
``` @tab style.css ```css ul, ol { margin: .5rem 0 1rem; padding-left: 1.5rem; } li { margin: .25rem 0; } ``` @tab app.js ```js document.querySelectorAll('li').forEach(li => li.addEventListener('click', () => li.classList.toggle('done'))); ``` ::: **小作业：做一个“今日任务清单”** ::: code-tabs @tab index.html ```html 今日任务清单

今天要做的事

``` @tab style.css ```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） 语义化标签让结构更清晰，搜索引擎更友好： ```html title="index.html"

我的网站

``` > 语义化标签的要点：这些标签表达了“这是什么内容”，而不是“怎么显示”。更容易被搜索引擎和读屏工具理解。 **小案例：语义化布局入门** ::: code-tabs @tab index.html ```html 语义化布局案例

我的网站

最新文章

用语义标签改造你的页面

示例段落：用 header/nav/main/section/article/aside/footer 组织结构。

``` @tab style.css ```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 ```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 ```html 博客首页

博客名称

第一篇文章标题

摘要内容……

第二篇文章标题

摘要内容……

``` @tab style.css ```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） ```html title="index.html"
姓名 职业
祀梦 开发者
``` 小提示：表格样式通常用 CSS 来美化（边框、间距、对齐等）。 **小案例：信息表格** ::: code-tabs @tab index.html ```html 信息表格案例
姓名职业城市
祀梦开发者上海
小李产品经理杭州
小王设计师北京
``` @tab style.css ```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 ```js document.querySelectorAll('tbody tr').forEach(tr => tr.addEventListener('click', () => tr.classList.toggle('highlight'))); ``` ::: **小作业：制作“课程表”** ::: code-tabs @tab index.html ```html 课程表
时间课程教室
周一 9:00数学A101
周三 14:00英语B302
周五 10:00计算机C210
``` @tab style.css ```css table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: .5rem .75rem; } thead th { background: #f0f0f0; } ``` ::: ## 七、媒体（Audio/Video/Source） ```html title="index.html" ``` 补充说明： - `controls` 提供播放控制；一般不建议隐藏，保证可用性。 - `autoplay` 可能被浏览器限制；若需自动播放，通常需同时设置 `muted`。 - `preload` 控制预加载策略（`none`/`metadata`/`auto`），根据页面性能需求选择。 - `poster` 为视频未播放时的封面图；音频没有封面属性。 - 使用 `` 指定多种格式与 MIME 类型，提升兼容性：``。 **小案例：嵌入音视频** ::: code-tabs @tab index.html ```html 媒体案例

背景音乐

介绍视频

``` @tab style.css ```css video { display: block; margin-top: .5rem; } ``` ::: **小作业：添加一段你喜欢的音乐与视频** ::: code-tabs @tab index.html ```html 我的媒体 ``` @tab style.css ```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 ```html 全局属性案例

点击按钮试试。

``` @tab style.css ```css .btn { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; } .note { color: #555; } ``` @tab app.js ```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 ```html 计数按钮

当前计数：0

``` @tab style.css ```css .btn { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; } .note { margin-top: .5rem; } ``` @tab app.js ```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