HTML5之新增的元素和废除的元素 (声明:内容节选自《HTML 5从入门到精通》)

新增结构元素:

section元素

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

HTML5中代码示例:<section>…</section>

HTML4中代码示例:<div>…</div>

article元素

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

HTML5中代码示例:<article>…</article>

HTML4中代码示例:<div class="article">…</div>

header元素

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

示例:<header>…</header>

HTML4中代码示例:<div>…</div>

nav元素

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

HTML5中代码示例: <nav>…</nav>

HTML4中代码示例:<ul>…</ul>

footer元素

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

HTML5中代码示例:<footer>…</footer>

HTML4中代码示例:<div>…</div>

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

新增块级语义元素:

aside元素

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

HTML5中代码示例:<aside>…</aside>

HTML4中代码示例:<div>…</div>

figure元素

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

加标题。

HTML5中代码示例:

<figure>

<figcaption>PRC</figcaption>

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

</figure>

HTML4中代码示例:

<dl>

<h1>PRC</h1>

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

</dl>

dialog元素

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

HTML5中代码示例:

<dialog>

<dt>老师</dt>

<dd>2+2 等于?</dd>

<dt>学生</dt>

<dd>4</dd>

<dt>老师</dt>

<dd>答对了!</dd>

</dialog>

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

新增行内语义元素:

mark元素

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

高亮显示搜索关键词。

HTML5中代码示例:<mark>…</mark>

HTML4中代码示例:<span>…</span>

time元素

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

HTML5中代码示例: <time>…</time>

HTML4中代码示例:<span>…</span>

meter元素

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

义。

HTML5中代码示例: <meter>…</meter>

progress元素

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

HTML5中代码示例:<progress>…</progress>

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

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

video元素&audio元素

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

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

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

details元素

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

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

HTML5中代码示例:

<details><summary>HTML 5</summary>

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

</details>
<!--实践证明没用啊。。。—>

datagrid元素

datagrid元素表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。

HTML5中代码示例:<datagrid>…</datagrid>

menu元素

menu元素表示菜单列表。当希望列出表单控件时使用该标签。

HTML5中代码示例:

<menu>

<li><input type="checkbox" />Red</li>

<li><input type="checkbox"/>blue</li>

</menu>

U注意:HTML4中 menu元素不被推荐使用。

command元素

command元素表示命令按钮,比如单选按钮、复选框或按钮。

HTML5中代码示例:

?command元素

command元素表示命令按钮,比如单选按钮、复选框或按

钮。

HTML5中代码示例: command onclick=cut()" label="cut">

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

新增input类型:

email——email类型用于应该包含 e-mail 地址的输入域。

url——url 类型用于应该包含 URL 地址的输入域。

number——number 类型用于应该包含数值的输入域。

range——range 类型用于应该包含一定范围内数字值的输入域。

Date Pickers(数据检出器)

search——search 类型用于搜索域,比如站点搜索或 Google 搜索。search 域显示为常规的文本域。

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

多个可供选取日期和时间的新输入类型:

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间(小时和分钟)

datetime - 选取时间、日、月、年(UTC 时间)

datetime-local - 选取时间、日、月、年(本地时间)

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

废除的元素:

?1.能使用css代替的元素

对于basefont、big、center、font、s、strike、tt、u这些元素,由于他们的功能都是纯粹为画面展示服务的,而在HTML5中提

倡把画面展示性功能放在css样式表中统一编辑,所以将这些元素废除,并使用编辑css样式表的方式进行替代。

?2.不再使用frame框架

对于frameset元素、frame元素与nofranes元素,由于frame框架对页面可存在负面影响,在html5中已不再支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的复合页面的形式,同时将以上三个元素废除。

?3.只有部分浏览器支持的元素

对于applet、bgsound、blink、marguee等元素,由于只有部分浏览器支持这些元素,所以在HTML5中被废除。其中applet元素可由embed元素替代,bgsound元素可由audio元素替代,marquee可以由JavaScript编程的方式所替代。

