打开编辑器新建一个index.html，敲下<!doctype html>的那一瞬间，很多人其实是懵的：这行东西到底干嘛用的？lang="zh-cn"不写会怎样？CSS 又是从哪一步开始接管的？我带过几届刚接触 web前端 的朋友，发现大家卡住的位置高度一致——不是不会写标签，而是不清楚 HTML 和 CSS 这套组合在浏览器里到底是怎么协作的。抄一段 html简单网页代码 能跑起来，但需求一换就完全不会改，这几乎是所有新手的必经阶段。
这篇东西就是想把"web前端基础（一）"这块地基挖透。HTML 负责结构和语义，CSS 负责表现和布局，两者搭起来就是网页的骨架和皮肤。它解决的是"内容怎么组织、界面怎么呈现"这两个最底层的问题。不管你是准备做 web前端开发期末大作业 的学生，还是想自己搭个主页、写封 html邮件 的业余爱好者，又或者是刚转行想系统梳理 html➕css➕js基础语法 的准从业者，把这一层吃透，后面学 JS、学框架都会顺很多。我会尽量把原理、实操、踩坑三样揉在一起讲，能直接抄作业的地方就给你可复制的代码。
1. HTML与CSS的整体认知与学习路线设计
1.1 为什么建议先啃HTML和CSS再碰JS
很多人一上来就想学 JS，觉得那才是"编程"，HTML 和 CSS 只是"排版"。这个判断在方向上是错的。前端页面本质上是三层结构：HTML 描述"这里有什么"，CSS 描述"它长什么样、摆在哪"，JS 描述"用户操作它时发生什么"。如果你连一个按钮在 DOM 里长什么样、它是怎么被 CSS 定位到屏幕某个角落的都搞不清，那 JS 里操作元素、绑定事件、改样式，全是空中楼阁。
我自己的经验是，HTML 和 CSS 的学习曲线前期平缓、后期陡峭。平缓是因为标签和属性就那么几十个，写出来就能看到效果，正反馈很快；陡峭是因为布局和层叠规则一旦复杂起来，同样的效果有五六种写法，选错一种后期维护就是灾难。所以第一阶段的目标不是"记住多少标签"，而是建立两个直觉：一是文档结构要语义化，二是样式要可预测、可复用。这两个直觉立住了，后面写任何页面都不容易乱。
至于学习顺序，我一般建议按"骨架 → 皮肤 → 布局 → 细节 → 调试"这条线走。先能搭出一个结构正确的页面，再让它变好看，然后把它摆到该在的位置，最后抠字体、间距、动效这些细节，同时贯穿始终地练调试。这条线走完，你基本就能独立完成一个静态站点了。
1.2 HTML和CSS各自负责什么，边界在哪
这个边界必须说清楚，因为新手最容易犯的错就是把该 HTML 干的事交给 CSS，或者反过来。举几个典型例子：一段文字是不是标题，这是 HTML 的事，用<h2>还是<p>由内容的语义决定；至于这个标题是 24px 还是 32px、是黑色还是灰色，那是 CSS 的事。再比如一个列表，用<ul>还是用一堆<div>拼，这是 HTML 的事；而这些列表项是横着排还是竖着排，那是 CSS 的事。
为什么强调这个？因为把结构交给 CSS 去"假造"（比如用一堆 div 加样式模拟标题），会带来两个后果：一是屏幕阅读器、搜索引擎读不懂你的页面，无障碍和 SEO 直接受损；二是样式一旦改动，整个结构就跟着崩。反过来，用 HTML 的align、bgcolor这种远古属性去控制外观，也同样糟糕，因为这些属性早就被废弃了，而且无法复用。记住一句话：HTML 管"是什么"，CSS 管"长什么样"，JS 管"做什么"，三者各司其职，谁也别越界。
1.3 新手最容易踩的三个认知误区
第一个误区是"能显示就行"。很多作业代码打开一看，确实能显示，但打开控制台一看，标签嵌套乱七八糟，<div>里套<p>又套<div>，闭合标签也丢三落四。这种代码一旦要改布局，你就得重写。第二个误区是"样式越花越好"，堆一堆阴影、渐变、动画，结果页面加载慢、层次乱、可读性差。视觉是为内容服务的，过度装饰反而扣分。
第三个误区也是最隐蔽的：不理解层叠和继承，靠不停加!important去"强行覆盖"。这就像两个人吵架，谁嗓门大听谁的——短期管用，长期一定失控。正确的做法是理解选择器权重，用合理的权重去解决问题。我在后面第 3 章会专门拆这块。先把这三个误区记在心里，比多背二十个标签有用得多。
2. HTML文档骨架与核心标签实操
2.1 标准文档结构里每一行的真实作用
一个标准骨架长这样，我逐行拆它的意义：
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>页面标题</title> </head> <body> <h1>主标题</h1> <p>正文内容。</p> </body> </html><!doctype html>这行不是标签，而是给浏览器的"模式声明"。它告诉浏览器：请用标准模式渲染这个页面，而不是老旧的怪异模式。差别有多大？在怪异模式下，盒模型的宽度计算、行高、甚至一些选择器行为都跟标准模式不同，你会遇到一堆莫名其妙的错位。所以这行必须写，而且必须在最前面，前面连一个空格都不能有，否则浏览器可能直接忽略它退回到怪异模式。
<html lang="zh-cn">的lang属性不是摆设。它影响屏幕阅读器的发音语种、浏览器翻译功能的识别、以及搜索引擎对页面语言归属的判断。写中文页面就老老实实写zh-cn。<meta charset="utf-8">必须放在<head>的最前面，它决定了浏览器用哪种编码解析你的文件，放晚了可能导致页面出现乱码。至于viewport那行，是移动端适配的前提，没有它，手机上打开页面会按桌面宽度缩放，字小得看不清。
2.2 head里那些元信息到底配给谁看
<head>里的内容用户看不见，但它决定了很多看不见的体验。<title>出现在浏览器标签页和搜索结果标题里，是 SEO 里权重最高的元素之一，别写成"新建网页 1"。<meta name="description">是搜索结果里的摘要，虽然现在搜索引擎不一定完全采用，但写好它对点击率有帮助。
还有个常见需求是把网页导出成 html邮件。邮件客户端对 CSS 的支持极差，很多现代写法根本不认，所以做邮件模板时，样式要尽量内联（写进元素的style属性），布局尽量用表格，别用 flex 和 grid。这是踩过坑才知道的事：你在浏览器里调试得好好的邮件，发到别人邮箱里可能完全塌掉。另外，如果你在 Ubuntu 这类系统上用编辑器写 HTML，选一个好用的编辑器能省不少事，VS Code 加几个插件就够用了。
2.3 body里的语义化标签怎么选
很多人写页面通篇都是<div>，这叫"div 汤"。不是不能用 div，而是能用语义标签时优先用语义标签。顶部导航用<header>加<nav>，主体内容用<main>，一篇文章用<article>，侧边栏用<aside>，页脚用<footer>。这么做的好处不是给浏览器看的，浏览器对它们和 div 一视同仁；好处是给你自己和协作者看的，代码可读性完全不一样。
标题标签<h1>到<h6>要按层级使用，不要为了字号好看跳级。一个页面一般只有一个<h1>，代表页面主旨。列表分<ul>（无序）、<ol>（有序）、<dl>（定义列表），别小看<dl>，做名词解释、参数说明特别合适。段落用<p>，注意<p>里不能嵌套块级元素，这是新手常见错误。换行用<br>，但别用一堆<br>去撑间距，那是 CSS 该干的事。
2.4 表单和表格：最容易被做丑的两个模块
表单里的<input>类型非常丰富，text、password、email、number、date、checkbox、radio、file等等，用对类型能让手机弹出合适的键盘，也能获得浏览器的免费校验。<label>一定要和表单控件关联，用for属性指向控件的id，这样点文字也能聚焦输入框，对触屏用户很友好。
表格<table>现在基本只用于展示真正的表格数据，不用于布局（用表格布局是二十年前的做法，早淘汰了）。表格常见的诉求是水平居中，margin: 0 auto配合固定宽度就能搞定，注意table本身要设宽度或display: table才有居中效果。表头用<thead>，表体用<tbody>，结构清晰的同时也方便后续用 CSS 隔行变色。合并单元格用colspan和rowspan，算错数量表格就会错位，这是调试时最耗时的地方之一。
3. CSS引入方式与选择器体系拆解
3.1 三种引入方式的取舍与优先级
CSS 有行内、内部、外部三种引入方式。行内样式写在元素的style属性里，权重最高但复用性最差，只适合动态计算出来的样式或邮件模板。内部样式写在<style>标签里，适合单页面或临时调试。外部样式用<link rel="stylesheet" href="style.css">引入，是工程化的标准做法，能缓存、能复用、能拆分多个文件。
优先级上，行内样式 > 内部/外部样式（后两者谁在后面谁生效）。这里有个很多人不知道的细节：@import也能引入外部样式，但它会导致串行加载，性能差，而且必须写在样式表最前面，工程里基本不用，老老实实用<link>。另外你得会在浏览器里查看页面代码构成，按 F12 打开开发者工具，Elements 面板里能直接看到浏览器最终计算出的样式，哪个规则生效、哪个被划掉，一目了然，这是学 CSS 最重要的技能，没有之一。
3.2 选择器全家桶与权重计算
选择器从简单到复杂有这么几类：标签选择器p、类选择器.box、ID 选择器#app、属性选择器[type="text"]、伪类:hover、伪元素::before、组合选择器（后代空格、子代>、相邻兄弟+、通用兄弟~）。日常写页面，类选择器用得最多，因为它权重适中、复用性好，是组织和复用样式的主力。
权重计算有个经典的四位数记法：行内样式算 (1,0,0,0)，ID 算 (0,1,0,0)，类和伪类、属性选择器算 (0,0,1,0)，标签和伪元素算 (0,0,0,1)。比较时从左往右比，谁在某一位上大谁赢，同权重比后写的生效。举个例子，.nav li的权重是 (0,0,1,1)，#header li是 (0,1,0,1)，后者胜。理解这套规则，你就不用到处加!important了。!important是核武器，一旦用了，后面只能靠更高优先级的!important去覆盖，会形成恶性循环。
3.3 通配符*选择器的优缺点
* { margin: 0; padding: 0; }这段代码几乎是所有新手的"起手式"，它确实能快速清掉浏览器默认样式，让各个浏览器表现一致。但它的问题也很明显：第一，性能上它会遍历页面上所有元素，虽然现代浏览器优化得不错，但页面元素成千上万时仍有开销；第二，它把所有元素的间距都归零了，包括你本来不想动的表单、列表、标题，后面还得一个个补回来。
更稳妥的做法是"精准重置"，只清掉你确实需要的那些，比如body、h1~h6、p、ul、ol的 margin，或者直接用 normalize.css 这类成熟方案。所以我个人的建议是：入门阶段可以用通配符重置理解原理，但进入项目后换成精准重置或规范化方案。这不是教条，而是你后期维护时真金白银省下来的时间。
4. 盒模型与布局核心机制
4.1 盒模型：所有布局问题的根源
每个元素在屏幕上都是一个矩形盒子，由内容（content）、内边距（padding）、边框（border）、外边距（margin）四层构成，这就是盒模型。默认情况下，你设置的width只作用于内容区，加上 padding 和 border 后整个盒子会变宽。这就导致一个经典困惑：设了width: 100px; padding: 10px; border: 1px，实际占位是 122px，布局一下就崩了。
解决办法是box-sizing: border-box，它让width包含 padding 和 border，你设多少就是多少，符合直觉。我一般会在全局重置里加上* { box-sizing: border-box; }，这已经成为业界默认约定。另外两个高频坑：一是垂直方向相邻的 margin 会重叠（取较大值，不是相加），称为外边距塌陷；二是父元素和第一个子元素的 margin 会合并，导致父元素被"顶下去"。解决塌陷可以给父元素加overflow: hidden或 padding，理解了这个机制，很多诡异的间距问题就迎刃而解。
4.2 居中：一个需求，六种解法
居中问题是面试和实操的双重高频考点，我直接给你一张对照表：
| 场景 | 推荐方案 | 关键代码 |
|---|---|---|
| 单行文本水平垂直居中 | line-height 等于高度 | height:40px; line-height:40px; text-align:center; |
| 块级元素水平居中 | margin auto | width:600px; margin:0 auto; |
| 不定宽高元素居中 | flex | display:flex; justify-content:center; align-items:center; |
| 绝对定位居中 | absolute + transform | position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); |
| 表格单元格居中 | table-cell | display:table-cell; vertical-align:middle; |
| 网格居中 | grid | display:grid; place-items:center; |
怎么选？能确定宽高、结构简单就用前两种；现代项目一律优先 flex，兼容性好、语义清晰；需要脱离文档流的浮层用 absolute + transform；grid 适合二维布局，但日常居中有点大材小用。别为了显得高级而用 grid 去做单行居中，那叫杀鸡用牛刀。至于input在容器里的居中，最容易踩的坑是忘了给它设display: block或调整vertical-align，导致它和周围文字基线对不齐。
4.3 浮动、定位与层叠上下文
浮动（float）最初的用途是让文字环绕图片，后来被拿来布局，虽然现在有 flex 和 grid 了，但老项目里到处是浮动，你必须懂。浮动的副作用是父元素"高度塌陷"，因为浮动元素脱离了普通文档流。清除浮动有几种办法：给父元素加overflow: hidden触发 BFC、用::after伪元素加clear: both（最经典）、或者直接用display: flow-root（最现代）。我个人现在首选flow-root，语义最干净。
定位（position）有static、relative、absolute、fixed、sticky五个值。relative一般不脱离文档流，常用来给子元素当定位参考；absolute相对最近的已定位祖先元素定位；fixed相对视口固定，做悬浮导航、返回顶部按钮特别合适；sticky是"粘性定位"，滚动到阈值前是普通流，之后固定，做表格表头吸顶很好用。层叠上下文这块坑最深：z-index只在同一个层叠上下文里比较，如果父元素创建了新的层叠上下文（比如加了 transform 或 opacity），子元素的z-index再大也压不过别的层级。
5. 文本、字体与视觉细节处理
5.1 字体样式与字体栈的写法
font-family不要只写一个字体，要写"字体栈"，从前到后依次回退。一个中文页面常见的写法是：
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; }为什么这么排？因为不同操作系统装的字体不一样，Mac 有苹方，Windows 有微软雅黑，写一个字体栈能保证各平台都落到一个合适的字体上。font-size、font-weight、font-style、line-height这几个是基础，line-height建议用无单位数值（比如 1.6），这样它会基于自身字号计算，子元素继承时不会出错，用固定像素值容易在字号变化时失控。
想玩点花活的话，字体渐变用background: linear-gradient(...)配合-webkit-background-clip: text; color: transparent;就能实现；字体外描边可以用-webkit-text-stroke: 1px #000;或text-shadow叠加模拟。注意这些带-webkit-前缀的属性在部分浏览器里支持度不一，做之前先查一下兼容性，别在关键内容上用。
5.2 文本溢出、分割线与删除线
单行文本超长要显示省略号，记这个三件套：
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }多行超出省略（比如"两行超出…"）稍微麻烦点，用-webkit-line-clamp：
.clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }这个方案兼容性现在很好了，主流浏览器都支持。删除线用text-decoration: line-through;，但它会跟着文字颜色走，想改颜色得用text-decoration-color。段落分割线可以是border-bottom，也可以是伪元素画一条，后者更灵活，能控制长度和位置。letter-spacing调字间距、text-indent做首行缩进、text-align控制对齐，这些都是文本排版的基本功，组合起来能让页面质感提升一大截。
5.3 动效：从鼠标移入到涟漪扩散
交互反馈里最基础的是:hover，鼠标移入改变颜色或位置。加一句transition: all .3s ease;就能让变化平滑起来，注意transition要写在元素本身上，不是写在:hover里，否则移出时没有过渡。涟漪光圈扩散效果是近几年很流行的点击反馈，原理是用::after伪元素做一个圆，点击时放大并淡出：
.ripple { position: relative; overflow: hidden; } .ripple::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,.5); transition: width .5s, height .5s, opacity .5s; } .ripple:active::after { width: 200%; height: 200%; opacity: 0; }这是纯 CSS 的简化版，真实项目里一般配合 JS 计算点击坐标。另外像"纯 CSS tab 控件"这种炫技玩法，原理是用隐藏的radio配合label和:checked兄弟选择器切换内容，做 demo 挺酷，但实际项目里还是用 JS 更可控。
6. 常见问题排查与避坑实录
6.1 高频问题速查表
| 现象 | 可能原因 | 排查方向 |
|---|---|---|
| 页面中文乱码 | 编码不匹配 | 检查 meta charset 是否为 utf-8 且在最前 |
| 元素间距比预期大 | margin 重叠/塌陷 | 检查垂直相邻 margin 和父子 margin |
| 盒子总宽超标 | 未用 border-box | 加 box-sizing: border-box |
| 样式改了不生效 | 权重不足或被覆盖 | 开发者工具看被划掉的规则 |
| z-index 不生效 | 父元素建了层叠上下文 | 检查 transform/opacity/filter |
| 图片下方有缝隙 | 行内元素基线对齐 | 给图片设 display: block |
| 浮动后父元素没高度 | 高度塌陷 | 清浮动或用 flow-root |
| 手机上看字特别小 | 缺 viewport | 补 meta viewport |
6.2 调试习惯比语法更重要
我见过太多人调 CSS 靠"改一下刷新一下试试"，效率极低。正确的姿势是常开开发者工具，右键元素选"检查"，实时改样式看效果，确定后再写回代码。还可以用面板里的盒模型图直观看到 padding、border、margin 的具体数值，比脑补快一百倍。另外善用背景色调试，给可疑元素临时加个background: red，一眼就能看出它的实际占位范围，这个土办法至今好用。
还有一个习惯是从外到内排查。布局错乱时，先看最外层容器对不对，再一层层往里查，别一上来就盯着最里面的小元素。多数布局问题都出在中间某一层的宽度、定位或浮动上。最后，写完一段样式就及时整理，别攒到最后一起收拾，否则你自己都认不出哪段是干嘛的。
6.3 我个人踩过的几个坑
第一个坑是早期疯狂用position: absolute做布局，结果页面完全不能自适应，窗口一缩就全乱。后来才明白，绝对定位是给浮层用的，正常布局应该用流式布局加 flex。第二个坑是无脑用大数字的z-index，什么 9999、99999，最后谁也压不过谁，因为层叠上下文的问题根本不是数值能解决的。第三个坑是忽视语义化，一个页面全是 div，后来要做无障碍适配时几乎要重写。
第四个坑，也是我觉得最值得分享的：不要过早追求"高级写法"。有段时间我迷上 CSS 变量、clamp()、容器查询这些新特性，结果在一个需要兼容老浏览器的项目里栽了跟头。技术选型要看目标环境，不是越新越好。理解了这一点，你才算真正从"会写 CSS"迈进到"能用 CSS 解决实际问题"。至于后面从静态页面过渡到 JS 交互、再到框架，这条路的每一步都建立在这一层地基之上，地基牢不牢，决定了你能走多远。