HTML排版应遵循语义化原则：段落用，容器用；标题严格按–层级使用；列表必须用/+；表格仅用于二维数据，需含等结构。

用

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

和

区分段落与区块

HTML 排版不是靠空格或换行，而是靠语义化标签表达内容结构。

专用于文字段落，浏览器默认上下有外边距；

是无语义容器，适合 grouping 或布局包裹。混用会导致样式不可控——比如把标题塞进

里，既违反语义，又可能被 CSS 的 p + h2 选择器意外影响。

常见错误现象：
– 粘连文字（没用

或
，只靠回车）
– 段间距忽大忽小（多个

套嵌或用了

模拟段落）
– 屏幕阅读器读不出段落边界（全用

）

实操建议：
– 正文段落一律用

– 需要整体浮动、居中或加背景的区域，用

包一层
– 别用

包

、

等块级元素（HTML5 不允许）

标题必须用

–

，且保持层级连续

搜索引擎和辅助工具依赖标题层级理解页面结构。

应全页唯一，代表主主题；

是其直接子级，以此类推。跳着用（比如

后直接

）会让大纲断裂，CSS 的 h2 + h3 规则也可能失效。

使用场景举例：
– 文章页：

标题 → 多个

小节 → 每小节内用

细分
– 产品列表页：

“全部商品” → 每个商品卡片用

商品名（注意：同一页面可有多个

，但不能没有

就上

）

容易踩的坑：
– 为“看起来大一点”滥用

（一页多个

会稀释 SEO 权重）
– 用 冒充标题（丢失语义、无法被大纲提取）
– 在

里嵌

（合法但通常没必要，优先用 或 CSS 控制）

列表排版：用

/

，别用

+


无序列表用

+

，有序列表用

+

。浏览器默认渲染带缩进和标记，CSS 也针对这些标签预设了 margin、padding 和 list-style 行为。手写

● 第一项

看似省事，实则破坏可访问性（屏幕阅读器读不出这是列表），也增加维护成本（换序号类型得改 HTML 而非仅 CSS）。

参数差异注意点：
–

支持 start 属性（如 start="5"），

不支持
– list-style-type 可设为 none、square、lower-roman 等，但仅对

/

生效
–

可单独设 value（仅

），覆盖自动编号

性能影响很小，但兼容性要注意：
– 旧版 IE 对 list-style-position: inside 渲染错位
– 移动端 Safari 在

内嵌

时，缩进可能异常（应把内容包在

内，而非

外）

表格排版：只用于真正二维数据，别当“布局神器”

用

排版文字块（比如三栏简介）是上世纪做法。它导致 HTML 膨胀、响应式困难、语义混乱（屏幕阅读器会逐行逐单元格播报，用户迷失上下文）。现代替代方案是 display: grid 或 display: flex。

什么时候该用

？
– 成绩单、财务报表、API 参数对照表等行列明确、需表头关联的数据
– 必须兼容不支持 CSS Grid 的环境（极少见，且可用 @supports 降级）

必须包含的标签：
–

包 包数据行（即使只有一行）
– 每个 是表格的标题，不是

，它会被读屏软件识别为表格描述
– 可统一设置列宽/背景，比给每个 会自动重复，但需确保 thead 在 tbody 前

（列标题）
–

加 scope 属性（如 scope="col"）提升可访问性

容易被忽略的细节：
–

加样式更高效
– 表格跨页打印时，