HTML 各种标签的使用说明书

1. HTML 简介

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它使用一系列标签来描述网页的结构和内容，这些标签被浏览器解释并渲染成用户看到的网页。HTML是构建Web的基础，通常与CSS（层叠样式表）和JavaScript一起使用，以创建丰富多彩的交互式网页。

基本特点

由一系列标签组成，标签通常成对出现（开始标签和结束标签）
标签可以包含属性，提供额外的信息
不区分大小写，但推荐使用小写
是一种标记语言，不是编程语言
由万维网联盟（W3C）维护和标准化

2. HTML 文档结构

一个标准的HTML文档具有以下基本结构：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>页面标题</title><!-- 其他头部信息，如CSS、JavaScript等 -->
</head>
<body><!-- 页面内容，如文本、图像、链接等 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个HTML5文档
<html>：HTML文档的根元素
<head>：包含文档的元数据，如标题、字符集、样式等
<body>：包含用户可见的页面内容

3. 基本结构标签

3.1 `<!DOCTYPE>` 标签

<!DOCTYPE> 声明位于HTML文档的第一行，用于告诉浏览器文档使用的HTML版本。

语法：

<!DOCTYPE html>  <!-- HTML5 文档类型声明 -->

说明：在HTML5中，<!DOCTYPE> 声明非常简单，不区分大小写，但推荐使用上面的格式。

3.2 `<html>` 标签

<html> 标签是HTML文档的根元素，所有其他HTML元素都应该包含在<html>标签内。

语法：

<html lang="zh-CN"><!-- 文档内容 -->
</html>

属性：

lang：指定文档的主要语言，有助于屏幕阅读器和搜索引擎

3.3 `<head>` 标签

<head> 标签包含文档的元数据，这些信息不会显示在网页上，但对于浏览器和搜索引擎很重要。

语法：

<head><!-- 元数据内容 -->
</head>

3.4 `<title>` 标签

<title> 标签定义文档的标题，显示在浏览器的标题栏或标签页上，也是搜索引擎结果中的页面标题。

语法：

<head><title>我的第一个HTML页面</title>
</head>

3.5 `<meta>` 标签

<meta> 标签提供关于HTML文档的元数据，如字符集、描述、关键词等。

语法：

<head><meta charset="UTF-8"><meta name="description" content="这是一个HTML教程页面"><meta name="keywords" content="HTML,教程,标签"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

常用属性：

charset：设置文档的字符编码
name：定义元数据的名称
content：定义元数据的值
viewport：用于响应式网页设计，控制页面在移动设备上的显示

3.6 `<body>` 标签

<body> 标签包含HTML文档的可见内容，如文本、图像、链接、表格等。

语法：

<body><!-- 可见内容 -->
</body>

常用属性：

bgcolor：设置背景颜色（HTML5已废弃，推荐使用CSS）
text：设置文本颜色（HTML5已废弃，推荐使用CSS）

4. 文本标签

4.1 标题标签 `<h1>` 到 `<h6>`

标题标签用于定义HTML文档中的标题，从 <h1> 到 <h6>，重要性依次递减。

语法：

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

说明：

<h1> 是最重要的标题，一个页面最好只使用一个 <h1> 标签
标题标签有助于SEO（搜索引擎优化）和文档结构

4.2 段落标签 `<p>`

<p> 标签用于定义段落。

语法：

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

常用属性：

align：设置段落文本的对齐方式（HTML5已废弃，推荐使用CSS）

4.3 换行标签 `<br>`

<br> 标签用于插入一个换行符，是一个空标签（没有结束标签）。

语法：

<p>这是第一行<br>这是第二行</p>

4.4 水平线标签 `<hr>`

<hr> 标签用于插入一条水平线，也是一个空标签。

语法：

<p>这是一段文字。</p>
<hr>
<p>这是另一段文字。</p>

常用属性：

width：设置水平线的宽度
size：设置水平线的高度
color：设置水平线的颜色（HTML5已废弃，推荐使用CSS）

4.5 文本格式化标签

加粗标签 <strong> 和 <b>

<strong>这段文字会被加粗显示（强调重要性）</strong>
<b>这段文字也会被加粗显示（仅视觉加粗）</b>

斜体标签 <em> 和 <i>

<em>这段文字会以斜体显示（强调）</em>
<i>这段文字也会以斜体显示（仅视觉斜体）</i>

下划线标签 <u>

<u>这段文字会有下划线</u>

删除线标签 <del>

<del>这段文字会有删除线</del>

上标和下标标签 <sup> 和 <sub>

2<sup>3</sup> = 8
H<sub>2</sub>O 是水的化学式

大号和小号标签 <big> 和 <small>

