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语言动态地更新进度条。在静态情况下,这个元素没什么意义。
  
  (待续)

相关文章

  • HTML5实现的移动端购物车自动结算功能示例代码

    本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用户体验,感兴趣的朋友一起看看吧
    2025-06-18
  • HTML5 中的<button>标签用法和特征

    在HTML5中,<button>标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的<button>标签,详细介绍其属性、样式以及实际
    2025-06-18
  • 基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

    本文将深入剖析一段基于 HTML5 Canvas 的代码,该代码实现了图片的旋转(90 度和 180 度)以及旋转后图片的下载功能,通过对代码的解读,我们可以学习到如何利用 Canvas API
    2025-06-18
  • HTML5 getUserMedia API网页录音实现指南示例小结

    本教程将指导你如何利用这一API,结合Web Audio API,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步详解,此外,还讨论了getUserMedia API的使用限制和最
    2025-06-16
  • HTML5 搜索框Search Box详解

    HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5 搜索框Search Box
    2025-06-13
  • 全面解析HTML5中Checkbox标签

    Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中Checkbox标签的深入全面解
    2025-06-13
  • HTML5无插件拖拽图片上传功能实现过程

    本实例展示了一种基于HTML5技术的图片上传功能,无需外部插件即可通过拖放图片实现上传,涉及到HTML5的拖放API和File API,以及使用CSS来增强用户界面的交互性和视觉反馈,
    2025-05-16
  • HTML5 定位大全之相对定位、绝对定位和固定定位

    在HTML5和CSS中,定位(positioning)是控制元素在页面上位置的重要机制,主要有四种定位方式:静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed),
    2025-05-13
  • HTML5中的Microdata与历史记录管理详解

    Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探讨HTML5中Microdata的使用方法以及
    2025-04-21
  • HTML5表格语法格式详解

    在HTML语法中,表格主要通过< table >、< tr >和< td >3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧
    2025-04-21

最新评论