浅谈HTML5之二:新增的元素和废除的元素

(声明:内容节选自《HTML 5从入门到精通》)

新增结构元素:

section元素

section元素定义文档或应用程序中的一个区段,比如章节、页眉、页脚或文档中的其他部分。它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构。

HTML5中代码示例:

HTML4中代码示例:

article元素

article元素表示文档中的一块独立的内容,譬如博客中的一篇文章或报纸中的一篇文章。

HTML5中代码示例

HTML4中代码示例

header元素

header元素表示页面中一个内容区块或整个页面的标题。HTML5中代码

示例:

HTML4中代码示例

nav元素

nav元素表示导航链接的部分。

HTML5中代码示例

HTML4中代码示例

footer元素

footer元素表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名、文档的创作日期以及创建者联系信息。

HTML5中代码示例

HTML4中代码示例

————————————————————————————————————————————————————————

新增块级语义元素:

aside元素

aside元素表示article元素的内容之外的与article元素的内容相关的有关内容。

HTML5中代码示例

HTML4中代码示例

figure元素

figure元素表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用

元素为figure元素组添

加标题。

HTML5中代码示例:

<figure>

<figcaption>PRCfigcaption>

<p>The People's Republic of China was born in 1949...p>

figure>

HTML4中代码示例:

<dl>

<h1>PRCh1>

<p>The People's Republic of China was born in 1949...p>

dl>

dialog元素

dialog标签定义对话,比如交谈。注意:对话中的每个句子都必须属于

标签所定义的部分。

HTML5中代码示例:

<dialog>

<dt>老师dt>

<dd>2+2 等于?dd>

<dt>学生dt>

<dd>4dd>

<dt>老师dt>

<dd>答对了!dd>

dialog>

————————————————————————————————————————————————————————

新增行内语义元素:

mark元素

mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户

高亮显示搜索关键词。

HTML5中代码示例

HTML4中代码示例

time元素

time元素表示日期或时间,也可以同时表示两者。

HTML5中代码示例:

HTML4中代码示例:

meter元素

meter元素表示度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定

义。

HTML5中代码示例:

progress元素

progress元素表示运行中的进程。可以使用 progress元素来显示 JavaScript 中耗费时间的函数的进程。

HTML5中代码示例

————————————————————————————————————————————————————————

新增多媒体与交互性元素:

video元素&audio元素

video用来插入视频,audio用来插入声音,当然,用下面这个:

<video src="XX.wmv">您的浏览器不支持video标签video>

如果不支持的话,就会显示标签内的文字

details元素

details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可

见的,用户点击标题时,会显示出details。summary元素应该是details元素的第一个子元素。

HTML5中代码示例:

<details><summary>HTML 5summary>

This document teaches you everything you have to learn about HTML 5.

details>

                    

你可能感兴趣的:(javascript)