HTML5的结构和语义(4):语义性的内联元素
互联网 发布时间:2008-10-17 18:55:34 作者:佚名
我要评论
HTML4用5个不同的内联元素表示略有差异的计算机代码:var、code、kbd、tt和samp。但是,它无法表示时间、数字等基本数值。HTML5提供了几个新的内联元素来满足非技术作者的需求。
m
m元素表示文本被“加上标志”,但是不一定要强调。可以把它想像成书中突出
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语言动态地更新进度条。在静态情况下,这个元素没什么意义。
(待续)
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语言动态地更新进度条。在静态情况下,这个元素没什么意义。
(待续)
相关文章
- Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探讨HTML5中Microdata的使用方法以及2025-04-21
在HTML语法中,表格主要通过< table >、< tr >和< td >3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧2025-04-21- 这篇文章主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSS Grid布局的基础知识和如何实现自动换行的网格布局,感兴趣的朋友一起看看吧2025-04-21
本文介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的2025-03-11- HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用,文章还介绍了高级用法,如存储JSON数据、事2025-03-11
- 在HTML5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨<select>标签的属性、样式,并重点介2025-02-27
本文介绍了HTML5InputDatePicker对象表示HTML``元素,是HTML5中的新对象,介绍了日期、周、月份、时间、日期+时间、本地日期时间等不同类型的日期选择器,感兴趣的朋友一起看2025-02-17
本文介绍了HTML5中的超链接、相对路径和图片的使用方法,超链接可以创建指向另一个文档或页面内部书签的链接,相对路径用于在同一服务器内部跳转页面,图片标签用于引入外部图2025-02-17- 本文介绍了HTML5超链接的创建方法,包括基本语法、创建图像超链接的边框去除方法以及锚点链接的使用,还讨论了超链接的四种不同状态(link、visited、hover、active)的CSS样2025-02-17
最近看一些技术网站发现了details 标签的妙用,这个不用js即可实现展开/收缩信息,很方便用来让用户先才答案,然后下面点击再给出答案的效果,这里就为大家简单介绍一下,2024-11-03







最新评论