HTML 零基础学习教程

1. HTML 简介

HTML（HyperText Markup Language，超文本标记语言）是一种用于定义网页内容结构的标记语言，而非编程语言。它通过**标签（tag）**来标记文本、图像等内容，使浏览器能够将结构化的信息呈现给用户 (HTML教程①-人人都懂的HTML基础知识 - 安木夕 - 博客园)。一个 HTML 文件通常以.html扩展名保存，浏览器读取该文件并将其渲染为网页。

在万维网中，HTML 与 CSS、JavaScript 一起构成了网页的基础：

HTML：结构 – 定义网页内容和结构（例如标题、段落、图片、链接等）。
CSS：表现 – 控制网页的外观样式（例如颜色、布局、字体）。
JavaScript：交互 – 实现网页的动态交互效果（例如响应按钮点击、更改内容）。

通过学习 HTML，我们能够搭建网页的骨架，再配合 CSS 美化样式、使用 JavaScript 增强交互，从而创建出丰富多彩的现代网站。

2. HTML 文档结构

一个 HTML 文档有固定的基本结构，主要包括文档类型声明和 HTML 元素的基本框架，如下：

<!DOCTYPE html>：文档类型声明，告诉浏览器按照 HTML5 标准解析页面 (HTML教程①-人人都懂的HTML基础知识 - 安木夕 - 博客园)。它应位于文档第一行。
<html>...</html>：根元素，表示整个 HTML 页面。通常会包含 lang 属性指定语言，例如 <html lang="zh-CN"> 表示页面语言为简体中文。
<head>...</head>：文档头部，用于包含页面的元数据（metadata），例如字符编码、标题、CSS样式表、脚本引用等 (HTML教程①-人人都懂的HTML基础知识 - 安木夕 - 博客园)。头部内容不会直接显示给用户。
<body>...</body>：文档主体，网页可见内容的主体部分，包含文本、图像、链接等实际要展示给用户的元素 (HTML教程①-人人都懂的HTML基础知识 - 安木夕 - 博客园)。

下面是一个简单的 HTML5 页面基本结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">             <!-- 设置字符编码，UTF-8 支持多数语言 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端适配 -->
    <title>我的第一个网页</title>       <!-- 网页标题，将显示在浏览器标签页上 -->
</head>
<body>
    <!-- 网页主体内容 -->
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个 HTML 网页！</p>
</body>
</html>

在以上结构中：

<meta charset="UTF-8"> 声明网页使用 UTF-8 编码，确保中文等字符正常显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 用于响应式设计，保证在移动设备上有良好的显示效果。
<title> 标签定义了页面标题。
<h1> 和 <p> 位于 <body> 内，代表页面内容的一个主标题和一个段落。

2.1 引入 CSS 和 JavaScript

通常，我们还会在 HTML 的 <head> 或 <body> 中引入外部的 CSS 和 JavaScript 文件，以增加样式和交互功能：

使用 <link> 标签将外部 CSS 样式表文件链接到 HTML。例如：
```
<link rel="stylesheet" href="styles.css">
```
这行代码告诉浏览器加载名为styles.css的样式文件，并应用其中定义的样式。
使用 <script> 标签引入外部的 JavaScript 脚本文件。例如：
```
<script src="main.js"></script>
```
这行代码会加载名为main.js的脚本文件并执行其中的代码。<script> 是双标签，如果脚本内容直接写在 HTML 中，需要用 <script>...</script> 包裹代码。

以上 <link> 和 <script> 标签一般放在 <head> 部分，这样可以在页面内容加载前就加载样式和脚本。不过，出于性能考虑，有时也会将 <script> 放在 <body> 底部，以避免脚本执行阻塞页面内容显示。对于初学者，理解其用法即可。

3. HTML 基本语法

HTML 通过**元素（element）**来组织内容。一个元素通常由起始标签、内容和结束标签组成，如：

<p>这是一个段落。</p>

这里 <p> 是段落（paragraph）元素的起始标签，</p> 是结束标签，中间的文本是元素的内容。大多数 HTML 元素都遵循这种起始-结束标签的结构。

