1. HTML 基本结构（骨架）#

一个标准的HTML文档有固定的嵌套结构，就像写文章要有标题和正文一样：

1
<!DOCTYPE html>      <!-- 声明文档类型为HTML5 -->
2
<html>               <!-- 根元素，包裹所有内容 -->
3
<head>               <!-- 头部：定义元数据，不显示在页面上 -->
4
    <meta charset="UTF-8">  <!-- 设置字符编码，防止乱码 -->
5
    <title>页面标题</title> <!-- 显示在浏览器标签栏上 -->
6
</head>
7
<body>               <!-- 主体：所有可见的页面内容都写在这里 -->
8
    <h1>你好，世界！</h1>
9
    <p>这是一个段落。</p>
10
</body>
11
</html>

2. 标签（Tag）与元素（Element）#

• 标签：由尖括号包裹关键字，如 <p>（开始标签）和 </p>（结束标签）。
• 元素：开始标签 + 内容 + 结束标签，共同构成一个元素。
• 空元素：没有内容的标签可以自闭合，如换行 <br>、水平线 <hr>、图片 <img>。

3. 属性（Attributes）#

属性写在开始标签中，用于为元素附加额外信息（如链接地址、图片路径、样式等）。格式为 属性名="属性值"。

1
<!-- href 是链接目标，target 是打开方式 -->
2
<a href="https://www.example.com" target="_blank">点击跳转</a>
3

4
<!-- src 是图片源文件，alt 是图片无法加载时的替代文字 -->
5
<img src="photo.jpg" alt="风景照">

4. 嵌套与层级（父子关系）#

标签必须正确嵌套，不能交叉重叠。浏览器依据这个层级关系来渲染页面。

1
<!-- 正确：先关闭里面的，再关闭外面的 -->
2
<div>
3
    <p>这是正确嵌套。</p>
4
</div>
5

6
<!-- 错误：交叉嵌套（会导致显示异常） -->
7
<div><p>这是错误嵌套。</div></p>

5. 常用基础标签速览#

• 标题：<h1> ~ <h6>（数字越小，字号越大，<h1> 最重要）。
• 段落：<p>。
• 列表：无序 <ul> + <li>，有序 <ol> + <li>。
• 分区与容器：块级容器 <div>（占一整行），行内容器 <span>（不换行，常用于修饰局部文字）。
• 语义化标签（HTML5）：<header>（头部）、<nav>（导航）、<main>（主体）、<footer>（底部），让结构更清晰，利于SEO和无障碍访问。

6. 块级元素 vs. 行内元素#

• 块级元素（如 <div>, <h1>, <p>）：独占一行，默认宽度100%，可设宽高。
• 行内元素（如 <span>, <a>, <img>）：与周围内容排在同一行，宽高由内容撑开。

7. 注释（Comments）#

注释不会被浏览器渲染，仅用于程序员标记代码，方便后期维护。

1
<!-- 这里是注释，浏览器看不见我 -->