html与css是网页的“骨架”与“衣服”关系：html定义内容结构（如标题、段落、按钮），css控制外观（颜色、大小、位置等）；无html则css无处作用，无css则html仅呈纯文本堆叠。
别从书本或视频列表开始学，直接新建一个 index.html 文件，写三行能跑起来的代码，双击打开看到效果——这一步卡住，后面所有学习都悬在半空。
怎么验证环境通没通：双击打开就报错或样式不生效
常见错误现象：localhost 打不开、中文乱码、文字颜色没变、按钮没反应。根本原因几乎全是文件保存编码或路径问题。
- 用 VS Code 或 Sublime Text 新建文件时，右下角必须确认是
UTF-8编码，不是GBK或UTF-8 with BOM - 文件不能放在桌面、“文档”、“下载”这类系统中文路径里，新建纯英文文件夹如
my-first-page，把index.html放进去再双击 -
<style></style>标签必须写在里，写在底部会导致页面先闪一下才变色 - 加一行
<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端max-width: 100%可能完全不工作
别先背标签和属性，先改真实网站的按钮
最快建立手感的方式，是打开知乎或小红书，右键任意按钮 →「检查」→ 在 Elements 面板里直接双击改文字、拖动调整 margin 和 padding。你会立刻明白 class 是怎么挂钩样式的，也马上分得清 display: inline 和 display: block 的行为差异。
- 写了一堆 CSS 没生效？90% 是选择器没对上：目标元素有
class="btn-primary"，你却写了.button - 用了
display: none却以为只是“变透明”，其实它已从文档流中彻底移除 - 调试时别急着加
!important，先看开发者工具的 Computed 面板，哪条规则被划掉了，再顺着查 source order 和选择器特异性
盒模型没立住，Flex 和 Grid 就是空中楼阁
很多人卡在 Flex 不居中、子项不等高，其实是 display 基础没搞清。CSS 是一套依赖链：父容器的 display 决定子元素是否参与布局，子元素的 display 又决定它怎么响应父容器的约束。
-
inline元素设width/height无效；float未清除会导致后续块级元素上浮 -
position: absolute脱离文档流后，父容器可能高度塌陷——这不是 Flex 能绕开的问题 - 先关掉浏览器默认样式：
* { margin: 0; padding: 0; box-sizing: border-box; }，省得后面反复调height却被padding拉高 - Flex 容器必须显式声明
display: flex或display: inline-flex，光写justify-content是没用的
语义化不是加分项，是避免后期返工的硬门槛
写 <div class="card"> 不如写 <code><article></article>，不是为了“标准”，而是因为屏幕阅读器、SEO、甚至你自己半年后维护代码时，<nav></nav> 比 <div id="menu"> 更容易定位和理解。<ul>
<li>表单控件必须配 <code><label for="xxx"></label>，否则手机点不到输入框（尤其 <input type="checkbox">）
alt 属性，哪怕只是空字符串 alt=""，否则无障碍检测会失败<h1></h1>～<h6></h6> 都要有逻辑层级，不是为了“看起来大”而用 <h1></h1>
<header></header>、<main></main>、<footer></footer> 这些标签不是装饰，它们自带 DOM 可控性和键盘导航（Tab 键跳转）能力最容易被忽略的一点：HTML 和 CSS 是共生关系，不是先后顺序。你不可能先“学完 HTML”再“学 CSS”，它们必须在第一个页面里就一起出现——结构和样式从来就不是两张皮，而是一个动作的两面。
