[HTML5]-5-内联元素

引言

这篇文章介绍HTML中几个常用的内联元素,内联元素也被称作行内元素,相对于块状元素,它出现在文档中时并不会独占一行。

文章目录

0×1.内联元素实例

本文仅介绍几个比较常用的内联元素,一些并不常用的内联元素在以后使用到的时候再去介绍他们。

a.a标签

这也许是所有HTML文档中最常用的内联元素标签,我们在页面中看到的每一个超链接,基本上都是包含在这个标签之中,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-ch">
					<head>
						<meta charset="UTF-8">
						<title>a标签实例</title>
					</head>
					<body>
						<!--a标签中有三个最常用属性,href包含了a标签所对应的超链接地址,本例为本网站的主页连接;当鼠标放置在连接上时显示的文本就是title中的内容;target默认的属性为"_self",即在本页面直接打开连接,而"_blank"属性告诉浏览器,使用新的标签页打开这个超链接-->
						<a href="http://www.qingsword.com" title="晴刃" target="_blank">晴刃首页</a>
					</body>
					</html>
					

显示效果:

晴刃首页

b.img标签

img标签经常用于在HTML文档中引用并显示被引用的图片,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-ch">
					<head>
						<meta charset="UTF-8">
						<title>img标签实例</title>
					</head>
					<body>
						<!--由于a和img都是内联元素,所以他们会显示在一行,并不会像块状元素那样,每个标签都独占一行-->
						<a href="http://www.qingsword.com" title="晴刃" target="_blank">晴刃首页</a>
						<!--img标签中src属性指定了图片的相对或绝对路径,可以是网络中的一张图片的url,也可以是相对本文档的本地路径,本例使用了本站的logo的url地址作为图片的引用地址;当加载图片出错时,会在img标签位置显示alt中的文本信息;当鼠标移动到图片上悬停时,显示title中的文本信息-->
						<img src="http://www.qingsword.com/logo/logoa.png" alt="晴刃logo" title="晴刃logo">
					</body>
					</html>
					

显示效果:

晴刃首页 晴刃logo

除此之外,如果想将一张图片变成可点击的超链接,只需要将图片包含在超链接中代替显示文本即可:

					<!DOCTYPE html>
					<html lang="zh-ch">
					<head>
						<meta charset="UTF-8">
						<title>img标签实例</title>
					</head>
					<body>
						<a href="http://www.qingsword.com" title="晴刃" target="_blank">
							<!--img标签被包含在a标签之中,点击这张图片就能跳转到a标签中设置的url地址-->
							<img src="http://www.qingsword.com/logo/logoa.png" alt="晴刃logo" title="晴刃logo">
						</a>
					</body>
					</html>
					

显示效果:

晴刃logo

c.br标签

浏览器的解释器遇到br标签,就在其出现的位置插入一个换行符,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-ch">
					<head>
						<meta charset="UTF-8">
						<title>br标签实例</title>
					</head>
					<body>
						<p>正常情况下的一行文字</p>
						<!--所有出现br标签的位置,都被移动到了下一行,就好像我们在输入文本时敲击回车键一样-->
						<p>插入<br>br标签<br>的<br>一行文字</p>
					</body>
					</html>
					

显示效果:

正常情况下的一行文字

插入
br标签

一行文字

d.span标签

span标签本身并不像a标签或img标签那样,有实际的定义,当它用来包含一段文本的时候,甚至不会出现任何效果,它的作用就是让我们能够使用css去设置它所包含的一段文本的样式,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-ch">
					<head>
						<meta charset="UTF-8">
						<title>span标签实例</title>
					</head>
					<body>
						<!--在第一对span标签中,并没有设置任何css样式,所以"欢迎"两个字没有任何变化,而在第二对span标签中,我们使用css样式设置了文字的颜色为黄色-->
						<p><span>欢迎</span>来我的个人博客学习。</p>
						<p><span style="color:yellow;">欢迎</span>来我的个人博客学习。</p>
					</body>
					</html>
					

显示效果:

欢迎来我的个人博客学习。

欢迎来我的个人博客学习。

e.sub和sup标签

sub和sup标签常用与数学运算的显示,sup标签将其中的文本显示在其前面的文本的右上方,也叫"上标",而sub标签刚好相反,显示在右下方,也叫"下标",请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-ch">
					<head>
						<meta charset="UTF-8">
						<title>sub和sup标签实例</title>
					</head>
					<body>
						<!--2的10次方等于1024-->
						<p>2<sup>10</sup>=1024</p>
						<!--无符号二进制与十进制之间的转换,使用下标标注其前面的数字是二进制还是十进制-->
						<p>11101001<sub>2</sub>=233<sub>10</sub></p>
					</body>
					</html>
					

显示效果:

210=1024

111010012=23310

f.strong标签

strong标签将包含的文本加粗显示,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-ch">
					<head>
						<meta charset="UTF-8">
						<title>strong标签实例</title>
					</head>
					<body>
						<p><strong>加粗的文本显示</strong><br>正常的文本显示</p>
					</body>
					</html>
					

显示效果:

加粗的文本显示
正常的文本显示

g.strike和u标签

strike标签会在文本中间显示一条"删除线",多用于商品价格的降价标注,而u标签则是在文本下方显示一条下划线,请看下面的实例:

					<!DOCTYPE html>
					<html lang="zh-ch">
					<head>
						<meta charset="UTF-8">
						<title>strong标签实例</title>
					</head>
					<body>
						<p>不卖<strike>998</strike>,只卖<u>233</u></p>
					</body>
					</html>
					

显示效果:

不卖998,只卖233

从上面的实例中不难发现,内联元素出现在文档中时,并不会独占一行,而是紧随前面的内容显示。