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基础教程》点击下载