HTML不是编程语言，核心是写出合法结构化文本：必须有且仅有一个根元素，放元信息，承载可视内容，标签需按语义嵌套，class/id须用英文连字符命名。
HTML 不是编程语言，不需要“教”出编程思维，而是要让人快速写出能被浏览器正确解析的结构化文本——核心在于理解标签语义、嵌套规则和浏览器默认行为。
什么是合法的 HTML：从
很多初学者写的页面在浏览器里“看起来能用”，但实际不是合法 HTML，比如漏掉 、 或 。现代浏览器会自动补全，但这掩盖了结构问题，后续加 CSS/JS 容易出错。
- 必须有且仅有一个
根元素 -
里放、等元信息，不直接显示内容 -
是唯一承载可视内容的容器，所有、、都得在里面- 自闭合标签如
、在 HTML5 中不强制写/>，但写成即可我的第一个页面 欢迎
这是段落。
哪些标签不能随便嵌套：
、和的真实边界初学者常把块级元素塞进行内元素里，比如在
里放或，浏览器虽会渲染，但 DOM 树会被重排，开发者工具里能看到意外的闭合——这不是“兼容”，是纠错。-
是段落，只能包含**短语级内容**（、、），不能含、、是通用块容器，可以包几乎所有标签，但语义为空，别为标题或按钮滥用它是通用行内容器，只用于局部样式或脚本钩子，不能放块级元素- 验证方式：打开浏览器开发者工具 → Elements 面板，看是否出现自动插入的
或属性写法的硬约束：
class和id为什么不能用中文或空格HTML 属性值本身允许中文（如
alt="图片"），但class和id是选择器基础，CSS 和 JavaScript 依赖它们匹配元素。一旦含空格、中文、特殊符号，就无法用标准语法选中。-
class="导航栏"→ CSS 中需写.导航栏，但多数编辑器/构建工具不支持 Unicode 类名解析，且不符合 W3C 推荐规范 -
id="main content"→ 空格会让浏览器只认前半部分main，后半截丢失；JavaScript 中document.getElementById("main content")直接返回null - 正确做法：用英文、数字、连字符，小写开头，如
class="nav-bar"、id="main-content" - 例外：
data-*属性无此限制，data-title="用户你好"完全合法
浏览器怎么“猜”你想要什么：省略
、的真实代价下面这段代码确实能显示：
测试 Hello
但浏览器会在背后生成完整结构：自动包裹
、补和，甚至把。这在简单页面里没问题，但一旦引入或，位置错乱就会导致样式不加载、响应式失效。- 移动端页面漏写
，内容会以桌面宽度缩放，文字小到看不清 - CSS 文件放在
末尾？浏览器可能先渲染无样式的 HTML，造成闪烁 - 想用
document.head插入脚本？如果没显式写，某些旧版 Safari 会返回null
语义清晰、结构完整，比“少敲几行”重要得多——HTML 的价值不在写
得快，而在改得稳、传得准、机器读得懂。
- 自闭合标签如
得快，而在改得稳、传得准、机器读得懂。