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 box-sizing属性
Apr 17 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 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 google或baidu分页代码
2009/11/26 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
python实现文件名批量替换和内容替换
2014/03/20 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
Python列表元素常见操作简单示例
2019/10/25 Python
Python matplotlib实时画图案例
2020/04/23 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
电子商务专员岗位职责
2013/12/11 职场文书
教师辞职报告范文
2014/01/20 职场文书
公司活动邀请函
2014/01/24 职场文书
渡河少年教学反思
2014/02/12 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python