<i>元素在HTML5中语义化表示非强调性斜体文本，如外来语、术语、船名等；<em>则专用于语气强调，二者不可混用。
<p> 定义段落，<strong> 表示重要内容，<em> 表示强调语气——这不是样式选择题，而是语义表达的基本功。用错标签，浏览器可能照常渲染，但屏幕阅读器、SEO 抓取和未来维护都会出问题。
什么时候该用 <strong> 而不是 <b>
<strong> 是语义标签，表示内容具有强重要性；<b> 仅表示“视觉加粗”，无语义权重。搜索引擎和辅助技术会忽略 <b> 的语义信号。
- 用户输入密码错误时提示“
<strong>密码不正确</strong>”——强调严重性 - 商品页标价“¥
<strong>199</strong>”比“¥<b>199</b>”更利于语义化读屏 - 纯装饰性加粗（比如标题里某个词仅为了视觉节奏）才考虑
<b>，但更推荐用 CSS 控制
<em> 和 <i> 的实际分界在哪
<em> 表示语义上的重音强调，屏幕阅读器通常会改变语调；<i> 仅表示“不同寻常的文本”，比如外语词、术语、船名、生物分类名等。
- 他说“
<em>真的</em>没看见”——这里“真的”是语气强调，用 <code><em> - 文章提到
<i>Homo sapiens</i>——斜体是约定俗成的生物学命名规范，不是强调 - 避免把
<i>当作“让文字变斜体”的快捷方式，CSS 的font-style: italic更准确
<small> 不是缩小字号的样式工具
<small> 在 HTML5 中被明确定义为“附属细则”，比如版权信息、法律声明、免责声明。它不等于 font-size: 0.8em，也不该用来做侧边栏小字或按钮副文案。
立即学习“前端免费学习笔记（深入）”；
- 页脚写“© 2026 公司名称
<small>保留所有权利</small>”——符合语义 - 导航菜单中“首页 |
<small>关于我们</small>”——错误：这不是细则，只是普通链接 - 需要小字号又无语义时，直接用
<span>+ class + CSS，别滥用<small>
<mark> 的高亮逻辑容易被忽略
<mark> 表示“在引用上下文中相关或突出的文本”，典型场景是搜索结果高亮、文档中标记重点句。它不是通用背景色工具。
- 用户搜索“HTML 标签”，结果页中显示“
<p>常用<mark>HTML</mark>文本<mark>标签</mark>包括...</p>”——合理 - 在教程中给代码示例加黄色背景：“
<mark><div></div></mark>”——语义错位，应改用<code>+ CSS -
<mark>默认样式是黄色背景，但可被 CSS 覆盖；关键是它的语义不能被视觉样式掩盖
真正难的不是记住每个标签怎么写，而是每次敲下 < 时，先问一句：这段文字对用户、机器、未来接手的人，到底意味着什么。
