应优先使用语义化标签：表强重要性，仅用于无语义加粗；/需css微调对齐；/比更适版本追踪； 是不可断行空格，非缩进工具。
别用 <b></b> 和 <i></i> 做语义化强调——它们只是视觉样式，现代 HTML 要求语义优先。
什么时候该用 <strong></strong> 而不是 <b></b>
浏览器渲染效果几乎一样，但语义完全不同：<strong></strong> 表示内容有强重要性（屏幕阅读器会加重语气），<b></b> 仅表示“想加粗但无特殊语义”，比如产品名、关键词、人名等。
- 正确场景：
<strong>付款失败，请检查银行卡余额</strong>（操作关键警告） - 错误滥用：
<strong>iPhone 15 Pro</strong>→ 应改用<b>iPhone 15 Pro</b> - 兼容性无差异，所有主流浏览器都支持；但 SEO 和无障碍工具会区别对待
<sub></sub> 和 <sup></sup> 的排版陷阱
它们默认不带垂直对齐微调，直接嵌套在普通文本中容易错位，尤其在行高较小或字体不一致时。
- 化学式如 H2O、数学式如 x2 + y2 是标准用法
- 避免写成
<p>第1<sup>st</sup>章</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>—— “st” 会悬得太高；应改用 CSS 控制vertical-align或用<span></span>+ 类 - 不要嵌套使用：
<sup><sub>x</sub></sup>未定义行为，多数浏览器不渲染或错乱
为什么 <del></del> 和 <ins></ins> 比 <s></s> 更值得优先选
<s></s> 仅表示“不再准确/已废弃”，不带时间或上下文信息；而 <del></del> 和 <ins></ins> 支持 datetime 属性，能明确记录修改时间，对协作编辑、法律文档、版本对比更可靠。
- 推荐写法：
<del datetime="2026-09-28T14:22">¥299</del> <ins datetime="2026-09-28T14:23">¥249</ins> -
<s></s>适合纯展示场景，比如菜单中标注“已下架”商品，但无需追溯 - 所有现代浏览器均支持
datetime，格式必须是 ISO 8601（否则被忽略）
空格、换行与 的真实作用
HTML 会合并连续空白符（空格、Tab、换行）， 不是“多打几个空格”的快捷键，而是“不可断行空格”——它阻止浏览器在此处换行，同时保留一个空格宽度。
- 正确用途：防止“第 1 章”在“第”和“1”之间断行；保持单位如 “100 km/h” 不被拆开
- 错误用途：
<p>姓名： 张三</p>→ 应用 CSSmargin或padding实现缩进 - 换行请用
<br>，不是靠回车或多个<pre class="brush:php;toolbar:false;"></pre>才保留原始缩进和换行
最容易被忽略的是：所有这些标签都不自带默认 margin/padding，视觉间距完全依赖浏览器 UA 样式或你写的 CSS。比如 <strong></strong> 加粗后文字变宽，若父容器 width 固定，可能触发意外换行——这不是标签的问题，是布局没预留余量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
