表示完整语义段落，浏览器默认带上下边距；至构成唯一且递进的标题层级，全页仅一个主标题，禁止跳级，避免语义错位与可访问性问题。

用 <p></p>、<h1></h1> 到 <h6></h6> 组织基础文本结构

页面内容展示的第一步是把文字按语义分层，而不是靠 <div> 堆砌或反复用 <code><br> 换行。<p></p> 表示一个完整段落，浏览器默认带上下边距；<h1></h1> 到 <h6></h6> 是标题层级，<h1></h1> 应全页唯一，用于主标题，后续按逻辑嵌套，不能跳级（比如 <h2></h2> 后直接写 <h4></h4>）。

常见错误现象：
– 标题仅用来“变大加粗”，忽略语义
– 用多个 <p></p> 包裹单行短句，导致段间距过大
– 在 <h1></h1> 里塞太多关键词影响可读性

实操建议：
– 先画出内容大纲，明确哪部分是主标题、章节、小节
– 用开发者工具的“元素”面板检查标题层级是否连续
– 避免在标题标签内嵌套 <div> 或 <code><p></p>

用 <ul></ul>、<ol></ol>、<dl></dl> 区分不同类型的列表内容

不是所有并列项都该用 <ul></ul>。无序列表 <ul></ul> 适合特征罗列、导航菜单；有序列表 <ol></ol> 必须体现顺序依赖，比如安装步骤、操作流程；定义列表 <dl></dl> 专用于术语解释（<dt></dt> 是术语，<dd></dd> 是解释），FAQ 页面天然适配。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

容易踩的坑：
– 把带编号的样式纯靠 CSS 实现，却用 <ul></ul>，丧失语义和屏幕阅读器支持
– 在 <dl></dl> 中漏写 <dt></dt>，或把多个 <dd></dd> 直接连在同一个 <dt></dt> 后却不加包裹

性能提示：
– <ol></ol> 的计数由浏览器原生处理，无需 JS 模拟，更轻量
– <dl></dl> 不支持 CSS 的 counter-reset，别试图用它做编号列表

用 <img> 和 <figure></figure>/<figcaption></figcaption> 正确混排图文

<img> 必须带 alt 属性，空字符串 alt="" 表示装饰图，非空则需准确描述图像内容（不是“图片1”“截图”）。若图文有强关联且构成独立信息单元（比如图表+说明、照片+来源标注），应包裹在 <figure></figure> 内，并用 <figcaption></figcaption> 做标题式说明。

使用场景差异：
– 纯装饰图：用 CSS background-image 更合适，不进 DOM 流
– 响应式图：配合 srcset 和 sizes，而非只靠 width/height 属性
– 延迟加载：加上 loading="lazy"，但首屏关键图要慎用

兼容性注意：
– <figure></figure> 在 IE 中无特殊样式，需自行重置 margin/padding
– alt 文本过长会影响屏幕阅读器体验，超过 125 字建议改用 <details></details> 或外链说明

避免用 <table> 做布局，但别误弃它的语义价值 <p><code><table> 没被废除，只是不再用于页面整体布局。它仍是展示二维结构化数据（如价格对比、课程表、参数规格）的唯一语义正确方式。滥用 <code><table> 布局会导致可访问性断裂、响应式困难、CSS 维护成本飙升。 <p>判断依据很直接：<br>– 能否把内容复制粘贴到 Excel 里仍保持行列关系？能 → 用 <code><table> <br>– 是否只为实现多栏排列或居中对齐？否 → 改用 Flexbox 或 Grid <p>关键细节：<br>– 必须包含 <code><thead> 和 <code><tbody>，辅助技术依赖此结构理解数据范围<br>– 行头列头用 <code><th>，并设 <code>scope 属性（scope="row" 或 scope="col"）
– 复杂表建议加 summary 属性（虽已过时但部分读屏器仍识别）或用 <caption></caption>