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

2018-11-17 admin

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中代码

示例:…

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://segmentfault.com/a/1190000017044347

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45664.html

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

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
html5+JavaScript教程-微信打飞机小游戏源码
js &#x2F;&#x2F; JavaScript Document var c = document.getElementById(&quot;dotu&quot;); var cxt = c.getContext(&quot;2d&q...
2015-11-12
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
国内外html5游戏引擎排行
一个好的HTML5游戏引擎,能够大大简化游戏的开发实现。 排名列表: Construct 2 ImpactJS EaselJS pixi.js Phaser GameMaker Three.js PlayCanvas Turbulenz ...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
详解HTML5游戏玩家流失原因
对任何类型的电子游戏来说,玩家流失都是一个无法回避的问题。玩家为什么离开游戏?近日,HTML5游戏设定师纳森·洛维托(Nathan Lovato)在游戏开发者网站Gamasutra撰写文章,解读了玩家离开游戏的16个理由。 HTML5游戏 ...
2015-11-12
回到顶部