标签和属性： HTML 标签使用尖括号包围，通常成对出现。标签可以包含属性（attribute），提供附加信息。属性写在起始标签内，格式为 属性名="属性值"，多个属性用空格分隔。例如：

<a href="https://example.com" target="_blank">示例链接</a>

在上述 <a> 超链接元素中，href 属性指定链接目标网址，target="_blank" 属性表示在新标签页打开链接。

大小写： HTML 标签名和属性名对大小写不敏感。但业界约定俗成使用小写字母书写标签和属性，这也是良好习惯。

嵌套： HTML 元素可以相互嵌套来形成文档结构。嵌套时需要注意正确闭合标签，且不应交叉嵌套。正确的嵌套示例：

<p>这是一个包含 <em>斜体</em> 文本的段落。</p>

错误的嵌套（标签交叉）示例：

<!-- 错误的嵌套示例，不要这样做 -->
<p>这是<b>粗体文本</p></b>

上例中 <b> 没有在 <p> 内正确闭合，会导致页面结构混乱。

空元素（自闭合标签）： 有些 HTML 元素是空元素，没有子内容和结束标签，例如<br>换行、<hr>水平线、<img>图片、<input>表单输入等。这些标签在 HTML5 中可以直接写成单一标签（无需自闭合斜杠/） (HTML教程①-人人都懂的HTML基础知识 - 安木夕 - 博客园)。例如：<br> 或 <img src="photo.jpg" alt="照片">。

注释： HTML 中的注释以  结束。注释内容不会在浏览器中显示，例如：

<!-- 这是一个注释，浏览器不会显示这段文本 -->

特殊字符： 某些字符在 HTML 中有特殊含义（例如 < 和 > 用于标签）。如果要在页面上显示这些符号，需要使用转义字符（实体）。常见的有：

< 表示小于号 <
> 表示大于号 >
& 表示符号 &
  表示不间断空格（空格字符在 HTML 会被合并，使用可插入固定空格）

4. 常用HTML标签

接下来介绍一些常用的 HTML 标签，包括文本、链接、图像、列表、表格和表单等。这些是构建网页时最基础也最常用的元素。

4.1 文本内容与段落

标题和段落： HTML 提供了6级标题标签 <h1> 到 <h6>，<h1> 级别最高，<h6> 级别最低 (

–

：HTML 区域标题元素 - HTML（超文本标记语言） | MDN)。另有 `<p>` 标签用于段落文本。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<p>这是一个段落，用于容纳一段文本内容。</p>

以上代码将显示一个一级标题、一个二级标题和一个普通段落。标题通常用于分隔内容结构，段落用于呈现正文文本。

文本格式： 可以使用一些标签对文字进行强调或格式调整：

<strong> 粗体强调（通常以粗体方式呈现，表示强调的重要内容）。
<em> 斜体强调（通常以斜体方式呈现，表示强调或引述）。
<br> 换行（插入一个换行符，开始新行）。
<hr> 水平线（插入一条水平分隔线，可用来分隔内容）。

示例：

<p>这是一个普通段落，其中包含 <strong>加粗文本</strong> 和 <em>斜体文本</em>。</p>
<p>换行演示：第一行<br>第二行</p>
<hr>
<p>以上是一条水平分割线。</p>

分组容器： <div> 和 <span> 是常用的无语义容器标签，用于分组和布局：

<div> 定义块级容器，常用于将大段内容组合在一起以便应用样式或脚本。
<span> 定义行内容器，常用于包裹段内文本以便单独设置样式。

例如：

<div class="notice">
    <p>这是一个提示信息。</p>
</div>
<p>您可以<span style="color:red;">高亮</span>文本的部分内容。</p>

上例中，<div> 包含一个段落并赋予类名notice（可用 CSS 设置其样式），<span> 则将段落中的“高亮”两字单独包裹并应用红色样式。

4.2 超链接

超链接使用 <a> 标签创建。通过其 href 属性指定链接目标，可以在网页之间导航。文本或其他元素放在 <a>...</a> 内部，点击它就会跳转到链接地址。

<p>请访问我的<a href="https://www.example.com" target="_blank">个人网站</a>了解更多信息。</p>