原文地址:https://www.cnblogs.com/agasha/p/9971711.html

时间: 2024-10-06 20:41:46

HTML5之新增的元素和废除的元素 (声明:内容节选自《HTML 5从入门到精通》)的相关文章

html5的新增的标签和废除的标签

新增的结构标签 section元素 表示页面中的一个内容区块,比如章节.页眉.页脚或页面的其他部分.可以和h1. h2……等元素结合起来使用,表示文档结构.例:HTML5中<section>……</section>;HTML4中<div> ……</div>. article元素 表示页面中一块与上下文不相关的独立内容.比如一篇文章. aside元素 表示article元素内容之外的.与article元素内容相关的辅助信息. header元素 表示页面中一个内

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

新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. HTML5中代码示例:<section>…</section> HTML4中代码示例:<div>…</div> article元素 article元素表示文档中的一块独立的内容,譬如博客中的一篇文章或报纸中的一篇文章. HTML5中代码示例:<artic

HTML5 与 HTML4 的区别(2) - 新增的元素和废除的元素

新增的结构元素 在 HTML5 中,新增了以下与结构相关的元素: section元素 section 元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.        它可以与h1.h2.h3.h4.h5.h6等元素结合起来使用,标识文档结构. HTML5 中代码示例:        <section>....</section> HTML4 中代码示例:        <div>...</div> article元素 article 元

html5中新增的元素和废除的元素

一.新增的结构元素 1.section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.它可以与h1.h2.h3.h4.h5.h6等元素结合起来使用,标示文档结构. h5中的代码事例:<section></section> h4中的代码事例:<div></div> 2.article元素表示页面中的一块与上下文不相关的独立内容,譬如博客中的一篇文章或报纸中的一篇文章. h5中的代码事例:<article><article

重温html5的新增的标签和废除的标签

HTML5已经盛行有段时间了,对于标签的使用,按照规范,哪些该用,哪些不该用,你是否都掌握了呢.今天我在这里详细列举下: 新增的结构标签 section元素 表示页面中的一个内容区 块,比如章节.页眉.页脚或页面的其他部分.可以和h1. h2……等元素结合起来使用,表示文档结构.例:HTML5中<section>……</section>:HTML4 中<div> ……</div>. article元素 表示页面中一块与上下文不相关的独立内容.比如一篇文章.

HTML5新增的属性和废除的属性

HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofocus属性.它以指定属性的方式让元素在画面打开时自动获得焦点. 对input(type=text).textarea指定placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容. 对input.output.select.textarea.button与fieldset指定form

HTML5的新增标签和废除的标签

output标签 定义不同类型的输出,比如脚本的输出. source标签 标签为媒介元素(比如 和 )定义媒介资源. menu标签 定义菜单列表.当希望列出表单控件时使用该标签.注意与nav的区别,menu专门用于表单控件. Red blue 新增input标签 email 必须输入email url 必须输入url地址 number 必须输入数值 range 必须输入一定范围内数值 Date Pickers(日期选择器) 拥有多个可供选取日期和时间的新输入类型: date - 选取日.月.年

html5新增的属性和废除的属性简要概述

HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性.鞍山皮肤病科在哪www.0412pfk.net 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofocus属性.它以指定属性的方式让元素在画面打开时自动获得焦点. 对input(type=text).textarea指定placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容. 对input.output.select.textare

HTML5之新增的元素

今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大赛的初赛>.我被我们老师拉去做了义工-----计时员.看了所有老师的比赛,虽然都特别好,但是让我印象深刻的还是一个HTMl5+CSS3的课程.看到那种炫酷的效果,我瞬间都被吸引住了.所以忙完了手头上的作业,就从别人那里要到了HTML5的教程,开始了我的学习HTML5之路.虽然看了6节课了,还是没有学到老