<big>这段文字会大一些</big>
<small>这段文字会小一些</small>

5. 链接标签

5.1 超链接标签 `<a>`

<a> 标签用于创建超链接，可以链接到其他网页、文件、同一页面的位置等。

语法：

<a href="https://www.example.com">访问示例网站</a>

常用属性：

href：指定链接的目标地址
target：指定在何处打开链接文档
- _blank：在新窗口或标签页中打开
- _self：在当前窗口中打开（默认）
- _parent：在父框架中打开
- _top：在整个窗口中打开
title：设置鼠标悬停时显示的提示文本
download：指定链接的目标将被下载而非导航

示例：

<!-- 在新窗口打开链接 -->
<a href="https://www.example.com" target="_blank">在新窗口打开</a><!-- 链接到同一页面的特定位置 -->
<a href="#section1">跳转到第一部分</a>
...
<h2 id="section1">第一部分</h2><!-- 下载链接 -->
<a href="document.pdf" download="我的文档.pdf">下载PDF文档</a>

6. 图像标签

6.1 图像标签 `<img>`

<img> 标签用于在HTML页面中嵌入图像，是一个空标签。

语法：

<img src="image.jpg" alt="描述图像的文本" width="300" height="200">

常用属性：

src：指定图像的URL（路径）
alt：指定图像无法显示时的替代文本，对SEO和可访问性很重要
width：设置图像的宽度
height：设置图像的高度
title：设置鼠标悬停时显示的提示文本
loading：指定图像的加载方式（lazy 表示延迟加载）

示例：

<!-- 基本图像 -->
<img src="cat.jpg" alt="一只可爱的猫" width="400" height="300"><!-- 带有标题的图像 -->
<img src="dog.jpg" alt="一只快乐的狗" title="这是我家的宠物狗"><!-- 延迟加载的图像 -->
<img src="large-image.jpg" alt="一张大图" loading="lazy">

6.2 图像映射 `<map>` 和 `<area>`

<map> 和 <area> 标签用于创建图像映射，即将图像分成多个可点击区域，每个区域链接到不同的目标。

语法：

<img src="image.jpg" alt="图像映射示例" usemap="#imagemap"><map name="imagemap"><area shape="rect" coords="0,0,100,100" href="page1.html" alt="矩形区域"><area shape="circle" coords="150,150,50" href="page2.html" alt="圆形区域"><area shape="poly" coords="200,200,250,250,200,300" href="page3.html" alt="多边形区域">
</map>

说明：

<img> 标签的 usemap 属性必须与 <map> 标签的 name 属性匹配
<area> 标签的 shape 属性定义区域形状（rect、circle、poly 或 default）
<area> 标签的 coords 属性定义区域的坐标

7. 列表标签

7.1 无序列表 `<ul>`

<ul> 标签用于创建无序列表，每个列表项使用 <li> 标签定义。

语法：

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ul>

常用属性：

type：设置列表项标记的类型（disc、circle、square，HTML5已废弃，推荐使用CSS）

7.2 有序列表 `<ol>`

<ol> 标签用于创建有序列表，每个列表项使用 <li> 标签定义，列表项前会自动添加数字。

语法：

<ol><li>第一步</li><li>第二步</li><li>第三步</li>
</ol>

常用属性：

type：设置列表项标记的类型（1、A、a、I、i）
start：设置有序列表的起始值
reversed：指定列表顺序为降序

示例：

<!-- 从5开始的有序列表 -->
<ol start="5"><li>第五步</li><li>第六步</li><li>第七步</li>
</ol><!-- 字母顺序的有序列表 -->
<ol type="A"><li>第一项</li><li>第二项</li><li>第三项</li>
</ol><!-- 降序的有序列表 -->
<ol reversed><li>最后一步</li><li>倒数第二步</li><li>倒数第三步</li>
</ol>

7.3 定义列表 `<dl>`、`<dt>` 和 `<dd>`

定义列表用于展示术语及其定义，<dl> 是定义列表的容器，<dt> 用于定义术语，<dd> 用于定义术语的描述。

语法：

<dl><dt>HTML</dt><dd>超文本标记语言，用于创建网页结构。</dd><dt>CSS</dt><dd>层叠样式表，用于描述网页的呈现方式。</dd><dt>JavaScript</dt><dd>一种编程语言，用于实现网页的交互功能。</dd>
</dl>

8. 表格标签

8.1 表格基本结构

表格由 <table> 标签定义，包含行（<tr>）、表头单元格（<th>）和数据单元格（<td>）。

语法：

<table><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><td>张三</td><td>28</td><td>工程师</td></tr><tr><td>李四</td><td>32</td><td>设计师</td></tr>
</table>

