一些關於html5和css3的筆記

1.1 認識HTML5

HTML5並不只僅只是作爲HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成爲第一個將Web作爲應用開發平臺的HTML語言。

HTML5定義了一系列新元素，如新語義標籤、智能表單、多媒體標籤等，能夠幫助開發者建立富互聯網應用，還提供了一些Javascript API，如地理定位、重力感應、硬件訪問等，能夠在瀏覽器內實現類原生應用，甚至結合Canvas咱們可開發網頁版遊戲。

  

咱們平常討論的H5其實指的是一個範稱，它是由HTML5 + CSS3 + Javascript等技術組合而成的一個應用開發平臺。

1.2 語法規範

隨着Web技術的更新，HTML也前後經歷了HTML 4.01、XHTML 1.0、HTML5幾個重要的版本，在版本的演變過程當中新增或廢棄了一些屬性，同時對語法規範也作了一些調整，爲了可以保證瀏覽器能夠兼容不一樣版本語法規範的，咱們可使用<!DOCTYPE>指示瀏覽器應該如何處理。

HTML5在語法規範上也作了比較大的調整，去除了許多冗餘的內容，書寫規則更加簡潔、清晰。

見代碼實例

 

特色：

1、更簡潔

2、更寬鬆

實際開發中應規範書寫，不建議太隨意 ！

如今基本全部網站都採用了HTML5的<!DOCTYPE>

W3C驗證地址

https://validator.w3.org/

第2章語義標籤

語義標籤對於咱們並不陌生，如<p>表示一個段落、<ul>表示一個無序列表<h1> ~ <h6>表示一系列標題等，在此基礎上HTML5增長了大量更有意義的語義標籤，更有利於搜索引擎或輔助設備來理解HTML頁面內容。

傳統的作法咱們或許經過增長類名如class="header"、class="footer"，使HTML頁面具備語義性，可是不具備通用性。

HTML5則是經過新增語義標籤的形式來解決這個問題，例如<header></header>、<footer></footer>等，這樣就可使其具備通用性。

此章節學習目的爲了解增長語義標籤的目的，以及各語義標籤所表達的意義，在網頁佈局中可以合理使用標籤。

2.1 經常使用新語義標籤

<nav> 表示導航

<header> 表示頁眉

<footer> 表示頁腳

<section> 表示區塊

<article> 表示文章 如文章、評論、帖子、博客

<aside> 表示側邊欄 如文章的側欄

<figure> 表示媒介內容分組 與 ul > li 作個比較

<mark> 表示標記 (帶用「UI」，不怎麼用，能夠重寫樣式)

<progress> 表示進度 (帶用「UI」，不怎麼用，不可重寫樣式)

<time> 表示日期

<hgroup> 標題列表 (聽說已廢棄)

<details>

<bdi>

<command>

<summary>

<rp>

<rt>

<ruby>

本質上新語義標籤與<div>、<span>沒有區別，只是其具備表意性，使用時除了在HTML結構上須要注意外，其它和普通標籤的使用無任何差異，能夠理解成<div class="nav"> 至關於 <nav>。不要好奇，它只是一個標籤！

儘可能避免全局使用header、footer、aside等語義標籤。

2.2 兼容處理

在不支持HTML5新標籤的瀏覽器裏，會將這些新的標籤解析成行內元素(inline)對待，因此咱們只須要將其轉換成塊元素(block)便可使用，可是在IE9版本如下，並不能正常解析這些新標籤，可是卻能夠識別經過document.createElement('tagName')建立的自定義標籤，因而咱們的解決方案就是將HTML5的新標籤所有經過document.createElement('tagName')來建立一遍，這樣IE低版本也能正常解析HTML5新標籤了，在實際開發中咱們更多采用的是經過檢測IE瀏覽器的版原本加載第三方的一個JS庫來解決兼容問題。

第3章表單

伴隨着互聯網富應用以及移動開發的興起，傳統的Web表單已經愈來愈不能知足開發的需求，因此HTML5在Web表單方向也作了很大的改進，如拾色器、日期/時間組件等，使表單處理更加高效。

此章節學習目的，瞭解HTML5表單的新增的特性，以及PC和移動設備間的差別，其兼容性較差。