上例中，<a href="https://www.example.com">个人网站</a> 将“个人网站”四个字变为可点击的链接。href 属性是目标URL。target="_blank" 属性使链接在新标签页打开（默认为当前窗口打开）。

锚点链接： <a> 标签不仅可用于外部链接，还可以在页面内创建锚点。给页面某处元素设置 id，然后使用 href="#元素id" 可以跳转到该位置。例如：

<h2 id="section1">第1节：介绍</h2>
<p>...内容...</p>
<a href="#section1">回到介绍部分</a>

点击“回到介绍部分”链接，会跳转页面到 id 为section1的标题处。这对于长页面内的目录跳转很有用。

4.3 图像

使用 <img> 标签可以在网页中插入图像。<img>是一个空元素，没有闭合标签。其常用属性：

src：图片文件的路径或URL。
alt：替代文本，在图片无法显示时会显示此文本，也用于提高无障碍性（屏幕阅读器会读出alt内容）。

<img src="flower.jpg" alt="一朵漂亮的花" width="300" height="200">

上述代码插入了一张宽300像素、高200像素的图片。alt属性提供了图片的描述。尽量为每张图片提供有意义的alt文字，这对视障用户和SEO都有帮助。

图片路径可以是相对路径（如当前目录下的flower.jpg）或绝对路径（完整的URL）。如果图片文件与HTML文件不在同一路径下，需要确保路径正确指向图片位置。

4.4 列表

HTML 支持创建列表，有无序列表和有序列表两种：

无序列表使用 <ul>（unordered list）标签，列表项使用 <li> 标签。浏览器默认会在无序列表项前加圆点符号。
有序列表使用 <ol>（ordered list）标签，列表项同样使用 <li>，浏览器默认会按顺序为列表项编号。

示例：

<h3>我的爱好：</h3>
<ul>
    <li>阅读</li>
    <li>音乐</li>
    <li>旅行</li>
</ul>

<h3>每日待办事项：</h3>
<ol>
    <li>起床</li>
    <li>刷牙</li>
    <li>吃早餐</li>
</ol>

上面的代码将产生两个列表：“我的爱好”是无序列表，前三项分别是阅读、音乐、旅行；“每日待办事项”是有序列表，列出了起床等事项，浏览器会自动为它们标注序号1, 2, 3,...。

列表可以嵌套使用（例如在一个列表项中再嵌套一个子列表），从而表示层级结构的内容。

4.5 表格

表格用于显示结构化的数据，例如数据清单、日程表等。使用 <table> 元素创建表格，并结合表行 <tr>、表头单元格 <th> 和表格单元格 <td> 定义表格内容：

<table>：表格容器。
<tr>（table row）：表格行，一个 <tr> 内包含一行的单元格。
<th>（table header cell）：表头单元格，通常呈现为粗体居中，对应列的标题。
<td>（table data cell）：普通数据单元格。

示例：

<table border="1">
    <caption>人员信息表</caption>  <!-- 表格标题，可选 -->
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>28</td>
        <td>北京</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>22</td>
        <td>上海</td>
    </tr>
</table>

该代码将显示一个简单的人员信息表。<caption> 定义了表格的标题（可选项）。第一行使用 <th> 定义表头（姓名、年龄、城市），浏览器通常会以加粗居中样式显示表头。后面的行使用 <td> 填充数据。

border="1" 是表格的边框属性，用于示例快速查看表格边界。在实际开发中，推荐用 CSS 来控制表格样式，而非使用 HTML 的 border 属性。

表格还支持更复杂的结构，例如表头区 <thead>、主体区 <tbody>、页脚 <tfoot>，以及单元格跨行/跨列属性（rowspan、colspan）等。这些可在掌握基础知识后进一步学习。

4.6 表单

表单（form）用于收集用户输入，例如登录页的用户名/密码输入。表单通过 <form> 标签定义，内部可以包含各种可交互控件，例如文本框、单选按钮、复选框、提交按钮等。常见表单元素包括：

