应优先使用语义化标签：表重要性，表语气强调；和仅视觉加粗/斜体，无语义，影响可访问性与seo。
<p></p> 是段落容器，<strong></strong> 和 <em></em> 是语义化强调标签，不是样式开关——用错会破坏可访问性和 SEO。
为什么不能用 <b></b> 和 <i></i> 替代 <strong></strong> 与 <em></em>
浏览器渲染效果看似一样，但语义完全不同：<b></b> 仅表示“视觉加粗”，<strong></strong> 表示“内容重要性高”；<i></i> 是“非正常语调”（如外文、术语），<em></em> 是“重读强调”。屏幕阅读器会为 <strong></strong> 和 <em></em> 改变语调或语速，而忽略 <b></b>/<i></i> 的语义。
常见错误现象：
- 用
<b></b>包裹标题关键词，导致语音导航用户无法感知其权重 - 用
<i></i>标注中文斜体提示语（如“注意：…”），实际应使用<em></em>或纯 CSS 控制样式
<hr> 和 <br> 都是单标签，但用途和语义截然不同
<hr> 是主题分隔符，代表内容逻辑断层（如章节切换）；<br> 是行内换行，仅用于诗歌、地址、歌词等必须保留换行位置的场景。
容易踩的坑：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
<br>实现段落间距——这违反语义，且响应式下难以控制；正确做法是用<p></p>或 CSSmargin - 在
<div> 内堆砌多个 <code><hr>当装饰线——它不是 UI 元素，应改用border或伪元素 -
<hr>不支持width或height属性（HTML5 已废弃这些属性），需用 CSS 控制外观 -
<small></small>应用于免责声明、版权信息、法律条款等“次要但需保留”的内容，不是通用缩放手段 -
<mark></mark>表示文档中“与当前上下文相关”的高亮（如搜索结果匹配词），而非设计稿里的任意荧光笔效果 -
<del></del>必须配合<ins></ins>使用才有意义（如修订痕迹），单独出现易被误读为排版错误
<small></small>、<mark></mark>、<del></del> 这类短语级标签的适用边界
它们不是“小号字体”“黄色背景”“删除线样式”的快捷键，而是表达特定语义的短语容器：
性能影响很小，但滥用会增加 DOM 节点冗余，也干扰自动摘要、翻译插件等工具对文本结构的解析。
真正难的是判断某段文字该用哪个标签——不是看它“长得像什么”，而是问“它在文档中承担什么角色”。比如一句“限时 5 折”，用 <strong></strong> 强调促销力度，用 <time></time> 标记截止时间，用 <small></small> 包裹“活动最终解释权归本店所有”，每处都不可互换。
