HTML5新增的元素、废除的元素

添加背景音乐

本讲大纲：1、新增的结构元素

2、新增的块级（block）的语义元素

3、新增的行内（inline）的语义元素

4、新增的嵌入多媒体元素与交互性元素

5、新增的input元素的类型

5、废除的元素

新增的结构元素

section元素section元素定义文档或应用程序中的一个区段,比如章节、页眉、页脚或文档中的其他部分。它可以与h1,h2,h3,h4,h5,h6元素结合起来使用，标示文档结构。HTML5中代码示例：<section>…</section>HTML4中代码示例：<div>…</div>article元素article元素表示文档中的一块独立的内容，譬如博客中的一篇文章或报纸中的一篇文章。HTML5中代码示例：<article>…</article>HTML4中代码示例：<divclass="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>新增的块级（block）的语义元素

aside元素

aside元素表示article元素的内容之外的与article元素的内容相关的有关内容。HTML5中代码示例：<aside>…</aside>HTML4中代码示例：<div>…</div>新增的块级（block）的语义元素figure元素figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用<figcaption>元素为figure元素组添加标题。HTML5中代码示例：<figure><figcaption>PRC</figcaption><p>ThePeople'sRepublicofChinawasbornin1949...</p></figure>HTML4中代码示例：<dl><h1>PRC</h1><p>ThePeople'sRepublicofChinawasbornin1949...</p></dl>新增的块级（block）的语义元素dialog元素dialog标签定义对话，比如交谈。注意：对话中的每个句子都必须属于<dt>标签所定义的部分。HTML5中代码示例：<dialog><dt>老师</dt><dd>2+2等于？</dd><dt>学生</dt><dd>4</dd><dt>老师</dt><dd>答对了！</dd></dialog>

新增的行内（inline）的语义元素

mark元素mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。HTML5中代码示例：<mark>…</mark>HTML4中代码示例：<span>…</span>新增的行内（inline）的语义元素time元素

time元素表示日期或时间，也可以同时表示两者。HTML5中代码示例:<time>…</time>HTML4中代码示例:<span>…</span>新增的行内（inline）的语义元素meter元素

meter元素表示度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在min/max属性中定义。HTML5中代码示例:<metervalue="3"min="0"max="10">3/10</meter><br><metervalue="0.6">60%</meter>新增的行内（inline）的语义元素progress元素progress元素表示运行中的进程。可以使用progress元素来显示JavaScript中耗费时间的函数的进程。HTML5中代码示例：<progress>…</progress>下载进度：<progressvalue="22"max="100"></progress>新增的嵌入多媒体元素与交互性元素

details元素details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示出details。summary元素应该是details元素的第一个子元素。HTML5中代码示例：<details><summary>HTML5</summary>ThisdocumentteachesyoueverythingyouhavetolearnaboutHTML5.</details>新增的嵌入多媒体元素与交互性元素datagrid元素datagrid元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。HTML5中代码示例：<datagrid>…</datagrid>新增的嵌入多媒体元素与交互性元素menu元素menu元素表示菜单列表。当希望列出表单控件时使用该标签。HTML5中代码示例：<menu><li><inputtype="checkbox"/>Red</li><li><inputtype="checkbox"/>blue</li></menu>注意：HTML4中menu元素不被推荐使用。新增的嵌入多媒体元素与交互性元素command元素command元素表示命令按钮，比如单选按钮、复选框或按钮。HTML5中代码示例:<commandonclick=cut()"label="cut">新增的input元素的类型

HTML5中，新增了很多input元素的类型，现列举如下：email

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

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

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

range类型用于应该包含一定范围内数字值的输入域。DatePickers（数据检出器）searchsearch类型用于搜索域，比如站点搜索或Google搜索。search域显示为常规的文本域。新增的input元素的类型HTML5拥有多个可供选取日期和时间的新输入类型date-选取日、月、年month-选取月、年week-选取周和年time-选取时间（小时和分钟）datetime-选取时间、日、月、年（UTC时间）datetime-local-选取时间、日、月、年（本地时间）废除的元素

由于各种原因，在HTML5中废除了很多元素，下面简单介绍一下被废除的元素。1.能使用css代替的元素对于basefont、big、center、font、s、strike、tt、u这些元素，由于他们的功能都是纯粹为画面展示服务的，而在HTML5中提倡把画面展示性功能放在css样式表中统一编辑，所以将这些元素废除，并使用编辑css样式表的方式进行替代。2.不在使用frame框架对于frameset元素、frame元素与nofranes元素，由于frame框架对页面可以性存在负面影响，在html5中已不再支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的复合页面的