html5新增属性----多媒体、input类型

HTML5

HTML5是HTML最新的修订版本
HTML5 中的一些新特性：

• 用于绘画的 canvas 元素

• 用于媒介回放的 video 和 audio 元素

• 对本地离线存储的更好的支持

• 新的特殊内容元素，比如 article、footer、header、nav、section

• 新的表单控件，比如 calendar、date、time、email、url、search

HTML5 的改进
新元素、新属性、完全支持 CSS3
Video 和 Audio、2D/3D 制图
本地存储、本地 SQL 数据、Web 应用

HTML5多媒体

<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

< video >视频
< video > 元素提供了 播放、暂停和音量控件来控制视频。
在html5中显示视频：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

< video > 元素支持多个 < source > 元素、
width 和 height 属性控制视频的尺寸、
< source > 元素可以链接不同的视频文件。

MP4 : 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM : 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg : 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

< Audio >音频标签
HTML5 提供了播放音频文件的标准。
在html5中播放音频：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

control 属性供添加播放、暂停和音量控件。
< audio >元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

HTML 新的input类型

Input 类型: color
color 类型用在input字段主要用于选取颜色

选择你喜欢的颜色：<input type="color" name="favcolor">

Input 类型: date
date 类型允许你从一个日期选择器选择一个日期。

选择一个日期：<input type="date" name="day">

Input 类型: datetime
datetime 类型允许你选择一个日期（UTC 时间）。

生日 (日期和时间): <input type="datetime" name="bdaytime">

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

E-mail: <input type="email" name="email">

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

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

使用下面的属性来规定对数字类型的限定：
disabled	规定输入字段是禁用的
max			规定允许的最大值
maxlength	规定输入字段的最大字符长度
min			规定允许的最小值
pattern		规定用于验证输入字段的模式
readonly	规定输入字段的值无法修改
required	规定输入字段的值是必需的
size		规定输入字段中的可见字符数
step		规定输入字段的合法数字间隔
value		规定输入字段的默认值

Input 类型: range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。

<input type="range" name="points" min="1" max="10">

可使用下面的属性来规定对数字类型的限定：

max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

Input 类型: tel
定义输入电话号码字段:

电话号码: <input type="tel" name="usrtel">

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

在提交表单时，会自动验证 url 域的值。

<input type="url" name="homepage">

HTML5应用

• 本地数据存储
• 访问本地文件
• 本地 SQL 数据
• 缓存引用
• Javascript 工作者
• XHTMLHttpRequest 2

HTML5图形

• 使用 < canvas > 元素。
• 使用内联 SVG。
• 使用 CSS3 2D 转换、CSS3 3D 转换。

HTML5 使用 CSS3

• 新选择器
• 新属性
• 动画
• 2D/3D 转换
• 圆角
• 阴影效果
• 可下载的字体

HTML新的语义和结构元素

什么是语义元素?
语义= 意义
语义元素 = 有意义的元素
无语义元素实例: <div> 和 <span> 等无需考虑内容.
语义元素实例: <form>,<table>, and <img>等清楚的定义了它的内容.

标 签	描 述
< article >	定义页面独立的内容区域。
< aside >	定义页面的侧边栏内容。
< bdi >	允许您设置一段文本，使其脱离其父元素的文本方向设置。
< command >	定义命令按钮，比如单选按钮、复选框或按钮
< details >	用于描述文档或文档某个部分的细节
< dialog >	定义对话框，比如提示框
< summary >	标签包含 details 元素的标题
< figure >	规定独立的流内容（图像、图表、照片、代码等等）。
< figcaption >	定义 < figure > 元素的标题
< footer >	定义 section 或 document 的页脚。
< header >	定义了文档的头部区域
< mark >	定义带有记号的文本。
< meter >	定义度量衡。仅用于已知最大和最小值的度量。
< nav >	定义导航链接的部分。
< progress >	定义任何类型的任务的进度。
< ruby >	定义 ruby 注释（中文注音或字符）。
< rt >	定义字符（中文注音或字符）的解释或发音。
< rp >	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
< section >	定义文档中的节（section、区段）。
< time >	定义日期或时间。
< wbr >	规定在文本中的何处适合添加换行符。

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

• < acronym >
• < applet >
• < basefont >
• < big >
• < center >
• < dir >
• < font >
• < frame >
• < frameset >
• < noframes >
• < strike >

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。