标题和段落
特点
-
h1 ～ h6一共6级
-
文字自动加粗 + 独占一行
-
h1最好每个页面使用一次，一般用于文章标题或logo
Logo使用h1标签的例子： 京东首页
除了新闻类场景标题可做分级，其他场景也可使用，例如：小米商城首页的商品类目标题，商品名标题以及商品内容。
-
每个页面尽量不要超过3级 → 最优写法：h1主标题 → h2大板块 → h3子内容，足够清晰，不冗余。
语义化的好处
什么是语义化？
语义化 = 让HTML标签有「含义」，用正确的标签做正确的事。
比如：标题就用h1-h6，正文段落就用p，而不是所有内容都用<div></div>或<span></span>堆砌。
核心原则：标签的意义 > 标签的样式
1. 更清晰的代码结构，极大提升团队协作效率，降低沟通成本
实际开发中，一个项目都是多人协作的（比如你写结构，同事写样式，另一个同事写交互）。
如果所有人都遵循语义化规范，新人接手项目时，不用问任何人，看HTML标签就能看懂页面结构：
- 看到h1就知道是页面主标题；
- 看到h2就知道是板块标题；
- 看到p就知道是正文段落；
如果是非语义化的div堆砌，新人需要逐行看class名、看注释、甚至问原开发者，才能理解结构，沟通成本极高。
核心价值：大型项目的必备规范，没有语义化，多人协作就是灾难。
非语义化写法（反例，纯div堆砌标题/段落）
<div style="font-size:28px;font-weight:bold;">我的第一篇前端笔记</div>
<div style="font-size:20px;font-weight:bold;">一、HTML语义化</div>
<div>语义化是前端的基础规范，核心是让标签有含义。</div>
<div style="font-size:18px;font-weight:bold;">1.1 标题的语义化规则</div>
<div>h1标签一个页面只能用一次，尽量不超过3级标题。</div>
<div>标题是页面的核心层级，会独占一行且加粗显示。</div>
问题：你能快速区分「主标题、二级标题、正文」吗？只能靠样式判断，结构完全混乱。
语义化写法（正例，用h1-h3+p标签）
<h1>我的第一篇前端笔记</h1>
<h2>一、HTML语义化</h2>
<p>语义化是前端的基础规范，核心是让标签有含义。</p>
<h3>1.1 标题的语义化规则</h3>
<p>h1标签一个页面只能用一次，尽量不超过3级标题。</p>
<p>标题是页面的核心层级，会独占一行且加粗显示。</p>
2. 对搜索引擎做SEO时更友好
搜索引擎（百度、谷歌）的爬虫在爬取页面时，「看不懂CSS/JS的样式」，只认识HTML标签的「语义」。
爬虫会给有语义的标签分配「权重优先级」，用对标签，能让你的页面在搜索结果中排名更靠前，这就是SEO优化的核心基础。
-
为什么
h1最好每个页面只使用一次？
→ 搜索引擎给h1的权重远高于h2-h6和所有普通标签，h1代表「整个页面的核心主题」，如果一个页面写多个h1，爬虫会分不清页面的核心内容，导致核心权重分散，SEO效果大打折扣。 -
为什么标题尽量不要超过3级（h1→h2→h3）？
→ 爬虫识别层级的效率有限，3级标题足以清晰表达「主标题→分板块→子内容」的逻辑，层级过多（h1→h2→h3→h4→h5）会让爬虫判定页面结构混乱，降低收录优先级。 -
核心对比：
<h1>前端笔记</h1>VS<div class="title">前端笔记</div>
→ 前者：爬虫直接判定「这是页面核心标题，重点收录」；
→ 后者：爬虫只判定「这是一个普通div，无核心价值」；
哪怕两者样式完全一样，SEO权重天差地别！ -
段落的语义化：
<p>正文内容</p>比<div>正文内容</div>更易被爬虫判定为「核心文本内容」，收录更全面。
3. 更好的可访问性
可访问性 = 让所有人都能正常访问你的页面，包括：视障人士、听障人士、使用老旧设备/极简浏览器的用户。
这是语义化最有温度的一个好处
视障人士的「屏幕阅读器」适配：
国内超2000万视障用户，浏览网页时会使用「屏幕阅读器」（如NVDA、VoiceOver、读屏王），这个工具的工作逻辑是：读取HTML标签的语义，而不是读取样式。
语义化写法的效果：
当屏幕阅读器读到 <h1>我的前端笔记</h1> 时，会清晰朗读：一级标题，我的前端笔记；
读到 <h2>HTML语义化</h2> 时，朗读：二级标题，HTML语义化；
读到 <p>标题一共6级</p> 时，朗读：段落，标题一共6级。
→ 视障用户能通过朗读内容，清晰感知页面的结构和层级，正常阅读。
非语义化写法的效果：
如果用div堆砌，屏幕阅读器只会机械朗读：区块，我的前端笔记 → 区块，HTML语义化 → 区块，标题一共6级。
→ 视障用户完全分不清哪里是标题、哪里是正文，页面等同于「无法访问」。
4. 天然自带符合语义的默认样式，减少冗余CSS代码
h1~h6自带默认样式：字体加粗 + display:block（独占一行） + 字号从h1到h6依次递减，不用写font-weight:bold; display:block;；p段落标签自带默认样式：上下有默认外边距 + 独占一行，不用写margin: 1em 0;来区分段落间距；- 对比：如果用div写标题，需要手动加
font-weight:bold;display:block;，用div写段落需要手动加间距，代码会多出很多冗余的样式。
核心价值：少写无用CSS，开发效率更高，代码更简洁。
额外附赠：常见的语义化标签（除了h1-h6/p，前端高频用）
<header>：页面头部（导航、logo）<nav>：导航栏<section>：页面的一个内容板块<article>：独立的文章内容<footer>：页面底部（版权、联系方式）
这些标签和h1-h6/p一样，都是语义化的核心。
参考 黑马pink讲前端