8.2 常用表格标签

<table>：定义表格
<tr>：定义表格行
<th>：定义表头单元格（默认加粗居中）
<td>：定义数据单元格
<thead>：定义表格的表头部分
<tbody>：定义表格的主体部分
<tfoot>：定义表格的页脚部分
<caption>：定义表格的标题
<col>：定义表格列的属性
<colgroup>：定义表格列的分组

示例：

<table border="1"><caption>员工信息表</caption><thead><tr><th>姓名</th><th>年龄</th><th>部门</th></tr></thead><tbody><tr><td>张三</td><td>28</td><td>技术部</td></tr><tr><td>李四</td><td>32</td><td>市场部</td></tr></tbody><tfoot><tr><td colspan="3">总计：2名员工</td></tr></tfoot>
</table>

8.3 单元格合并

通过 colspan 和 rowspan 属性可以合并单元格：

colspan：横向合并单元格（跨列）
rowspan：纵向合并单元格（跨行）

示例：

<table border="1"><tr><th colspan="2">个人信息</th><th>联系方式</th></tr><tr><td>姓名</td><td>张三</td><td rowspan="2">13800138000</td></tr><tr><td>年龄</td><td>28</td></tr>
</table>

9. 表单标签

9.1 表单基本结构

表单由 <form> 标签定义，用于收集用户输入的数据并提交到服务器。

语法：

<form action="submit.php" method="post"><!-- 表单控件 --><input type="submit" value="提交">
</form>

常用属性：

action：指定表单数据提交的目标URL
method：指定提交方法（get 或 post）
target：指定在何处显示提交表单后的响应
enctype：指定表单数据的编码类型（用于文件上传）

9.2 表单控件

输入框 `<input>`

<input> 标签是最常用的表单控件，通过 type 属性可以创建不同类型的输入字段。

常用类型：

text：单行文本输入框
password：密码输入框（输入内容会被隐藏）
number：数字输入框
email：电子邮件输入框（会进行基本验证）
tel：电话号码输入框
url：URL输入框
date：日期选择器
checkbox：复选框
radio：单选按钮
file：文件上传控件
submit：提交按钮
reset：重置按钮
button：普通按钮
hidden：隐藏字段

示例：

<form><div><label for="username">用户名：</label><input type="text" id="username" name="username" required></div><div><label for="password">密码：</label><input type="password" id="password" name="password" minlength="6" required></div><div><label for="email">邮箱：</label><input type="email" id="email" name="email" required></div><div><label>性别：</label><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></div><div><label>爱好：</label><input type="checkbox" id="reading" name="hobbies[]" value="reading"><label for="reading">阅读</label><input type="checkbox" id="sports" name="hobbies[]" value="sports"><label for="sports">运动</label><input type="checkbox" id="music" name="hobbies[]" value="music"><label for="music">音乐</label></div><div><input type="submit" value="提交"><input type="reset" value="重置"></div>
</form>

下拉列表 `<select>` 和 `<option>`

<select> 标签用于创建下拉列表，<option> 标签定义下拉列表中的选项。

语法：

<label for="city">选择城市：</label>
<select id="city" name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option>
</select>

常用属性：

multiple：允许选择多个选项
size：指定可见选项的数量
selected：设置选项默认被选中

示例：

<!-- 多选下拉列表 -->
<select name="languages[]" multiple size="3"><option value="html">HTML</option><option value="css" selected>CSS</option><option value="javascript">JavaScript</option><option value="python">Python</option><option value="java">Java</option>
</select>

文本域 `<textarea>`

<textarea> 标签用于创建多行文本输入框。

语法：

<label for="message">留言：</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="请输入您的留言..."></textarea>

常用属性：

rows：设置文本域的行数
cols：设置文本域的列数
placeholder：设置提示文本
readonly：设置文本域为只读
required：设置为必填项

按钮 `<button>`

<button> 标签用于创建可点击的按钮，比 <input type="button"> 提供了更丰富的功能。

语法：

<button type="button">点击我</button>
<button type="submit">提交表单</button>
<button type="reset">重置表单</button>

常用属性：

type：设置按钮类型（button、submit、reset）
disabled：设置按钮为禁用状态

示例：

<button type="button" onclick="alert('Hello!')">点击弹出提示</button>

10. 结构标签（HTML5新增）

HTML5引入了一系列新的结构标签，使文档结构更加清晰和语义化。

10.1 主要结构标签

<header>：定义文档的头部区域，通常包含标题、Logo、导航等
<nav>：定义导航链接的部分
<main>：定义文档的主要内容区域
<section>：定义文档中的一个区域或节
<article>：定义独立的、完整的内容块（如博客文章、评论等）
<aside>：定义文档的侧边栏或附加信息
<footer>：定义文档的页脚区域，通常包含版权信息、联系方式等