<input>：通用输入控件，通过其 type 属性决定具体类型（文本、密码、单选、复选、提交按钮等）。
<label>：标签，用于描述输入控件。通过 for 属性可将标签和对应的输入关联起来，提升可用性（点击标签会聚焦/选中对应输入）。for 的值应等于目标输入控件的 id。
<textarea>：多行文本输入区域。
<select>：下拉列表，内部使用 <option> 定义各选项。
<button>：按钮（可以指定type为button普通按钮，submit提交按钮等）。

一个简单的表单示例：

<form action="/submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" placeholder="输入用户名"><br><br>

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" placeholder="输入密码"><br><br>

    <input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
    <label for="subscribe">订阅新闻邮件</label><br><br>

    <input type="submit" value="提交">
</form>

在这个例子中：

<form action="/submit" method="post"> 定义了一个表单，action 属性指定表单提交的目标URL（如服务器端脚本），method 指定提交方法（GET或POST，一般敏感数据用POST）。
表单包含了两个文本输入框：用户名和密码，分别使用了 type="text" 和 type="password"。每个输入框都有对应的 <label> 标签，用于描述输入内容。
一个复选框 <input type="checkbox"> 让用户选择是否订阅，以及对应的标签。
<input type="submit"> 定义了提交按钮，点击后会将该表单的数据提交到 action 指定的位置。

注意：name 属性对于表单中的输入非常重要，提交时每个有 name 的字段会被包含在提交数据中（键为 name，值为用户输入）。如果缺少 name，该输入值将不会被提交。上例中用户名、密码字段都有各自的 name。

单选按钮（<input type="radio">）的用法与复选框类似，不同之处在于一组单选按钮应共享相同的 name，这样在该组中只能选中一个。例如：

<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

以上两个 radio 拥有相同的 name="gender"，因此用户只能在“男”或“女”中选择其一。

5. HTML5 新特性

HTML5 相对于早期版本，增加了一系列新元素和功能，使网页更具有语义化和功能性 (HTML教程①-人人都懂的HTML基础知识 - 安木夕 - 博客园)。以下是初学者应了解的一些重要 HTML5 新特性：

5.1 语义化标签

HTML5 引入了许多语义化标签，用来清晰地描述页面各部分的意义，使代码更易读、更有利于SEO和无障碍。常见的语义化元素包括：

<header>：页眉区块，通常包含网站标志、主导航等内容，表示页面或章节的头部。
<nav>：导航链接区块，专门用于一组导航链接。
<main>：页面主体的主要内容区域（在页面中应唯一）。
<section>：通用区段，可用于将内容分组为主题或章节。
<article>：文章内容，可独立分发或复用的一段完整内容（如博客文章、论坛帖子）。
<aside>：侧栏内容，表示与主要内容相关的附属信息（如侧边栏、提示框）。
<footer>：页脚区块，表示页面或章节的底部，一般包含版权信息、相关链接等。

这些标签在功能上与普通的 <div> 容器类似（不会直接影响外观），但通过使用它们，开发者和浏览器都更容易理解内容结构。例如，以前可能写：

<div id="header">...</div>
<div id="nav">...</div>
<div id="footer">...</div>

现在可以语义化地写成：

<header>...</header>
<nav>...</nav>
<footer>...</footer>

更直观地表明这些区块的用途。

一个简单的页面结构示例：

<header>
    <h1>我的网站</h1>
    <!-- 这里可以有导航菜单等 -->
</header>

<nav>
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about.html">关于我们</a></li>
        <li><a href="/contact.html">联系我们</a></li>
    </ul>
</nav>

<main>
    <article>
        <h2>文章标题</h2>
        <p>这里是一段文章的内容...</p>
    </article>

    <aside>
        <h3>相关信息</h3>
        <p>这是一个旁注或侧栏内容。</p>
    </aside>
</main>

<footer>
    <p>&copy; 2025 我的网站</p>
</footer>

在这个例子中，我们使用了 <header> 作为页面头部，<nav> 放导航链接，<main> 中包含主要内容和侧栏，底部用了 <footer>。即使不添加任何样式，HTML5 的语义化标签也让代码结构清晰易懂。

5.2 音频和视频标签

HTML5 之前嵌入音频、视频通常需要插件（如 Flash）。HTML5 引入了内置的多媒体标签 <audio> 和 <video>，方便地在网页中嵌入音频和视频内容。

