[HTML5]-3-块状元素

引言

这篇文章介绍HTML中的内容分组元素,内容分组元素也被称作块状元素,当这种元素标签出现在文档中时,往往独占一行。

文章目录

0×1.内容分组元素实例

常见的内容分组标签有:p、hr、pre、 blockquote、ul、ol、li、dl、dt、dd、figure、figcaption、div,除此之外还有一少部分不是很常用的分组标签,本文没有给出实例,等以后使用到的时候再介绍;

分组元素有时也被称作块状元素,这种标签只要出现在文档中,就会独占一行。

a.p标签

这是我们最常见的分组标签,常用于定义段落(paragraph),你所看到的这段文字,就是包含在一对p标签对中的,将每一段文字放在一对p标签对中:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>p标签实例</title>
					</head>
					<body>
						<p>段落一</p>
						<p>段落二</p>
						<p>段落三</p>
						<p>段落N</p>
					</body>
					</html>
					

显示效果:

段落一

段落二

段落三

段落N

b.hr标签

hr标签可以单独出现,无需使用标签对的形式,它告诉浏览器解释器,在hr出现的位置插入一条水平线,用于分隔文档的不同部分:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>hr标签实例</title>
					</head>
					<body>
						<p>段落一</p>
						<hr>
						<p>段落二</p>
						<hr>
						<p>段落三</p>
						<hr>
						<p>段落N</p>
					</body>
					</html>
					

显示效果:

段落一


段落二


段落三


段落N

c.pre标签

pre标签能够保留其中文本的格式,空格和回车都被完整的保留并显示出来,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>pre标签实例</title>
					</head>
					<body>
						<!--在p标签中,字符与字符之间的多个空格会被自动压缩成一个空格,回车符会被忽略,最后仅显示成一行-->
						<p>
						1111 2222
						3333  4444
						5555   6666
						</p>
						<hr>
						<!--pre标签能将我们输入其中的文本的完整格式保留下来-->
						<pre>
						1111 2222
						3333  4444
						5555   6666
						</pre>
						<hr>
					</body>
					</html>
					

显示效果:

1111 2222 3333 4444 5555 6666


					1111 2222
					3333  4444
					5555   6666
					

请注意,pre中的文本显示底部多空出了一行,这是因为6666后面的回车符也被完整的记录下来,如果不想多空出这一行,结束标签应该紧随6666其后,另外,pre中的文本前面大概有两个缩进的距离,pre会将其中所有格式都记录下来,为了代码的美观本例确实在这些文本之前添加了两个缩进。

d.blockquote标签

blockquote标签用于引用一段内容,默认情况下(没有使用css控制的情况下)引用的内容将缩进显示,blockquote标签中包含一个cite属性,用于标明引用的内容的来源url:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>blockquote标签实例</title>
					</head>
					<body>
						<p>内容1</p>
						<blockquote cite="http://www.qingsword.com">
							<p>以下内容引用自:晴刃(www.qingsword.com)</p>
							<p>内容2</p>
							<p>内容3</p>
						</blockquote>
						<p>内容4</p>
					</body>
					</html>
					

显示效果:

内容1

以下内容引用自:晴刃(www.qingsword.com)

内容2

内容3

内容4

e.ul标签

ul(unorder list)标签用于定义无序列表,在ul标签中包含li(list item)标签,可以定义这个无需列表的每一项:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>ul标签实例</title>
					</head>
					<body>
						<!--ul默认的type类型是disc,在每个li标签内容前面,显示一个实心小圆点,除此之外,type还支持circle(空心小圆点)和square(方块)这两个值,大家可以替换disc测试,一般情况下,都会用css去替换ul的显示效果-->
						<ul type="disc">
							<li>aaa</li>
							<li>bbb</li>
							<li>ccc</li>
						</ul>
					</body>
					</html>
					

显示效果:

  • aaa
  • bbb
  • ccc

f.ol标签

相对于无序列表ul,ol(order list)是有序列表,默认情况下会在li内容前添加数字,数字从1开始递增:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>ol标签实例</title>
					</head>
					<body>
						<!--默认的有序列表-->
						<ol>
							<li>aaa</li>
							<li>bbb</li>
							<li>ccc</li>
						</ol>
						<!--使用大写字母排序的有序列表,如果需要小写字母可以使用a替换A-->
						<ol type="A">
							<li>aaa</li>
							<li>bbb</li>
							<li>ccc</li>
						</ol>
						<!--HTML5新属性,reversed属性让有序列表降序排列-->
						<ol reversed>
							<li>aaa</li>
							<li>bbb</li>
							<li>ccc</li>
						</ol>
					</body>
					</html>
					

显示效果:

  1. aaa
  2. bbb
  3. ccc
  1. aaa
  2. bbb
  3. ccc
  1. aaa
  2. bbb
  3. ccc

g.dl标签

dl(definition list)中可以包含两个标签:dt(definition title)定义列表中的标题,dd(definition description)对定义列表中的标题的描述,请看下面的实例;

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>dl标签实例</title>
					</head>
					<body>
						<dl>
							<dt>水果</dt>
							<dd>包含苹果,香蕉,榴莲等。</dd>
							<dt>肉类</dt>
							<dd>包含鸡鸭鱼牛羊肉等。</dd>
							<dt>蔬菜</dt>
							<dd>包含秋葵,菠菜,大白菜等。</dd>
						</dl>
					</body>
					</html>
					

显示效果:

水果
包含苹果,香蕉,榴莲等。
肉类
包含鸡鸭鱼牛羊肉等。
蔬菜
包含秋葵,菠菜,大白菜等。

h.figure标签

figure标签是HTML5中定义的新标签,一般用于将一张图片以及与这张图片相关的信息整合在文档中,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>dl标签实例</title>
					</head>
					<body>
						<figure>
							<figcaption>晴刃|www.qingsword.com</figcaption>
							<img src="http://www.qingsword.com/logo/logoa.png" alt="晴刃">
							<p>自由、互助、分享、专注计算机技术</p>
						</figure>
					</body>
					</html>
					

显示效果:

晴刃|www.qingsword.com
晴刃

自由、互助、分享、专注计算机技术

i.div标签

div(division)一般用于区域分块,将相同的内容划分到一个div下,便于css控制:

					<!DOCTYPE html>
					<html lang="zh-cn">
					<head>
						<meta charset="UTF-8">
						<title>dl标签实例</title>
						<!--我们暂时不需要了解这段css的实际含义,css的内容会在后面的文章中详解,这里只需要知道,这段css能够控制body中的两个div,将他们的长宽分别设置成200px与100px,设置了这两个区域的边框与边框颜色等-->
						<style type="text/css">
							#area1{
								width: 200px;
								height: 100px;
								border:1px dotted pink;
								margin-bottom: 3px;
							}
							#area2{
								width: 200px;
								height: 100px;
								border:1px dotted yellow;
							}
						</style>
					</head>
					<body>
						<!--区域一和区域二使用两个div标签包含其内容,就可以通过css来控制他们的位置与显示样式了-->
						<div id="area1">
							<p>区域一中包含的内容</p>
							<p>...</p>
						</div>
						<div id="area2">
							<p>区域二中包含的内容</p>
							<p>...</p>
						</div>
					</body>
					</html>
					

显示效果:

区域一中包含的内容

...

区域二中包含的内容

...

从上面的例子中可以看出,每个分组元素都是独占一行,例如一对p标签中的内容不会出现在前面一对p标签内容的后面,而是新起一行显示,两个div之间也是如此。