必须重置h1–h6默认样式并遵循HTML5语义规范：统一用all: unset重置，按需定义字体、间距；每页仅一个h1，层级递进使用h2–h6；用语义类名替代标签依赖；响应式需分层媒体查询控制。
修改
浏览器对 – 有强默认样式（比如加粗、上下外边距、字体大小），直接改 font-size 或 margin 很容易被覆盖或表现不一致。必须用 all: unset 或显式重置关键属性。
- 推荐在 CSS 中统一重置：
h1, h2, h3, h4, h5, h6 { all: unset; font-weight: normal; margin: 0; line-height: 1.4; } - 再按需定义各层级语义样式，例如：
h1 { font-size: 2rem; color: #222; } h2 { font-size: 1.5rem; color: #333; border-bottom: 1px solid #eee; padding-bottom: 0.3em; } - 避免只改
font-size而忽略margin，否则标题上下空白会和设计稿严重不符
HTML5 语义化要求：不能只为样式改标签，
很多模板把所有标题都套 再靠 CSS 拉样式，这违反 HTML5 语义规则，影响 SEO 和屏幕阅读器识别。
- 每个页面只能有一个
，应放在内最上层内容处 -
用于一级章节（如“产品介绍”“客户评价”），用于子模块（如“功能亮点”“技术参数”） - 如果模板中多个
是为了“视觉突出”，请改为+ CSS 类（如）
使用 class 控制样式比依赖标签层级更安全
纯靠 h1–h6 标签名写 CSS，在后期内容结构调整时极易崩——比如把 提升为 ，样式就变了。
- 给标题加语义类名，例如：
关于我们
自主研发能力
- CSS 写成：
.section-title { font-size: 1.75rem; margin-top: 2rem; } .feature-subtitle { font-size: 1.25rem; opacity: 0.9; } - 这样 HTML 结构可变，样式不受影响；也方便复用（同一类名可在不同位置出现）
移动端适配时，
直接用 rem 或 vw 做响应式字号，常导致小屏下标题过小、大屏下过大，且无法控制行高与间距比例。
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询分段控制更可靠：
@media (max-width: 768px) { h1 { font-size: 1.8rem; margin: 0.5rem 0; } h2 { font-size: 1.4rem; margin: 0.4rem 0; } } @media (min-width: 1200px) { h1 { font-size: 2.5rem; } } - 避免对所有标题统一用
font-size: clamp(1.2rem, 4vw, 2.2rem)，因为h1和h6的视觉权重差异大，不能共用同一缩放逻辑 - 注意 iOS Safari 对
clamp()支持较晚（iOS 14.5+），老版本会回退到首值，务必测试
，结果既没 SEO 价值，又没法被键盘用户用 h 键跳转。该用 heading 标签的地方，宁可多写几行 CSS，别省那一个标签。 
