`
tomhibolu
  • 浏览: 1431111 次
文章分类
社区版块
存档分类
最新评论

HTML5 教程(四) - 内联元素

 
阅读更多

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

m

  m 元素表示文本被 “加上标志”,但是不一定要强调。可以把它想像成书中突出显示的一节。Google 的缓存页面就是典型的用例。如果链接到一个缓存的副本,搜索词就被加上标志。例如,如果搜索 “Egret”,那么缓存的 Google 页面可能像下面这样:

The Great <m>Egret</m> (also known as the
American <m>Egret</m>)is a large white wading bird found worldwide.
The Great <m>Egret</m> flies with slow wing beats. The
scientific name of the Great <m>Egret</m> is <i>Casmerodius
albus</i>.

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

time

  time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007。例如:

<p>I am writing this example at
< time>5:35 P.M. on April 23rd</time>.
< /p>

  time 元素可以帮助浏览器和其他程序识别出 HTML 页面中的时间。它不要求对元素内容应用任何特定的格式。但是,每个 time 元素都应该有一个 datetime 属性,其中包含更适合机器识别的时间值,比如:

<p>I am writing this example at
< time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>.
< /p>

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

meter

  meter 元素表示指定范围内的数字值。例如,可以用它表示薪水、投票给 Le Pen 的法国选民的百分比或考试分数。在这里,我使用 meter 标出 Software Development 2007 上一位 Google 程序员提供的数据:

<p>An entry level programmer in Silicon Valley
can expect to start around <meter>$90,000</meter> per year.
< /p>

  meter 元素帮助浏览器和其他客户机识别 HTML 页面中的数量。它不要求对元素内容应用任何特定的格式。但是,每个 meter 元素可以有最多 6 个属性,它们按照更适合机器识别的形式表示这个数量:
  value
  min
  low
  high
  max
  optimum
  这些属性都应该包含一个十进制数字。例如,期末考试的分数可以写成下面这样:

<p>Your score was
< meter value="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:
< progress value="1534602" max="4603807">33%</progress>
< /p>

  value 属性表示操作的当前状态。max 属性表示操作的总量。这个元素指出要下载的数据总量是 4,603,807 字节,已经下载了 1,534,602 字节。
  忽略 max 属性,就可以显示无限的进度。
  在操作进行时,应该使用 JavaScript 语言动态地更新进度条。在静态情况下,这个元素没什么意义。

分享到:
评论

相关推荐

    入门级HTML教程-HTML元素

    这篇“入门级HTML教程-HTML元素”旨在帮助初学者理解和掌握HTML的基本元素及其用途。 首先,`&lt;a&gt;`元素用于创建超链接,它可以链接到网页、文件、电子邮件地址等。`&lt;acronym&gt;`元素用于表示首字母缩略词,例如NASA。`...

    Html实例教程--入门教程

    `&lt;div&gt;`作为布局容器,以及`&lt;span&gt;`用于内联元素的样式控制等。 表格是HTML中的重要组成部分,通过`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;td&gt;`(单元格)和`&lt;th&gt;`(表头)来构建。此外,`&lt;form&gt;`元素用于创建表单,`&lt;input&gt;`...

    html教程---web编程入门级word版本教材

    9. **区块元素与内联元素**:如是块级元素,它会占据整个宽度并开始新的行;而是内联元素,只占据自身内容的宽度。 10. **CSS简介**:虽然这不是HTML的一部分,但HTML经常与CSS(Cascading Style Sheets)结合使用...

    《HTML教程》----------------------

    ### HTML教程知识点详解 #### 一、HTML简介 **1.1 什么是HTML** - **定义**: HTML(HyperText Markup Language)是一种标记语言,用于创建网页。它通过一系列的标签来描述网页的内容和结构。 - **特点**: - HTML...

    HTML5系列教程

    HTML5是Web开发领域的一次重大革新,它在2014年被...通过这个HTML5系列教程,你将系统地学习HTML5的各种特性,并能将其应用到实际项目中,无论是创建响应式网站还是开发原生感的移动应用,HTML5都是不可或缺的工具。

    Html教程-ppt.

    这个“HTML教程-ppt”很显然是一个关于HTML的学习资源,可能包含了一系列幻灯片,详细讲解了HTML的基本概念、语法以及实际应用。 在HTML教程中,你可能会学到以下关键知识点: 1. **HTML基础**:HTML的起源和发展...

    css教程--ppt

    1. 内联样式表(Inline styles): 在HTML元素内部使用`style`属性来设置样式,例如`;"&gt;文本&lt;/p&gt;`。 2. 嵌入样式表(Embedded style sheets): 在HTML文档的`&lt;head&gt;`部分使用`&lt;style&gt;`标签定义样式,适用于整个文档。 3. ...

    HTML5程序设计基础教程-源代码

    四、HTML5实战 1. 页面布局:利用新元素进行页面布局,如使用`&lt;header&gt;`和`&lt;footer&gt;`创建页眉和页脚,`&lt;nav&gt;`构建导航栏。 2. 图像优化:使用`&lt;figure&gt;`和`&lt;figcaption&gt;`组合展示图片并添加说明。 3. 媒体集成:通过...

    《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf

    - 和是常用的布局标签,其中是块级元素,而是内联元素。 - 和用于区分内容区域,表示独立内容,而用于划分内容节。 6. 超链接与字符实体 - 超链接元素用于创建指向其他资源的链接,支持跳转到不同网页、页面内部...

    html语法的教程 java中有用

    - 内联元素与块级元素:内联元素如`&lt;span&gt;`不会独占一行,而块级元素如`&lt;div&gt;`会占据整个宽度。 2. CSS与HTML结合 - CSS(Cascading Style Sheets)用于控制HTML元素的样式,通过`&lt;style&gt;`标签或外部样式表引入。...

    HTML5与CSS3web前端开发技术习题答案.pdf

    - **`style`**:定义元素的内联样式,可以覆盖外部CSS规则。 - **`tabindex`**:定义元素在使用Tab键导航时的顺序。 - **`title`**:定义有关元素的额外信息,通常显示为工具提示。 **(3)HTML5具有哪些典型特性?...

    《HTML5+CSS3网站设计基础教程》-教学大纲.docx

    《HTML5+CSS3网站设计基础教程》作为计算机科学领域中的一门核心课程,对网页设计师和前端开发人员而言,其重要性不言而喻。该课程以HTML5和CSS3为基础,为学生提供了一个坚实的网络设计与开发的平台。本文将详细...

    python自学教程-09-常见的html标签.ev4.rar

    Python 自学教程 - 第09课:常见的HTML标签 HTML(HyperText Markup Language)是用于创建网页的标准标记语言。在Python编程中,特别是在网络爬虫、网页解析或自动化测试等领域,理解和使用HTML是非常重要的。本...

    css基础教程--CSS快速入门、怎样编写CSS、CSS属性、CSS定位、CSS滤镜 

    - `filter: blur(5px)`:使元素变得模糊。 - `filter: grayscale(1)`:将元素转换为黑白。 - `filter: brightness(80%)`:调整元素的亮度。 - `filter: drop-shadow(hOffset vOffset blurSpread color)`:添加...

    HTML基础教程 PPT文档

    块级元素如`&lt;div&gt;`、`&lt;p&gt;`和`&lt;h1&gt;`-`&lt;h6&gt;`占据整行宽度,而内联元素如`&lt;span&gt;`、`&lt;a&gt;`和`&lt;img&gt;`只占据自身内容宽度。` `和`&lt;hr&gt;`也是内联元素,但不包含内容。 八、CSS样式 虽然不是HTML的一部分,但CSS...

    cocos2d-html5官方教程5代码重写

    ### cocos2d-html5官方教程5代码重写 #### 一、概述 本文档是对cocos2d-html5官方教程第5部分的代码重写,旨在帮助初学者更好地理解和掌握cocos2d-html5框架的基本用法。由于官方文档有时在国内访问不稳定,因此将...

    微信内视频及普通浏览器内视频内联播放方案H5inlinevideo

    本教程将深入探讨如何在微信内以及普通浏览器中实现视频的内联播放方案,即H5 inline video。 首先,我们要了解HTML5的`&lt;video&gt;`标签,它是实现内联视频播放的基础。`&lt;video&gt;`标签允许开发者在网页中嵌入视频内容,...

    《HTML+5+从入门到精通》-中文学习教程

    ### HTML5从入门到精通-中文学习教程 #### HTML5介绍 HTML5是HyperText Markup Language(超文本标记语言)的第五个版本,它在HTML4的基础上进行了许多改进和扩展,旨在提供更好的网页表现能力、更强的数据存储...

Global site tag (gtag.js) - Google Analytics