3.1 輸入類型

email 輸入email格式

tel 手機號碼

url 只能輸入url格式

number 只能輸入數字

search 搜索框

range 範圍

color 拾色器

time 時間

date 日期 不是絕對的

datetime 時間日期

month 月份

week 星期

部分類型是針對移動設備生效的，且具備必定的兼容性，在實際應用當中可選擇性的使用。

 

3.2 表單元素（標籤）

<datalist> 下拉選項，使用中文時要注意

<keygen> 生成加密字符串

<output> 不可當作數據提交？

<meter> 表示度量器，不建議用做進度條

3.3 表單屬性

placeholder 佔位符

autofocus 獲取焦點

multiple 文件上傳多選或多個郵箱地址

autocomplete 自動完成，用於form元素，也可用於部分input，默認值on

form 指定表單項屬於哪一個form，處理複雜表單時會須要

novalidate 關閉驗證，可用於<form>標籤，（只適應用form）

required 驗證條件，必填項

pattern 正則表達式 自定義驗證規則

表單重寫沒有說起，自行驗證，共包含

formaction、formenctype、formtarget、formmethod、formnovalidate

應用於提交按鈕上，如：<input type="submit" formaction="xxx.php">

3.4 表單事件

oninput 用戶輸入內容時觸發，可用於移動端輸入字數統計

oninvalid 驗證不經過時觸發

第4章多媒體

在HTML5以前，在網頁上播放音頻/視頻的通用方法是利用Flash來播放，可是大多狀況下，並不是全部用戶的瀏覽器都安裝了Flash插件，由此使得處理音頻/視頻播放變的很是複雜，而且移動設備的瀏覽器並不支持Flash插件。

此章節學習目的，瞭解如何經過HTML5播放音頻/視頻，以及針對不一樣瀏覽器所支持的格式，作多瀏覽器兼容處理。

4.1 音頻

HTML5經過<audio>標籤來解決音頻播放的問題。

使用至關簡單，以下圖所示

 

而且能夠經過附加屬性能夠更友好控制音頻的播放，如：

autoplay 自動播放

controls 是否顯不默認播放控件

loop 循環播放

preload 預加載 同時設置autoplay時些屬性失效

因爲版權等緣由，不一樣的瀏覽器可支持播放的格式是不同的

 

多瀏覽器支持的方案，以下圖

 

4.2 視頻

HTML5經過<video>標籤來解決音頻播放的問題。

同音頻播放同樣，<video>使用也至關簡單，以下圖

 

一樣，經過附加屬性能夠更友好的控制視頻的播放

autoplay 自動播放

controls 是否顯示默認播放控件

loop 循環播放

preload 預加載，同時設置了autoplay，此屬性將失效

width 設置播放窗口寬度

height 設置播放窗口的高度

因爲版權等緣由，不一樣的瀏覽器可支持播放的格式是不同的

 

第5章微數據

1、微數據

http://kayosite.com/html5-microdata.html

能夠理解成新語義標籤的一種補充

2、ARIA

http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/#ariaRole

第6章DOM擴展

6.1 獲取元素

1、document.getElementsByClassName ('class') 經過類名獲取元素，以類數組形式存在。

2、document.querySelector('selector') 經過CSS選擇器獲取元素，符合匹配條件的第1個元素。

3、document.querySelectorAll('selector') 經過CSS選擇器獲取元素，以類數組形式存在。

6.2 類名操做

1、Node.classList.add('class') 添加class

2、Node.classList.remove('class') 移除class

3、Node.classList.toggle('class') 切換class，有則移除，無則添加

4、Node.classList.contains('class') 檢測是否存在class

Node指一個有效的DOM節點，是一個通稱。

6.3 自定義屬性

在HTML5中咱們能夠自定義屬性，其格式以下data-*=""，例如

data-info="我是自定義屬性"，經過Node.dataset['info'] 咱們即可以獲取到自定義的屬性值。

Node.dataset是以對象形式存在的

當咱們以下格式設置時，則須要以駝峯格式才能正確獲取

data-my-name="itcast"，獲取Node.dataset['myName']

