2026-09-02 日报

今日主题

freeCodeCamp · Learn HTML · Ch2 Semantic HTML

BriefIntroduction

第二模块：Semantic HTML。少用「纯表现」标签堆样式，多用有含义的结构——对 SEO、可访问性、维护都更友好。

---

一、模块路线

类型	内容
Lecture	为何要语义化 / 细粒度语义元素 / 文本与时间 / 专用语义元素
Workshop	Major Browsers List / Quincy’s Job Tips / Blog Page
Lab	Event Hub
收尾	Review + Quiz

---

二、核心概念（笔记）

1. 为什么要语义化

• 机器（搜索引擎、读屏）能理解「这是标题 / 导航 / 主内容」
• 结构层级清晰：一个页面通常一个 h1，下级标题按序递进
• Presentational HTML（如滥用 <b>/<i> 只为长相）→ 优先 Semantic（<strong>/<em>、landmarks）

2. 页面地标（landmarks）

常用区块：

• header / nav / main / article / section / aside / footer
• main 一般每页一个；article 可独立成篇的内容

3. 文本语义

元素	大致含义
em	重音/语气强调
strong	重要性
i	惯用语、术语、异体文本（idiomatic）
b	引起注意，但不一定「更重要」
blockquote / q	块级 / 行内引用
abbr	缩写（常配 title）
address	联系地址信息
time	日期时间（datetime 机器可读）
dl / dt / dd	描述列表

选用口诀：先问「含义是什么」，再问「看起来像什么」。

4. 专用语义

• 代码：code、pre、kbd、samp、var
• 上下标：sub / sup（公式、化学式常见）
• u（专名标注等）、s（不再准确）、ruby（注音）

---

三、练习清单

• Major Browsers List
• Quincy’s Job Tips
• Blog Page
• Event Hub
• Semantic HTML Quiz

---

四、今日随记

（边学边补）