關於h5的一些知識整理

時間 2019-11-09

標籤關於 h5 一些知識整理简体版

原文原文鏈接

HTML5介紹

1. 基礎認知

1.1 基本認識

h5是一個泛稱，由HTML5+CSS3+JS等多種技術組合成的一個應用開發平臺，第一個將web做爲應用開發平臺的HTML語言。

1.2 語法規範

使用h5應該指定對應的<!DOCTYPE>去指示瀏覽器使用相應的規範去解析頁面

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
    </body>
</html>

特色：

更簡潔
更寬鬆
可是在實際開發中要注意書寫規範，利於後期維護

1.3 語義標籤

在網站建設過程當中，語義化是很是重要的。

當頁面加載失敗的時候，還可以呈現出清晰的結構
有利於SEO優化，利於被搜索引擎收錄（即使於網絡爬蟲的識別）
在項目開發及維護時，語義化的也很大程度上下降開發難度，節省成本

經常使用的新增語義標籤

<nav> 表示導航
<header> 表示頁眉
<footer> 表示頁腳
<section> 表示區塊
<article> 表示文章 如文章、評論、帖子、博客
<aside> 表示側邊欄 如文章的側欄
<figure> 表示媒介內容分組 與 ul > li 作個比較

//下列標籤不經常使用
<mark> 表示標記 (帶用「UI」，不怎麼用，能夠重寫樣式)
<progress> 表示進度 (帶用「UI」，不怎麼用，不可重寫樣式)
<time> 表示日期
<hgroup> 標題列表 (聽說已廢棄)
<details>
<bdi>
<command>
<summary>
<rp>
<rt>
<ruby>

新語義標籤只是具備表意性，除了使用時須要注意下HTML結構外，其餘和普通標籤沒什麼區別。php

1.4 兼容處理

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

<!--[if lte IE 8]>
        <script src="./js/htmml5shiv.min.js"></script>
<![endif]-->

2. 表單

新增的表單特性，在PC和移動設備之間差別大，兼容性較差html

2.1 輸入類型

email 輸入email格式
tel 手機號碼
url 只能輸入url格式
number 只能輸入數字
search 搜索框
range 範圍
color 拾色器
time 時間
date 日期 不是絕對的
datetime 時間日期
month 月份
week 星期

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

2.2 表單元素（標籤）

<datalist> 下拉選項，使用中文時要注意
<keygen> 生成加密字符串
<output> 不可當作數據提交？
<meter> 表示度量器，不建議用做進度條

2.3 表單屬性

placeholder 佔位符
autofocus 獲取焦點
multiple 文件上傳多選或多個郵箱地址
autocomplete 自動完成，用於form元素，也可用於部分input，默認值on
form 指定表單項屬於哪一個form，處理複雜表單時會須要
novalidate 關閉驗證，可用於<form>標籤，（只適應用form）
required 驗證條件，必填項
pattern 正則表達式 自定義驗證規則

//表單重寫
//應用於提交按鈕上，如：<input type="submit" formaction="xxx.php">
formaction、formenctype、formtarget、formmethod、formnovalidate

2.4表單事件

oninput 用戶輸入內容時觸發，可用於移動端輸入字數統計
onincalid 驗證不經過時觸發

3. 多媒體

h5以前，網頁上的音頻/視頻可能是利用Flash來播放的，但並不是全部用戶的瀏覽器都安裝了Flash插件，由此使得處理音頻/視頻播放變的很複雜，而且移動設備的瀏覽器不支持Flash。node

3.1 音頻

<audio src="xx.mp3"></audio>

屬性：web

autoplay 自動播放
controls 是否顯示默認的播放控件
loop 循環播放
preload 預加載 同時設置autoplay時此屬性失效

因爲版權限制，不一樣瀏覽器支持的播放格式不一樣，須要進行兼容性處理：正則表達式

<audio controls>
    <source src="xx.mp3">
    <source src="xx.wav">
    <source src="xx.ogg">
    您的瀏覽器不支持HTML音頻播放功能
</audio>

3.2 視頻

使用<video>標籤
使用基本上與<audio>標籤使用一致
可使用width,height設置播放窗口的寬高

4. DOM操做的擴展

4.1 獲取元素

document.getElementsByClassName(className) 經過類名獲取元素，返回一個僞數組
document.querySelector(selector) 經過css選擇器獲取元素，返回符合條件的第一個dom元素
document.querySelectorAll(selector) 經過css選擇器獲取元素，返回一個僞數組

4.2 類名操做

全部類名操做都是在classList屬性下的:

node.classList.add(className) 添加類
node.classList.remove(className) 移除類
node.classList.toggle(className) 切換類
node.classList.contains(className) 檢測是否存在類

4.3 自定義屬性

設置自定義屬性

<div data-name="name" data-gender="female"><div>

獲取自定義屬性
- node.dataset是以對象的形式存在的
- 經過node.dataset["name"]能夠獲取到自定義屬性的值
- 以data-my-name="name"格式設置屬性時,獲取時須要使用駝峯格式
  - node.dataset["myName"]

5. 新增API

5.1 拖拽

拖拽元素
- 設置了draggable="true"屬性的元素，其中圖片和連接默認是可拖拽的
目標元素
- 頁面中任何一個元素均可以成爲目標元素
事件監聽

拖拽元素的事件

ondrag 整個拖拽過程都會調用
ondragstart 拖拽開始是調用
ondragleave 當鼠標離開拖拽元素時調用（拖拽出拖拽元素的基礎位置時）
ondragend 拖拽結束時調用

2.目標元素的事件chrome