6.4 案例練習

Tab切換

第7章新增API

7.1 拖拽

在HTML5的規範中，咱們能夠經過爲元素增長draggable="true"來設置此元素是否能夠進行拖拽操做，其中圖片、連接默認是開啓的。

7.1.1 拖拽元素

頁面中設置了draggable="true"屬性的元素

7.1.2 目標元素

頁面中任何一個元素均可以成爲目標元素

7.1.3 事件監聽

拖拽元素

ondrag 應用於拖拽元素，整個拖拽過程都會調用

ondragstart 應用於拖拽元素，當拖拽開始時調用

ondragleave 應用於拖拽元素，當鼠標離開拖拽元素時調用

ondragend 應用於拖拽元素，當拖拽結束時調用

目標元素

ondragenter 應用於目標元素，當拖拽元素進入時調用

ondragover 應用於目標元素，當停留在目標元素上時調用

ondrop 應用於目標元素，當在目標元素上鬆開鼠標時調用

ondragleave 應用於目標元素，當鼠標離開目標元素時調用

數據傳遞

ev.dataTransfer.setData() 設置數據

ev.dataTransfer.getData() 讀取數據

7.2 歷史管理

提供window.history，對象咱們能夠管理歷史記錄，可用於單頁面應用，Single Page Application，能夠無刷新改變網頁內容。

7.2.1 舊版本

history.back() 回退

history.forward() 前進

history.go(n) 前進/後退n步，正值前進，負值後退

history.length歷史記錄條數

7.2.2 新增方法

1、pushState(data, title, url) 追加一條歷史記錄

data用於存儲自定義數據，一般設爲null

title網頁標題，基本上沒有被支持，通常設爲空

url 以當前域爲基礎增長一條歷史記錄，不可跨域設置

2、replaceState(data, title, url) 與pushState()基本相同，不一樣之處在於replaceState()，只是替換當前url，不會增長/減小歷史記錄。

Single Page Application單頁面應用

7.2.3 事件監聽

onpopstate事件，當前進或後退時則觸發，經過事件對象ev.state能夠讀取到存儲的數據，監聽是要給window。

7.3 地理定位

在HTML規範中，增長了獲取用戶地理信息的API，這樣使得咱們能夠基於用戶位置開發互聯網應用，即基於位置服務 (Location Base Service)

7.3.1 獲取地理信息方式

1、IP地址

2、三維座標

GPS（Global Positioning System，全球定位系統）

Wi-Fi

手機信號

3、用戶自定義數據

以下圖對不一樣獲取方式的優缺點進行了比較，瀏覽器會自動以最優方式去獲取用戶地理信息。

 

7.3.2 隱私

HTML5 Geolocation 規範提供了一套保護用戶隱私的機制。必須先獲得用戶明確許可，才能獲取用戶的位置信息。

7.3.3 API詳解

navigator.getCurrentPosition(successCallback, errorCallback, options) 獲取當前地理信息

navigator.watchPosition(successCallback, errorCallback, options) 重複獲取當前地理信息

1、當成功獲取地理信息後，會調用succssCallback，並返回一個包含位置信息的對象position。

position.coords.latitude緯度

position.coords.longitude經度

position.coords.accuracy精度

position.coords.altitude海拔高度

2、當獲取地理信息失敗後，會調用errorCallback，並返回錯誤信息error

3、可選參數 options 對象能夠調整位置信息數據收集方式

a) enableHighAccuracy 高精度模式

b) timeout 超時設置，單位爲ms

c) maximumAge表示瀏覽器從新獲取位置信息的時間間隔，單位爲ms

7.4 Web存儲

隨着互聯網的快速發展，基於網頁的應用愈來愈廣泛，同時也變的愈來愈複雜，爲了知足各類各樣的需求，會常常性在本地存儲大量的數據，傳統方式咱們以document.cookie來進行存儲的，可是因爲其存儲大小隻有4k左右，而且解析也至關的複雜，給開發帶來諸多不便，HTML5規範則提出解決方案。

7.4.1 特性

1、設置、讀取方便

2、容量較大，sessionStorage約5M、localStorage約20M

4、只能存儲字符串，能夠將對象JSON.stringify() 編碼後存儲

