HTML文本层次语义元素
作者：互联网
为了使HTML5页面中的文本内容更加形象生动，需要使用HTML5中一些特殊的元素来突出文本之间的层次关系，这样的元素被称为层次语义元素。
time元素
time元素用于定义时间或日期，可以代表24小时中的某一时间。
time元素不会在浏览器中呈现任何特殊效果，但是该元素能以机器可读的方式对日期和时间进行编码，这样，用户能够将生日提醒或其他事件添加到日程表中；
搜索引擎也能够生成更智能的搜索效果。
time元素有以下2个元素：
- datetime：用于定义相应的时间或日期。取值为具体时间或具体日期。不定义该属性时，由元素的内容给定日期/时间。
- pubdate：用于定义time元素中的日期/时间是文档（或article元素）的发布日期。取值一般为“pubdate”。
下面通过一个案例对time元素的用法进行演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>time元素的使用</title>
</head>
<body>
<p>我们早上<time>9:00</time>开始上班</p>
<p>今年的<time datetime="2019-08-15" >十一</time>我们准备去旅游</p>
<time datetime="2019-08-15" pubdate="pubdate">
本消息发布于2019年8月15日
</time>
</body>
</html>
运行效果如图所示：
mark元素
mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。
该元素的用法与em元素和strong元素有相似之处，但是使用mark元素在突出显示样式时更随意灵活。
下面通过一个案例对mark元素的用法进行演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mark元素的使用</title>
</head>
<body>
<h3>小苹果</h3>
<p>我种下一颗<mark>种子</mark>,终于长出了<mark>果实</mark>,今天是个伟大日子。
摘下星星送给你，拽下月亮送给你，让太阳每天为你升起。变成蜡烛燃烧自己，只为照亮你，
把我一切都献给你，只要你欢喜。你让我每个明天都变得有意义，生命虽短爱你永远，不离不弃。
你是我的小呀<mark>小苹果儿</mark>,怎么爱你都不嫌多,红红的小脸儿温暖我的心窝,点亮我生命的火
火火火火火.你是我的小呀<mark>小苹果儿</mark>,就像天边最美的云朵,春天又来到了花开满山坡,种
下希望就会收获。</p>
</body>
</html>
运行效果如图所示：
cite元素
cite元素可以创建一个引用标记，用于对文档中的引用进行说明。一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。
下面通过一个案例对cite元素的用法进行演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cite元素的使用</title>
</head>
<body>
<p>待到秋来九月八，我花开后百花杀</p>
<p>冲天香阵透长安，满城尽带黄金甲</p>
<cite>————唐黄巢《不第后赋菊》</cite>
</body>
</html>
运行效果如图所示：
标签：元素,语义,mark,日期,HTML,文档,time,文本,cite 来源： https://www.cnblogs.com/liuyouqi/p/16102816.html