音频 <audio>： 可以通过 <audio> 标签直接插入音频，使用其 src 属性或内部的 <source> 子标签指定音频源。常用属性：

controls：显示播放控件（播放/暂停按钮、进度条等）。
autoplay：页面加载后自动播放（通常不建议开启，以避免打扰用户）。
loop：循环播放。

示例：

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

如果浏览器不支持 HTML5 音频标签，上述示例中提供的后备文本“您的浏览器不支持 audio 元素。”会被显示。<source> 子标签允许提供多种格式的音频源，浏览器将选择支持的那个。

视频 <video>： 类似地，<video> 标签用于嵌入视频。常用属性：

controls：显示视频播放控件。
width 和 height：指定显示尺寸（像素）。
poster：指定视频加载前显示的预览图（通常是一个图片URL）。
autoplay 和 loop：含义与 audio 相同。

示例：

<video width="320" height="240" controls poster="preview.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持 video 标签。
</video>

上述代码将插入一个320x240像素的视频播放器，在浏览器支持情况下显示控制栏。提供了两种格式的源文件（mp4 和 webm），以增加浏览器兼容性。

5.3 表单新特性

HTML5 对表单进行了增强，添加了新的输入类型和属性，使表单交互更加丰富和方便。

新的输入类型（input type）：

email：用于电子邮件地址输入，浏览器在移动端会显示“@”等特殊键盘，并可在提交时验证格式。
url：用于网址输入，提交时可验证 URL 格式。
number：数字输入，可以在桌面端出现微调按钮，在移动端出现数字键盘。
range：范围选择，呈现为滑块控件，可通过 min、max、step 属性设置范围和步长。
date、month、week、time、datetime-local：日期和时间输入，浏览器会提供相应的日期/时间选择UI。
color：颜色选择器，点击会弹出调色板供用户选色。

新的表单属性：

placeholder：用于 <input> 或 <textarea>，在空白时显示提示文本。
required：布尔属性，指明字段为必填项，未填写将阻止表单提交并提示。
pattern：正则表达式模式，用于自定义输入格式校验，如 pattern="\d{3}-\d{4}-\d{4}" 可用于电话号码格式。
autocomplete：控制浏览器自动填充功能，可设为 "off" 禁用自动完成功能。
autofocus：页面加载时自动将光标聚焦到该字段。
multiple：用于 email 或 file 等输入类型，允许多个值，例如多个邮件地址或上传多个文件。

通过这些新类型和属性，浏览器可以在无需额外脚本的情况下对用户输入进行验证，并提供友好的输入界面。例如：

<form>
    <label for="userEmail">电子邮箱：</label>
    <input type="email" id="userEmail" name="userEmail" placeholder="name@example.com" required><br><br>

    <label for="quantity">数量选择（1-5）：</label>
    <input type="number" id="quantity" name="quantity" min="1" max="5" value="1"><br><br>

    <label for="colorPick">选择喜欢的颜色：</label>
    <input type="color" id="colorPick" name="colorPick" value="#0000ff"><br><br>

    <input type="submit" value="提交">
</form>

在这个表单中：

type="email" 的输入框要求用户输入合法的邮箱格式，且加了 required，如果不填或格式不正确，浏览器会自动阻止提交并提示错误，无需我们编程验证。
type="number" 的输入限制在 1 到 5 之间，超出范围时浏览器会提示错误。
type="color" 会显示一个颜色选择器，默认值设置为蓝色（#0000ff）。

这些 HTML5 表单特性大大减少了额外编写验证脚本的需要。

5.4 Canvas 画布

<canvas> 元素是 HTML5 提供的画布区域，可以通过 JavaScript 在上面绘制图形、制作动画等。Canvas 本身只是一个矩形区域，真正绘制内容需要使用其提供的脚本 API。

Canvas 标签常用属性：

width 和 height：指定画布的宽高（默认300x150像素，如果未设置）。
（也可以通过 CSS 控制 canvas 的显示大小，但最好使用属性指定像素大小以确保绘制行为按预期进行。）

