新手踩的坑其实就那么几类，而且几乎每个人都踩过。这篇把最常见的四个坑摆出来，每个坑都给出“错误写法”和“正确写法”对比，告诉你为什么错、怎么改。提前看一遍，能少走不少弯路。

需要说明的是：这些“坑”不是语法错误，代码都能跑，但会让页面难维护、难扩展、难排查问题。属于典型的“能跑但不好”的代码。

坑一：满屏 div 不用语义化标签

这是新手最常踩的坑。哪里需要一块就套一个 div，再用 class 区分，页面能跑但结构是哑巴——浏览器不知道哪块是导航、哪块是正文，搜索引擎也读不出重点。

错误写法：全 div 套娃，结构没有任何语义信息。

<!-- 错误：全是 div，结构没语义 -->
<div class="header">
  <div class="nav">
    <div class="nav-item">首页</div>
    <div class="nav-item">教程</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">文章标题</div>
    <div class="content">正文……</div>
  </div>
</div>
<div class="footer">版权信息</div>

正确写法：用语义化标签表达结构含义，class 只用来补充样式。

<!-- 正确：语义化标签各司其职 -->
<header>
  <nav>
    <a href="index.html">首页</a>
    <a href="tutorials.html">教程</a>
  </nav>
</header>
<main>
  <article>
    <h1>文章标题</h1>
    <p>正文……</p>
  </article>
</main>
<footer>版权信息</footer>

改完之后，header 就是页头、nav 就是导航、main 就是正文、article 就是一篇文章。搜索引擎、屏幕阅读器、未来的你都能一眼看懂结构。

坑二：滥用 !important 强行覆盖

新手发现样式不生效，第一反应往往是加 !important 强行覆盖。短期看是解决了，长期看是噩梦——一旦 !important 满天飞，后面改样式根本覆盖不动，最后只能再加一个 !important，恶性循环。

错误写法：样式不生效就加 !important，越加越多。

/* 错误：到处用 !important 强行覆盖 */
.btn {
  color: #fff !important;
  background: #A8D5BA !important;
  padding: 12px 24px !important;
}

/* 后面想改改不动，只能再加 !important */
.hero .btn {
  background: #8ec6a3 !important;
}

正确写法：用更具体的选择器提高优先级，而不是靠 !important 强压。

/* 正确：靠选择器 specificity 提优先级 */
.btn {
  color: #fff;
  background: #A8D5BA;
  padding: 12px 24px;
}

/* 更具体的选择器，优先级自然更高 */
.hero .btn {
  background: #8ec6a3;
}

/* 或者用 BEM 命名避免冲突 */
.btn--hero {
  background: #8ec6a3;
}

选择器优先级是 CSS 的基本规则：行内样式 > ID > 类 > 标签。把这套规则用熟，绝大多数覆盖需求都不需要 !important。真正该用 !important 的场景很少，比如覆盖第三方库样式、强制覆盖不可控的行内样式。

坑三：图片不设宽高导致布局抖动

新手写图片常常只写 src，不写 width 和 height。后果是：图片加载前浏览器不知道它有多大，会先占很小一块，加载完突然撑开，导致下方内容被顶下去——这就是布局抖动（CLS），体验很差。

错误写法：只写 src，没写尺寸。

<!-- 错误：没写宽高，加载时布局会抖 -->
<img src="images/hero.jpg" alt="首图">

<!-- 错误：只在外层 div 设宽，img 没设 -->
<div class="banner">
  <img src="images/banner.jpg" alt="横幅">
</div>

正确写法：给 img 标签加上 width 和 height，浏览器会预留空间，加载完不会撑动布局。

<!-- 正确：写明宽高，浏览器提前预留空间 -->
<img src="images/hero.jpg" alt="首图" width="1200" height="400">

<!-- 配合 CSS 控制实际显示尺寸（响应式） -->
<style>
  .banner img {
    width: 100%;
    height: auto;
  }
</style>
<div class="banner">
  <img src="images/banner.jpg" alt="横幅" width="1200" height="440">
</div>

关键点：HTML 里的 width/height 是给浏览器算比例用的，CSS 里的 width: 100% 才是控制实际显示宽度。两者配合，既响应式又不抖动。

坑四：抄框架不学基础

新手一开始就用 Bootstrap、Tailwind 这类框架，拖一个组件就能用，觉得“真香”。但框架是工具不是替代品，没基础直接抄框架，遇到样式不生效就懵了——不知道框架在背后做了什么，调不动也改不动。

错误心态：跳过 HTML/CSS 基础，直接用框架拖组件。

--- 错误的学习路径 ---
1. 听说 Bootstrap 好用，直接装
2. 复制组件代码，改改文字就上线
3. 想调样式发现看不懂框架的 class
4. 加 !important 强行覆盖（回到坑二）
5. 遇到框架没覆盖的需求就卡死

--- 结果 ---
页面能跑，但完全不知道为什么能跑
换个框架就不会写了
调样式全靠试，没有思路

正确路径：先把原生 HTML/CSS 学透，再上框架。

--- 正确的学习路径 ---
1. 用纯 HTML+CSS 写出完整页面（不靠任何框架）
2. 理解盒模型、选择器、布局、响应式
3. 能徒手写出卡片、导航、表单等常见组件
4. 这时候再学框架，会发现框架只是帮你少写重复代码
5. 框架出问题时，能看懂它的源码思路，能定位能改

--- 结果 ---
框架是加速器而不是拐杖
换框架也能快速上手
遇到问题知道往哪查

框架本质是别人写好的 CSS/JS 封装。你懂基础，框架就是帮手；不懂基础，框架就是黑盒，一旦出问题就抓瞎。学框架没问题，但顺序别反——先基础后框架，地基牢了楼才稳。

四个坑的共同病根

这四个坑看似独立，其实根子是一个：图省事、跳过基础。满屏 div 是因为没学语义化，滥用 !important 是因为不懂选择器优先级，图片不设宽高是因为不懂布局原理，抄框架是因为没打牢基础。

所以避坑的根本方法是慢下来，把每个动作背后的原理搞懂。写代码不是抄对了就完事，得知道为什么这么写、不这么写会怎样。原理通了，坑自然就避开了。

回到新手入门首页，可以再回顾一遍整个学习路线，看看哪一步还有漏洞。