Web前端基础（21）HTML5的其他标签和补充

发表于 | 更新于 | 分类于 ，

文本标记

p是最常用的文本标记之一，要在网页中表示段落就需要用p标签。

small和strong

small表示细则一类旁注，通常包括免责声明、注意事项、法律版本、版权信息等。small通常是行内文本中的一小块，而不是包含多个段落或其他元素的大块文本。

1
2
3
4
5
6
7
<p>Order now to receive free shipping. <small>(Some restrictions may apply.)</small></p>

<p>...</p>

<footer>
	<p><small>&copy; 2013 The Super Store. All Rights Reserved.</small></p>
</footer>

strong表示内容的重要性，而em表示内容的着重点。根据内容需要，这两个元素可以单独使用，也可以一起使用。

1
2
<p><strong>Warning: Do not approach the zombies <em>under any circumstances</em></strong>. They may <em>look</em>
    friendly, but that's just because they want to eat your arm.</p>

浏览器通常将strong文本以粗体显示，而将em文本以斜体显示，如果em是strong的子元素，将同时显示粗体和斜体。

注意：不用使用b元素代替strong，也不要使用i元素代替em。尽管他们在浏览器中显示的样式是一样的，但是含义却不一样。可以在strong中嵌套strong,em中嵌套em,来说明更加重要。

创建图

HTML5中引入了figure和figcaption来表示页面上的图。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<article>
	<h1>2013 Revenue by Industry</h1>

	<p>. . . [report content] . . .</p>

	<figure>
		<figcaption><b>Figure 3:</b> Breakdown of Revenue by Industry</figcaption>
		
		<img src="img/chart-revenue.png" width="180" height="143" alt="Revenue chart: Clothing 42%, Toys 36%, Food 22%" />
	</figure>

	<p>As Figure 3 illustrates, . . . </p>

	<p>. . . [more report content] . . .</p>
</article>

这个figure只有一个图表，不过放置多个图像或其他类型的内容（如数据表格，视频等）也是允许的。figcaption元素并不是必须的，但如果包含他就必须是figure的第一个元素或者最后一个元素。

指明引用或参考

使用cite元素可以对内容的引用或参考进行指明，例如、戏剧、脚本或图书的标题，歌曲、电影、照片或雕塑的名称，演唱会、音乐会，报纸、法律文件等。

引述文本

blockqute元素表示单独存在的引述。

指定时间

我们可以使用time元素标记时间、日期或时间段。

1
<time>2018-10-21</time>

图像

在img标签内，在src属性和值的后面添加alt=””来为图像添加描述文本，当图片显示失败的时候就会显示这段文本。

可以使用width=”x” 和height=”y”来设置图片显的宽高。

关于文本标签还有很多，可以参考w3c school的详细解释。更多HTML5和CSS3知识请参考《HTML5与CSS3基础教程》点击下载