一、核心区别对比表（必背）
| 标签对 | 语义差异 | 默认样式 | 使用场景 | SEO影响 |
|---|---|---|---|---|
<title> vs <h1> | <title>：页面标题（浏览器标签显示）<h1>：内容主标题（页面内可见） | 无直接关联 | <title>用于SEO关键词<h1>用于内容结构 | 均影响，<title>权重更高 |
<b> vs <strong> | <b>：视觉加粗<strong>：语义强调（语气加强） | 均为加粗 | 重要内容用<strong>装饰性加粗用 <b> | <strong>更受搜索引擎重视 |
<i> vs <em> | <i>：视觉斜体<em>：语义强调（语调变化） | 均为斜体 | 技术术语/图标用<i>强调内容用 <em> | <em>更受搜索引擎重视 |
二、代码示例理解
1. title与h1的正确用法
<head>
<!-- 页面标题：显示在浏览器标签页，SEO关键位置 -->
<title>前端面试宝典 - 小白学习站</title>
</head>
<body>
<!-- 内容主标题：页面内可见，一个页面只应有一个 -->
<h1>欢迎来到前端面试宝典</h1>
</body>
2. strong与b的区别
<p>
这个操作<b>不可逆</b>，请<strong>务必谨慎</strong>！
</p>
<!--
<b>仅视觉突出，<strong>表示重要性
屏幕阅读器会加重语气朗读<strong>内容
-->
3. em与i的区别
<p>
<i class="iconfont"></i> <!-- 字体图标使用i标签 -->
本文提到的<em>语义化标签</em>非常重要！
</p>
<!--
<i>用于无强调意义的斜体
<em>表示需要读者注意的内容
-->
三、高频面试题精讲
1. 为什么推荐使用<strong>而不是<b>？
- 语义化：
<strong>表明内容重要性，有利于SEO和可访问性 - 样式分离：加粗效果应该用CSS实现，而非依赖标签
/* 推荐做法 */
.important { font-weight: bold; }
<span class="important">重要内容</span>
2. <h1>和<title>可以相同吗？
可以但非必须。建议：
<title>包含关键词（如“前端面试指南 | 小白学习站”）<h1>简洁描述内容（如“前端面试常见问题解析”）
3. 什么时候该用<i>标签？
HTML5规范中<i>的合法使用场景：
- 图标字体（Font Awesome等）
- 技术术语（如生物分类学名 Homo sapiens）
- 旁注（如中文文本中的英文短语）
四、语义化趋势（HTML5更新）
| 传统用法 | 现代替代方案 |
|---|---|
<b> 加粗 | <strong> 或 CSS |
<i> 斜体 | <em> 或 CSS |
<font> 字体样式 | CSS样式系统 |
<u> 下划线 | CSS text-decoration |
五、记忆口诀
"语义优先样式后，SEO优化要考虑
title标题浏览器显，h1主标内容见
strong表重要，b仅粗体现
em要强调读，i做图标见"
面试时如果被问到，可以这样回答：
我认为这些标签的核心区别在于语义而非样式。像title em和strong这种语义标签，就十分方便seo优化和屏幕阅读友好。详细来说title标签主要是写在head标签内用于浏览器标签显示。h1是属于排版标签它的标题最大。而b标签和strong标签都是加粗标签，i和em都是倾斜标签。他们的核心区别不在于样式而在于语义化。这样的话就更容易进行seo和屏幕阅读友好。