7.4.2 window.sessionStorage

1、生命週期爲關閉瀏覽器窗口

2、在同一個窗口下數據能夠共享

7.4.3 window.localStorage

1、永久生效，除非手動刪除

2、能夠多窗口共享

7.4.4 方法詳解

setItem(key, value) 設置存儲內容

getItem(key) 讀取存儲內容

removeItem(key) 刪除鍵值爲key的存儲內容

clear() 清空全部存儲內容

key(n) 以索引值來獲取存儲內容

7.4.5 其它

WebSQL、IndexDB

7.5 全屏

HTML5規範容許用戶自定義網頁上任一元素全屏顯示。

requestFullScreen() 開啓全屏顯示

cancelFullScreen() 關閉全屏顯示

不一樣瀏覽器須要添加前綴如：

webkitRequestFullScreen、mozRequestFullScreen

webkitCancelFullScreen、mozCancelFullScreen

規範容許全部元素能夠取全屏，但實際測試結果關閉全屏只能添加到document元素上

經過document.fullScreen檢測當前是否處於全屏狀態

不一樣瀏覽器須要添加前綴

document.webkitIsFullScreen、document.mozFullScreen

全屏僞類

:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}

7.6 網絡狀態

咱們能夠經過window. navigator.onLine來檢測，用戶當前的網絡情況，返回一個布爾值

addEventListener 進行綁定online用戶網絡鏈接時被調用

addEventListener 進行綁定.offline用戶網絡斷開時被調用

事件是給window綁訂的

7.7 應用緩存

HTML5中咱們能夠輕鬆的構建一個離線（無網絡狀態）應用，只須要建立一個cache manifest文件。

7.7.1 優點

1、可配置須要緩存的資源

2、網絡無鏈接應用仍可用

3、本地讀取緩存資源，提高訪問速度，加強用戶體驗

4、減小請求，緩解服務器負擔

7.7.2 緩存清單

一個普通文本文件，其中列出了瀏覽器應緩存以供離線訪問的資源，推薦使用.appcache爲後綴名，添加MIME類型

AddType text/cache-manifest .appcache

例如咱們建立了一個名爲demo.appcache的文件，而後在須要應用緩存在頁面的根元素(html)添加屬性manifest="demo.appcache"，路徑要保證正確。

7.7.3 manifest文件格式

1、頂行寫CACHE MANIFEST

2、CACHE: 換行 指定咱們須要緩存的靜態資源，如.css、image、js等

3、NETWORK: 換行 指定須要在線訪問的資源，可以使用通配符

4、FALLBACK: 換行 當被緩存的文件找不到時的備用資源

7.7.4 事件監聽

可自行查閱資料

7.7.5 其它

1、CACHE: 能夠省略，這種狀況下將須要緩存的資源寫在CACHE MANIFEST

2、能夠指定多個CACHE:  NETWORK:  FALLBACK:，無順序限制

3、#表示註釋，只有當demo.appcache文件內容發生改變時或者手動清除緩存後，纔會從新緩存。

4、chrome 能夠經過chrome://appcache-internals/工具和離線（offline）模式來調試管理應用緩存

7.8 文件讀取

經過FileReader對象咱們能夠讀取本地存儲的文件，可使用 File 對象來指定所要讀取的文件或數據。其中File對象能夠是來自用戶在一個 <input> 元素上選擇文件後返回的FileList 對象，也能夠來自由拖放操做生成的  DataTransfer

7.8.1 FileList對象

因爲HTML5中咱們能夠經過爲表單元素添加multiple屬性，所以咱們經過<input>上傳文件後獲得的是一個FileList對象（僞數組形式）。

7.8.2 FileReader對象

HTML5新增內建對象，能夠讀取本地文件內容。

var reader = new FileReader; 能夠實例化一個對象

實例方法

1、readAsDataURL() 以DataURL形式讀取文件

事件監聽

onload 當文讀取完成時調用

屬性

result 文件讀取結果

參考資料

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc

7.9 多媒體

方法：load()、play()、pause()

屬性：currentSrc、currentTime、duration

事件：

參考文檔

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

7.10 應用