全棧工程師知識點彙總——html5（上）

1、HTML5

一、新特性：
1. 取消了過期的顯示效果標記 <font></font> 和 <center></center> ...
2. 新表單元素引入
3. 新語義標籤的引入
4. canvas標籤（圖形設計）
5. 本地數據庫（本地存儲）
6. 一些API
好處：
1. 跨平臺
例如：好比你開發了一款HTML5的遊戲，你能夠很輕易地移植到UC的開放平臺、Opera的遊戲中心、Facebook應用平臺，甚至能夠經過封裝的技術發放到App Store或Google Play上，因此它的跨平臺性很是強大，這也是大多數人對HTML5有興趣的主要緣由。

缺點：
1. pc端瀏覽器支持不是特別友好，形成用戶體驗不佳

二、## 新語義標籤

 

### 網頁佈局結構標籤及兼容處理

```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>