HTML 5中的重要元素：文本元素(time元素、mark元素、cite元素)

hzbook

浏览: 259170 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

mengyancui

xx23x

limoo70

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

在HTML 5中，新增或改良的元素还有许多，主要分为以下几大类：文档元素、脚本、节点元素、文本元素、嵌入元素等。下面以实例的形式，介绍文本元素在HTML 5中的使用方法。

页面中常常需要展示的一段文章或文字称为文本内容。为了使文本内容更加形象、生动，需要增加一些特殊功能的元素，用于突出文本间的层次关系或标为重点，这样的元素称为文本层次语义标记。

在HTML 5中，常用于文本层次语义的元素有<time>、和<cite>。下面分别进行详细说明。

3.6.1　time 元素

<time>是HTML 5新增加的一个标记，用于定义时间或日期。该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差。在设置时间或日期时，只需将该元素的属性“datetime”设为相应的时间或日期即可。

例如，在新建的HTML页面中加入如下代码：

...省略部分代码

　<time datetime="2011-4-9">
　　今天是2011年4月9日
　</time>


　<time datetime="2011-4-9T21:00">
　　现在时间是2011年4月9日晚上9点
　</time>



<time datetime="2011-12-31">
新款PSP2掌上游戏机将于今年年底上市
</time>


<time datetime="2011-5-1" pubdate="true">
本消息发布于2011年5月1日
</time>

...省略部分代码

元素ID号为“p1”中的<time>元素表示的是日期。页面在解析时，获取的是属性“datetime”中的值，而标记之间的内容只是用于显示在页面中。

元素ID号为“p2”中的<time>元素表示的是日期和时间，它们之间使用字母“T”进行分隔。如果在整个日期与时间的后面加上一个字母Z，则表示获取的是UTC（世界统一时间）格式。

元素ID号为“p3”中的<time>元素表示的是将来时间。

元素ID号为“p4”中的<time>元素表示的是发布日期。

为了在文档中将这两个日期进行区分，在最后一个<time>元素中增加了“pubdate”属性，表示此日期为发布日期。

说明　<time>元素中的可选属性“pubdate”表示时间是否为发布日期，它是一个布尔值，该属性不仅可以用于<time>元素，还可用于<article>元素。

3.6.2　mark 元素

元素是HTML 5中新增的元素，主要功能是在文本中高亮显示某个或某几个字符，旨在引起用户的特别注意。其使用方法与和有相似之处，但相比而言，HTML 5中新增的元素在突出显示时，更加随意与灵活。

下面通过一个完整的实例3-5来介绍该元素的使用方法。

实例3-5　元素的使用

1.功能描述

在页面中，首先使用<h5>元素创建一个标题“优秀开发人员的素质”，然后通过元素对标题进行阐述。在阐述的文字中，为了引起用户的注意，使用元素高亮处理字符“素质”、“过硬”和“务实”。

2.实现代码

在Dreamweaver CS5中新建一个HTML页面3-5.html，加入代码如代码清单3-5所示。

代码清单3-5　mark元素的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mark元素的使用</title>
<link href="Css/css3.css" rel="stylesheet" type="text/css">
</head>
<body>
<h5>优秀开发人员的素质</h5>

一个优秀的Web页面开发人员，必须具有
过硬的技术与
务实的专业精神

</body>
</html>

3.页面效果

该页面在Chrome 10浏览器下执行的页面效果如图3-6所示。

图3-6　使用元素的页面效果

4.源码分析

在本实例中，通过使用元素，将文字中的“素质”、“过硬”和“务实”三个字符进行了高亮显示的处理，实现方法如源码中加粗部分所示。

元素的这种高亮显示的特征，除用于文档中突出显示外，还常用于查看搜索结果页面中关键字的高亮显示，其目的主要是引起用户的注意。

虽然元素在使用效果上与或元素有相似之处，但三者的出发点是不一样的。元素是作者对文档中某段文字的重要性进行的强调；元素是作者为了突出文章的重点而进行的设置；元素是数据展示时，以高亮的形式显示某些字符，与原作者本意无关。

3.6.3　cite 元素

<cite>元素可以创建一个引用标记，用于文档中参考文献的引用说明，如书名或文章名称。一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。

下面通过一个完整的实例3-6来介绍该元素的使用方法。

实例3-6　元素<cite>的使用

1.功能描述

在页面中，首先通过元素显示一段文档；然后，在文档的下面使用<cite>元素标识这段文档所引用的书名。

2.实现代码

在Dreamweaver CS5中新建一个HTML页面3-6.html，加入代码如代码清单3-6所示。

代码清单3-6　cite元素的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>cite元素的使用</title>
<link href="Css/css3.css" rel="stylesheet" type="text/css">
</head>
<body>
<h5>jQuery </h5>

jQuery 是继Prototype之后的一个优秀的JavaScript框架，
深受全球开发者的欢迎...

--- 引自 << <cite>jQuery 权威指南</cite> >> ---

</body>
</html>

3.页面效果

该页面在Chrome 10浏览器下执行的页面效果如图3-7所示。

图3-7　使用<cite>元素的页面效果

4.源码分析

在上述代码中，使用<cite>元素标识这段文档所引用的书名“jQuery 权威指南”，因此，该书名在页面中显示为斜体。

注意　HTML 5中的<cite>元素基本兼容了HTML 4中的全部功能，但定义时更加严格。在使用该元素时，只允许包含标题或书名，不允许包含更多的其他引用信息，如作者姓名、出版日期等。

-------------------------------------

本文节选自《HTML 5实战》第3章《HTML 5中的重要元素》第3.6节“文本层次语义”（作者：陶国荣）。

《HTML 5实战》内容简介：

全书共11章，内容涵盖了HTML 5的各个方面。第1章通过实现一个简单的HTML 5页面讲解了如何搭建支持HTML 5的浏览器环境、HTML 5页面所具备的特征，以及如何检测浏览器对HTML 5的各种特性的支持情况；第2章介绍了HTML 5中常用的交互元素，包括内容交互元素、菜单交互元素和状态交互元素等几大类；第3章介绍了HTML根元素、文档元素，以及与脚本、节点、分组内容、文本层次语义、嵌入内容、公共属性相关的重要元素；第4章和第5章讲解了HTML 5中的表单和文件的功能特性以及常见的各种操作；第6章和第7章讲解了HTML 5中的音频、视频和绘图相关的知识，重点讲解了各种常见的操作和使用方法；第8章和第9章讲解了HTML 5中的数据存储和离线应用；第10章对Web Sockets、Geolocation、Web Workers、元素的拖放等重要内容进行了全面的讲解。

作者简介：

陶国荣，资深Web技术专家，有十余年开发经验，是国内较早专业从事Web开发的一线技术人员和培训讲师。一直致力于对HTML、JavaScript、CSS、jQuery等Web开发技术的研究和实践，在HTML页面的优化与用户体验的研究，以及页面框架搭建、数据流向分析、页面静态优化等方面都拥有丰富的实践经验。自HTML 5的草案发布以来，一直密切关注HTML 5的发展，坚持在实际工作中学习与研究，并进行了实践。他还是微软技术方面的专家，精通C#、ASP．NET和SQL Server等技术。
此外，他还是一位知名的技术作家，出版了多部技术著作，其中《jQuery权威指南》是他的代表作之一，这本书凭借过硬的质量和良好的学习体验获得了广大读者的高度评价，并取得了骄人的销售成绩。

分享到：