small
small
为行内元素
small 表示细则一类的旁注(side comment),“通常包括免责声明、注意事项、法律限制、版权信息等。有时我们还可以用它来表示署名,或者满足许可要求。”
注意
用 small 标记页面的版权信息是一种常见的做法。不过,small 只适用于短语,因此不要用它标记长的法律声明,如“使用条款”和“隐私政策”页面。根据需要,应该用段落或其他语义标签标记这些内容。
strong和em
strong 元素表示内容的重要性,而 em 则表示内容的着重点。根据内容需要,这两个元素既可以单独使用,也可以一起使用。
标记重要文本用strong,强调文本用em
figure和figcaption
figure用来创建图,图可以是图表、照片、图形、插图、代码片段,以及其他类似的独立内容。
figcaption是figure的标题,出现在figure内容的开头或结尾(也可以没有)。
注意
可选的 figcaption 必须与其他内容一起包含在 figure 里面,不能单独出现在其他位置。
cite
使用 cite 元素可以指明对某内容源的引用或参考。例如,戏剧、脚本或图书的标题,歌曲、电影、照片或雕塑的名称,演唱会或音乐会,规范、报纸或法律文件等。
注意
HTML5 声明,不应使用 cite 作为对人名的引用。
blockquote和q
blockquote 和 q 用来标记引述的文本。
blockquote 元素表示单独存在的引述;而 q 元素则用于短的引述,如句子里
面的引述。
blockquote 和 q 可以使用cite属性提供引述文本的位置:
<blockquote cite="http://www.
➝ marktwainbooks.edu/the-adventures-of-
➝ huckleberry-finn/">
<p>We said there warn't no home like a
➝ raft, after all. Other places do seem
➝ so cramped up and smothery, but a
➝ raft don't. You feel mighty free and
➝ easy and comfortable on a raft.</p>
</blockquote>
time
使用 time 元素标记时间、日期或时间段
time 的datetime属性是为机器准备的,必须为机器可读的值。
注意
- 如果忽略 datetime 属性,文本内容就必须是合法的日期或时间格式。
- 如果包含了datetime ,文本内容就可以按你希望的任何形式表示日期、时间或时间段了。
abbr
可以使用 abbr 元素标记缩写词并解释其含义。
使用可选的 title 属性提供缩写词的全称。
dfn
在 HTML 中定义术语时,可以使用 dfn元素对其作语义上的区分。仅用 dfn 包围要定义的术语,而不是包围定义。
sub和sup
sub
和 sup
分别为下标和上标。
使用sub 和 sup 会轻微增大行高,要解决这个问题,使用css即可:
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
address
一看这个名字,是不是以为里面放的是地址?其实并不是。address 元 素 是 用 以 定 义 与HTML 页面或页面一部分(如一篇报告或新文章)有关的作者、相关人士或组织的联系信息,通常位于页面底部或相关部分内。
可以放置联系方式、通讯地址,但不要在里面放地点。
ins、del和s
有两种用于标注编辑的元素:代表添加内容的 ins 元素和标记已删除内容的 del 元素。
del 和 ins 是少有的既可以包围短语内容(HTML5 之前称“行内元素”)又可以包围块级内容的元素。
s 元素用以标注不再准确或不再相关的内容(一般不用于标注编辑内容)。
注意
s 元素不适用于指示文档的编辑,要标记文档中一块已移除的文本,应使用 del 元素。”有时,这之间的差异是很微妙的,只能由你决定哪种选择更符合内容的语义。
code
如果你的内容包含代码示例或文件名,就可以使用 code 元素。
可以搭配pre标签保持原样输出,否则浏览器会解析某些html代码。
pre
通常,浏览器会将所有额外的回车和空格压缩,并根据窗口的大小自动换行。预格式化的文本可以保持文本固有的换行和空格。它是计算机代码示例的理想元素。
浏览器会对pre里面的内容关闭自动换行,因此,如果这些内容很宽,就会产生横向滚动条。以下css样式可以解决产生滚动条的问题:
pre {
white-space: pre-wrap;
}