HTML5的结构和语义(4):语义性的内联元素


Posted in HTML / CSS onOctober 17, 2008

HTML4用5个不同的内联元素表示略有差异的计算机代码:var、code、kbd、tt和samp。但是,它无法表示时间、数字等基本数值。HTML5提供了几个新的内联元素来满足非技术作者的需求。
m

m元素表示文本被“加上标志”,但是不一定要强调。可以把它想像成书中突出显示的一节。Google的缓存页面就是典型的用例。如果链接到一个缓存的副本,搜索词就被加上标志。例如,如果搜索“Egret”,那么缓存的Google页面可能像下面这样:
TheGreat<m>Egret</m>(alsoknownasthe
American<m>Egret</m>)isalargewhitewadingbirdfoundworldwide.
TheGreat<m>Egret</m>flieswithslowwingbeats.The
scientificnameoftheGreat<m>Egret</m>is<i>Casmerodius
albus</i>.

对于这个元素的名称当前还有争议。在规范发布之前,它可能从m改为mark。
time

time元素表示一个时间值,比如5:35P.M.,EST,April23,2007。例如:
<p>Iamwritingthisexampleat
<time>5:35P.M.onApril23rd</time>.
</p>

time元素可以帮助浏览器和其他程序识别出HTML页面中的时间。它不要求对元素内容应用任何特定的格式。但是,每个time元素都应该有一个datetime属性,其中包含更适合机器识别的时间值,比如:
<p>Iamwritingthisexampleat
<timedatetime="2007-04-23T17:35:00-05:00">5:35P.M.onApril23rd</time>.
</p>

适合机器读取的时间值可能对搜索引擎、日历程序等有帮助。
meter

meter元素表示指定范围内的数字值。例如,可以用它表示薪水、投票给LePen的法国选民的百分比或考试分数。在这里,我使用meter标出SoftwareDevelopment2007上一位Google程序员提供的数据:
<p>AnentrylevelprogrammerinSiliconValley
canexpecttostartaround<meter>$90,000</meter>peryear.
</p>

meter元素帮助浏览器和其他客户机识别HTML页面中的数量。它不要求对元素内容应用任何特定的格式。但是,每个meter元素可以有最多6个属性,它们按照更适合机器识别的形式表示这个数量:

value

min

low

high

max

optimum

这些属性都应该包含一个十进制数字。例如,期末考试的分数可以写成下面这样:
<p>Yourscorewas
<metervalue="88.7"min="0"max="100"low="65"high="96"optimum="100">B </meter>.
</p>

这表示这个学生的分数是百分制中的88.7。可能的最低分数是0,但是实际的最低分数是65。可能的最高分数是100,但是实际的最高分数是96。用户代理可以用某种数值控件显示这一信息,也可以在工具提示中显示额外的数据,但是最常见的情况可能是像其他内联元素一样对它应用样式。
progress

progress元素表示一个正在进行的过程的状态,就像图形用户界面(GUI)应用程序中的进度条。例如,可以用它表示一个文件已经下载的百分比或者播放电影时的当前位置。下面这个进度控件表示下载已经完成了33%:
<p>Downloaded:
<progressvalue="1534602"max="4603807">33%</progress>
</p>

value属性表示操作的当前状态。max属性表示操作的总量。这个元素指出要下载的数据总量是4,603,807字节,已经下载了1,534,602字节。

忽略max属性,就可以显示无限的进度。

在操作进行时,应该使用JavaScript语言动态地更新进度条。在静态情况下,这个元素没什么意义。

(待续)

HTML / CSS 相关文章推荐
css3圆角边框和边框阴影示例
May 05 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 #HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 #HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 #HTML / CSS
HTML5 语义化结构化规范化
Oct 17 #HTML / CSS
HTML5 与 XHTML2
Oct 17 #HTML / CSS
X/HTML5 和 XHTML2
Oct 17 #HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 #HTML / CSS
You might like
PHP5/ZendEngine2的改进
2006/10/09 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
Symfony核心类概述
2016/03/17 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python操作xml文件详细介绍
2014/06/09 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Django开发中的日志输出的方法
2018/07/02 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
深入理解Python 多线程
2020/06/16 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
忠诚教育心得体会
2014/09/03 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android