HTML不是编程语言，核心是写出合法结构化文本：必须有且仅有一个<html>根元素，<head>放元信息，<body>承载可视内容，标签需按语义嵌套，class/id须用英文连字符命名。
HTML 不是编程语言，不需要“教”出编程思维，而是要让人快速写出能被浏览器正确解析的结构化文本——核心在于理解标签语义、嵌套规则和浏览器默认行为。
什么是合法的 HTML：从 <html> 到 </html> 的最小闭环
很多初学者写的页面在浏览器里“看起来能用”，但实际不是合法 HTML，比如漏掉 <html>、<head> 或 <body>。现代浏览器会自动补全，但这掩盖了结构问题，后续加 CSS/JS 容易出错。
- 必须有且仅有一个
<html>根元素 -
<head>里放<title>、<meta>、<link>等元信息，不直接显示内容 -
<body>是唯一承载可视内容的容器，所有<p>、<div>、<h1>都得在里面 - 自闭合标签如
<img>、<input>在 HTML5 中不强制写/>，但写成<img src="a.jpg">即可
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <h1>欢迎</h1> <p>这是段落。</p> </body> </html>
哪些标签不能随便嵌套：<p>、<span> 和 <div> 的真实边界
初学者常把块级元素塞进行内元素里，比如在 <span> 里放 <p> 或 <div>，浏览器虽会渲染，但 DOM 树会被重排，开发者工具里能看到意外的闭合——这不是“兼容”，是纠错。
-
<p>是段落，只能包含**短语级内容**（<span>、<strong>、<a>），不能含<div>、<h1>、<p> -
<div>是通用块容器，可以包几乎所有标签，但语义为空，别为标题或按钮滥用它 -
<span>是通用行内容器，只用于局部样式或脚本钩子，不能放块级元素 - 验证方式：打开浏览器开发者工具 → Elements 面板，看是否出现自动插入的
</p>或<p>
属性写法的硬约束：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="用户你好"完全合法
浏览器怎么“猜”你想要什么：省略 <html>、<head> 的真实代价
下面这段代码确实能显示：
<!DOCTYPE html> <title>测试</title> <h1>Hello</h1>
但浏览器会在背后生成完整结构：自动包裹 <html>、补 <head> 和 <body>，甚至把 <title> 挪进 <head>。这在简单页面里没问题，但一旦引入 <meta name="viewport"> 或 <link rel="stylesheet">，位置错乱就会导致样式不加载、响应式失效。
- 移动端页面漏写
<meta name="viewport">，内容会以桌面宽度缩放，文字小到看不清 - CSS 文件放在
<body>末尾？浏览器可能先渲染无样式的 HTML，造成闪烁 - 想用
document.head插入脚本？如果没显式写<head>，某些旧版 Safari 会返回null
语义清晰、结构完整，比“少敲几行”重要得多——HTML 的价值不在写得快，而在改得稳、传得准、机器读得懂。
