应优先使用语义化标签而非纯样式标签：表重要性，表重读，表高亮参考，和有特定语义，视觉效果交由css处理。

别用 <b></b> 和 <i></i> 做语义强调——它们只管“看起来粗/斜”，不告诉浏览器或屏幕阅读器“这段话很重要”或“这里要重读”。

什么时候该用 <strong></strong> 而不是 <b></b>

当你想表达内容具有实质重要性时，比如安全警告、关键参数、法律条款中的义务项。浏览器可能只是加粗显示，但辅助技术（如读屏软件）会加重语气朗读，搜索引擎也更倾向赋予更高权重。

• <strong>密码必须包含大小写字母和数字</strong> —— 合理：这是强制要求
• <b>密码必须包含大小写字母和数字</b> —— 不推荐：仅视觉变化，无语义支撑
• 嵌套使用 <strong></strong> 是允许的，但超过两层就容易让辅助工具困惑，慎用
• 如果只是想在 UI 上统一加粗某类词（如品牌名），用 CSS 的 font-weight 更可控，且不污染语义

<em></em> 和 <i></i> 的核心区别在“语气”还是“类型”

<em></em> 表示语音上的重读，影响的是句子节奏和含义；<i></i> 表示文本属于某种固有类型，比如术语、船名、外文短语，跟语气无关。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 你<strong>真的</strong>确定要删除？ —— “真的”是强调，用 <em></em>
• 《<i>百年孤独</i>》是拉美文学代表作 —— 书名是固有类型，用 <i></i>
• 误用 <i></i> 替代 <em></em> 会导致读屏软件平调朗读，丢失原意
• 中文里没有“重读”传统，所以 <em></em> 在中文字幕或提示文案中效果有限，优先考虑上下文是否真需语气强化

<mark></mark> 是唯一专为“高亮”设计的语义标签

它表示“这段文本在当前上下文中具有突出参考价值”，不是装饰，也不是警告。浏览器默认给黄色背景，但样式可覆盖；关键是它明确告诉机器：“此处值得被注意”。

• 搜索结果中匹配关键词：<mark>HTML格式化</mark> —— 合理：用户正在找这个
• <mark>危险！高压区域</mark> —— 错误：这是严重警告，该用 <strong></strong> 或配合 ARIA
• <mark></mark> 不支持嵌套，也不该用来替代 CSS 的 background-color 做随意高亮
• 旧项目里用 <span class="highlight"></span> 的，现在可直接换 <mark></mark>，语义更干净

<u></u> 和 <s></s> 已被重新定义，别当“下划线/删除线开关”用

HTML5 明确规定：<u></u> 表示“非文本标注”，如拼写错误、中文专名号（类似古籍中的直线旁批）；<s></s> 表示“内容已失效”，比如过期价格、废止条款——不是“视觉上划掉”那么简单。

• 他写了个<u>错别字</u> —— 合理：标注异常
• <s>¥299</s> ¥199 —— 合理：原价已无效
• <u>点击下载</u> —— 危险：用户会误以为是链接，且违反可访问性原则
• 想单纯加下划线？写 CSS：text-decoration: underline；想删掉又留痕？用 <del></del>（带时间戳的修订场景）

真正难的不是记住每个标签怎么写，而是每次敲下 时，先问一句：我是在描述“它是什么”，还是仅仅想让它“看起来怎样”。前者决定用哪个标签，后者应该交给 CSS。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！