ondragenter 拖拽元素進入時調用
ondragover  拖拽元素停留在目標元素上時調用
ondragleave 拖拽元素離開目標元素時調用
ondrop      在目標元素上鬆開鼠標時調用

數據傳遞

ev.dataTransfer.setData()  設置數據
ev.dataTransfer.getData()  獲取數據

5.2 歷史管理

window.history對象，能夠管理歷史記錄，可用於單頁面應用，能夠無刷新改變網頁內容。api

5.2.1 舊版本

history.back() 回退
history.forward() 前進
history.go(n) 前進/後退n步，正值前進，負值後退
history.length 歷史記錄條數

5.2.2 新增方法

//追加一條歷史記錄
//通常data設置爲null,titile設置爲空，url爲以當前域爲基礎增長一條歷史記錄，不可跨域設置。
pushState(data,title,url)  

//用法與pushState()基本相同，此方法替換當前url,不會改變歷史記錄條數
replaceState(data,title,url)

5.2.3 事件監聽

onpopstate事件：前進或者後退時觸發,經過事件對象ev.state能夠讀取到存儲的數據,監聽者給window跨域

5.3 地理定位

基於位置服務(Location Base Service)

5.3.1 獲取地理信息方式

IP地址
三維座標
- GPS
- WiFi
- 手機信號
用戶自定義數據

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

5.3.2 隱私

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

5.3.3 API詳解

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

當成功獲取地理信息後,會調用successCallback,並返回一個包含位置信息的對象position.
- position.coords.latitude 緯度
- position.coords.longtitude 經度
- position.coords.accuracy 精度
- position.coords.altitude 海拔高度
獲取地理信息失敗後,會調用errorCallback,並返回錯誤信息error
可選參數options對象能夠調整位置信息數據收集方式
- enableHighAccuracy 高精度模式
- timeout 超時設置,單位爲ms
- maximumAge 表示瀏覽完從新獲取位置信息的時間間隔,單位爲ms

5.4 Web存儲

爲了知足各類需求,會常常性的須要在本地存儲大量的數據,傳統方式使用document.cookie進行存儲,但cookie存儲大小隻有4k左右,而且解析相對複雜.HTML5提出了sessionStorage和localStorage來存儲本地數據.

特性:
1. 設置、讀取方便
2. 容量較大、sessionStorage約爲5M,localStorage約爲20M
3. 只能存儲字符串,能夠將對象JSON.stringfy()編碼後存儲
window.sessionStorage
1. 生命週期爲關閉瀏覽器窗口
2. 在同一個窗口下數據能夠共享
window.localStorgae
1. 永久生效,除非手動刪除
2. 能夠多窗口共享
方法詳解
1. setItem(key,value) 設置存儲內容
2. getItem(key,value) 讀取存儲內容
3. removeItem(key) 刪除鍵值爲key的存儲內容
4. clear() 清空全部存儲內容
5. key(n) 以索引值來獲取存儲內容
其餘
WebSQL,IndexDB

5.5 全屏

規範容許全部元素均可以全屏,但實際測試結果關閉全屏功能只能添加到document元素上

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

requestFullScreen() 開啓全屏顯示
cancelFullScreen() 關閉全屏顯示

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

webkitRequestFullScreen、mozRequestFullScreen
webkitCancelFullScreen、mozCancelFullScreen

檢測當前是否處於全屏狀態

document.fullScreen
//不一樣瀏覽器須要添加前綴
document.webkitIsFullScreen
document.mozFullScreen

全屏僞類
- :full-screen.box{}
- :-webkit-full-screen{}
- :moz-full-screen{}

5.6 網絡狀態

給window綁定事件
window.navigator.onLine在用戶網絡鏈接時調用,返回布爾值
window.navigator.offLine在用戶網絡斷開時調用

5.7 應用緩存

建立一個cache manifest文件構建一個離線應用

優點
- 可配置須要緩存的資源
- 網絡沒法鏈接時仍可以使用
- 本地讀取緩存資源,提高訪問速度,加強用戶體驗
- 減小請求,緩解服務器負擔
緩存清單
- 緩存清單是一個普通餓文本文件,其中列出了瀏覽器應緩存以供離線訪問的資源,推薦使用.appcache爲後綴名,添加MIME類型
- 假設建立了一個名爲demo.appcache的文件,而後在須要應用緩存的頁面的根元素(html)添加屬性manifest = "demo.appcache",路徑要正確.
manifest文件格式
- 頂行寫CACHE MANIFEST
- CACHE: 換行指定咱們須要緩存的靜態資源,如.css、.js、image等
- NETWORK: 換行指定須要在線訪問的資源,可以使用通配符
- FALLBACK: 換行當被緩存的文件找不到時的備用資源

CACHE MANIFEST
CACHE:
#此部分寫須要緩存的資源 （#是註釋的意思）
./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg
./images/img5.jpg

NETWORK: 
#此部分要寫須要有網絡纔可訪問的資源，無網絡則不訪問
#./js/main.js
*
FALLBACK:
#當訪問不到某個資源的狀況下，自動由另外一個資源替換
./css/online.css ./css/offline.css
./online.html ./offline.html

其餘
- CACHE:能夠省略,這種狀況下要將須要緩存的資源寫在CACHE MANIFEST
- 能夠指定多個CACHE: NETWORK: FALLBACK:,無順序限制
- #表示註釋,只有當demo.appcache文件內容發生改變或者手動清除緩存後,纔會從新緩存
- chrome能夠經過chrome://appcache-internals/工具和離線（offline）模式來調試管理應用緩存