|
歡迎訪問(wèn)我的個(gè)人博客CoderHTML5屬于上一代HTML的新迭代語(yǔ)言，設(shè)計(jì)HTML5最主要的目的是為了在移動(dòng)設(shè)備上支持多媒體，例如：video標(biāo)簽和audio及canvas代標(biāo)記。HTML5中語(yǔ)義化標(biāo)簽在HTML5中新增了很多的語(yǔ)義標(biāo)簽，如- header
- footer
- nav
- article
- aside
- section
- ... ...
比如以前我們使用以下方式來(lái)布局<div class="header"></div>
現(xiàn)在可以替換為<header></header>
HTML5可以讓很多更語(yǔ)義化的結(jié)構(gòu)化代碼標(biāo)簽代替大量無(wú)意義的div標(biāo)簽1. 這種語(yǔ)義化的特性提升了網(wǎng)頁(yè)的質(zhì)量和語(yǔ)義2. 減少了以前用于CSS 調(diào)用的class和id屬性并且對(duì)搜索引擎的友好，新的結(jié)構(gòu)標(biāo)簽帶來(lái)的是網(wǎng)頁(yè)布局的改變及提升對(duì)搜索引擎的友好。但是現(xiàn)在碰到一個(gè)問(wèn)題，由于這些具有語(yǔ)義的標(biāo)簽是HTML5新增的，這就意味著在IE8及以下版本的IE瀏覽器中不支持，如下面的樣式在IE8中就不能夠正常的顯示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> header { background-color: red; height: 400px; width: 100%; } </style></head><body> <header></header></body></html>
解決辦法：- 在script中創(chuàng)建語(yǔ)義標(biāo)簽header，并且將header的display設(shè)置為block
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> header { background-color: red; height: 400px; width: 100%; display: block; } </style> <script> document.createElement("header"); </script></head><body> <header></header></body></html>
- 使用1的方法，意味著對(duì)每個(gè)語(yǔ)義標(biāo)簽都要?jiǎng)?chuàng)建元素，這樣未免比較麻煩，更好的辦法是使用插件，引入html5shiv.js文件，該插件的實(shí)質(zhì)還是創(chuàng)建了語(yǔ)義元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> header { background-color: red; height: 400px; width: 100%; } </style> <script src="html5shiv.js"></script></head><body> <header></header></body></html>
- 上面的方法還有需要改進(jìn)的地方，比如在谷歌瀏覽器中完全支持 HTML5，這就意味著在渲染HTML網(wǎng)頁(yè)時(shí)不需要下載html5shiv.js 文件，但是上面的方法是在任何的瀏覽器中都會(huì)下載的，所以再次改進(jìn)如下
<!--[if lte IE 8]> <script src="html5shiv.js"></script><![endif]-->
上面的代碼只有IE瀏覽器才會(huì)識(shí)別，意思是如果IE瀏覽器的版本是IE8及以下的版本，才會(huì)下載這個(gè)js文件，在其他瀏覽器中會(huì)認(rèn)為這時(shí)注釋?zhuān)詣?dòng)忽略。video和audio在瀏覽器中插入視頻和音頻文件，以往是使用flash來(lái)實(shí)現(xiàn)，但是在移動(dòng)端使用flash就會(huì)比較慢，HTML5給了兩個(gè)新的標(biāo)簽，用來(lái)插入視頻和音頻文件。二者的使用相似，現(xiàn)以video為例介紹該標(biāo)簽的屬性 | 屬性 | 作用 |
|---|
| src | 值為視頻文件的路徑 | | controls | 顯示控制臺(tái) | | autoplay | 自動(dòng)播放 | | loop | 循環(huán)播放 | | ... ... | ... ... |
還有一些屬性沒(méi)有介紹，以上是較為常用的，剩余的請(qǐng)參考網(wǎng)站HTML5視頻。這里給出一個(gè)實(shí)例<video src="resources/video.mp4" controls autoplay loop></video>
另一個(gè)需要注意的是，目前只支持三種格式的視頻并且不同的瀏覽器支持的程度也不一樣，具體的可以參考上面的鏈接。那么這個(gè)時(shí)候怎么辦? 我們不能這么寫(xiě)<video src="test.mp4"></video><video src="test.ogg"></video><video src="test.WebM"></video>
雖然我們的本意是：如果支持.mp4，那么就使用.mp4，否則如果支持.ogg，則用.ogg，以此類(lèi)推。但是上面的效果是出現(xiàn)3個(gè)video，而不是一個(gè)，這個(gè)時(shí)候的解決辦法是使用source標(biāo)簽，如下<video> <source src="test.mp4"> <source src="test.ogg"> <source src="test.WebM"></video>
這個(gè)時(shí)候達(dá)到的效果就是我們想要的。表單HTML5在表單這里也做了很多的改進(jìn)，比如新增了一些屬性以進(jìn)行表單驗(yàn)證(以往這些工作我們都是使用JavaScript進(jìn)行正則表達(dá)式的驗(yàn)證)，以及新的標(biāo)簽和方法。智能表單控件- emial
- url
- number
- range
- color
- date
- month
- week
- time
首先用法如下<form action="test" method="get"> email: <input type="email"> <br> url: <input type="url"> <br> number: <input type="number"> <br> range: <input type="range"> <br> color: <input type="color"> <br> date: <input type="date"> <br> week: <input type="week"> <br> time: <input type="time"> <br> <button type="submit">提交</button></form>
 當(dāng)type設(shè)置為emial時(shí)，如果輸入的不是電子郵箱，當(dāng)點(diǎn)擊提交按鈕時(shí)，不能提交成功，并給出提示信息  當(dāng)type設(shè)置為url時(shí)，如果輸入的不是url地址，那么當(dāng)點(diǎn)擊提交按鈕時(shí)，也不能提交成功，并給出提示信息  正確的url地址應(yīng)該以http或者https開(kāi)頭，如http://www.baidu.com。當(dāng)type設(shè)置為number時(shí)，這時(shí)在控件里面只能輸入數(shù)字，當(dāng)你按其他鍵時(shí)沒(méi)有反應(yīng)，可以自行實(shí)驗(yàn)看看效果。當(dāng)type設(shè)置為color時(shí)，點(diǎn)擊color后的顏色，會(huì)出現(xiàn)拾色器，可以選擇顏色，如下  設(shè)置type設(shè)置為date, week, time時(shí)，顯示的是各種格式的時(shí)間，這里不多加解釋想必可以明白。表單屬性- autocomplete
