《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 >元素是数据展示时,以高亮的形式显示某些字符。

相关文章
|
8天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
4天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
20 1
|
9天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
9天前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
|
9天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
9天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
9天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
9天前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
|
10天前
|
移动开发 缓存 前端开发
【专栏:HTML与CSS实践篇】网页性能优化:CSS与HTML的最佳实践
【4月更文挑战第30天】本文探讨了优化CSS和HTML以提升网页性能的最佳实践。HTML优化包括:精简结构、压缩代码、异步加载脚本和利用缓存。CSS优化则涉及:精简代码、合并文件、使用CSS Sprite、善用CSS3属性、避免@import及响应式设计。这些方法能加快加载速度,改善用户体验。
|
10天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 实践篇】网页图标与字体图标的使用
【4月更文挑战第30天】本文探讨了网页设计中两种主要图标形式——传统图标和字体图标。传统图标(PNG, JPEG, GIF)视觉效果丰富但文件大,易影响加载速度且维护不便。字体图标占用空间小,易于维护和定制,但视觉效果相对简单,选择有限。实际应用中,两者可结合使用,以导航栏、操作按钮和提示信息为例说明了图标的重要性。设计师需注意兼容性、清晰度和性能优化问题,根据项目需求选择合适图标类型,以提升网页质量和用户体验。