目录
- 1 结构元素
- 2 内容元素
- 3 修饰元素
- 4 功能元素
- 5 表单元素
元素是针对特定内容、结构或特性定义的，具体分为结构元素、内容元素和修饰元素等。
1 结构元素
结构元素用于构建网页文档的结构，多指块状元素，具体说明如下：
<！–…–>：定义HTML注释。位于<！–与–>之间的内容会被当成注释处理。
- html：文档的根元素。在HTML5中允许完全省略。
- head：定义文档的页面头。在HTML5中允许完全省略。
- title：定义文档的页面标题。
- body：定义文档的页面主体部分。
- div：在文档中的节。可以指定id、class、onclick等各种属性。
- span：与div相似。区别是span只表示一段一般性文本，其内容默认不会换行。
- ol：根据一定的排序进行列表。
- ul：没有排序的列表。
- li：每条列表项。
- dl：以定义的方式进行列表。
- dt：定义列表中的词条。
- dd：对定义的词条进行解释。
- del：定义删除的文本。
- ins：定义插入的文本。
- h1～h6：标题1～标题6，定义不同级别的标题。
- p：定义段落结构。
- hr：定义水平线。
- header：表示页面中一个内容区块或整个页面的标题。
- footer：表示整个页面或页面中一个内容区块的脚注。一般来说，包含创作者的姓名、联系信息及创作日期。
- section：表示页面中的一个内容区块，如章节、页眉、页脚或页面中的其他部分，可以与h1～h6等元素结合使用，标示文档结构。
- article：表示页面中的一块与上下文不相关的独立内容。如blog中的一篇文章。
- aside：表示article元素的内容之外的、与article元素的内容相关的辅助信息。
- nav：表示页面中导航链接的部分。
- main：表示网页中的主要内容。主要内容指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。
- figure：表示一段独立的流内容，一般表示文档主体流内容中的一个
独立单元。
包含各种结构元素的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档标题</title>
</head>
<body>
<!--使用标题-->
<h1>HTML5元素与属性</h1>
<h2>HTML5常用元素</h2>
<h3>HTML5结构元素</h3>
<h6>HTML5 段落6</h6>
<!-- 输出一条水平线 -->
<hr/>
<!-- span的使用 -->
<span>HTML5</span> <span>CSS3</span> <span>JavaScript</span>
<!-- 输出换行 -->
<br/>
<!-- div 的使用 -->
<div>HTML5</div><div>CSS3</div><div>JavaScript</div>
<!-- P 段落 -->
<p>HTML5</p><p>CSS3</p><p>JavaScript</p>
<!-- 无序表格 -->
<ul>
<li>无序表格1</li>
<li>无序表格2</li>
</ul>
<!-- 有序表格 -->
<ol>
<li>有序表格1</li>
<li>有序表格2</li>
</ol>
<!-- 自定义列表不仅仅是一列项目，而是项目及其注释的组合。 -->
<dl>
<dt>自定义1</dt>
<dd>- 自定义1的解释</dd>
<dt>自定义2</dt>
<dd>-自定义2的解释</dd>
</dl>
<del>删除的文本</del>
<ins>插入的文本</ins>
<section>页面的一个内容区块</section>
<article>页面中的一块于上下文不相关的独立内容，比如一片文章</article>
</body>
</html>
显示效果：
2 内容元素
- a：定义超链接。
- abbr：定义缩写词。
- acronym：定义取首字母的缩写。
- address：定义地址。
- dfn：定义条目。
- kbd：定义键盘键。
- samp：定义样本。
- var：定义变量。
- tt：定义打印机字体。
- code：定义计算机源代码。
- pre：定义预定义格式文本，保留源代码格式。
- blockquote：定义大块内容引用。
- cite：定义引文。
- q：定义引用短语。
- strong：定义重要文本。
- em：定义文本为重要。
3 修饰元素
- b：定义粗体。
- i：定义斜体。
- em：定义强调文本，实际效果与斜体文本差不多。
- big：定义文本增大。
- small：定义文本缩小。
- sup：定义文本上标。
- sub：定义文本下标。
- bdo：定义文本显示方向，该元素应该指定dir属性，属性值只能是ltr 或rtl。
- br：定义换行。
以上这些元素能包含文本、图像、超链接、表单控件元素等，还可以 和元素相互包含。
代码示例：
<body>
<span><b>加粗字体</b></span>
<span><i>斜体文本</i></span>
<span><i><b>加粗斜体文本</b></i></span>
<span><em>被强调的文本</em></span>
<small><span>小字号文本</span></small>
<div>普通文本<sup>上标文本</sup></div>
<span>普通文本<b><sub>下标加粗字体</sub></b></span>
<!-- 指定文本从左向右排列 -->
<bdo dir="ltr">从左向右排列的文本</bdo>
<!-- 指定文本从右向左排列 -->
<bdo dir="rtl">从右向左排列的文本</bdo>
</body>
4 功能元素
- hgroup：用于对整个页面或页面中一个内容区块的标题进行组合。
- video：定义视频。
- audio：定义音频。
- embed：用于插入各种多媒体，格式可以是MIDI、WAV、AIFF、 AU、MP3等。
- mark：用于在视觉上向用户呈现需要突出或高亮显示的文字。
- dialog：定义对话框或窗口。
- figcaption：定义figure元素的标题。
- time：表示日期或时间，也可以同时表示两者。
- canvas：表示图形，如图表和其他图像。这个元素本身没有行为，只提供一块画布，它把一个绘图API展现给客户端JavaScript，以使脚本能够 把想绘制的东西绘制到这块画布上。
- output：表示不同类型的输出。
- source：为媒介元素定义媒介资源。
- menu：表示菜单列表。
- command：表示命令按钮，如单选按钮、复选框等。 details：表示用户要求得到并且可以得到的细节信息。它可以和summary元素配合使用。summary元素提供标题，标题是可见的，用户单击标题时，会显示出细节信息。summary元素应该是details元素的第一个 子元素。
- summary：为details元素定义可见的标题。
- datalist：表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。
- datagrid：表示可选数据的树形列表。
- keygen：表示生成密钥。
- progress：表示运行中的进程，可以用来显示JavaScript中耗费时间的 函数的进程。 meter：度量给定范围内的数据。
- track：定义用在媒体播放器中的文本轨道。
5 表单元素
- form：用于生成输入表单，该元素不会生成可视化部分。一般其他表 单控件（如单选文本框、单选按钮、多选按钮、下拉框等）都放在< form>元素之内。
- input：是表单控件元素中功能最丰富的，可通过type属性生成不同类型的控件，包括单选文本框（type=“text”）、密码输入框（type=“password”）、隐藏域（type=“hidden”）、单选框（type=“radio”）、复选框（type=“checkbox”）、图像域（type=“image”）、文件上传域（type=“file”）、按钮（type=“button”）等。
- label：用于在表单中定义文本标签，这些标签可以对其他可生成请求参数的表单元素进行说明。
- button：用于定义一个按钮，在< button>元素的内部可以包含普通文本、文本格式化标签、图像等内容，这也是与< input type=“button”>按钮的不同之处。
- select：用于创建列表框或下拉列表框，该元素必须和< option>元素结合使用，每一个< option>元素代表一个列表项或菜单项。
- textarea：用于生成多行文本域。它可以指定文本域宽度（cols）、文本域高度（rows）和文本域最多可输入的字符数（maxlength）等属性。
- fieldset：用于对表单内控件进行分组。
