html5标题规范强调语义与视觉严格对齐：h1最突出、h6最轻量，不可跳级或倒置；需重置默认样式，用rem按比例定义字号（如h1=2.5rem、h2=2rem等），相邻级差≥0.25rem；禁用视觉驱动的标签误用；标题语义由标签承担，样式交由类名控制；响应式需同步调整字号与间距，优先用clamp()或媒体查询而非vw。

HTML5 中规范各级标题的字体大小与视觉层次，核心不是单纯调大调小字号，而是让 语义层级 和 视觉表现 严格对齐——

必须最突出，

必须最轻量，且中间不能跳级、不能倒置。

按语义层级设定基础字号比例

浏览器默认的

～

字号呈递减趋势（约每级缩小20%），但不可依赖默认值。应统一重置后按逻辑比例定义：

• 先用 all: unset 或显式清空 margin/padding/font-weight，避免浏览器干扰
• 以 rem 为单位建立比例关系，例如：
  h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
• 字号差需肉眼可辨，相邻两级建议至少相差 0.25rem 或 4px，确保层次清晰

禁止视觉驱动的标题降级

不能因为“想让某段文字看起来小一点”就直接用

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

，也不能为强调而滥用

。常见错误包括：

• 页面出现多个

  （应仅一个，代表整页唯一主题）

• 从

  直接跳到

  （缺失

  ，破坏结构树）

用

替代普通强调文本（此时应使用 或 ）

仅靠 CSS 把

改得比

还大（语义与视觉冲突，损害可访问性）

用类名解耦样式与语义

标题标签负责表达层级，具体样式由类控制，便于复用和维护：

• 给

  加 class="section-title"，再统一定义其字体、间距、边框等

• 子模块标题用

  ，不依赖标签本身视觉权重

• 同一类名可在不同位置复用，比如多个卡片都用

  ，样式一致但语义仍属三级

• 避免写 h2 { color: #222; } 这类强绑定规则，改用 .section-title { ... }

响应式中分层控制字号与留白

小屏下大标题易撑满屏幕，需单独适配，不能只缩放 font-size：

• 在移动端媒体查询中，降低

  ～

  的字号增幅，例如 @media (max-width: 768px) { h1 { font-size: 2rem; } }

• 同步调整 margin/padding，保持视觉节奏，如 h2 { margin: 1.2rem 0 0.6rem; } 在小屏改为 0.8rem 0 0.4rem
• 慎用 vw 单位做标题字号（如 font-size: 4vw），易导致超小屏下不可读，优先用 clamp() 或分段媒体查询

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！