day24-25：HTML5的新特性

一：HTML5的新特性

    HTML5的新增特性主要针对以前的不足，增加了一些新的标签，新的表单和新的表单属性等。

   这些新特性都有兼容性问题，基本上是IE9＋以上版本的浏览器才支持，如果不考虑兼容性，可以大量使用这些新特性。

   目前只介绍部分常用的新特性，之后继续补充其他新特性。

（1）之前都用div，div没有语义，只是一个盒子，新增了语义化标签：

1. ＜header＞头部标签
2. ＜nav＞导航标签
3. ＜artical＞内容标签
4. ＜section＞定义文档某个区域
5. ＜aside＞侧边栏标签
6. ＜footer＞尾部标签

注：

• 这种语义化标准主要是针对搜索引擎的
• 可以使用多次
• 在IE9中，需要把这些元素转化为块级元素
• 移动端更喜欢用这种标签
• 还有其他标签，等后续。。

（2）新增多媒体标签

1. 音频＜audio＞（MP3基本都支持）
2. 视频＜video＞（只支持MP4，WebM，ogg三种格式，不同浏览器支持的各有不同，但MP4几乎所有浏览器都支持，所以尽量使用MP4格式。）

   可以方便在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。

视频语法：

＜video src="" controls ="controls "＞＜/video ＞

controls 为播放控件

属性：autoplay 值：autoplay （视频就绪自动播放，谷歌需要添加muted来解决自动播放问题）

controls controls 向用户展示播放控件

width pixels（像素）height px

loop loop 播放完是否继续播放该视频，循环播放

preload auto（预先加载视频）/none（不预加载）  如果有autoplay就忽略该属性

src url 地址

poster imgurl 加载等待的画面图片

muted muted静音播放

音频语法：

＜audio src=" " controls ="controls"＞＜/audio ＞

音频和视频标签使用方式基本一致。

1.3 HTML5新增的input类型

 属性值type=

email   url（网址）   date   time    month   week    number    tel(手机号码）   search    color（生成一个颜色选择表单）

验证时必须添加form表单域

当点击提交按钮就可以验证表单了

重点：number tel search

1.4 HTML5新增表单属性

required = "required" 内容不能为空

placeholder 提示文本 提示信息，存在默认值将不显示

autofocus ="autofocus" 自动聚焦属性，页面加载完成自动聚焦到指定表单

autocomplete = off/on 当用户在字段开始键入时，浏览器基于之前键过的值，应该显示出在字段中填写的选项。默认已经打开，即on，关闭off，需要放在表单内，同时加上name属性，同时提交成功。

multiple = "multiple" 可以多选文件提交

重点：placeholder和multiple

改颜色：style中

input::placeholder ｛ color:pink; ｝