示例：在 Canvas 上绘制一个矩形。

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #ccc;"></canvas>
<script>
    // 获取画布元素和绘图上下文
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');   // 2D绘图上下文
    // 使用填充颜色绘制矩形
    ctx.fillStyle = 'green';
    ctx.fillRect(20, 20, 100, 50);  // 在坐标(20,20)绘制一个100x50像素的绿色矩形
</script>

在上述代码中，我们首先在 HTML 中定义了一个 Canvas 元素，并用 JavaScript 获取它。通过调用 getContext('2d') 获取 2D 绘图上下文，然后使用 fillRect 方法绘制一个矩形。Canvas 提供了丰富的绘图函数，可以画线条、形状、插入图片，甚至绘制复杂动画或游戏。需要注意的是，Canvas 的内容是通过脚本绘制的，一旦绘制完成，结果就是一张位图，不具备像 DOM 元素那样的语义结构。

5.5 本地存储 (localStorage)

HTML5 引入了 Web 存储技术，其中 localStorage 是一种在浏览器中保存数据的方法。与传统的 cookie 不同，localStorage 容量更大，并且不会随每次请求发送到服务器。localStorage 中的数据保存在用户浏览器里，除非被主动清除，否则即使刷新页面或重启浏览器仍会存在（除非用户清除浏览数据或使用隐私模式）。

localStorage 提供简单的键值对存储接口：

localStorage.setItem(key, value)：将值存储到指定键。
localStorage.getItem(key)：读取指定键存储的值（若不存在则返回 null）。
localStorage.removeItem(key)：删除指定键的数据。
localStorage.clear()：清空所有 localStorage 数据。

存储的值会被转换为字符串。示例：

<script>
    // 将用户名存入本地存储
    localStorage.setItem('username', '小明');
    // 从本地存储获取用户名
    var user = localStorage.getItem('username');
    console.log(user); // 输出 "小明" 到控制台

    // 可将获取的值显示在页面上
    if (user) {
        document.write('欢迎回来，' + user + '！');
    }
</script>

上述脚本把键 username 的值设置为“小明”，然后读取出来并打印。如果执行过这段代码，下次打开页面时，localStorage.getItem('username') 仍能获取到之前保存的“小明”。这对于在客户端保存用户偏好设置、会话信息等很有用。不过要记得，localStorage 受同源策略限制，不同域名下的数据不能互相访问。

6. 综合示例与练习

