大家好，这里是你的HTML入门笔记。今天我们来拆解一下网页的骨架——HTML，掌握最基础的结构和标签知识。
一、HTML文档的基本骨架
一个标准的HTML文档，就像盖房子的地基和框架。在VS Code等编辑器中，输入!后按Tab或Shift + !可以快速生成这个基础结构。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>小技巧：
Shift + !：快速生成网页基本结构（Emmet语法）。Ctrl + /：快速生成/取消注释，写代码的好帮手。
二、网页开发“三剑客”
如果把网页比作一套房子，那这三者各司其职：
角色 | 作用 | 比喻 |
|---|---|---|
HTML | 搭建网页结构 | 毛坯房 (承重墙、房间布局) |
CSS | 修饰网页外观 | 精装修 (墙纸、地板、灯光) |
JavaScript | 实现页面交互 | 智能家居 (开关灯、自动门) |
三、标签的分类与详解
HTML的核心就是标签，我们可以从两个维度来理解它们。
1. 按形式分类
双标签：有开始和结束，成对出现。
语法：
<标签名> 内容 </标签名>例子：
<html></html>，<div></div>，<p></p>
单标签 / 自结束标签：没有内容，自己就代表一个完整的元素。
语法：
<标签名 />或<标签名>例子：
<meta>，<link>，<br>，<hr>
2. 按显示特点分类
这是前端布局中最关键的概念，决定了元素在页面上的排列方式。
类型 | 特点 | 常见标签 |
|---|---|---|
块级元素 | 独占一行，宽度默认占满父容器；可以设置宽高；可以包裹任何其他元素。 |
|
行内元素 | 不独占一行，与其他行内元素排在一行；无法直接设置宽高，大小由内容撑开；一般只包裹文字或其他行内元素。 |
|
行内块元素 | 不独占一行，可以排在一行；可以设置宽高；元素之间会有天然的间隙。 |
|
补充表格：
行内块标签
不独占一行，可设置宽高，有间距
四、标签之间的关系（DOM树）
标签之间的嵌套形成了层级关系，理解这些关系对后续学习CSS选择器和JavaScript DOM操作至关重要。
父子关系：一个标签直接包裹另一个标签。
例：
<html>是<head>的父元素。
祖先后代关系：一个标签直接或间接包裹另一个标签。
例：
<html>是<title>的祖先元素。
兄弟关系：两个标签拥有同一个直接的父元素。
例：
<meta>和<title>是兄弟元素（它们的共同父元素是<head>）。
五、结构嵌套规范（重要！）
虽然浏览器很宽容，但遵循规范能避免很多奇怪的布局问题。
块级元素：可以包裹任意内容（块、行内、行内块）。这是最自由的容器。
行内元素：一般只包裹文字或其他行内元素，尽量不要包裹块级元素。
特殊规则：
<p>标签：段落标签，内部只能放文字、行内元素或行内块元素，绝对不能包含块级元素（如<div>）。<a>标签：超链接标签，可以包裹块、行内、行内块元素，让它变成一个可点击的“大按钮”。但是，<a>标签不能嵌套另一个<a>标签。
六、注释
注释是写给开发者看的，浏览器会完全忽略它。养成写注释的好习惯，能让你的代码逻辑更清晰。
<!-- 这是一个单行注释 --> <!-- 这是一个多行注释 可以写很多内容 注意：不能在注释内部再嵌套另一个注释！ -->总结：
今天我们从HTML的骨架结构，学到了标签的分类、关系和嵌套规范。记住“三剑客”的分工，搞懂“块、行内、行内块”的区别，你就已经迈出了网页开发的第一步。
下次见！
