必须重置h1–h6默认样式并遵循html5语义规范：统一用all: unset重置，按需定义字体、间距；每页仅一个h1，层级递进使用h2–h6；用语义类名替代标签依赖；响应式需分层媒体查询控制。

修改

到

的 css 样式必须重写默认浏览器样式

浏览器对

–

有强默认样式（比如加粗、上下外边距、字体大小），直接改 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+），老版本会回退到首值，务必测试

实际改模板时，最常被忽略的是语义层级与视觉层级的错位——看着像标题的元素（比如 banner 大字、卡片标题）用了