HTML5 新特性
1、HTML5與HTML4
1.1 推出的理由和目標
H5的出現，對於Web來講意義重大。由於他的意圖是想要把目前Web上存在的各類問題一併解決掉。javascript
- Web瀏覽器之間的兼容性很低
- 文檔結構不夠明確（增長了不少結構, 語義化的標籤）
- Web應用程序的功能受到了限制
H5 的出現極大的解決了上面的問題html
1.2 語法的改變
1.2.1 DOCTYPE聲明
H5 DOCTYPE的聲明是這樣的：html5
<!DOCTYPE html>
Html:4s DOCTYPE的聲明是這樣的：java
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Html: 4t DOCTYPE 的聲明是這樣的面試
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
1.2.2 指定字符編碼
H5指定字符編碼格式以下：正則表達式
<meta charset="UTF-8" />
Html:4s 指定字符編碼以下：canvas
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
1.2.3 能夠省略結束標記的元素
給你們舉一個簡單的例子就明白啥玩意了
咱們日常寫 p 標籤 是這樣寫的：瀏覽器
<body> <p>Hello world!</p> </body>
新的寫法能夠這樣寫：ruby
<body>
<p/>Hello world!
</body>
若是你們不相信，能夠親自去測試一下，怎麼測試呢？很簡單，就是分別設置他們的樣式便可，看看是否同樣，若同樣，證實兩者是等價的！注意：設置 p標籤的樣式。網絡
1.2.4 具備boolean值的屬性（disabled，checked）
disabled 多用於input元素，button元素，option元素等 ，意思是 是否禁用這些 元素 ，用法以下：
其中屬性值「disabled」能夠替換成任何的其它單詞甚至是「enabled」（不過「false」除外），由於屬性值爲「false」時表示屬性不啓用，屬性值「true」表示啓用屬性。以下代碼的button元素都處於禁用狀態：
<input type="button" disabled="true" value="測試按鈕">
<input type="button" disabled="123" value="測試按鈕">
<input type="button" disabled=" " value="測試按鈕">
<input type="button" disabled="any word" value="測試按鈕">
以下代碼的button元素處於啓用狀態：
<input type="button" disabled="false" value="測試按鈕">
<input type="button" value="測試按鈕">
checked 用法和disabled同樣，這裏小編就不在過多贅述！
1.2.5 省略引號 （標籤內的屬性值能夠省略引號）
H5以前屬性值的寫法是這樣寫的，以 img 標籤的 src 屬性爲例：
<body>
<img src="1.png" alt="">
</body>
目前能夠這樣寫：
<body>
<img sre = 1.png alt = "">
</body>
兩者的結果是同樣的。都可以正常顯示圖片
1.3 新增的語義化標籤
什麼是語義化？
語義化是指用合理HTML標記以及其特有的屬性去格式化文檔內容。通俗地講,語義化就是對數據和信息進行處理,使得機器能夠理解. 語義化
新增的語義化標籤：Section、article、aside、header、hgroup、footer、nav、figure
具體用法：新增語義化標籤的用法
1.4 新增的"花樣"標籤元素
video、audio、canvas、embed、mark、progress、meter、time、ruby、rt、rp、wbr、command、details、datalist、datagrid、keygen、output、source、menu
這些標籤小編這裏就不在一 一介紹用法了。用的時候直接百度就行。通常用的也很少，記住有這個東西就行。(面試的時候可能會用到)
1.5 新增的 input 類型
Email、url、number、range、DatePickers
這裏只給出部分講解：
- number
<input type="number" name="">
- range
<input type = "range" name = "">
其他的小編就不測試了，有心的你能夠測試一下！
1.6 廢除的標籤
- 能使用CSS替代的basefont、big、center、font、s、tt、u等
- 再也不使用frame框架
- 只有部分瀏覽器支持的元素
- 其餘被廢除的元素
1.7 新增的全局屬性
全局屬性是指對全部標籤均可以使用的屬性
- contentEditable屬性(規定內容是否可編輯)
<input type="text" name="name" contenteditable="true">
- designMode屬性(這個在js中進行使用，讓頁面中全部的元素開啓可編輯模式)
window.onload = function() {
document.designMode = "on";
}
- hidden屬性
- spellcheck屬性 （input和textarea提供的新屬性，作了語法檢查）
- tabindex屬性 (讓標籤獲取到焦點)
<a href="javascript:void(0);" tabindex="3">你好</a>
<a href="javascript:void(0);" tabindex="2">hello world!</a>
<a href="javascript:void(0);" tabindex="1">html5</a>
2、新增的語義化標籤
2.1 新增元素
- <header></header> 頁眉
主要用於頁面的頭部的信息介紹，也可用於板塊頭部
- <footer></footer>頁腳
頁面的底部 或者 版塊底部
- <nav></nav> 導航 (包含連接的的一個列表)
<nav>
<a href="#">連接1</a>
<a href="#">連接2</a>
</nav>
- <hgroup></hgroup> 頁面上的一個標題組合
<hgroup>
<h1>旅遊</h1>
<h2>上海</h2>
</hgroup>
- <section></section> 頁面上的板塊
用於劃分頁面上的不一樣區域,或者劃分文章裏不一樣的節
- <article></ article > 用來在頁面中表示一套結構完整且獨立的內容部分
能夠用來呈現論壇的一個帖子，雜誌或報紙中的一篇文章，一篇博客，用戶提交的評論內容，可互動的頁面模塊掛件等
- <aside></aside>
該元素標籤能夠包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其餘相似的有別與主要內容的部分
8.<figure></figure>
用於對元素進行組合。通常用於圖片或視頻
- <figcation></figcation> figure 的子元素,用於對figure的內容進行說明
<figure>
<!-- (注意沒有alt) -->
<img src="images/225.jpg" width="100px" height="100px" />
<figcaption>薰衣草</figcaption>
</figure>
2.2 講解標籤
- <article><object><embed>強調獨立性
- <section> 強調分段，通常存在一個標題的
<section>
<h1>CAR</h1>
</section>
- <nav> 並非全部的連接組都放在nav標籤中，只須要將主要的，基本的放進nav中便可。
通常用於傳統導航，側邊欄導航，頁內導航、翻頁導航
- <aside> 來表示當前頁面或文章的附屬信息部分，它能夠包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其餘相似的有區別於主要內容的部分。
- 非主體結構標籤
Header 元素是一種具備引導和導航做用的結構元素，一般用來防止整個頁面和頁面內的一個內容區塊的標題，可是也能夠包含其餘內容，例如數據、搜索表單或相關的logo圖片。
Footer元素能夠做爲其上層父級內容區或者一個根區塊的腳註。Footer一般包含其相關區塊的腳註信息，如做者、相關的閱讀連接及其版權信息等
Hgroup元素是將標題及其子標題進行分組的標籤。Hgroup標籤一般會將h1-h6標籤進行分組。譬如一個內容區的標題及其子元素算一組。
Address元素用來在文檔中呈現聯繫信息，包括文檔做者或文檔維護者的名字、它們的網站連接、電子郵箱、真實地址、電話號碼等。Address應該不僅用來呈現電子郵箱或真實地址，還用來展現跟文檔相關的聯繫人的全部聯繫信息。
3、表單內新增的元素和屬性
3.1 form 小編俗解：在 表單外部的標籤能夠經過form屬性進行連接
eg：
<form id="form1">
<label for="man">MAN</label><input type="radio" id="man" name="sex">
<input type="radio" id="woman" name="sex">
</form>
<label for="woman" form="form1">WOMAN</label>
3.2 formtarget 屬性
- _blank 在新窗口中打開。
- _self 默認。在相同的框架中打開。
- _parent 在父框架集中打開。
- _top 在整個窗口中打開。
3.3 autofocus 獲取焦點
<input type="text" name="">
<input type="text" name="" autofocus="autofocus">
3.4 required 屬性
HTML5中新增的屬性能夠應用於大多數的輸入標籤上，在提交時，若是元素中內容爲空白，則不容許提交，同時在瀏覽器中顯示信息提示文字。看下面例子：
<form>
<input type="text" name="" autofocus="autofocus" required>
<input type="submit" name="">
</form>
3.5 placeholder 屬性，用於顯示文本未輸入內容以前，
<form>
<input type="text" name="name" placeholder="請輸入你的姓名">
</form>
3.6 autoComplete 屬性
<form autocomplete="on">
<input type="text" name="name" placeholder="請輸入你的姓名" >
</form>
3.7 pattern 屬性
該屬性用於正則表達式。見下面小例子：
<form>
<input type="text" name="content" autocomplete="off" placeholder="請輸入郵箱" pattern="\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}" >
<input type="submit">
</form>
3.8 小編有話說
新增的表單屬性和元素還有不少，在這裏我只列舉了一些較經常使用的屬性和元素，至於剩餘的部分，小夥伴們用到的時候網上搜索就行。好啦！這部分結束，繼續下面的內容。
4、新的Javascript選擇器
4.1 querySelector()
<div id="box">Hello World！</div>
<script type="text/javascript">
var box = document.querySelector("#box");
box.style.color = "red";
box.style.fontSize = "24px";
box.style.fontWeight = "blod";
</script>
4.2 querySelectorAll()
<div id="box">Hello World！</div>
<div id="box">Hello！</div>
<div id="box">World！</div>
<script type="text/javascript">
var boxList = document.querySelectorAll("#box");
boxList.forEach(function(item){
item.style.color = "red";
item.style.fontSize = "24px";
item.style.fontWeight = "blod";
});
</script>
5、新增 dom 節點屬性
clasList 中的屬性和方法
- length (長度)
<div id="box" class="test test1 test2 test 3 test4"></div>
<script>
var box = document.querySelector("#box");
window.onload = function (){
console.log(box.classList);
console.log(box.classList.length);
}
</script>
- add() 增長
<div id = "box" class = "test test1 test2 test3 test4 "></div>
<script>
var box = document.querySelector("#box");
window.onload = function(){
box.classList.add("test5");
console.log(box.classList);
}
</script>
- remove() 移除
<div id="box" class="test test2 test3 test4">Hello World!</div>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.remove("test");
console.log(box.classList);
}
</script>
- toggle() 簡單理解：有則刪除，沒有則添加
- 有的時候
<div id="box" class="test test2 test3 test4">Hello World!</div>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.toggle("test");
console.log(box.classList);
}
</script>
- 沒有的時候
<div id="box" class="test test2 test3 test4">Hello World!</div>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.toggle("test5");
console.log(box.classList);
}
</script>
6、JSON 的新方法
6.1 eval
eval(): 能夠解析任何字符串變成JS , 對JSON內容進行解析的話必須在最外面使用(); 例如:
<script>
var str = "({name:'Tom',age:'20',sex:'man'})";
var obj = eval(str);
console.log(obj);
</script>
7、自定義標籤屬性
語法：1. 在標籤中使用data-str1-str2
2. 在JS 中獲取到相應的自定義屬性的值 。dom.dataset.str1Str2
見下面的小例子就明白了：
<div id="box" data-my-color="red" data-font-size="24px">Hello world!</div>
<script>
var box = document.querySelector("#box");
box.style.color = box.dataset.myColor;
box.style.fontSize = box.dataset.fontSize;
</script>
分析： 其實很簡單，首先在標籤中根據本身的須要定義屬性，好比小編這裏定義了字體的顏色和大小，光定義是不行的，瀏覽器不認識，因此還須要引用，在js中進行引用，引用方式就是和日常咱們用js改變屬性值是同樣的，謹記要用駝峯命名法。
8、JS加載過程
通常狀況
按照慣例，全部script元素都應該放在頁面的head元素中。這種作法的目的就是把 全部外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方。但是，在文檔的head元素中包含全部JavaScript文件，意味着必須等到所有JavaScript代碼都被下載、解析和執行完成之後，才能開始呈現頁面的內容(瀏覽器在遇到body標籤時纔開始呈現內容)。
對於那些須要不少JavaScript代碼的頁面來講，這無疑會 致使瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器窗口中將是一片空白。爲了不這個問題，如今Web應用程序通常都把所有JavaScript引用放在body元素中頁面的內容後面。這樣一來，在解析包含的JavaScript代碼以前，頁面的內容將徹底呈如今瀏覽器中。而用戶也會由於瀏覽器窗口顯示空白頁面的時間縮短而感到打開頁面的速度加快了。
總結一句話：在JavaScript代碼時要把該部分放在body的後面
看下面的圖解：
defer (延遲腳本)
延遲腳本：defer屬性只適用於外部腳本文件。
若是給script標籤訂義了defer屬性，這個屬性的做用是代表腳本在執行時不會影響頁面的構造。也就是說，腳本會被延遲到整個頁面都解析完畢後再運行。所以，若是script元素中設置了defer屬性，至關於告訴瀏覽器當即下載，但延遲執行。
看下面的圖文詳解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>延遲加載</title>
<script defer type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>
分析：這個例子中，雖然咱們把script元素放在了文檔的head元素中，但其中包含的腳本將延遲到瀏覽器遇到</html>標籤後再執行。
HTML5規範要求腳本按照它們出現的前後順序執行，所以第一個延遲腳本會先於第二個延遲腳本執行，而這兩個腳本會先於DOMContentLoaded事件(在DOM樹構建完成後觸發，不須要等到全部的資源都加載完畢)執行。
特別注意：在現實當中，延遲腳本並不必定會按照順序執行，也不必定會在DOMContentLoaded事件觸發前執行，所以最好只包含一個延遲腳本。
有 defer，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），可是 script.js 的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。
最佳的方法：從實用角度來講，把全部腳本都放在 </body> 以前是最佳實踐，由於對於舊瀏覽器來講這是惟一的優化選擇，此法可保證非腳本的其餘一切元素可以以最快的速度獲得加載和解析。
圖解：
async (異步腳本)
異步腳本：async屬性也只適用於外部腳本文件，並告訴瀏覽器當即下載文件。
但與defer不一樣的是：標記爲async的腳本並不保證按照指定它們的前後順序執行。
直接圖解：
defer 和 async 的異同
- 同
defer 和 async 在網絡讀取（腳本下載）這塊兒是同樣的，都是異步的（相較於 HTML 解析）
- 異
在於腳本下載完以後什麼時候執行，顯然 defer 是最接近咱們對於應用腳本加載和執行的要求的。defer是當即下載但延遲執行，加載後續文檔元素的過程將和腳本的加載並行進行（異步），可是腳本的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。async是當即下載並執行，加載和渲染後續文檔元素的過程將和js腳本的加載與執行並行進行（異步）。
9、總結
上述有的尚未總結完，有心的小夥伴能夠繼續總結，篇幅有限，因此把下面的內容放到了接下來的另外一篇。下一篇纔是乾貨，繼續........
- 1. HTML5新特性
- 2. Html5新特性
- 3. HTML5 新特性
- 4. html5新特性
- 5. HTML5 新特性
- 6. HTML5的新特性
- 7. HTML HTML5 新特性
- 8. HTML5/CSS3新特性
- 9. html5的新特性
- 10. html5新增特性
- 更多相關文章...
- • PHP 7 新特性 - PHP教程
- • MySQL 5.7的新特性（新功能） - MySQL教程
- • JDK13 GA發佈：5大特性解讀
- • 互聯網組織的未來：剖析GitHub員工的任性之源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
- 1. HTML5新特性
- 2. Html5新特性
- 3. HTML5 新特性
- 4. html5新特性
- 5. HTML5 新特性
- 6. HTML5的新特性
- 7. HTML HTML5 新特性
- 8. HTML5/CSS3新特性
- 9. html5的新特性
- 10. html5新增特性