学习了上述基础知识后，可以尝试编写一个包含多种元素的完整网页。下面是一个综合示例，演示如何将各种 HTML 元素结合在一起构建网页结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人简介</title>
    <style>
        /* 内嵌CSS，仅用于示例简单样式 */
        body { font-family: sans-serif; margin: 20px; }
        header { text-align: center; margin-bottom: 20px; }
        nav ul { list-style: none; padding: 0; }
        nav li { display: inline; margin: 0 10px; }
        nav a { text-decoration: none; color: #337ab7; }
        nav a:hover { text-decoration: underline; }
        section { margin-bottom: 20px; }
        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        th, td { border: 1px solid #aaa; padding: 8px; text-align: left; }
        footer { text-align: center; color: #666; font-size: 0.9em; }
    </style>
</head>
<body>

<header>
    <h1>欢迎来到我的主页</h1>
</header>

<nav>
    <ul>
        <li><a href="#about">关于我</a></li>
        <li><a href="#skills">技能列表</a></li>
        <li><a href="#contact">联系我</a></li>
    </ul>
</nav>

<main>
    <section id="about">
        <h2>关于我</h2>
        <p>大家好，我是小明，一名前端开发爱好者。</p>
        <p>我喜欢学习新技术，并分享给他人。</p>
        <img src="me.jpg" alt="我的照片" width="150">
    </section>

    <section id="skills">
        <h2>技能列表</h2>
        <ul>
            <li>HTML & CSS</li>
            <li>JavaScript</li>
            <li>简单的 Photoshop 图像处理</li>
        </ul>
    </section>

    <section id="contact">
        <h2>联系我</h2>
        <p>如果你有任何问题，可以通过下面的表单发送消息给我：</p>
        <form>
            <label for="msgName">姓名：</label>
            <input type="text" id="msgName" name="msgName" required><br><br>

            <label for="msgContent">留言内容：</label><br>
            <textarea id="msgContent" name="msgContent" rows="4" cols="50" placeholder="在此输入你的留言..." required></textarea><br><br>

            <button type="submit">发送</button>
        </form>
    </section>
</main>

<footer>
    <p>&copy; 2025 Xiao Ming. 版权所有.</p>
</footer>

</body>
</html>

这个页面包含：

页眉区域 (<header>) 和主标题 (<h1>)。
导航菜单 (<nav>)，链接锚点指向页面的不同部分（关于、技能、联系）。
三个章节 (<section>) 各自包含二级标题 (<h2>) 和相应内容：
- “关于我”部分包含段落和图片。
- “技能列表”部分包含无序列表列出技能项。
- “联系我”部分包含一段说明文字和一个联系表单，包括文本输入和多行文本域，以及提交按钮。
页脚 (<footer>) 注明版权信息。

通过以上示例，可以看到我们学习的各种标签如何在一个实际网页中配合使用。建议读者亲自将上述代码保存为 .html 文件并在浏览器中打开，看看效果如何。同时，可以尝试做以下练习：

修改内容： 将示例页面中的文本和图片替换为你自己的信息，制作一个属于你自己的“个人简介”页面。
添加表格： 在“技能列表”部分下方，新增一个表格 (<table>) 来展示你的项目经历，比如项目名称、年份、简介等。
运用本地存储： 尝试编写一小段 JavaScript，将访客在联系表单中输入的姓名存入 localStorage，并在用户下次访问页面时，用 JavaScript 自动填写到“姓名”输入框中。

通过实践练习，你将更牢固地掌握 HTML 的基础知识，并为后续学习 CSS 和 JavaScript 打下良好基础。祝你学习愉快！

参考资料：
【4】安木夕. HTML教程①-人人都懂的HTML基础知识 (HTML教程①-人人都懂的HTML基础知识 - 安木夕 - 博客园) (HTML教程①-人人都懂的HTML基础知识 - 安木夕 - 博客园) (HTML教程①-人人都懂的HTML基础知识 - 安木夕 - 博客园) (HTML教程①-人人都懂的HTML基础知识 - 安木夕 - 博客园) (HTML教程①-人人都懂的HTML基础知识 - 安木夕 - 博客园)
【10】安木夕. 关于HTML5 (HTML教程①-人人都懂的HTML基础知识 - 安木夕 - 博客园)
【25】MDN.

HTML 零基础学习教程

HTML 零基础学习教程

1. HTML 简介

2. HTML 文档结构

2.1 引入 CSS 和 JavaScript

3. HTML 基本语法

4. 常用HTML标签

4.1 文本内容与段落

–

：HTML 区域标题元素 - HTML（超文本标记语言） | MDN)。另有 `<p>` 标签用于段落文本。

4.2 超链接

4.3 图像

4.4 列表

4.5 表格

4.6 表单

5. HTML5 新特性

5.1 语义化标签

5.2 音频和视频标签

5.3 表单新特性

5.4 Canvas 画布

5.5 本地存储 (localStorage)

6. 综合示例与练习

–

：HTML 区域标题元素

CSS零基础教程

Mongoose 7.17 中文参考手册

问道语境

问道语境

HTML 零基础学习教程

HTML 零基础学习教程

1. HTML 简介

2. HTML 文档结构

2.1 引入 CSS 和 JavaScript

3. HTML 基本语法

4. 常用HTML标签

4.1 文本内容与段落

–

：HTML 区域标题元素 - HTML（超文本标记语言） | MDN)。另有 <p> 标签用于段落文本。

4.2 超链接

4.3 图像

4.4 列表

4.5 表格

4.6 表单

5. HTML5 新特性

5.1 语义化标签

5.2 音频和视频标签

5.3 表单新特性

5.4 Canvas 画布

5.5 本地存储 (localStorage)

6. 综合示例与练习

–

：HTML 区域标题元素

CSS零基础教程

Mongoose 7.17 中文参考手册

问道语境

问道语境

：HTML 区域标题元素 - HTML（超文本标记语言） | MDN)。另有 `<p>` 标签用于段落文本。