先学、、、四标签语义：表独立段落，非换行工具；/含语义强调，非视觉样式替代；专用于旁注等次要内容，非通用缩放。
直接说结论：别从 <b></b> 和 <i></i> 开始学，先搞懂 <strong></strong>、<em></em>、<p></p>、<small></small> 这四个标签的语义和边界，流程自然就清晰了。
什么时候该用 <p></p> 而不是连续写文本或靠 <br> 换行
页面上一段独立、完整、有逻辑边界的文字（比如新闻导语、产品描述、用户协议条款），就该用 <p></p> 包裹。它不只是“看起来空一行”，而是告诉浏览器：“这是个段落”，后续样式、可访问性（如屏幕阅读器停顿）、SEO 都依赖这个结构。
- 错误做法：
<p>第一句。<br>第二句。<br>第三句。</p>—— 这其实是一个段落里硬塞了三行，语义混乱 - 正确做法：三句各自成段，或合并为一句语义完整的陈述，再用一个
<p></p> -
<br>只适用于诗歌分行、地址换行、表单内提示等「同一语义单元内强制折行」的场景，不是排版偷懒工具
<strong></strong> 和 <em></em> 为什么不能简单替换成 <b></b> 和 <i></i>
根本区别不在“是不是加粗/斜体”，而在“是否承载语义”。<strong></strong> 表示内容有强重要性（如警告、关键条件），<em></em> 表示语音重读（如“我没说错”里的“没”）。而 <b></b> 和 <i></i> 只是纯视觉指令，类似 CSS 的 font-weight: bold。
- 搜索引擎和辅助技术会解析
<strong></strong>的权重，但忽略<b></b> - 嵌套使用
<strong><em>紧急操作</em></strong>是合法且有意义的；<b><i>...</i></b>嵌套则无语义叠加效果 - 如果只是想让品牌名变粗、菜单项高亮，又不带强调意图，用 CSS 更干净，别滥用语义标签
<small></small> 不是“调小字号”的万能开关
<small></small> 在 HTML5 中被明确定义为“旁注、版权信息、法律免责声明等次要内容”，不是通用缩放工具。它的默认样式是缩小字号，但本质是降级语义层级，不是视觉修饰。
- 常见误用：
<p>价格：<small>¥199</small></p>—— 价格不是旁注，不该用<small></small>，应改用<span class="price"></span>+ CSS - 正确用法：
<p>© 2026 Lobster AI. <small>保留所有权利。</small></p> - 若真需控制字号，优先走 CSS：
font-size: 0.875rem，避免污染语义结构
<u></u> 和 <s></s> 的现代使用红线
这两个标签在 HTML5 中已被重新定义，用途非常窄，乱用反而引发可访问性和 UX 问题。
-
<u></u>不再是“加下划线”，而是表示“非文本标注”，比如拼写错误标记（<u class="spelling">recieve</u>）或中文专名号（需配合 CSS 实现）；普通链接或强调请勿用它 -
<s></s>专指“内容已失效但需保留可见”，例如过期价格：<s>$299</s> $199；若只是删除草稿，用<del></del>更准确 - 浏览器默认样式可能冲突（如
<u></u>和链接下划线无法区分），实际项目中几乎都需重置 CSS
真正卡住多数人的，不是记不住标签名，而是分不清“这里要不要传达额外含义”。语义一旦错位，后期维护、无障碍支持、甚至 SEO 都会逐步反噬。动手前多问一句：这个加粗，是给机器看的，还是只给人眼看的？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
