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

简介:

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章,第1.21节,作者: 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

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


<a href=https://yqfile.alicdn.com/3a46b22148d673e5df7bfc45f9fb868a5efa8dde.png" >

实例说明

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

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

(1)< time >元素。

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

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


<a href=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所示。


<a href=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所示。


4f8c0cc4c171ca19e7332d1a29f259b06507fca9

注意

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

相关文章
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
33 0
|
1月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
3月前
|
移动开发 前端开发 数据安全/隐私保护
HTML的基本语法以及如何使用HTML来创建网页
HTML的基本语法以及如何使用HTML来创建网页
71 0
|
3月前
|
存储 缓存 前端开发
探索HTML的黑科技:让你的网页变得无与伦比!(二)
探索HTML的黑科技:让你的网页变得无与伦比!
|
4天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
1月前
|
搜索推荐 前端开发 JavaScript
打造个性化的个人网页:从HTML到个人品牌
打造个性化的个人网页:从HTML到个人品牌
20 0
|
1月前
|
容器
HTML标签之文字滚动效果(跑马灯效果)
HTML标签之文字滚动效果(跑马灯效果)
|
1月前
|
JavaScript 前端开发
HTML网页自动刷新_kaic
HTML网页自动刷新_kaic
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始