从写第一个能打开的页面开始学，新建index.html写三行代码，保存后双击打开验证环境；注意utf-8编码、纯英文路径、置于内，强调html语义化、表单label绑定、图片alt属性，css优先掌握选择器/盒模型/文档流，练手项目推荐带搜索过滤的本地电影列表页。
从写第一个能打开的页面开始学
别先啃书，直接新建 index.html，写三行：一个 <h1></h1>、一个 <p></p>、再加个 <style></style> 块改下文字颜色。保存，双击打开——看到效果了，就说明环境通了。
常见错误现象：localhost 打不开、样式不生效、中文乱码。原因通常是文件没用 UTF-8 编码保存，或浏览器直接双击打开了但路径含中文/空格（Windows 尤其容易出这问题）。
- 用 VS Code 或 Sublime Text 新建文件时，右下角确认编码是
UTF-8 - 不要把文件放在桌面或“文档”这种系统路径里，新建个纯英文文件夹比如
my-first-page，放进去再打开 -
<style></style>写在里，别写在底部，否则可能闪一下才变色
HTML 不是标签列表，是结构意图的表达
学 <div> 和 <code><span></span> 前，先盯住网页里真实的一段内容：比如博客文章标题、作者名、发布时间、正文段落。它们不是“随便套个标签就行”，而是该用 <article></article> 包整体，<header></header> 包头信息，<time></time> 包时间——语义对了，屏幕阅读器、SEO、甚至以后加 CSS 都更稳。
容易踩的坑：<div> 嵌套过深、所有文字都用 <code><p></p>、标题跳着用 <h3></h3> 跳到 <h1></h1>。这些不会报错，但会让后续维护和协作变得模糊。
立即学习“前端免费学习笔记（深入）”；
- 检查是否每个
<h1></h1>～<h6></h6>都有逻辑层级，不是为了“看起来大”而用<h1></h1> - 表单控件必须配
<label for="xxx"></label>，不然手机点不到输入框（尤其<input type="checkbox">） - 图片一定要写
alt属性，哪怕只是空字符串alt=""，否则无障碍检测会失败
CSS 优先掌握选择器 + 盒模型 + 文档流
别一上来就查 flex 或 grid。先用 class 写两个按钮，用 .btn-primary 和 .btn-secondary 区分，再通过 margin、padding、border 看清盒子怎么占空间。这时候改 display: inline-block 和 display: block，马上能看出元素怎么“排队”或“换行”。
性能影响很小，但兼容性陷阱多：比如 rem 在老 Android 浏览器里计算不准，position: sticky 在 Safari 旧版本不支持，aspect-ratio 还没进 IE 任何版本。
- 写 CSS 时，先关掉所有浏览器默认样式：
* { margin: 0; padding: 0; box-sizing: border-box; }，省得后面反复调height却被padding拉高 - 调试布局卡住？右键「检查元素」，在开发者工具里直接删掉某个
margin或勾选/取消display，比翻文档快得多 - 别用
!important解决冲突，90% 是选择器权重没理清，比如#nav .item比.active优先级高，不是靠加!important硬顶
练手项目别做“个人简历页”，做“能动的静态页”
做一个带搜索框的本地电影列表页：HTML 列出 5 部电影，每部有标题、年份、评分；CSS 排成卡片流式布局；再用几行 JavaScript 实现输入关键词后实时过滤（只显示匹配的卡片）。这个过程会自然逼你处理：HTML 结构是否方便 JS 操作、CSS 类名要不要加前缀、JS 怎么找 document.querySelectorAll('.movie-card')。
为什么不做简历页？它太静态，没有交互反馈，也掩盖不了结构混乱的问题。而一个搜不到结果时显示“暂无匹配”的小功能，会让你立刻意识到 if (results.length === 0) 这种边界条件必须写。
- 数据别硬编码在 JS 里，直接写在 HTML 的
data-属性中，比如<div class="movie-card" data-title="Inception" data-year="2010"> <li>过滤逻辑用 <code>Array.prototype.filter()，别用 for 循环手动 push，代码短、易读、少出错 - 搜索框加
input事件监听，不是click或change，否则用户还没输完就触发了
真正卡住人的从来不是属性记不住，而是改了 CSS 发现父容器没设宽高、JS 获取不到元素是因为 DOM 还没加载完、或者用 float 布局后后面的内容塌陷了却不知道要清除浮动。这些问题不会出现在教程里，只会在你动手删一行、加一行、再刷新十次的时候冒出来。
