html5新增标签和html5新增input类型解释及用法

新增的结构元素:

<section> 元素表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。

<article> 元素表示页面中的一块与上下文不相关的独立内容,譬如博客中的一篇文章活报纸中的一篇文章

<aside> 元素表示article元素的内容之外的,与article元素的内容相关的辅助信息

<header> 元素表示页面中的一个内容区块或整个页面的标题

<hgroup> 元素用于对整个页面或页面中的一个内容区块的标题进行组合

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

<nav> 元素表示页面中导航链接的部分

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

<figure>
<figcaption>PRC</figcaption>
<p>我爱北京天安门</p>
</figure>

新增的其他元素:

<video> 元素定义视频,比如电影片段或其它视频流。

<video src="movie.ogg" controls="controls">video元素</video>

<audio> 元素定义音频,比如音乐或其它音频流。

<audio src="someaudio.wav">audio元素</audio>

<embed> 元素用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。

<embed src="horse.wav" />

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

<progress> 元素表示运行中的进程,可以使用progress元素来显示Javascript中耗费时间的函数的进程

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

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

<ruby> 元素表示ruby注释(中文注音或字符)。

 <ruby>漢<rt><rp>(</rp>厂<rp>)</rp></rt></ruby>

<rt> 元素表示字符(中文注音活字符)的解释或发音。

<rp> 元素在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容。

<wbr>  元素表示软换行。wbr元素于br元素的区别是:br元素表示此处必须换行;而wbr元素的意思是浏览器窗口或父级元素的宽度足够宽时(没必要换行),不进行换行,二档宽度不够时,主动在此处进行换行。

<canvas> 元素表示图形,比如图标和其它图像。这个元素本身没有行为,仅提供一块画布,但它把一个绘图API展现给客户端javascript,以使脚本能够吧想绘制的东西绘制到这块画布上。

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

<command onclick="cut()" label="cut">

<details> 元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的,用户点击标题时,会显示出细节信息。

<details>
    <summary>HTML 5</summary>
    我爱北京天安门
</details>

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

<datagrid> 元素表示可选数据的列表,它以属性列表的形式来显示。

<keygen> 元素表示生成秘钥

<output> 元素表示不同类型的输出,比如脚本的输出。

<source> 元素表示没接元素(video和audio)定义媒介资源

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

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

 新增的input元素的类型

emai> 类型表示必须输入E-mail地址的文本输入框

url 类型表示必须输入URL地址的文本输入框

number 类型表示必须输入数值的文本输入框

range 类型表示必须输入一定范围内数字值的文本输入框

Data Pickers 拥有多个可供选择日期和时间的新型输入文本框;

  • date——选取日、月、年
  • month——选取月、年
  • week——选取周和年
  • time——选取时间(小时和分钟)
  • datetime——选取时间、日、月、年(UTC时间)
  • datetime-local——选取时间、日、月、年(本地时间)