HTML: HTML 基础
掌握 HTML文档的标准结构和基本语法规则是编写格式良好的网页的第一步。
1. HTML 文档结构
每个 HTML 文档都遵循一套固定的结构框架。浏览器正是通过这个框架来理解页面的组成部分。完整的 HTML 文档包含以下层级关系：
▶ 示例
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
页面的可见内容
</body>
</html>
(1) 结构分层说明
HTML 文档的各个部分以树状结构组织在一起，这种结构被称为 DOM（Document Object Model）。浏览器将每个 HTML 标签转换为一个"节点"，节点之间形成父子、兄弟关系。
<!DOCTYPE html>— 文档类型声明，告诉浏览器这是一个 HTML5 文档，必须写在第一行。<html>— 根元素，是整个 HTML 文档的最外层容器。所有其他标签都放在它内部。<head>— 头部区域，存放元数据。这里的内容不会直接显示在页面上，但控制着页面的编码、标题、样式引用等。<meta charset="UTF-8">— 声明文档的字符编码为 UTF-8，确保中文等特殊字符能正常显示。<title>— 网页标题，显示在浏览器的标签栏上，也是搜索引擎结果中的标题。<body>— 主体区域，所有在浏览器中可见的内容（文字、图片、表格等）都放在这里。 理解这个骨架结构非常关键——后续学习的所有标签，都将放在<head>或<body>中书写。
📌 DOM 的概念： DOM 是浏览器提供的一套编程接口，它将 HTML 文档中的每个标签都当作一个"节点"来处理。
<html> 是根节点，<head> 和 <body> 是它的子节点（彼此互为兄弟节点）。良好的 DOM 结构不仅让代码更清晰，也有助于搜索引擎优化和无障碍访问。
2. 标签的基本语法
HTML 的核心构件是"标签"（tag）。浏览器通过标签来识别内容的类型和结构。标签分为两大类：双标签和空标签。
(1) 双标签
大多数 HTML 标签是成对出现的，由开始标签和结束标签包裹内容。
HTML
<p>这是一个段落</p>
<h1>这是一级标题</h1>
<strong>这是加粗文字</strong>
- 开始标签：
<tagname>— 尖括号包裹标签名 - 结束标签：
</tagname>— 在标签名前加斜杠 - 内容：开始与结束标签之间的文字或其他标签
(2) 空标签（自闭合标签）
少数标签没有内容，也不需要结束标签，它们被称为空标签。
HTML
<br> <!-- 换行 -->
<hr> <!-- 水平分隔线 -->
<img src="/assets/images/tutorials/html-example-photo.webp" alt="A sample photo"> <!-- 图片 -->
HTML5 中，空标签末尾的斜杠是可选的（如 <br /> 和 <br> 都合法），但建议保持简洁，不加斜杠。
(3) 标签的嵌套规则
标签之间可以相互嵌套，但必须遵循"先开先关"的原则——后打开的标签必须先关闭，不能交叉。
HTML
<!-- 正确嵌套 -->
<p>这是一段<strong>重要文字</strong>示例</p>
<!-- 错误嵌套（交叉） -->
<p>这是一段<strong>重要文字</p>示例</strong>
⚠️ 注意事项
- 标签名一律使用小写。虽然
<P>在浏览器中也能渲染，但小写是行业规范。 - 嵌套必须严格遵循层级顺序，错误的交叉嵌套会导致浏览器解析异常，页面可能显示错乱。
- 合理嵌套是构建良好 DOM 结构的基础，便于后期维护和样式控制。
📌 HTML 注释： 关于 HTML 注释的详细用法（写法、调试技巧、常见用途等），我们将在
第 9 章：HTML 注释中专门讲解。目前你只需要知道，注释用<!-- -->包裹，不会显示在页面上，主要用于给开发者自己看的说明文字。
❓ 常见问题
Q 为什么标签名要用小写？大写也能正常显示啊？
A 虽然浏览器对大小写不敏感，但小写是W3C推荐的行业规范，原因有三：1）HTML5标准明确建议小写；2）小写在代码审查和团队协作中更易读；3）XHTML严格要求小写，保持一致性有助于未来迁移。就像开车——右侧通行虽然在中国可以，但在英国就不行了。遵守规范是为了代码在任何环境下都能正常工作。
Q 什么是DOM？它和HTML是什么关系？
A DOM（Document Object Model）是浏览器把你的HTML代码转换成的一棵"树"。HTML是你的源代码，DOM是浏览器理解后的内部结构。你可以用F12开发者工具的"Elements"面板看到这棵树。DOM的重要性在于：JavaScript操作的是DOM而不是你的HTML文件，CSS选择器匹配的也是DOM节点。理解DOM是前端开发的核心基础。
Q 为什么有些标签（如
<br>）不需要结束标签？什么时候可以省略斜杠？A 这类标签叫"空元素"或"自闭合标签"，它们本身不需要包裹内容——换行符
<br>没有"换行的内容"，图片<img>的图片路径是通过src属性指定的，不是写在标签之间的。HTML5中，空标签末尾的斜杠是可选的（<br>和<br/>都合法），但建议保持简洁不加斜杠。记住：只有空元素可以省略结束标签，普通元素（如<p>、<div>）必须有结束标签。📖 小节
- HTML 文档有固定骨架：
DOCTYPE→html（根元素）→head+body - 标签分两种：双标签（有开始和结束）和空标签（自闭合，无内容）
- 嵌套规则："先开先关"，不能交叉嵌套
- 标签名一律使用小写，养成良好的编码习惯
📝 作业
- 写一个完整页面：创建一个 HTML 文件，包含正确的
!DOCTYPE、html、head、body结构。在 body 中添加一个h1标题、一个p段落、一个br换行和一个hr分隔线。 - 嵌套练习：用
p和strong标签写一个正确嵌套的句子，再故意写一个交叉嵌套的错误例子。观察浏览器对两种写法的渲染结果有何不同。
