《HTML5 开发实例大全》——1.21 在网页中突出显示某些文字

1.21 在网页中突出显示某些文字

https://yqfile.alicdn.com/3a46b22148d673e5df7bfc45f9fb868a5efa8dde.png" >

实例说明

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

在HTML 5中,通过元素< time >、< mark >和< cite >可以设置文本层次。

(1)< time >元素。

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

< time >元素的属性如表1-10所示。

https://yqfile.alicdn.com/33c6e23cfac7d0a91cfee27434afb168ee75505f.png" >

请读者看下面的代码演示了< time >元素的基本用法。

<html>
<body>
<p>
我们在每天早上 <time>9:00</time> 开始营业。
</p>
<p>
我在 <time datetime="2010-02-14">情人节</time> 有个约会。
</p>
</body>
</html>

上述代码的执行效果如图1-39所示。

https://yqfile.alicdn.com/c339ac00edd6fdeec1a0abd548ac3573aaafae9c.png" >

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

(2)< mark >元素。

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

(3)< cite >元素。

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

在本实例中,首先使用< h5 >元素创建一个标题“爱情是什么?是面包”,然后通过< p >元素对标题进行阐述。为了引起用户对重要内容的注意,使用< mark >元素高亮处理字符“面包”、“单车”和“天知道”。

具体实现

使用Dreamweaver创建一个名为“021.html”的文件,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mark元素的使用</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
 <h5>爱情是什么?是<mark>面包</mark></h5>
 <p class="p3_5">
  宁愿在宝马里哭泣
  还是在<mark>单车</mark>
  <mark>天知道</mark>的答案!
 </p>
</body>
</html>

在上述中,使用< mark >元素将文字中的“面包”、“单车”和“天知道”3个字符进行了高亮显示的处理。< mark >元素的这种高亮显示的特征,除用于文档中突出显示外,还常用于查看搜索结果页面中关键字的高亮显示,其目的主要是引起用户的注意,执行效果如图1-40所示。

注意

mark>元素在使用效果上与< em >或< strong >元素有相似之处,但三者的出发点是不一样的。< strong >元素是作者对文档中某段文字的重要性进行的强调;< em >元素是为了突出文章的重点而进行的设置;< mark >元素是数据展示时,以高亮的形式显示某些字符。

时间: 2024-11-01 16:43:16

《HTML5 开发实例大全》——1.21 在网页中突出显示某些文字的相关文章

《HTML5 开发实例大全》——1.27 自动隐藏或显示网页中的文字

1.27 自动隐藏或显示网页中的文字 实例说明 在HTML 5 中,绝大部分的元素都支持"hidden"属性,该属性只有如下两个取值. true:当"hidden"的取值为"true"时,元素不在页面中显示,但还存在于页面中. false:当"hidden"的取值为"false"时,则显示于页面中.该属性的默认值为"false",即元素创建时便显示出来. 在本实例中,使用< nav

《HTML5 开发实例大全》——导读

前言 从HTML 5标准被推出以来,经过几年的探索和发展,在浏览器公司的努力下,到本书截稿为止,HTML 5已经成为新一代网页技术的标准.目前已经有众多浏览器支持HTML 5的新功能,并且Android和iOS等智能手机平台也支持HTML 5. 从技术角度而言,HTML 5有两大特点:首先,强化了 Web 网页的表现性能:其次,追加了本地数据库等 Web 应用的功能.广义论及HTML 5时,实际指的是包括HTML.CSS和JavaScript在内的一套技术组合.它希望能够减少浏览器对于需要插件的

《HTML5 开发实例大全》——第1章 千里之行 始于足下——基本元素实战1.1 一个基本的HTML 5页面

第1章 千里之行 始于足下--基本元素实战 在全新的HTML 5中,有很多新的标记元素,通过这些新的标记元素可以实现传统HTML标记语言所不能实现的功能.另外在本章的内容中,还会引领读者一起重温HTML 5传统页面元素的使用技巧,为读者步入本书后面知识的学习打下基础. 1.1 一个基本的HTML 5页面 HTML5 开发实例大全 本实例的功能是编写一段基本的HTML 5程序,让读者体会HTML 5的基本语法.并体会HTML 5在哪一种浏览器中可以正常运行. 具体实现 使用Dreamweaver创

《HTML5 开发实例大全》——1.16 使用&lt; html &gt;根元素显示文字

1.16 使用< html >根元素显示文字 实例说明在全新的HTML 5中,< html >元素用于告知浏览器这是一个 HTML 文档.html 元素是 HTML 文档中最外层的元素,也经常被称为根元素.< html >元素在浏览器执行页面时,告知它执行的是一个HTML文档.在HTML 5与HTML 4.0.1版本中,该元素的差异不大,主要区别在于xmlns属性.在HTML 4.0.1中,属性xmlns是必需的,因为它将在HTML转成xmlns的过程中发挥作用.而在H

《HTML5 开发实例大全》——1.23 在网页中显示一幅图片

1.23 在网页中显示一幅图片 实例说明 在HTML 5页面中,除了显示文档或字符外,还经常需要放入一些其他元素,例如图片< img >.页面< iframe >和多媒体< object >等.这些元素对于整个DOM文档来说,属于嵌入内容.其中< img >元素的功能是在页面中导入一幅图像,它是页面开发中使用较为频繁的一个元素.在HTML 5中,该元素的"border"."align"."hspace&quo

《HTML5 开发实例大全》——1.20 分组列表显示网页中的内容

1.20 分组列表显示网页中的内容 实例说明 在传统的HTML标记语言中,可以通过< ul >.< ol >.< dl >元素实现分组效果.在全新的HTML 5中,对原有的分组内容元素< ul >.< ol >.< dl >进行了整体改良,有的元素增加了许多新的属性,有的元素则废除了一些不合理的原有特征. (1)< ul >元素. 在HTML 5中,< ul >元素用于定义页面中的无序列表,其用法与HTML 4

《HTML5 开发实例大全》——1.24 在网页中显示一个文本框架

1.24 在网页中显示一个文本框架 实例说明 在HTML 5 中,< iframe >元素的功能是在页面中创建包含另一文档的框架.出于对页面安全性的考虑,HTML 5不再支持< frame >框架元素,包括< frameset >框架集元素,但仍然支持< iframe >元素,只是该元素的一些原有属性不再被支持,而仅仅支持"src"属性. 众所周知,当使用< iframe >元素包含了另一个页面时,这一操作的安全性会让开发者担

《HTML5 开发实例大全》——1.25 使用&lt; object &gt;元素在网页中显示一个Flash

1.25 使用< object >元素在网页中显示一个Flash https://yqfile.alicdn.com/6f177bb72335e09f2608ee497c26d2a632c309e2.png" > 实例说明 本实例的功能是,使用< object >元素在网页中显示一个Flash,本实例的素材Flash文件是123.swf.在HTML 5 中,< object >元素的功能是定义一个嵌入的对象.请使用此元素向您的 XHTML 页面添加多媒体

《HTML5 开发实例大全》——1.26 使用鼠标光标拖动网页中的文字

1.26 使用鼠标光标拖动网页中的文字 实例说明在HTML 5 中,可以使用属性"draggable"设置是否允许用户拖动网页中的元素.属性"draggable"有如下两个值. true:表示鼠标光标选中元素后,可以进行拖动的操作. false:表示鼠标光标选中元素后,不能进行拖动的操作,该属性值为默认值. 在本实例中,使用< article >元素显示一段文字,并设置< article >元素的属性"draggable"