前言
在前端开发中，很多标签渲染出来的视觉效果是一样的。比如 <b> 和 <strong> 都是加粗，<i> 和 <em> 都是倾斜。既然样子一样，为什么还要分两个？这就涉及到了 HTML 语义化 和 SEO（搜索引擎优化） 。
一、 Title vs H1：谁才是真正的标题？
虽然它们都叫“标题”，但分工完全不同。
| 维度 | title | h1 |
|---|---|---|
| 显示位置 | 浏览器标签栏（Tab）、收藏夹、搜索结果标题 | 网页的正文内容区 |
| 核心作用 | 概括整个网页的主题，对搜索引擎（SEO）极度重要 | 概括当前文章/版块的主题 |
| 数量建议 | 每个页面必须有且仅有一个 | 建议每个页面仅设一个（利于搜索引擎抓取权重） |
SEO 权重： title > h1。搜索引擎抓取网页时，首先看 title 确定你这个页面是干嘛的，再看 h1 确认内容。
二、 <b> vs <strong>：加粗不仅是加粗
-
<b>(Bold) ：- 实体标签。属于 UI 范畴，纯粹是告诉浏览器：“把这几个字加粗”。
- 语义：无。
-
<strong>(Strong Importance) ：- 逻辑标签。告诉浏览器和搜索引擎：“这部分内容非常重要”。
- 无障碍：盲人使用的屏幕阅读器在读到
<strong>时，会加重语气，而读到<b>则不会。
最佳实践： 为了符合 Web 标准和 SEO 优化，除非你只是想纯视觉美化，否则一律推荐使用 <strong>。
三、 <i> vs <em>：倾斜背后的语义
-
<i>(Italic) ：- 实体标签。仅将文字倾斜。
- 现代用法：现在
<i>更多地被赋予了新的使命——作为字体图标Icon的容器
-
<em>(Emphasis) ：- 逻辑标签。表示局部的强调，通常在读这段话时，这里的重音会不同。
对比总结：
<i>：纯视觉倾斜，常用于技术术语、外语词汇或图标。<em>：带有强调语义的倾斜。
四、 核心总结：语义化的重要性
为什么我们要费劲分清这些？
- SEO 友好：搜索引擎蜘蛛（Spider）是看不见样式的，它只能通过标签语义来判断内容的权重。使用
<strong>和em能帮助你的网页在搜索结果中排名更高。 - 无障碍（Accessibility） ：让残障人士在使用屏幕阅读器时，能听出你文章的轻重缓急。
- 代码可维护性：语义清晰的代码，就像写得好的文章，一眼就能看出逻辑结构。
五、 面试模拟题
Q1：HTML 语义化标签有哪些好处？
参考回答：
- 对人友好：代码结构清晰，易于阅读和维护。
- 对机器友好：利于 SEO，让搜索引擎爬虫更好地理解内容；利于屏幕阅读器解析，提升无障碍体验。
- 兼容性：即便 CSS 没加载出来，页面也能保持基本的逻辑结构。
Q2：如果在页面中多次使用 <h1> 会怎么样？
参考回答：
虽然 HTML5 规范不再严格限制h1的数量，但从 SEO 角度来看，一个页面只有一个h1能够集中网页权重。如果出现多个，会分散搜索引擎对核心主题的判断，建议其他的标题使用h2 ~ h6。
Q3：如何用 CSS 实现 <strong> 的效果？
参考回答：
使用 font-weight: bold;。但要注意，CSS 只能实现视觉上的“加粗”，无法提供 HTML 标签所携带的语义权重。
