2.1 HTML结构
标签和元素（50个常用的）
HTML标签是构建网页的基础。以下是一些常用的HTML标签，这些标签覆盖了大部分基本的页面结构和内容呈现需求：
-
<html>- HTML文档的根元素。 -
<head>- 包含文档的元数据，如标题、字符编码、样式和脚本链接等。 -
<title>- 定义文档的标题，显示在浏览器标签页上。 -
<body>- 包含页面的所有内容。 -
<h1>to<h6>- 定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。 -
<p>- 定义段落。 -
<a>- 定义超链接。 -
<img>- 定义图像。 -
<div>- 定义文档中的一个分区或节。 -
<span>- 用于对文档中的文本进行分区。 -
<ul>- 定义无序列表。 -
<ol>- 定义有序列表。 -
<li>- 定义列表项。 -
<dl>- 定义定义列表。 -
<dt>- 定义定义列表中的项目。 -
<dd>- 定义定义列表中的描述。 -
<table>- 定义表格。 -
<tr>- 定义表格中的行。 -
<th>- 定义表格中的表头单元格。 -
<td>- 定义表格中的标准单元格。 -
<thead>- 定义表格的表头。 -
<tbody>- 定义表格的主体。 -
<tfoot>- 定义表格的页脚。 -
<form>- 定义表单。 -
<input>- 定义输入字段。 -
<textarea>- 定义多行文本输入控件。 -
<button>- 定义按钮。 -
<select>- 定义下拉列表。 -
<option>- 定义下拉列表中的选项。 -
<optgroup>- 定义选项组。 -
<label>- 定义表单控件的标签。 -
<fieldset>- 定义一组相关的表单元素。 -
<legend>- 定义<fieldset>元素的标题。 -
<iframe>- 定义内联框架。 -
<script>- 定义客户端脚本。 -
<noscript>- 定义在浏览器不支持脚本时的替代内容。 -
<style>- 定义内部样式表。 -
<link>- 定义文档与外部资源的关系，通常用于链接样式表。 -
<meta>- 定义关于HTML文档的元信息。 -
<base>- 定义页面中所有链接的默认地址或默认目标。 -
<strong>- 定义重要文本。 -
<em>- 定义强调文本。 -
<blockquote>- 定义块引用。 -
<q>- 定义短的引用。 -
<cite>- 定义作品的标题。 -
<code>- 定义代码文本。 -
<samp>- 定义样本文本。 -
<kbd>- 定义键盘文本。 -
<var>- 定义变量。 -
<pre>- 定义预格式化文本。
文档结构
HTML文档的结构是指HTML标签在页面中的组织方式。一个良好的文档结构有助于搜索引擎优化（SEO）和可访问性。基本的HTML文档结构包括：
<!DOCTYPE html>：文档类型声明，对于HTML5文档，这通常是<!DOCTYPE html>。
<html>：根元素，包含整个页面的所有内容。
<head>：头部元素，包含元数据，如字符编码、页面标题、样式和脚本链接等。
<title>：定义页面标题，显示在浏览器标签页上。
<body>：主体元素，包含页面的所有内容，如文本、图片、视频等。
理解这些标签和文档结构对于创建有效的HTML页面至关重要。
2.2 常用HTML标签
标题和段落
标题用于定义文档中的标题，HTML提供了六级标题，分别是<h1>到<h6>。段落则由<p>标签定义。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- ... -->
<p>这是一个段落。</p>
图片和链接
图片由<img>标签定义，它是一个自我闭合的标签，通常需要src属性来指定图片的URL，以及alt属性来提供图片的替代文本。
<img src="image.jpg" alt="描述性文本">
链接由<a>标签定义，它通常需要href属性来指定链接的目标URL。
<a href="https://www.example.com">这是一个链接</a>
列表和表格
列表分为无序列表和有序列表。无序列表由<ul>标签定义，列表项由<li>标签定义。有序列表由<ol>标签定义，列表项同样由<li>标签定义。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<!-- ... -->
</ul>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<!-- ... -->
</ol>
表格由<table>标签定义，行由<tr>标签定义，单元格由<td>标签定义，表头单元格由<th>标签定义。
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<!-- ... -->
</table>
2.3 表单元素
文本输入和按钮
表单用于收集用户输入，由<form>标签定义。文本输入由<input>标签定义，按钮由<button>标签定义。
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<button type="submit">提交</button>
</form>
选择框和单选按钮
选择框由<select>标签定义，选项由<option>标签定义。单选按钮由<input>标签定义，其type属性设置为radio。
<form>
<label for="favorite fruit">最喜欢的 fruit：</label>
<select id="favorite fruit" name="favorite fruit">
<option value="apple">苹果</option>
<option value="orange">橙子</option>
<!-- ... -->
</select>
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
</form>
这些标签和元素是HTML中最基础的组成部分，理解它们的使用对于创建网页至关重要。
2.4 HTML5新特性
新的语义标签
HTML5引入了许多新的语义标签，这些标签提供了更多的意义和结构，使得HTML文档更加清晰和易于理解。以下是一些常用的HTML5语义标签：
<header> <!-- 用于定义文档或节的头部 -->
<nav> <!-- 用于定义导航链接的部分 -->
<section> <!-- 用于定义文档中的一个节 -->
<article> <!-- 用于定义独立的自包含内容 -->
<aside> <!-- 用于定义与页面内容轻微相关的辅助信息 -->
<footer> <!-- 用于定义文档或节的页脚 -->
<figure> <!-- 用于定义媒体内容及其标题 -->
<figcaption> <!-- 用于定义<figure>元素的标题 -->
<mark> <!-- 用于标记文本 -->
<time> <!-- 用于表示日期或时间 -->
音频和视频支持
HTML5增加了对音频和视频内容的原生支持，无需依赖插件。这可以通过<audio>和<video>标签实现。
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频元素。
</audio>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
您的浏览器不支持视频元素。
</video>
在这些标签中，controls属性添加了浏览器默认的播放控件。<source>标签用于指定不同格式的媒体文件，以确保兼容性。
2.5 小结
本章深入解析了HTML，包括HTML结构、常用标签、表单元素以及HTML5的新特性。通过本章的学习，您应该能够理解如何使用HTML来构建网页的基本结构和内容，以及如何利用HTML5的新特性来增强网页的功能和语义。下一章将介绍如何使用CSS来美化HTML页面。