铁疾做了几年前端，日常绝大多数工作其实就是围着 HTML、CSS、JavaScript 这三样转。真正让我意识到自己“地基不牢”的，反而不是什么复杂的框架问题，而是一次很普通的页面改版：内容区有几个卡片，宽度明明设置了 flex，子项却怎么都不按预期收缩；一个输入框里的内容稍不注意就直接把页面结构撑坏了；后来给接口加参数，又在浏览器控制台里看到一串不明不白的请求，排查半天才发现是没做好基本的数据转义。那次之后，我把 HTML、JS、CSS 重新过了一遍，又专门补了 XSS 入门知识，整理出一套自己的学习笔记。
这篇笔记就是那次复盘后的产物。它不是什么花哨的框架教程，而是聚焦前端最根基的四个词：HTML、JS、CSS、XSS。适合两类人看：一类是刚开始学前端、想建立完整知识脉络的新手；另一类是已经会写页面但总在样式布局、交互数据、安全边界上反复踩坑的“野生前端”。看完你会知道，做页面时结构、表现、行为分别由谁负责；写交互时 JS 在 DOM 上到底做了什么；以及为什么一个入门级安全话题 XSS，会被我放进前端基础清单里。
1. 结构先行：HTML 与 CSS 的“搭积木”逻辑
1.1 语义化不是形式主义，而是给浏览器和队友看的说明书
很多人写 HTML 的习惯是：拿到设计稿，立刻 div 一把梭，哪里需要换行就 <br>，哪里需要大标题就随便挑个 <p> 加个 class 把字号调大。看起来页面效果差不多，但后续维护的人——通常就是几个月后的自己——看到一团 <div class="box1"> <div class="box2">...，想改结构就得从头捋，非常痛苦。
语义化标签的价值在于，它让“这块内容是什么”这件事从视觉层面提升到了结构层面。一个用 <header>、<nav>、<main>、<article>、<aside>、<footer> 搭出来的页面，哪怕完全没有 CSS，你扫一眼源码就能知道哪个是导航、哪个是正文、哪个是侧边栏。更重要的是，浏览器、搜索引擎、屏幕阅读器都依赖这些标签来理解页面。屏幕阅读器用户通常靠 <h1>~<h6> 的层级快速跳转内容，如果标题全用 div 模拟，读屏软件只会念出一堆“区块”，无障碍根本无从谈起。
我给自己定的基础规范很简单：先不碰样式，用纯 HTML 把页面大纲写出来，每个区块想清楚它“是什么角色”，选一个语义最接近的标签。标题层级严格按逻辑走，不要跳级。一个页面只保留一个 <h1>，小标题按内容嵌套在 section 或 article 里。结构稳定之后，再开始写 CSS 调整呈现效果。这样调整页面宽度、增删模块时，结构性改动很少，工作和返工量会明显小很多。
1.2 盒模型和 Flex 布局，CSS 里最值得先啃下来的两块骨头
CSS 入门有一道经典门槛：盒模型。每个元素在页面上都是一个矩形盒子，由 content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。盒模型分两种计算方式：box-sizing: content-box 下，一个 width: 200px、padding: 20px 的元素，实际占用的宽度是 200 + 20×2 = 240px；而 box-sizing: border-box 下，width: 200px 表示的是最终可见宽度，内容区域会压缩成 200 − 20×2 = 160px。两种模型本身没有绝对的优劣，但同一个页面里混用会极易算错间距导致布局错位。我的习惯是全局统一 border-box，再也不用一边写宽度一边心算 padding，省下的脑力足够做别的。
另一块硬骨头就是布局。早期前端用 float、inline-block 拼布局，元素宽度稍有偏差就容易掉到下一行；后来有了 Flexbox，才把一个方向上的对齐、伸缩、换行问题变得非常直观。Flex 的核心思路是，在容器上声明 display: flex，子元素就默认沿着主轴排列，再通过 justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-wrap（是否换行）这几个属性控制整体位置，子元素自己则用 flex-grow、flex-shrink、flex-basis 控制伸缩比例。热词里那个“css flex布局子元素宽度自适应”的问题，其实就是理解了 flex-basis 和 flex-shrink 之后自然能解决的事。如果希望三个卡片等宽分配空间，可以给子项设 flex: 1，这等价于 flex: 1 1 0%，意味着它们以 0 为基准，有剩余空间就均等扩张，空间不足也均等压缩，宽度自然就自适应了。
不要一开始就追求所有布局都用某一种方案实现。实践下来我的个人分法是：一维列表、导航栏、按钮组这类单向排列场景优先用 Flex；二维栅格、仪表盘这类需要同时处理行和列的场景用 Grid；简单的页面骨架、横向排列数量有限时，Flex 依然足够。先把这两种现代布局方式用熟，基本能覆盖绝大多数工作需求，曾经那些“灵异换行”也会消失大半。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. JavaScript 的活法：让页面真正“会动”
2.1 DOM 操作和事件绑定：页面在你手里活过来的第一步
HTML 和 CSS 负责“长什么样”，JavaScript 则负责“能干什么”。浏览器把 HTML 解析成一棵对象树，叫 DOM（Document Object Model），每个标签都是树上的一个节点。JS 最常见的工作方式，就是先从这棵树上找到目标节点，再修改它的内容、样式或结构。比如