, 等等?!?這其中大部分有HTML5以前的標(biāo)簽也有HTML5的而這些剛好就是我們常用的標(biāo)簽,不常用的也許不必太過(guò)了解布局DIV也可以不是么?另外推薦大家在使用新語(yǔ)義標(biāo)簽的時(shí)候盡量每個(gè)獨(dú)立的頁(yè)面只使用一個(gè)標(biāo)簽作為包裹,語(yǔ)義化的作用就是seo(具體可百度),就是讓搜索引擎知道網(wǎng)上到底有些什么,如header 、main、footer標(biāo)簽等等,當(dāng)然你也可以寫100個(gè)!
以下總結(jié)出HTML5常用的標(biāo)簽:
◆form屬性:
autocomplete=on | off 自動(dòng)完成
novalidate=true | false 是否關(guān)閉校驗(yàn)
◆ input屬性:
autofocus : 自動(dòng)獲取焦點(diǎn)
multiple: 實(shí)現(xiàn)多選效果
placeholder : 占位符 (提示信息)
required:必填項(xiàng)
以前獲取節(jié)點(diǎn)通過(guò)
document.getElementById("ID名稱")這些還有className,name,tagname等等方式獲取返回當(dāng)前節(jié)點(diǎn)
H5新增的節(jié)點(diǎn)獲取方法只有兩個(gè)
document.querySelector("選擇器"); 返回節(jié)點(diǎn)
document.querySelectorAll("選擇器"); 返回?cái)?shù)組
可以完美的代替以前或者節(jié)點(diǎn)的方式,如果無(wú)需兼容ie10以下的話
H5中對(duì)class的操作
classList.add("類名")
添加class類名 不返回任何值 如果你把它賦值給一個(gè)變量 得到結(jié)果是undefined
classList.remove("類名"); 刪除
classList.contains("類名");
檢查has className 是否存在返回布爾值 即true and false
classList.toggle("active");
查詢active 是否存在,存在就刪除,不存在就添加 ,省去了if判斷!返回布爾值如果執(zhí)行多條 即 true false true false.
自定義屬性 (小案例分析體驗(yàn)自定義屬性) data-自定義屬性名
- 獲取自定義屬性 Dom.dataset 返回的是一個(gè)對(duì)象
Dom.dataset.屬性名 或者 Dom.dataset[屬性名]
注:屬性名無(wú)需加data如自定義屬性名 = data-canvas 那么獲取的時(shí)候 直接dataset.canvas即可 設(shè)置同理 - 設(shè)置自定義屬性
Dom.dataset.自定義屬性名=值 或者 Dom.dataset[自定義屬性名]=值;
文件讀取 FileReader
FileReader 接口有3個(gè)用來(lái)讀取文件方法返回結(jié)果在result中
readAsBinaryString ---將文件讀取為二進(jìn)制編碼
readAsText ---將文件讀取為文本
readAsDataURL ---將文件讀取為DataURL
FileReader 提供的事件模型
onabort 中斷時(shí)觸發(fā)
onerror 出錯(cuò)時(shí)觸發(fā)
onload 文件讀取成功完成時(shí)觸發(fā)
onloadend 讀取完成觸發(fā),無(wú)論成功或失敗
onloadstart 讀取開始時(shí)觸發(fā)
onprogress 讀取中
獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)
window.navigator.onLine 返回一個(gè)布爾值 網(wǎng)沒問(wèn)題返回true否則返回false
網(wǎng)絡(luò)狀態(tài)事件 (大部分為不支持和廢棄狀態(tài)也許移動(dòng)端用的比較多) - window.ononline
- window.onoffline
獲取地理定位
獲取一次當(dāng)前位置
window.navigator.geolocation.getCurrentPosition(success,error);
success成功之后獲取位置信息 否則拋出錯(cuò)誤,比如獲取位置信息被拒絕 - coords.latitude 維度
- coords.longitude 經(jīng)度
實(shí)時(shí)獲取當(dāng)前位置
window.navigator.geolocation.watchPosition(success,error);
本地存儲(chǔ) 隨著互聯(lián)網(wǎng)的快速發(fā)展,基于網(wǎng)頁(yè)的應(yīng)用越來(lái)越普遍,同時(shí)也變的越來(lái)越復(fù)雜,為了滿足各種各樣的需求,會(huì)經(jīng)常性在本地存儲(chǔ)大量的數(shù)據(jù),傳統(tǒng)方式我們以document.cookie來(lái)進(jìn)行存儲(chǔ)的,但是由于其存儲(chǔ)大小只有4k左右,并且解析也相當(dāng)?shù)膹?fù)雜,給開發(fā)帶來(lái)諸多不便,HTML5規(guī)范則提出解決方案,使用sessionStorage和localStorage存儲(chǔ)數(shù)據(jù)。
localStorage: - 永久生效
- 多窗口共享
- 容量大約為20M
◆window.localStorage.setItem(key,value) 設(shè)置存儲(chǔ)內(nèi)容
◆window.localStorage.getItem(key) 獲取內(nèi)容
◆window.localStorage.removeItem(key) 刪除內(nèi)容
◆window.localStorage.clear() 清空內(nèi)容
sessionStorage: - 生命周期為關(guān)閉當(dāng)前瀏覽器窗口
- 可以在同一個(gè)窗口下訪問(wèn)
- 數(shù)據(jù)大小為5M左右
◆window.sessionStorage.setItem(key,value)
◆window.sessionStorage.getItem(key)
◆window.sessionStorage.removeItem(key)
◆window.sessionStorage.clear()
required如何修改默認(rèn)提示選項(xiàng)
需要兩個(gè)幾個(gè)參數(shù)
placeholder = 默認(rèn)提示用戶輸入
oninvalid事件 = 當(dāng)用戶輸入不符合規(guī)則的時(shí)候提示的內(nèi)容隨意改setCustomValidity 就是用來(lái)修改 requered值的函數(shù)
oninput事件 = 約等于chuange事件 立即執(zhí)行
console.log('Hello World')
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
新聞標(biāo)題:HTML5新特性總結(jié)-創(chuàng)新互聯(lián)
分享網(wǎng)址:http://weahome.cn/article/jhdgs.html