### HTML5标签整理知识点
#### 一、概述
HTML5是HyperText Markup Language（超文本标记语言）的第五个版本，它为Web开发者提供了更强大的功能来构建网站和应用程序。HTML5不仅增强了对多媒体的支持，还引入了许多新的标签来帮助开发者更好地组织网页内容。本文将详细介绍HTML5中常用的标签及其用途。
#### 二、按字母顺序排列的新标签
在HTML5中，新增了一些标签以适应现代网页的需求，这些标签包括：
- `<article>`：用于表示文档、页面或应用中的独立内容块。
- `<aside>`：用于表示与页面主要内容相关的辅助信息。
- `<audio>`：用于嵌入音频文件。
- `<canvas>`：用于在页面上绘制图形。
- `<details>`：用于创建可以展开和折叠的内容。
- `<figcaption>`：用于为`<figure>`元素添加标题或图例。
- `<figure>`：用于对媒介内容进行分组，并可包含标题。
- `<footer>`：用于定义文档或节的底部。
- `<header>`：用于定义文档或节的头部。
- `<main>`：用于指定文档的主要内容。
- `<mark>`：用于突出显示文档中的重要文本。
- `<meter>`：用于表示标量测量。
- `<nav>`：用于定义页面上的导航链接。
- `<progress>`：用于表示任务的完成进度。
- `<section>`：用于定义文档中的节。
- `<source>`：用于为媒体元素指定多个数据源。
- `<summary>`：用于`<details>`元素中作为标题的按钮。
- `<time>`：用于表示时间或日期。
- `<video>`：用于嵌入视频文件。
#### 三、按功能类别排列
**1. 基础**
- `<html>`：文档根元素。
- `<head>`：包含文档元数据。
- `<body>`：包含文档主体内容。
- `<title>`：文档标题。
- `<meta>`：定义文档元信息。
**2. 格式**
- `<strong>`：表示重要的文本。
- `<em>`：表示强调的文本。
- `<b>`：表示加粗的文本。
- `<i>`：表示斜体的文本。
- `<small>`：表示小号文本。
- `<s>`：表示已删除的文本。
- `<u>`：表示下划线的文本。
- `<sub>`：表示下标文本。
- `<sup>`：表示上标文本。
**3. 表单**
- `<form>`：定义表单。
- `<input>`：定义输入控件。
- `<label>`：定义输入控件的标签。
- `<textarea>`：定义多行文本输入。
- `<select>`：定义下拉列表。
- `<option>`：定义下拉列表中的选项。
- `<button>`：定义按钮。
- `<fieldset>`：定义一组相关的表单控件。
- `<legend>`：定义`<fieldset>`的标题。
**4. 框架**
- `<iframe>`：定义内联框架。
- `<frameset>`：定义框架集。
- `<frame>`：定义框架集的窗口或框架。
**5. 图像**
- `<img>`：定义图像。
- `<figure>`：定义媒介内容。
- `<figcaption>`：定义`<figure>`的标题或图例。
**6. 音频/视频**
- `<audio>`：定义音频内容。
- `<video>`：定义视频内容。
- `<source>`：定义媒体元素的多个数据源。
**7. 链接**
- `<a>`：定义超链接。
- `<link>`：定义文档与外部资源的关系。
**8. 列表**
- `<ul>`：定义无序列表。
- `<ol>`：定义有序列表。
- `<li>`：定义列表项。
**9. 表格**
- `<table>`：定义表格。
- `<tr>`：定义表格行。
- `<td>`：定义表格单元格。
- `<th>`：定义表格表头单元格。
- `<thead>`：定义表格头部。
- `<tfoot>`：定义表格脚部。
- `<tbody>`：定义表格主体。
**10. 样式/节**
- `<div>`：定义文档中的节。
- `<span>`：定义行内元素。
- `<section>`：定义文档中的节。
- `<article>`：定义文档中的独立部分。
- `<aside>`：定义文档中的辅助信息。
**11. 元信息**
- `<meta>`：定义文档元信息。
**12. 编程**
- `<script>`：定义客户端脚本。
- `<noscript>`：定义不支持客户端脚本时的替代内容。
- `<template>`：定义文档或应用程序的模板。
- `<iframe>`：定义内联框架。
#### 四、标准属性
**1. 核心属性(Core Attributes)**
- `id`：定义元素的唯一标识符。
- `class`：定义元素的一个或多个类名。
- `style`：定义元素的内联样式。
- `title`：定义元素的额外信息提示。
**2. 语言属性(Language Attributes)**
- `lang`：定义元素的语言。
- `xml:lang`：定义XML文档中的语言。
**3. 键盘属性(Keyboard Attributes)**
- `accesskey`：定义键盘快捷键。
- `tabindex`：定义元素在Tab键顺序中的位置。
#### 五、示例
以下是一个简单的HTML5文档结构示例：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的HTML5页面</title>
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
<section>
<article>
<h2>最新新闻</h2>
<p>这里是新闻内容...</p>
</article>
</section>
<footer>
<p>© 2023 我的网站</p>
</footer>
</body>
</html>
```
通过以上介绍，我们可以看到HTML5不仅包含了传统HTML的所有特性，还增加了很多新的元素和属性来满足现代Web开发的需求。正确使用这些标签可以帮助我们创建语义化更强、结构更清晰的网页。
