HTML5的标签类别_02

一、HTML5保留的常用标签

根据标签的功能特点归纳如下：

1. 基础标签
2. 文本格式标签
3. 列表标签
4. 表格标签
5. 图像标签
6. 超链接标签
7. 框架标签
8. 样式标签
9. 容器标签

1、基础标签
1.1段落标签<p></p>
用于形成一个新的段落，段落与段落之间默认为空一行进行分割（段落与段落之间会自动换行）
1.2标题标签<h1>~<h6>
共1~6级，字体逐级减小
1.3水平线标签<hr>
用于在网页上画一条水平线，在视觉上将文本分段
1.4换行标签<br>
用于在当前位置产生一个换行，相当于一次回车键所产生的效果。

2.文本格式标签
2.1斜体字标签<i>
2.2粗体字标签<b>和<strong>
2.3上标标签<sup>，如2²
下标标签<sub>,如CO
2.4修订标签<del>和<ins>
<del>删除线标签，在文字上显示一条水平贯穿线
<ins>下划线标签，为文字添加下划线
2.5预格式标签<pre>
将所标记的文本内容在显示时保留换行和空格的排版效果。

3.列表标签
3.1有序列表标签<ol>

<ol></ol>用于定义带有编号的有序列表，需要和列表项目标签<li></li>配合使用。

3.1.1有序列表标签

1. 默认的起始数值为1，可使用start属性重新定义编号起始值，如

<ol start="5">
		<li>第一项</li>
		<li>第二项</li>
	</ol>

3.1.2有序列表标签

1. 默认的编号样式为标准的阿拉伯数字（1,2,3,4）,如需使用其他编号样式，可使用type属性进行声明，如

<ol type="a" 或者type=“A/i/I”>
		<li>第一项</li>
		<li>第二项</li>
	</ol>

3.2无序列表标签<ul>
无序列表标签<ul></ul>用于定义不带标签的无序列表，也需要和列表项目标签<li>配合使用。
3.2.1基本格式如下：

<ul>
		<li>第一条</li>
		<li>第二条</li>
</ul>

3.2.2无序列表标签

• 默认的编号样式为实心圆形，嵌套在其他列表中的二级列表编号默认为空心圆形。代码如下：

<ul>
		<li>第一条</li>
		<li>第二条</li>
		<ul>
			<li>第一小跳</li>
			<li>第二小跳</li>
		</ul>
	</ul>

3.2.3如需自定义编号样式，可使用type属性进行声明，格式为：

<ul type="square">
		<li>第一小条</li>
</ul>

3.3定义列表标签<dl>
定义标签<dl></dl>是用于进行词条定义的特殊列表，每条表项需要结合词条标签<dt>和定义标签<dd>一起使用。词条标签<dt>需要标记在每个词条的开头，定义标签<dd>则需要标记在每个定义部分的开头。基本代码如下：

<dl>
		<dt>Coffee</dt>
		<dd>-black hot drink</dd>
		<dt>Milk</dt>
		<dd>-white cold drink</dd>
		<dt>自定义标题</dt>
		<dd>标题下对应的内容</dd>
	</dl>

4.表格标签
表格标签由<table></table>定义，每个表格中包含若干行（由单元行标签<tr></tr>显示），每一行又被分为若干列/单元格（由单元格标签<td></td>表示）。
4.1表格标签<table>
定义一个完整的表格
4.2表格行标签<tr>
定义表格中的一行
4.3单元格标签<td>
定义表格行中的一个数据单元格，table data
4.4表头标签<th>
用于定义表格的第一行表头，默认为粗体字、居中对齐。
4.5表格标题标签<caption>
为表格添加标题，该标题默认为居中对齐并显示在表格的顶部。
例：

<table border="1" >
		<caption>成绩表</caption>
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>总分</th>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>99</td>
		</tr>
		<tr>
			<td>2</td>
			<td>李四</td>
			<td>100</td>
		</tr>
	</table>

4.6

• 在<table>标签中可使用width和height设置表格的宽度和高度。
• 使用bgcolor属性为这个表格或有个单元格设置背景颜色；
• 使用bordercolor属性设置边框颜色；
• 使用cellspacing属性定义表格单元格之间的空间；
• 使用cellpadding属性表示单元格边框与单元格内容之间的距离；
• 使用colspan属性将两个或多个列合并为一个列；
• 使用rowspan属性将两个或多个行合并为一个行；

5.图像标签
图像标签<img>用于在网页中嵌入图片，该标签有两个常用属性：src属性和alt属性。src用于指明图像的存储路径；alt用于无法找到图像是显示替代文本，该属性可忽略不写。例1：

<img src="girl.jpg" alt="girl" width="358" height="523">

例2：

<img src=".jpg" alt="girl" width="358" height="523">

6.超链接标签

1. 超链接标签<a>用于在网页中标记文本或图像从而形成超链接，用户单击后将跳转到另一个指定的页面，从而实现浏览空间的跨越。
2. 超链接标签有两个重要属性：
   href——指定目标内容的URL地址
   target——指定目标内容的打开方式，默认为self自身窗口，blank为新窗口打开
   例：

 <a href="https://www.baidu.com">百度</a>
 <a href="https://huaban.com/discovery/illustration/" target="blank"><img src="partner.jpg"></a>

7.框架标签
7.1<iframe>标签规定一个内联框架，被用来在当前HTML文档中嵌入另一个文档。
语法：

<iframe src="URL"></iframe>

例：

<iframe src="Day04.html"></iframe>

7.2设置宽度、高度

<iframe src="Day04.html"  width="360" height="525"></iframe>

7.3移除边框

<iframe src="Day04.html" frameborder="0"></iframe>

7.4使用iframe来显示目标链接页面

<iframe src="Day04_1.html" name="iframe_a"></iframe>
	<p><a href="http://www.w3cschool.cn" target="iframe_a">WSCSchool</a></p>

8.容器标签
8.1<div>标签可将网页页面分成不同的独立成分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在<div></div>所标记的区域前后自动放置一个换行符。同样属于***块级元素的***还有段落标签

、表格标签<table>、标题标签<h1>~<h6>、<ul>

8.2<span>标签
<span>标签通常作为文本的容器，该标签是一个内联元素，与块级元素相反，内联元素不会自动在前后放置换行符，因此内联元素会默认在同一行显示。同样属于内联元素的还有<b>、<td>、<a>、<img>