直譯過(guò)來(lái)就是自動(dòng)完成，當(dāng)我們提交表單后，表單會(huì)記錄我們提交的內(nèi)容，當(dāng)我們?cè)俅翁顚?xiě)時(shí)，它會(huì)給出我們已經(jīng)提交過(guò)的內(nèi)容作為提示信息。有時(shí)這種情況下可能會(huì)造成信息的泄漏，不安全，我們可以將autocomplete設(shè)置為off，這時(shí)就不會(huì)出現(xiàn)上面的情況。默認(rèn)情況下autocomplete為on<form action="test" method="get" autocomplete="off"> ... ...</form>
- novadilate
上面我們提到，當(dāng)我們使用智能表單控件時(shí)，如果不能滿足格式的要求，如email，則不能提交成功，當(dāng)表單添加novadilate屬性時(shí)，那么這時(shí)即使所填寫(xiě)的格式不滿足要求，那么也可以提交成功。<form action="test" method="get" autocomplete="off" novalidate> ... ...</form>
- autofocus
自動(dòng)獲得焦點(diǎn)，我們先來(lái)看一個(gè)淘寶的案例  當(dāng)我們進(jìn)入淘寶，搜索框會(huì)自動(dòng)的獲得焦點(diǎn)，用戶可以直接輸入，不需要用鼠標(biāo)先點(diǎn)擊搜索框獲得焦點(diǎn)才能輸入。input添加autofocus的屬性即可有這種效果。- form
先來(lái)看這么一個(gè)結(jié)構(gòu)<form action="test" method="get"> <input type="text" name="one"> <button type="submit">提交</button></form><input type="text" name="two">
我們可以知道當(dāng)提交form表單時(shí)，只會(huì)提交表單域里面的表單，表單域外的表單不會(huì)提交，所以當(dāng)我們提交時(shí)，只會(huì)有one的數(shù)據(jù)才會(huì)提交  但是如果希望當(dāng)提交時(shí)，two的數(shù)據(jù)也能進(jìn)行提交(別奇怪，真的有這種需求)，這個(gè)時(shí)候就需要用到form屬性了<form id="data" action="test" method="get"> <input type="text" name="one"> <button type="submit">提交</button></form><input type="text" name="two" form="data">
form屬性的值為form表單的id值。這時(shí)再次進(jìn)行提交
 這時(shí)two的數(shù)據(jù)也得到了提交。- list
