h1 是页面唯一一级标题，定义核心主题，用于构建文档结构和SEO；strong 是行内语义强调标签，表达内容重要性，不影响结构。二者不可混用。
h1 是页面层级结构的主标题，不是“强调文本”的工具
很多人误以为 h1 是用来加粗或突出某段文字的“强调标签”，其实它根本不是干这个的。h1 的作用是定义整个页面的**最高级内容主题**，比如网站首页的站点名、文章页的正文标题。它参与的是 HTML 文档大纲（outline）构建，影响 SEO 权重分配和屏幕阅读器导航顺序。
常见错误现象：h1 被滥用在段落内强调关键词，比如 <h1>注意！</h1> 或嵌套在 p 里；一个页面出现多个 h1；h1 内容与页面实际主题无关（如“欢迎访问”这种空泛文案）。
-
h1应该全页唯一，且紧贴页面核心内容主题 - 它不负责语义上的“语气加重”，只负责结构上的“一级标题”定位
- 搜索引擎和辅助技术会把它当作页面主旨信号，乱用会导致权重稀释或可访问性混乱
strong 是专为语义强调设计的行内容器
strong 的存在意义就是表达「这段文字比周围更重要」，属于**行内强调**，不影响文档结构。它的默认渲染是加粗，但本质是语义标签——你可以用 CSS 改成红色、下划线、甚至动画闪烁，它依然保持“强强调”的含义。
使用场景包括：警告提示中的关键动词（如“删除”）、价格数字、法律条款中的责任主体、操作按钮旁的不可逆说明等。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 可以嵌套在
p、li、span等任何行内上下文中 - 支持嵌套（比如
<strong>请务必</strong>确认<strong>三次</strong>），但不宜过度堆叠 - 与
b的关键区别：屏幕阅读器会重读strong内容，b不会；搜索引擎也更重视strong
为什么不能用 h1 替代 strong 实现“视觉强调”
单纯为了加粗效果而用 h1，等于把结构语义错配到样式需求上。这不只是“不规范”，而是直接破坏可访问性和 SEO：
- 屏幕阅读器遇到
h1会跳转并宣布“一级标题”，打断用户流，尤其当它出现在段落中间时 - 浏览器大纲生成器会把每个
h1当作新章节起点，导致目录树断裂或重复 - CSS 修改
h1样式（比如缩小字号、取消加粗）后，它仍保有结构权重，容易误导开发者和审查工具 - W3C 验证器会报错：多个
h1或非标题位置使用h1属于结构违规
真正需要强调时，优先选 strong 而不是 b 或 font
如果你只是想让某个词“看起来重点”，又不确定是否真需要语义强调，那得先判断：这个词对理解句子关键逻辑是否必要？如果是，就用 strong；如果只是装饰性加粗（比如品牌 slogan 中的字母变体），才考虑 b；而 <font> 已被废弃，现代项目中不应出现。
-
strong是语义正确、可访问、SEO 友好的选择 -
b仅适用于无强调意图的纯样式加粗（如产品型号、缩写标注） -
<font>不仅过时，且无法响应式适配，CSS 控制字体应通过font-weight或自定义类实现
复杂点在于：强调强度有层次。单靠 strong 不够时，别嵌套多个 strong，而是结合上下文用 em（中等强调）、或通过 CSS class 添加视觉差异（如背景高亮）。语义标签不是格式开关，它承载的是信息密度判断——这点最容易被忽略。
