目錄
一.Web時代的變遷
（1）HTML5 的目標 ：
能夠創建更簡單的Web程序，書寫出更簡潔的HTML代碼。提供很多API，使Web應用程序開發變得更容易；開發出了新的屬性，新的元素，使HTML變得更簡潔，文檔結構更加清晰明確，容易閱讀。
（2）可放心使用HTML5 的三個理由：
-
兼容性：
HTML5 在老版本瀏覽器上可以正常運行。由於瀏覽器間的 規範不統一，使得瀏覽器間兼容性很低，而HTML5中，這個問題得到解決，HTML5的使命是詳細分析各Web瀏覽器所具有的功能，以此爲基礎，要求瀏覽器所有內部功能都要符合一個通用標準，圍繞這個Web標準，重新定義了一套在現有HTML的語法，以便各瀏覽器在運行HTML的時候能夠符合這個通用標準。
-
實用性：
HTML5內部並沒有封裝什麼很複雜的，不切實際的功能，而只是封裝了簡單實用的功能。
-
非革命性的發展：
HTML5內部的功能不是革命性的，只是發展性的。
（3）HTML5要解決的三個問題：
-
Web瀏覽器之間的兼容性很低。
-
文檔結構不夠明確。
-
Web應用程序的功能受到限制。
二.HTML5和HTML4的區別點
（1）語法的改變
語法結構的變化，主要是因爲提高瀏覽器兼容性。
標記方法：
-
文件聲明：
<!DOCTYPE html> -
指定字符編碼：
<meta charset="UTF-8">
HTML5確保的兼容性：
-
可省略標記的元素：
- 不允許寫結束標記的元素：
ares,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr. - 可以省略結束標記的元素：
li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th. - 可以省略全部標記的元素：
html,head,body,colgroup,tbody.
- 不允許寫結束標記的元素：
-
具有boolean值的屬性：
- 只寫屬性不寫屬性值，代表屬性爲true:
<input type="checkbox" checked> - 屬性值=“屬性名”，代表屬性爲true：
<input type="checkbox" checked="checked"> - 屬性值=空字符串，代表屬性爲true：
<input type="checkbox" checked=""> - 不寫屬性代表屬性爲false:
<input type="checkbox"> - 省略引號：當屬性值不包括空字符串，“
<”,">","=".單引號。雙引號等字符時，屬性值兩邊的引號可以省略。<input type="text"> = <input type='text'> = <input type=text>
- 只寫屬性不寫屬性值，代表屬性爲true:
（2）新增的元素和廢除的元素
新增的結構元素：
section, article, aside, header, footer, nav, figure, main
新增的其他元素：
video, audio, embed, mark, progress, meter, time, ruby, rt, rp, wbr, canvas, details, datalist, datagrid, datagrid, output, source, dialog
新增的input元素的類型：
email, url, number, range,data, month, week, time, datatime datatime-local
廢除的元素：
-
能使用CSS替代的元素：
basefont，big，center,font,s,strike,tt,u -
不再使用frame框架
-
只有部分瀏覽器支持的元素：
applet,bgsround,blink,marquee -
其他被廢除的元素：
rb,acronym,dir,isindex,listing,xmp,nextid,plaintext
（3） 新增的屬性和廢除的屬性：
新增的屬性：
廢除的屬性：
（4）全局屬性
-
contentEditable -
designMode -
hidden -
spellcheck -
tabindex
（5）新增的事件
-
windows對象，body元素：
beforeprint，afterprint,resize,error,affline,online,pageshow,beforeunload,hashchange -
任何元素：
mousewheel -
任何容器：
scroll -
input元素 ，textarea元素：
input -
form元素：
reset
三.HTML5的結構
（1）新增的主體結構元素：
article元素 ：
代表文檔，頁面或者應用程序中獨立的，完整的，可以獨自被外部引用的內容。
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-efn8XNfd-1586588569847)(C:\Users\lin\AppData\Roaming\Typora\typora-user-images\1577929768614.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200411150330631.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEyNDIxNA==,size_16,color_FFFFFF,t_70)
section元素：
用來對網站或應用程序中頁面上的內容進行分塊，一個section元素通常由內容及其標題組成。
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-0c8EqkSG-1586588569862)(C:\Users\lin\AppData\Roaming\Typora\typora-user-images\1577929991642.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/202004111503541.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEyNDIxNA==,size_16,color_FFFFFF,t_70)
section使用禁忌：
-
不要將section元素用作設置樣式的頁面容器，因爲那是div元素的工作。
-
如果article，aside，nav元素更符合狀況，不要使用section元素。
-
不要爲沒有標題的內容區塊使用section元素。
article元素強調獨立性，而section元素強調分段或分塊
nav元素：
可以用來作爲頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或者當前頁面的其他部分。
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qcuskXy6-1586588569865)(C:\Users\lin\AppData\Roaming\Typora\typora-user-images\1577930469881.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200411150414701.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEyNDIxNA==,size_16,color_FFFFFF,t_70)
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QjnWg6zJ-1586588569868)(C:\Users\lin\AppData\Roaming\Typora\typora-user-images\1577930490855.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200411150528702.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEyNDIxNA==,size_16,color_FFFFFF,t_70)
aside元素：
用來表示當前頁面或文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用，側邊欄，廣告，導航欄，以及其他雷士的有別於主要內容的部分。
主要有以下兩種用法：
-
包含在article元素中作爲主要內容的附屬信息部分，其中的內容可以是與當前文章有關的參考資料，名詞解釋等。
-
在article之外元素使用，作爲頁面或站點的附屬信息部分。
-
time元素
（2）新增的非主體結構性元素：
header元素：
具有引導和導航作用的結構元素。
header中可以包括至少一個或多個heading元素（h1-h6），也可以再包含1到多個header或footer![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-MhvusARn-1586588569872)(C:\Users\lin\AppData\Roaming\Typora\typora-user-images\1577931289500.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200411150609685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEyNDIxNA==,size_16,color_FFFFFF,t_70)
footer元素：
作爲其上級父級內容區塊或一個根區塊的腳註。通常包括其相關區塊的腳註信息，如作者，相關閱讀鏈接以及版權信息等。![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jv3kvyxa-1586588569884)(C:\Users\lin\AppData\Roaming\Typora\typora-user-images\1577931582949.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200411150630241.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEyNDIxNA==,size_16,color_FFFFFF,t_70)
address元素：
用來在文檔中呈現聯繫信息，包括文檔作者或者文檔維護者的名字，文檔作者或文檔維護者的網站鏈接，電子郵箱，真實地址，電話號碼等![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Dr8tSvDK-1586588569886)(C:\Users\lin\AppData\Roaming\Typora\typora-user-images\1577931854440.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200411150645117.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEyNDIxNA==,size_16,color_FFFFFF,t_70)
四.表單及其他新增和改良元素
（1）增強的scritp元素
新增了async和defer屬性，它們的作用都是加快頁面的加載速度，使腳本代碼的讀取不再妨礙頁面上其他元素的加載。
在HTML5之前，當瀏覽器在加載頁面時，如果頁面上的某個script元素引用一個外部JavaScript腳本文件，則瀏覽器在讀取該script元素時，將暫停頁面的加載速度工作，發出一個下載該JavaScript腳本文件的請求。然後開始下載該腳本文件，當下載完畢後繼續執行頁面的加載工作。如果腳本文件比較大，則腳本文件的下載工作無疑會成爲頁面加載時的一個性能方面的瓶頸。
爲解決這個性能瓶頸，HTML5爲script元素新增了async和defer屬性，代碼如下：
<script async src="myAsyncScript.js" onload="myAsyncInit()"></script>
<script defer src="myDeferScript.js" onload="myDeferInit()"></script>
當使用這兩個屬性時，在瀏覽器發出下載腳本文件的請求，開始腳本文件的下載工作後，立即進行執行頁面的加載工作。腳本文件下載完畢時觸發一個onload事件，我們可以通過監聽該事件及指定事件處理函數來指定當腳本文件下載完畢時需要執行的一段處理。
defer和async屬性的區別：
在於何時執行onload事件處理函數，
-
當使用async屬性時，腳本文件下載完畢後，立即執行事件處理函數，所以如果頁面中使用多個外部腳本文件，且均爲這些外部腳本文件使用async屬性，則這些外部腳本文件的onload事件的處理函數的執行順序並不與頁面代碼中這些外部腳本文件的引用順序保持一致，一旦某個外部腳本文件下載完畢，立即執行腳本文件的onload事件處理函數。
-
當使用defer屬性時，腳本文件下載完畢後，並不立即執行腳本文件的onload事件處理函數，而是等到頁面全部加載完畢後，才執行該腳本文件的onload事件處理函數，所以如果頁面中使用多個外部腳本文件，且均爲這些外部腳本文件使用defer屬性，則在頁面加載完畢後按這些外部腳本文件的引用順序來執行這些外部文件的onload事件處理函數。
-
另外，由於外部腳本文件的下載工作也屬於整個頁面的加載工作中的一部分，所以外部腳本文件的onload事件處理函數始終在瀏覽器窗口對象（window對象）的onload事件處理函數和頁面的body元素事件處理函數之前首先被執行。
五. ECMAScript中新增功能
javaScript 是在1995年由當時Netscape Communications公司的Brendan Eich開發並在Web上推行的腳本語言。其後雖然被封裝在Internet Explorer瀏覽器並被普及在Web平臺中，但由於各瀏覽器廠商各自開發了衆多擴展，所以其兼容性並不強。於是，就誕生了由ECMA從JavaScript中抽取出核心並標準化的ECMAScript。
ECMAScript是JavaScript語言的標準，JavaScript是ECMAScript的基礎。
ECMAScript中還封裝了其他語言，包括ActionScript與JScript。ECMAScript的第6個版本簡稱ECMAScript6，準確稱呼爲ECMAScript2015（簡稱ES-2015）,IT行業中很多場合也稱其爲ES6。
待更新…