和语义不同：表内容重要性（如警告），表语气强调（如反语）；互换会误导屏幕阅读器与搜索引擎，降低可访问性与seo效果。
HTML格式化标签本身不直接提升SEO或性能，但错误使用会破坏语义结构、干扰爬虫理解、损害可访问性——真正起作用的是语义正确性，而不是“加了几个<strong></strong>”。
为什么<strong></strong>和<em></em>不能随便互换
两者都让文字加粗或倾斜，但语义完全不同：<strong></strong>表示内容重要性提升（如警告、关键结论），<em></em>表示语气强调（如反语、对比）。屏幕阅读器对它们的朗读语调不同，搜索引擎也会据此判断信息权重分布。
- 误用
<strong></strong>包裹整段产品描述，反而稀释真正需要突出的卖点 - 在标题中滥用
<em></em>（比如<h2>我们提供<em>最专业</em>的HTML优化</h2>），可能被识别为关键词堆砌信号 - 纯样式需求（如仅想加粗）应交由CSS控制，避免用
<strong></strong>“冒充”样式标签
<pre class="brush:php;toolbar:false;"></pre>和<code>在技术文档里的实际分工
写前端教程或API说明时，这两者常被混用，但浏览器和辅助工具对它们的处理逻辑很明确：<code>用于行内代码片段（如函数名querySelectorAll），<pre class="brush:php;toolbar:false;"></pre>用于保留换行与空格的多行代码块。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把大段JS示例塞进
<code>里会导致换行丢失、缩进错乱，影响可读性 - 单独用
<pre class="brush:php;toolbar:false;"></pre>不嵌套<code>（如<pre class="brush:php;toolbar:false;">console.log('hello')</pre>），会让屏幕阅读器无法识别这是“代码”，而当作普通段落朗读 - 最佳实践是
<pre class="brush:php;toolbar:false;"><code>...</code></pre>嵌套，再配合language-javascript类供语法高亮脚本识别
哪些“看起来像格式化”的标签其实不该用
HTML5已废弃或弱化部分纯表现型标签，继续使用会带来兼容隐患和语义污染。
-
<u></u>：下划线在现代UI中默认关联超链接，单独使用易误导用户；如需标注拼写错误，应改用<span spellcheck="true"></span>配合CSS -
<font></font>：完全过时，所有字体控制必须走CSS；残留该标签可能触发IE兼容模式，影响Flex/Grid布局渲染 -
<center></center>：不仅无效，还会强制重排页面流，干扰flex或grid容器的居中逻辑
最容易被忽略的一点：格式化标签的嵌套深度。比如在<li>里连套<strong><em><code>三层，虽不报错，但会让AT（辅助技术）陷入语义迷宫——重点到底在“强调”、“重要”还是“代码”？保持单层语义优先，比堆叠标签更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
