HTML5新特性

HTML5新特性

---

HTML5的新特性主要是针对以前的HTML中的不足做出改进，增加了一些新的标签、表单、表单属性……等。
XAML：可扩展应用程序标记语言，改善传统的WinForm界面
XML ：可扩展标记语言
HTML：超文本标记语言
这些新的特性具有兼容性的问题，而HTML5基本上都是基于IE9以上版本的浏览器才支持，如果不考虑兼容性问题，可以大胆的使用。

2、语义化标签

​ 让标签具有各自的含义。基本上我们之前的布局全部使用的都是div+类名，但是div对于搜索引擎而言是没有任何意义的(搜索推广)。

​ HTML5新增了很多语义化标签，这些语义化标签有利于浏览器的搜索引擎进行搜索，也方便了网站的SEO(search engine Optimizastion)——搜索引擎优化。

• header：头部标签
• nav：导航标签
• section：定义文档的某个区域
• footer：尾部标签
• aside：侧边栏标签
• article：内容标签

**注意：**搭建页面，结构比样式更重要

3、多媒体标签

​ 多媒体标签主要分为音频audio标签和视频video两个标签。和以前的不一样，以前主要使用的是Flash和其他的浏览器插件。同样这两个多媒体标签也同样具有相关的属性、方法、事件。

3.1 视频标签-video

3.1.1 语法格式

当前的video元素支持三种视频格式，但尽量使用MP4格式

 <video src="./路径.mp4"></video>

3.1.2 浏览器兼容性

浏览器	mp4	Webm	OGG
IE	可以	不支持	不支持
Chrome	可以	可以	可以
FireFox	可以21版本开始，Linux30版本开始	可以	可以
Safari	可以	不支持	不支持
Opera	可以从25版本	可以	可以

3.1.3 兼容性写法：

<video controls="controls" width="100%">
    <source src="./路径.mp4" type="video/mp4"> 
    <source src="./路径.ogg" type="video/ogg">
    <!-- 您的浏览器不支持video标签播放视频 -->
</video>

​ **注意：**上面的这种写法，浏览器会匹配video标签中的source，如果支持就播放，不支持则往下匹配，直到没有匹配的格式则自动提示文本。

3.1.4 video常用属性

1. autoplay(autoplay):视频自动播放(火狐、谷歌需要使用muted来解决)
2. muted(muted)：静音播放
3. controls(controls)：向用户显示播放控件
4. width：方法器的宽度
5. height：播放器的高度
6. src(url):视频文件的url地址
7. poster(url):加载等待的画面图片
8. loop(loop)：播放完是否继续播放该视频
9. preload(auto/none)：规定是否预加载视频，如果使用了autoplay属性就不要考虑该属性

3.2 音频标签-audio

3.2.1 基本使用

当前audio元素支持三种音频格式，但尽量使用MP3格式

<audio src="./路径.mp3" controls="controls"></audio>

3.1.2 浏览器兼容性

浏览器	MP3	WAV	OGG
IE	可以	不支持	不支持
Chrome	可以	可以	可以
Firefox	可以	可以	可以
Safari	可以	可以	不支持
Opera	可以	可以	可以

3.1.3 兼容性写法：

 <audio controls="controls">
    <source src="./路径.mp3" type="audio/mp3"> 
    <source src="./路径.ogg" type="audio/ogg">
    <!-- 您的浏览器不支持video标签播放视频 -->
</audio>

3.1.4 audio常用属性

1. autoplay(autoplay)：音频就绪后自动播放
2. controls(controls)：向用户显示播放控件
3. loop(loop)：音频播放完之后是否重新开始播放
4. src(url):音频文件路径

4、总结

1. 视频音频标签的基本使用方式一致
2. 浏览器支持情况不同
3. 谷歌火狐禁止了自动播放
4. 视频添加muted属性来实现自动播放

5、新增表单元素

新增的主要是输入类型，给input元素的type属性增加了很多类型

5.1 表单元素

• type=“email”：限制用户输入必须为Email类型
• type=“url”：限制用户输入必须为URL类型
• type=“date”：限制用户输入必须为日期类型
• type=“time””：限制用户输入必须为时间类型
• type=“month”：限制用户输入必须为月类型
• type=“week”：限制用户输入必须为周类型
• type=“number”:限制用户输入必须为数字类型
• type=“tel”：手机号码
• type=“search”：搜索框
• type=“color”：颜色选择表单

5.2 表单属性：

• required(required)：设置表单为必填项

<form action="" method="GET">
        账号<input type="text" name="user" id="" required> 密码
        <input type="password" name="pwd" id="" autofocus>
        <input type="submit" name="" id="" value="登录">
</form>

• placeholder(提示文本)：设置文本框的提示内容显示
• autofocus(autofocus)：设置自动聚焦

<form action="" method="GET">
        账号<input type="text" name="user" id="" autofocus> 
        密码<input type="password" name="pwd" id="" autofocus>
        <input type="submit" name="" id="" value="登录"> </form>

• multiple(multiple)：可以多选文件提交

 <form action="" method="GET">
        上传：
        <input type="file" name="email" id="" multiple="multiple">
        <input type="submit" name="" id="">
 </form>

• autocomplete(off/on)：当用户在字段开始键入时，浏览器基与之前输入的内容，显示出在字段中填写的选项，默认是打开的

  <form action="" method="GET" autocomplete="on">
        <input type="text" name="text" id="">
        <input type="email" name="email" id="">
        <input type="submit" name="" id="">
  </form>