HTML5 教程(四) - 内联元素

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

　　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 Casmerodius
albus.

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

time

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

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

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

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

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

meter

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

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

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

Your score was
< meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B </meter>.

　　这表示这个学生的分数是百分制中的 88.7。可能的最低分数是 0，但是实际的最低分数是 65。可能的最高分数是 100，但是实际的最高分数是 96。用户代理可以用某种数值控件显示这一信息，也可以在工具提示中显示额外的数据，但是最常见的情况可能是像其他内联元素一样对它应用样式。

progress

　　progress 元素表示一个正在进行的过程的状态，就像图形用户界面（GUI）应用程序中的进度条。例如，可以用它表示一个文件已经下载的百分比或者播放电影时的当前位置。下面这个进度控件表示下载已经完成了 33%：

Downloaded:
< progress value="1534602" max="4603807">33%</progress>

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

HTML5 教程(四) - 内联元素相关推荐

HTML基础（四）常用的内联元素
上次的教程介绍的是块级元素,其中也谈到了内联元素的概念,这次便介绍常用的内联元素. 内联元素又称之为行内元素,即一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行. 常见的内联元素有链接元素a ...
html5块元素代码,html5 区块与内联div 与span html块级元素(示例代码)
HTML 和可以通过和将 HTML 元素组合起来. HTML 块元素大多数 HTML 元素被定义为块级元素或内联元素. 编者注:"块级元素"译为 block level e ...
第二章网站开发基础之HTML教程 - 二、常用HTML标签：i，斜体字效果（内联元素）
12.i,斜体字效果(内联元素) <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-T ...
在html中怎么设置内联标签,HTML中内联元素有哪些
内联元素有:a.acronym.b.br.cite.code.dfn.em.font.i.img.input.kbd.label.s.samp.small.span.strong.sub.sup.te ...
CSS文档流与块级元素和内联元素
文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
块状元素、内联元素和内联块状元素
CSS中,html中的标签元素大体被分为三种不同的类型:块状元素(display:block).内联元素(又叫行内元素display:inline)和内联块状元素(display:inline-blo ...
css 块元素、内联元素、内联块元素
元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签,如:div.p.ul.li.h ...
CSS块级元素、内联元素概念
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
html能插入背景的行级元素,Html元素类型：块级元素、行内元素（内联元素）和行内块级元素...
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素.事实上,我以前用的时候只 ...
html块状元素和内联元素_HTML中的内联元素和块元素-解释
html块状元素和内联元素块和内联元素 (Block and Inline Elements) Let's understand block and inline elements using th ...

HTML5 教程(四) - 内联元素

HTML5 教程(四) - 内联元素相关推荐

最新文章

热门文章