新增结构元素:

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编程的方式所替代。

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

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

    一.新增的结构元素 1.section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.它可以与h1.h2.h3.h4.h5.h6等元素结合起来使用,标示文档结构. h5中的代码事 ...

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

    HTML5已经盛行有段时间了,对于标签的使用,按照规范,哪些该用,哪些不该用,你是否都掌握了呢.今天我在这里详细列举下: 新增的结构标签 section元素 表示页面中的一个内容区 块,比如章节.页眉 ...

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

    新增的属性 1.表单相关的属性 ———————————————————————————————————————————————————————— •autocomplete 属性 autocomple ...

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

    HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...

  5. HTML5之新增的元素

    今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...

  6. html5中新增的非主体结构的元素

    html5中出了新增了article.section.nav.aside.time主要结构元素外,还增加了一些表示逻辑结构或附加信息的非主体结构元素. 一.header元素 header元素是一种具有 ...

  7. 1+x 证书 web 前端开发 HTML5 - 新增的元素,删除的元素

    官方QQ群 1+x 证书 web 前端开发 HTML5 - 新增的元素,删除的元素 http://blog.zh66.club/index.php/archives/197/

  8. html5中新增非主体结构元素

    1.header元素 定义HTML文档的页眉,是一种具有引导和导航作用的结构元素 <header> <h1>header元素</h1> <nav> &l ...

  9. HTML5中新增的主体结构元素

    article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容. 它可以使一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的插件,或其他任何独立的内 ...

随机推荐

  1. python中type、class、object的区别

    type 一. type可以用来返回一个对象的类型 例如: 二. 由于Python中一切皆对象,也就是说Python中的任何变量类型都是可以被修改的,这也是Python等动态编程语言的特点.type的 ...

  2. js的语言的理解

    1.所谓字面量,就是语言语法 2.在js编译器读到语法时候,执行时候创建对象:在赋值的时候创建一个对象,或者是一个匿名对象. 3.函数定义本身是一个对象:执行时候不产生实例对象:这跟python类不一 ...

  3. LeetCode 795. Number of Subarrays with Bounded Maximum

    问题链接 LeetCode 795 题目解析 给定一个数组A,左右范围L.R.求子数组的数量,要求:子数组最大值在L.R之间. 解题思路 子数组必须连续,利用最大值R对数组进行分段,设定变量 left ...

  4. Linux 线程调度策略与线程优先级

    Linux内核的三种调度策略 SCHED_OTHER 分时调度策略. 它是默认的线程分时调度策略,所有的线程的优先级别都是0,线程的调度是通过分时来完成的.简单地说,如果系统使用这种调度策略,程序将无 ...

  5. [原创] Trie树 php 实现敏感词过滤

    目录 背景 简介 存储结构 PHP 其他语言 字符串分割 示例代码 php 优化 缓存字典树 常驻服务 参考文章 背景 项目中需要过滤用户发送的聊天文本, 由于敏感词有将近2W条, 如果用 str_r ...

  6. HAL库PWM

    1.占空比控制 a.在CUBMX的TIM下选择时钟源,选择通道为模式PWM Generation ch1 ,设置分频系数,初始值,不需要自动重装载,选择PWM模式1或2,设置比较值pulse,设置初始 ...

  7. (转)QEMU 使用的镜像文件:qcow2 与 raw

    原文:https://www.ibm.com/developerworks/cn/linux/1409_qiaoly_qemuimgages/ qcow2 的基本原理 qcow2 镜像格式是 QEMU ...

  8. (转)架构师之DNS实战CentOS7VSCentOS6

    原文:https://www.abcdocker.com/abcdocker/1298 CentOS7上使用bind9搭建DNS主从服务器-----http://blog.51cto.com/yich ...

  9. spring boot快速入门 9: 单元测试

    进行单元测试: service第一种方式: 第一步:在指定service中创建一个方法进行测试 /** * 通过ID查询一个女生的信息 * @param id * @return */ public ...

  10. WCF系列教程之WCF中的会话

    本文参考自http://www.cnblogs.com/wangweimutou/p/4516224.html,纯属读书笔记,加深记忆 一.WCF会话简介 1.在WCF应用程序中,回话将一组消息相互关 ...