HTML 和 CSS 学不学，看这顿顿代码嗑瓜子的日子 别想着去找那种写着“HTML 五大基石”的 PDF 照本宣科。
那种地方全是空气，闻起来像网吧的 Wi-Fi 信号，没味儿。我劝你别走那条路，要不就你脑子短路了。 真正能把这两门课吃透的，都是那些在深夜浏览器里疯跑的老手。他们从不揪心语法对不对，只在乎第一段代码能不能在屏幕上蹦出来，第二段能不能让它按你的意思动。 HTML：这玩意儿挺好办，就是别把它想得忒严肃 HTML 全称超麻，别管它，那是给赶明儿写 JS 用的。它的功能就一个：给网页搭骨架。 想象你是在盖楼，HTML 就是砖头、水泥和钢筋。
你想盖个两层楼，先把地基（HTML 结构）搭好，再往上面加水泥（CSS 样式）。
要是这时候你只搭砖头不抹水泥，那楼是搭好的，但没人住，也没法住人。 最经典的例子，看看这个网页。 ```html
我的网站 Hello World
这是段落
``` 代码在哪？就在浏览器地址栏。打开，就能看到。
那个 `` 是可选的，你能够把它删光光。
那行 `` 是务必的，不然你的浏览器会像个没长大的孩子，到处乱闯。 ```html ``` 这就对了。别再用 `` 这种大词来吓唬自己，那是给老旧浏览器预备的，目前的浏览器都认 ``。 再说说哪位才是网页的祖宗。记得小时候看《新闻联播》吗？那个台标里的字，还有电视画面，全靠 ``、``、`` 这几个标签搭的架子。你要是把 `` 删了，整个画面就散了，啥也看不见。 HTML 的语法实际上挺死板。别试图去学 `` 务必写死是 `p`，不能写成 `p` 要么 `paragraph`。 实际上你不用忒纠结标签闭合。HTML 的开发者工具里有个“显示隐藏线”的开关。关掉它，你会发现标签实际上不用写 ``。
只要标签和对应的好，浏览器就知道它该终止了。 别被那些花里胡哨的 API 绕晕了，React 也好，Vue 也好，它们只是告诉浏览器“嘿，这个标签我认识，我懂它的用法，别管它了”。 CSS：文字颜色都如此好看，CSS 靠不住 CSS 更像是一张魔法咒语，能直接让文字变色、加粗、换个字体。HTML 只管骨架，CSS 只管颜值。 大量人一学 CSS 就崩，不是出于语法难，是出于他们总想着“如何让网页变漂亮”。
实际上 CSS 的精髓，就是“别管它”。 比如，你想让那个“点击我”的按钮变成蓝色的，那是 HTML 小学生都没过的分。CSS 老师会告诉你： ```css button { background: blue; color: white; padding: 10px; } ``` 这就够了。 别被 `button` 这种类名绕晕。CSS 的类名和函数名是一模一样的。写 JS 时用 `button.click()` 没难题，但 CSS 里只能用 `button` 这种纯名词。别写成 `button()`，也别写成 `button.click()`，那是 JS 的技能，CSS 的头发。 数据讲话：一个按钮的真状态 让我来给你算笔账。 一个一般/平平的 `button` 标签，默认长啥样？ - 长度大约 1 厘米。 - 颜色是黑色的。 - 字体是黑色的。 - 内部空空如也。 目前，你给它加上了 CSS。 - 背景变成深蓝色（`background-color`）。 - 文字变成白色（`color`）。 - 加俩像素的 padding（内边距）。 这时候你再看那个按钮，它变成了啥样？ - 长度略微变长一点点。 - 背景是深蓝的。 - 文字是白的。 - 你只要用鼠标碰一下，它就能触发你的事件。 这就是 CSS 的力量，它能把一个灰色的死框，瞬间变成一个交互的按钮。 别被那些 Fancy 陷阱骗了 有个挺坑的，就是 `display: flex`。大量新手一看到这个，就当作是个超级魔法。 别急。`display` 是告诉浏览器“这个元素在我父元素里，应当显示成啥样”。 - 要是不写，默认是块状（`block`），竖着占一行，左边对齐。 - 写了 `flex`，它就变成行内元素了。
那它如何横着排？你得自己写 `display: flex;`。 - 写了 `flex` 之后，浏览器就会自动帮你处理对齐、间距、自动换行这些事。 故此，`display: flex` 只是给了你一把钥匙，但它不会直接打开大门。你得自己把门打开——也就是你写了对的 HTML 结构要么 CSS 代码。 别写 `body { }` 这是最该死的一个坑。
要是你把所有东西都写进 `body` 的 CSS 里，那你的 HTML 结构就废了。 比如你想让两个兄弟元素（`div` 和 `span`）与此同时变大，你只能写 `body { width: 100%; }`。
那这就把兄弟俩的宽度都扯动了，它们的关系就乱了。 对的做法是： ```css div { width: 20%; height: 20%; background: red; } span { width: 30%; height: 30%; background: blue; } ``` 这样，兄弟俩才保持那个 2:3 的关系。 别被“高级”概念吓到 别再花工夫去学 `CSS 选择器`、`CSS 伪类`、`CSS 继承`。
这些词听起来挺学术，实际上它们就是给浏览器指挥的指令。 你想让按钮变蓝，你就写 `button { color: blue; }`。 你想让内边距变 10 像素，你就写 `button { padding: 10px; }`。 这些就是最基础的选择器。别搞那些复杂的 ` { }` 要么 `body { }`，那是给不懂浏览器原理的傻瓜预备的。 数据讲话：选择器效率 让我来算笔账： 要是你用一条复杂的规则 `body { display: flex; }`，浏览器需求扫描整个页面，找到所有的 `body` 标签，然后执行这个命令。 要是你用好办的 `button { color: blue; }`，浏览器只需求扫描所有的 `button` 标签，然后给这些标签上色。 在网页里有 50 万个按钮，用第一种方式，浏览器得扫 50 万次。用第二种方式，才 50 次。效率差 10000 倍。 故此，别去搞那些找不到的东西，别去写复杂的规则。写好办的，让浏览器帮你干活。 最终，如何复习？ 别去找那些“从零启动”的教程。
那种地方全是废话。 你要去实战。 打开浏览器，假装你是网页设计师。 1.找一个旧网页。 2.试着用 `find` 或 `grep` 命令，看看里面到底有多少个 HTML 标签。 3.试着把某个按钮的颜色改一下，看看 CSS 生效了没。 4.试着在管住台输入 CSS 命令，看看浏览器反馈了啥。 别怕报错。报错是代码在跟你对话，它在告诉你哪儿错了。别怕，你改改，它再告诉你。 别被那些长长的代码吓到。HTML 和 CSS 就两句话。 HTML 说：这里是头，这里是脚。 CSS 说：头要蓝色，脚要圆，中间要有个按钮。 就如此好办。 去把代码敲下来，看着它在浏览器里蹦出来。
这才是学代码的真相，不是背那些词，是看着数据在屏幕上跳来跳去。别光看不练，别只练不看，最终只能是半吊子。 练代码。用浏览器开发者工具。敲代码。 当你看着一行行代码变成漂亮的页面时，你就懂了。
