html标题需严格按h1–h6语义层级嵌套，仅一个h1；strong/em表重要性与语气强调，非b/i样式替代；mark/del/ins表达内容变更意图；pre/code分工明确，重语义轻样式。
<h1></h1> 到 <h6></h6> 必须按语义层级嵌套，不能只为视觉效果跳级使用；<strong></strong> 和 <em></em> 不是 <b></b> 与 <i></i> 的替代品，它们传递的是不同含义。
标题标签 <h1></h1>–<h6></h6> 的层级陷阱
很多初学者把 <h2></h2> 当作“比 <h1></h1> 小一号的加粗字”来用，结果页面里出现多个 <h1></h1>，或直接从 <h1></h1> 跳到 <h4></h4>。这会破坏文档大纲（document outline），影响 SEO 和屏幕阅读器导航。
- 每个 HTML 页面应有且仅有一个
<h1></h1>，代表页面核心主题 - 子标题必须严格按逻辑顺序递进：
<h1></h1>→<h2></h2>→<h3></h3>，中间不可跳跃 - 浏览器开发者工具中按
Ctrl+Shift+I打开“元素”面板后，可用“大纲视图”（Outline View）实时检查结构是否合理 - CSS 可以任意重置样式，所以视觉大小≠语义级别——
<h3></h3>完全可以比<h2></h2>更大
<strong></strong> 和 <em></em> 为什么不能用 <b></b>、<i></i> 替代
<b></b> 和 <i></i> 是纯样式标签，只说“这里要加粗/斜体”；而 <strong></strong> 表示内容重要性提升，<em></em> 表示语气强调。屏幕阅读器会为前者改变语调，为后者加重读音。
- 正确场景：
<strong>密码错误，请重试</strong>（关键操作提示）；<em>真的</em>不需要注册（语气反讽） - 错误写法：
<b>注意</b>：该功能暂不支持 IE11→ 应改用<strong></strong> - 兼容性无差别：所有现代浏览器对四者渲染一致，语义差异只在辅助技术与 SEO 解析中体现
- HTML5 明确说明：
<i></i>仅用于“不改变语气的特殊状态”，比如船名、外语词、术语缩写——不是用来做斜体装饰的
<mark></mark>、<del></del>、<ins></ins> 的真实使用边界
这些标签常被误当作 CSS 样式快捷键，但它们的核心价值在于表达内容变更意图，而非视觉效果。
-
<mark></mark>应用于“上下文相关高亮”，比如搜索结果中匹配关键词：<p>找到 3 条含 <mark>React</mark> 的记录</p> -
<del></del>+<ins></ins>成对出现才有意义，单独用<del></del>会让辅助技术用户困惑：“删了？但没说替换成啥？” - 不要用
<del></del>做价格划除特效——除非你同时提供<ins></ins>新价格，否则语义断裂 - 浏览器默认样式可覆盖：
mark { background: #ff9; }完全合法，但别因此放弃语义
<pre class="brush:php;toolbar:false;"></pre> 和 <code> 的分工容易混淆
<pre class="brush:php;toolbar:false;"></pre> 是块级容器，保留所有空白符和换行；<code> 是行内语义标签，专指“一段计算机代码”。二者常嵌套使用，但不可互换。
- 展示多行代码块：用
<pre class="brush:php;toolbar:false;"><code>...</code></pre>，而不是只用<pre class="brush:php;toolbar:false;"></pre> - 行内代码片段（如函数名）：直接
<code>fetch()，不要包<pre class="brush:php;toolbar:false;"></pre> -
<pre class="brush:php;toolbar:false;"></pre>本身不带语法高亮能力，需配合 JS 库或 CSSwhite-space: pre-wrap控制换行行为 - 若内容含用户输入或动态数据，注意对
、<code>>做 HTML 实体转义，否则可能破坏结构
真正难的不是记住哪些标签存在，而是每次敲下 时，先问一句：“我想告诉机器和人什么？”——语义一旦错位，后续所有样式、SEO、无障碍适配都会打折扣。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
