
上QQ阅读APP看书,第一时间看更新
2.3 文本层次语义元素
为了使HTML页面中的文本内容更加形象生动,需要使用一些特殊的元素来突出文本之间的层次关系,这样的元素称之为文本层次语义元素。文本层次语义元素通常用于描述特殊的内容片段,可使用这些语义元素标注出重要信息,例如,名称、评价、注意事项、日期等。
2.3.1 时间和日期标签<time>
<time>标签用于定义公历的时间(24小时制)或日期,时间和时区偏移是可选的。<time>标签不会在浏览器中呈现任何特殊效果,但是能以机器可读的方式对日期和时间进行编码。例如,用户能够将生日提醒或事件计划添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。<time>标签的属性见表2-2。
表2-2 <time>标签的属性

【例2-3】 使用<time>标签设置日期和时间。本例在浏览器中的显示效果如图2-3所示。


图2-3 <time>标签示例
2.3.2 标记标签<mark>
<mark>标签用来定义带记号的文本,其主要功能是在文本中高亮显示某个或某几个字符,旨在引起用户的特别注意。
【例2-4】 使用<mark>标签设置文本高亮显示。本例在浏览器中的显示效果如图2-4所示。


图2-4 <mark>标签示例
2.3.3 引用标签<cite>
<cite>标签可以创建一个引用标记,用于对文档参考文献的引用说明。一旦在文档中使用了该标签,被标记的文档内容将以斜体的样式显示在页面中,以区别于段落中的其他字符。
【例2-5】 使用<cite>标签设置文档引用说明。本例在浏览器中的显示效果如图2-5所示。


图2-5 <cite>标签示例