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制作日历实现代码
Jan 21 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
Html5新增了哪些功能
Apr 16 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
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
JS功能代码集锦
2016/05/04 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Python中无限循环需要什么条件
2020/05/27 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
python re.match()用法相关示例
2021/01/27 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
销售顾问的岗位职责
2013/11/13 职场文书
出国留学计划书
2014/04/27 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
小学运动会入场口号
2015/12/24 职场文书
如何书写邀请函?
2019/06/24 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL