全栈工程师知识点汇总——html5（上）

一、HTML5

1、新特性：
1. 取消了过时的显示效果标记 <font></font> 和 <center></center> ...
2. 新表单元素引入
3. 新语义标签的引入
4. canvas标签（图形设计）
5. 本地数据库（本地存储）
6. 一些API
好处：
1. 跨平台
例如：比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。

缺点：
1. pc端浏览器支持不是特别友好，造成用户体验不佳

2、## 新语义标签

### 网页布局结构标签及兼容处理

```html
<header></header>
<footer></footer>
<article></article>
<aside></aside>
<nav></nav>
<section></section>
....

布局结构标签 兼容IE处理方式：

a、document.createElement("nav");
display:block;

b、通过js插件——（语义标签兼容处理插件：html5shiv.js）
<script type="text/javascript" src="code/语义标签兼容处理/html5shiv.min.js"></script>

c、（终极解决方案）快捷键：cc：ie6 + tab键
<!--[if lte IE 8]>
<script type="text/javascript" src="code/语义标签兼容处理/html5shiv.min.js"></script>
<![endif]-->

### 多媒体标签及属性介绍

<video></video> 视频
属性：controls 显示控制栏
属性：autoplay 自动播放
属性：loop 设置循环播放

<audio></audio> 音频
属性：controls 显示控制栏
属性：autoplay 自动播放
属性：loop 设置循环播放

多媒体标签在网页中的兼容效果方式（巧用source兼容）

<video>
<source src="code/多媒体标签/trailer.mp4">
<source src="trailer.ogg">
<source src="trailer.WebM">
</video>

### 智能表单控件

<input type="email">

email: 输入合法的邮箱地址（省去写正则表达式的烦恼）
url： 输入合法的网址
number： 只能输入数字
range： 滑块
color： 拾色器
date： 显示日期
month： 显示月份
week ： 显示第几周
time： 显示时间

### 表单属性

form属性：
autocomplete = on | off 自动完成（默认打开）
novalidate （= true | false） 是否关闭校验

input属性：
* autofocus 自动获取焦点
multiple 实现多选效果
* placeholder:"" 占位符 （提示信息）
* required 必填项

form = "id"

list = "id"
例： <input type="text" list="abc"/>
<datalist id="abc">
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
</datalist>