list屬性要配合HTML5新添加的表單標(biāo)簽<datalist>使用，如下<input type="text" list="list"><datalist id="list"> <option value="One"></option> <option value="Two"></option> <option value="Three"></option></datalist>
list屬性的值為datalist標(biāo)簽的id值。當(dāng)我們?cè)?code>text中輸入時(shí)，會(huì)有datalist中option值的提示
 - multiple
multiple可以實(shí)現(xiàn)多選的效果，比如選擇多個(gè)文件，假設(shè)有下面的input標(biāo)簽<input type="file">
 這時(shí)只能選擇一個(gè)文件，為了選擇多個(gè)文件，我們?yōu)?code>input標(biāo)簽添加multiple屬性<input type="file" multiple>
 這時(shí)就可以選擇多個(gè)文件了。- placeholder
使用placeholder作為提示信息，假設(shè)有如下標(biāo)簽<input type="text" placeholder="請(qǐng)輸入信息">
 當(dāng)我們輸入文字時(shí)，提示信息會(huì)消失，當(dāng)我們將文字消失時(shí)，文字又會(huì)出現(xiàn)。- required
當(dāng)input使用該屬性時(shí)，表示該input控件是必填項(xiàng)，否則無(wú)法提交，具體可以自己試驗(yàn)一下，這里就不演示了。HTML5 API獲取DOM元素假設(shè)有如下的html結(jié)構(gòu)<ul> <li> <span>span1</span> </li> <li> <a href="#"><span>span2</span></a> </li></ul>
如果我們要改變span的樣式(通過(guò)JS)，我們我們一般要為span標(biāo)簽添加id屬性或者class屬性，這樣才能獲取要對(duì)應(yīng)的DOM元素，HTML5新增了兩個(gè)方法- querySelector()：只能選擇一個(gè)元素
- querySelectorAll()：可以選擇所有符合條件的元素
可以向其中傳入選擇器(任何CSS支持的選擇器)，從而來(lái)選擇DOM元素，如//使用子代選擇器選擇span元素document.querySelector("li>span").style.color = "red";
類(lèi)名操作有時(shí)候我們需要為某個(gè)標(biāo)簽添加或者移除類(lèi)樣式，HTML5為我們提供了API接口- classList.add()：為
DOM元素添加指定的類(lèi)樣式 - classList.remove()：為
DOM元素移除指定的類(lèi)樣式 - classList.toggle()：切換，意思即如果
DOM元素有這個(gè)類(lèi)樣式，則移除這個(gè)類(lèi)樣式，如果沒(méi)有這個(gè)類(lèi)樣式，這添加這個(gè)類(lèi)樣式 - classList.contains()：判斷該
DOM元素是否包含這個(gè)類(lèi)樣式，包含則返回true，否則返回false。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .active { width: 100%; height: 100px; background-color: darkred; } </style></head><body> <div></div> <button class="add">添加類(lèi)名</button> <button class="remove">移除類(lèi)名</button> <button class="toggle">切換類(lèi)名</button> <button class="contains">是否包含類(lèi)名</button> <script> document.querySelector(".add").onclick = function () { document.querySelector("div").classList.add("active"); } document.querySelector(".remove").onclick = function () { document.querySelector("div").classList.remove("active"); } document.querySelector(".toggle").onclick = function () { document.querySelector("div").classList.toggle("active"); } document.querySelector(".contains").onclick = function () { console.log(document.querySelector("div").classList.contains("active")); } </script></body></html>
自定義屬性HTML5規(guī)定自定義屬性需要以data-開(kāi)頭，如<div data-test="one"></div>
上面自定義了一個(gè)叫test的屬性，我們可以通過(guò)DOM元素的dataset來(lái)訪問(wèn)或者修改自定義屬性的值，有兩種方式- dataset.屬性名
- dataset["屬性名"]
<div data-test="one"></div><script> console.log(document.querySelector("div").dataset.test); document.querySelector("div").dataset["test"] = "two";</script>
如果屬性名之間使用-之間連接，如下<div data-test-name="one"></div>
那么使用dataset訪問(wèn)或修改時(shí)要使用駝峰命名法獲取，如下console.log(document.querySelector("div").dataset.testName);document.querySelector("div").dataset["testName"] = "two";
文件讀取FileReader是用來(lái)讀取上傳的文件的，它有3個(gè)讀取的方法- readAsText()：讀取文本文件，返回文本字符串(utf-8)
- readAsBinaryString()：讀取任意文件，返回二進(jìn)制文件
- readAsDataURL()：讀取任意文件，得到包含一個(gè)data:URL格式的字符串(base64編碼)，以表示所讀取文件的內(nèi)容
上面三個(gè)方法讀取的內(nèi)容都會(huì)放在FileReader對(duì)象的result屬性中。現(xiàn)在演示一個(gè)案例，選擇上傳的圖片，在上傳之后希望有預(yù)覽的效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="file"><br> <br> <img src="" width="800"></img> <script> //獲得input DOM元素 let input = document.querySelector("input"); //獲得img DOM元素 let image = document.querySelector("img"); //當(dāng)input發(fā)生改變時(shí)即有文件上傳時(shí)觸發(fā)該事件 input.onchange = function () { //獲得上傳的文件對(duì)象 let file = input.files[0]; //獲得FileReader對(duì)象 let reader = new FileReader(); //使用FileReader讀取該圖片，得到一個(gè)base64格式的編碼 reader.readAsDataURL(file); //reader讀取完畢后觸發(fā)該事件 reader.onload = function() { //將讀取到的base64編碼格式的URL賦值給img標(biāo)簽的src屬性 image.src = reader.result; } } </script></body></html>
上面的代碼中，我們用到了FileReader對(duì)象的onload事件，這里列出FileReader提供的事件- onabort：中斷時(shí)觸發(fā)
- onerror：出錯(cuò)時(shí)觸發(fā)
- onload：文件讀取成功完成時(shí)觸發(fā)
- onloadend：讀取完成觸發(fā)，無(wú)論成功或失敗
- onloadstart：讀取開(kāi)始時(shí)觸發(fā)
- onprogress：在讀取過(guò)程中持續(xù)觸發(fā)
獲取網(wǎng)絡(luò)狀態(tài)HTML5提供了有關(guān)網(wǎng)絡(luò)狀態(tài)的API，使用window.navigator.onLine可以獲取當(dāng)前的網(wǎng)絡(luò)狀態(tài)，返回一個(gè)布爾值。除此之外，還提供了兩個(gè)網(wǎng)絡(luò)事件- ononline()：連上網(wǎng)絡(luò)的時(shí)候觸發(fā)
- onoffline()：斷開(kāi)網(wǎng)絡(luò)的時(shí)候觸發(fā)
window.ononline = function () { console.log("online");}window.onoffline = function () { console.log("offline");}
本地存儲(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ù)雜，給開(kāi)發(fā)帶來(lái)諸多不便，HTML5規(guī)范則提出解決方案，使用sessionStorage和localStorage存儲(chǔ)數(shù)據(jù)。sessionStorage的大小大約為5M左右，它的生命周期為當(dāng)前頁(yè)面，即當(dāng)關(guān)閉當(dāng)前頁(yè)面時(shí)，存儲(chǔ)在本地的數(shù)據(jù)會(huì)被清除。并且不同頁(yè)面之間的sessionStorage是獨(dú)立的，不能互相訪問(wèn)。sessionStorage的方法有- setItem(key, value)：存儲(chǔ)鍵值對(duì)
- getItem(key)：根據(jù)key獲取對(duì)應(yīng)的value
- removeItem(key)：刪除key所對(duì)應(yīng)的鍵值對(duì)
- clear()：清除
sessionStorage本地緩存
localStorage的大小為20M左右，它的生命周期為當(dāng)前瀏覽器。關(guān)閉瀏覽器不會(huì)清除數(shù)據(jù)，數(shù)據(jù)存儲(chǔ)在硬盤(pán)上，只能手動(dòng)清除。localStorage的方法同sessionStorage。
|
