html文本标签须严格遵循语义规范：表独立段落，表强重要性，表语气强调，专用于真实代码片段，禁用/替代语义标签，多行代码必须用嵌套。
HTML文本标签不是“怎么写都行”的自由发挥区，而是有明确语义边界和协作约束的结构契约。用错 <p></p>、<strong></strong> 或 <code>，轻则让CSS重置成本翻倍，重则破坏屏幕阅读器流、拖累SEO权重。
什么时候必须用 <p></p> 而不能用 <div>
<p>段落是语义单位，不是视觉单位。<code><p></p> 表示一个完整、独立的叙述单元；<div> 是无语义容器，仅用于布局或 JS 挂载点。
<ul>
<li>用户输入一段说明文字？用 <code><p></p> —— 浏览器会自动加 margin-top/margin-bottom，辅助技术能识别为段落
<br>，别拆成多个 <p></p> —— 否则语义断裂，屏幕阅读器会读成“段落、段落、段落”<p></p> 加 class，不要套一层 <div> —— 多余嵌套增加 DOM 深度，影响可访问性树遍历
<h3>
<code><strong></strong> 和 <em></em> 的语义分界在哪
它们不是“粗体 vs 斜体”的样式开关，而是表达不同层级的强调意图。
-
<strong></strong>表示内容重要性提升，比如安全警告：<p>请确认<strong>已备份全部数据</strong>再执行此操作。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> -
<em></em>表示语气/语调变化，比如反讽或对比：<p>他“很擅长”处理突发状况。</p>中的“很擅长”适合用<em></em> - 绝对不用
<b></b>或<i></i>替代——它们只保留纯样式含义，W3C 明确标注为“legacy”，且对无障碍支持极差
<code> 标签的三个硬性使用条件
<code> 不是“看起来像代码就行”，它专指计算机可执行或可解析的字面量文本。
- 必须是真实存在的语言片段：函数名
fetch()、CSS 属性display: flex、命令npm install—— 不能是虚构的“your-api-key-here” - 不能包裹解释性文字：❌
<p>运行 <code>git commit提交更改 ✅ 应拆为：<p>运行</p> <code>git commit提交更改
（或用<pre class="brush:php;toolbar:false;"><code></code> 块级代码）</pre> - 嵌套时需严格匹配：HTML 内容要用
<实体转义，否则浏览器会尝试解析标签 ——<code><div class="container">
为什么 <pre class="brush:php;toolbar:false;"></pre> + <code> 是唯一合规的多行代码写法
<pre class="brush:php;toolbar:false;"></pre> 保留空格与换行，<code> 定义语义类型，二者组合才是 W3C 推荐的代码块标准结构。
- 单独用
<pre class="brush:php;toolbar:false;"></pre>：语义缺失，屏幕阅读器无法识别这是代码，可能误读为诗歌或格式化文本 - 单独用
<code>：换行和缩进被 HTML 自动合并，代码可读性归零 - 正确写法：
function debounce(fn, delay) { let timer; return function(...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; }
最常被忽略的是：所有文本标签的嵌套深度一旦超过两层（比如 <p><strong><span></span></strong></p>），就该怀疑是否在用样式逻辑覆盖语义逻辑——这时候问题往往不在标签选错，而在结构设计本身需要重构。