示例：

<!DOCTYPE html>
<html>
<head><title>网页标题</title>
</head>
<body><header><h1>网站标题</h1><nav><ul><li><a href="#home">首页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系我们</a></li></ul></nav></header><main><section><h2>最新新闻</h2><article><h3>新闻标题1</h3><p>新闻内容...</p></article><article><h3>新闻标题2</h3><p>新闻内容...</p></article></section><aside><h3>相关链接</h3><ul><li><a href="#">链接1</a></li><li><a href="#">链接2</a></li></ul></aside></main><footer><p>© 2023 网站名称. 保留所有权利.</p></footer>
</body>
</html>

10.2 其他HTML5结构标签

<figure>：定义自包含的内容（如图像、图表、代码等）
<figcaption>：定义 <figure> 元素的标题或说明
<details>：定义用户可以展开或折叠的交互元素
<summary>：定义 <details> 元素的可见标题
<mark>：定义需要突出显示或标记的文本
<time>：定义日期或时间

示例：

<!-- figure和figcaption -->
<figure><img src="example.jpg" alt="示例图片"><figcaption>示例图片的说明</figcaption>
</figure><!-- details和summary -->
<details><summary>点击展开更多信息</summary><p>这里是展开后显示的详细内容。</p>
</details><!-- mark和time -->
<p>我们将在<mark><time datetime="2023-12-25">2023年12月25日</time></mark>举行年度大会。</p>

11. 多媒体标签

11.1 音频标签 `<audio>`

<audio> 标签用于在HTML页面中嵌入音频内容。

语法：

<audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg">您的浏览器不支持音频播放。
</audio>

常用属性：

controls：显示音频控件（播放/暂停、音量等）
autoplay：音频加载后自动播放（请注意：出于用户体验考虑，许多浏览器已不再支持自动播放）
loop：音频循环播放
muted：音频默认静音
preload：指定音频的预加载方式（auto、metadata、none）

11.2 视频标签 `<video>`

<video> 标签用于在HTML页面中嵌入视频内容。

语法：

<video width="640" height="360" controls><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm">您的浏览器不支持视频播放。
</video>

常用属性：

controls：显示视频控件
width 和 height：设置视频的宽度和高度
autoplay：视频加载后自动播放
loop：视频循环播放
muted：视频默认静音
poster：指定视频播放前显示的图像
preload：指定视频的预加载方式

12. 框架标签

12.1 内联框架 `<iframe>`

<iframe> 标签用于在当前HTML页面中嵌入另一个HTML页面。

语法：

<iframe src="https://www.example.com" width="800" height="600" title="示例页面"></iframe>

常用属性：

src：指定要嵌入的页面的URL
width 和 height：设置iframe的宽度和高度
title：设置iframe的标题，提高可访问性
frameborder：设置是否显示边框（HTML5已废弃，推荐使用CSS）
allowfullscreen：允许iframe中的内容全屏显示
sandbox：启用iframe的沙盒模式，提高安全性

示例：

<!-- 嵌入地图 -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3052.6566404359295!2d116.404444!3d39.915555!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzjCsDU0JzA5LjIiTiAxMTbCsDI0JzE2LjAiVw!5e0!3m2!1szh-CN!2sus!4v1598267890000!5m2!1szh-CN!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe><!-- 嵌入YouTube视频 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube视频" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

13. 全局属性

全局属性是可以应用于大多数HTML元素的属性。以下是一些常用的全局属性：

属性	描述
`id`	为元素指定唯一标识符
`class`	为元素指定一个或多个类名，用于CSS样式和JavaScript操作
`style`	为元素指定内联CSS样式
`title`	设置元素的额外信息，通常显示为工具提示
`lang`	指定元素内容的语言
`dir`	指定元素内容的文本方向（`ltr`、`rtl`、`auto`）
`hidden`	隐藏元素
`accesskey`	设置访问元素的快捷键
`tabindex`	设置元素的Tab键导航顺序
`contenteditable`	指定元素内容是否可编辑
`draggable`	指定元素是否可拖动
`spellcheck`	指定是否对元素内容进行拼写和语法检查

示例：

<!-- 使用id和class属性 -->
<div id="header" class="container"><h1>页面标题</h1>
</div><!-- 使用内联style属性 -->
<p style="color: blue; font-size: 16px;">这段文字是蓝色的，大小为16px。</p><!-- 使用title属性 -->
<img src="image.jpg" alt="示例图片" title="这是一张示例图片"><!-- 使用contenteditable属性 -->
<div contenteditable="true">点击此处编辑此文本...</div>