資訊專欄INFORMATION COLUMN
一、HTML5與HTML4 1.1 推出的理由和目標
H5的出現，對于Web來說意義重大。因為他的意圖是想要把目前Web上存在的各種問題一并解決掉。
Web瀏覽器之間的兼容性很低
文檔結構不夠明確（增加了很多結構, 語義化的標簽）
Web應用程序的功能受到了限制
H5 的出現極大的解決了上面的問題
1.2 語法的改變 1.2.1 DOCTYPE聲明H5 DOCTYPE的聲明是這樣的：
Html:4s DOCTYPE的聲明是這樣的：
Html: 4t DOCTYPE 的聲明是這樣的
1.2.2 指定字符編碼
H5指定字符編碼格式如下：
Html:4s 指定字符編碼如下：
1.2.3 可以省略結束標記的元素給大家舉一個簡單的例子就明白啥玩意了
我們平常寫 p 標簽 是這樣寫的：
Hello world!
新的寫法可以這樣寫：
Hello world!
如果大家不相信，可以親自去測試一下，怎么測試呢？很簡單，就是分別設置他們的樣式即可，看看是否一樣，若一樣，證明二者是等價的！注意：設置 p標簽的樣式。
1.2.4 具有boolean值的屬性（disabled，checked）disabled 多用于input元素，button元素，option元素等 ，意思是 是否禁用這些 元素 ，用法如下：
其中屬性值“disabled”可以替換成任何的其它單詞甚至是“enabled”（不過“false”除外），因為屬性值為“false”時表示屬性不啟用，屬性值“true”表示啟用屬性。如下代碼的button元素都處于禁用狀態：
如下代碼的button元素處于啟用狀態：
checked 用法和disabled一樣，這里小編就不在過多贅述！
1.2.5 省略引號 （標簽內的屬性值可以省略引號）H5之前屬性值的寫法是這樣寫的，以 img 標簽的 src 屬性為例：
薰衣草
2.2 講解標簽
CAR
一般用于傳統導航，側邊欄導航，頁內導航、翻頁導航
非主體結構標簽
Header 元素是一種具有引導和導航作用的結構元素，通常用來防止整個頁面和頁面內的一個內容區塊的標題，但是也可以包含其他內容，例如數據、搜索表單或相關的logo圖片。
Footer元素可以作為其上層父級內容區或者一個根區塊的腳注。Footer通常包含其相關區塊的腳注信息，如作者、相關的閱讀鏈接及其版權信息等
Hgroup元素是將標題及其子標題進行分組的標簽。Hgroup標簽通常會將h1-h6標簽進行分組。譬如一個內容區的標題及其子元素算一組。
Address元素用來在文檔中呈現聯系信息，包括文檔作者或文檔維護者的名字、它們的網站鏈接、電子郵箱、真實地址、電話號碼等。Address應該不只用來呈現電子郵箱或真實地址，還用來展示跟文檔相關的聯系人的所有聯系信息。
三、表單內新增的元素和屬性 3.1 form 小編俗解：在 表單外部的標簽可以通過form屬性進行鏈接eg：
3.2 formtarget 屬性
_blank 在新窗口中打開。
_self 默認。在相同的框架中打開。
_parent 在父框架集中打開。
_top 在整個窗口中打開。
3.3 autofocus 獲取焦點
3.4 required 屬性
HTML5中新增的屬性可以應用于大多數的輸入標簽上，在提交時，如果元素中內容為空白，則不允許提交，同時在瀏覽器中顯示信息提示文字。看下面例子：
3.5 placeholder 屬性，用于顯示文本未輸入內容之前，
3.6 autoComplete 屬性
3.7 pattern 屬性
該屬性用于正則表達式。見下面小例子：
3.8 小編有話說
新增的表單屬性和元素還有很多，在這里我只列舉了一些較常用的屬性和元素，至于剩余的部分，小伙伴們用到的時候網上搜索就行。好啦！這部分結束，繼續下面的內容。
四、新的Javascript選擇器 4.1 querySelector()4.2 querySelectorAll()Hello World！
五、新增 dom 節點屬性 clasList 中的屬性和方法Hello World！Hello！World！
length (長度)
add() 增加
remove() 移除
Hello World!
toggle() 簡單理解：有則刪除，沒有則添加
有的時候
Hello World!
沒有的時候
六、JSON 的新方法 6.1 evalHello World!
eval(): 可以解析任何字符串變成JS , 對JSON內容進行解析的話必須在最外面使用(); 例如:
七、自定義標簽屬性
語法：1. 在標簽中使用data-str1-str2
?????????? 2. 在JS 中獲取到相應的自定義屬性的值 。dom.dataset.str1Str2
見下面的小例子就明白了：
Hello world!
分析： 其實很簡單，首先在標簽中根據自己的需要定義屬性，比如小編這里定義了字體的顏色和大小，光定義是不行的，瀏覽器不認識，所以還需要引用，在js中進行引用，引用方式就是和平常我們用js改變屬性值是一樣的，謹記要用駝峰命名法。
八、JS加載過程 一般情況按照慣例，所有script元素都應該放在頁面的head元素中。這種做法的目的就是把所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方。可是，在文檔的head元素中包含所有JavaScript文件，意味著必須等到全部JavaScript代碼都被下載、解析和執行完成以后，才能開始呈現頁面的內容(瀏覽器在遇到body標簽時才開始呈現內容)。
對于那些需要很多JavaScript代碼的頁面來說，這無疑會導致瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器窗口中將是一片空白。為了避免這個問題，現在Web應用程序一般都把全部JavaScript引用放在body元素中頁面的內容后面。這樣一來，在解析包含的JavaScript代碼之前，頁面的內容將完全呈現在瀏覽器中。而用戶也會因為瀏覽器窗口顯示空白頁面的時間縮短而感到打開頁面的速度加快了。
總結一句話：在JavaScript代碼時要把該部分放在body的后面
看下面的圖解：
defer (延遲腳本)延遲腳本：defer屬性只適用于外部腳本文件。
如果給script標簽定義了defer屬性，這個屬性的作用是表明腳本在執行時不會影響頁面的構造。也就是說，腳本會被延遲到整個頁面都解析完畢后再運行。因此，如果script元素中設置了defer屬性，相當于告訴瀏覽器立即下載，但延遲執行。
看下面的圖文詳解：
延遲加載
分析：這個例子中，雖然我們把script元素放在了文檔的head元素中，但其中包含的腳本將延遲到瀏覽器遇到標簽后再執行。
HTML5規范要求腳本按照它們出現的先后順序執行，因此第一個延遲腳本會先于第二個延遲腳本執行，而這兩個腳本會先于DOMContentLoaded事件(在DOM樹構建完成后觸發，不需要等到所有的資源都加載完畢)執行。
特別注意：在現實當中，延遲腳本并不一定會按照順序執行，也不一定會在DOMContentLoaded事件觸發前執行，因此最好只包含一個延遲腳本。
有 defer，加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但是 script.js 的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。
最佳的方法：從實用角度來說，把所有腳本都放在
圖解：
異步腳本：async屬性也只適用于外部腳本文件，并告訴瀏覽器立即下載文件。
但與defer不同的是：標記為async的腳本并不保證按照指定它們的先后順序執行。
直接圖解：
defer 和 async 的異同同
defer 和 async 在網絡讀?。_本下載）這塊兒是一樣的，都是異步的（相較于 HTML 解析）
異
在于腳本下載完之后何時執行，顯然 defer 是最接近我們對于應用腳本加載和執行的要求的。defer是立即下載但延遲執行，加載后續文檔元素的過程將和腳本的加載并行進行（異步），但是腳本的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。async是立即下載并執行，加載和渲染后續文檔元素的過程將和js腳本的加載與執行并行進行（異步）。
九、總結上述有的還沒有總結完，有心的小伙伴可以繼續總結，篇幅有限，所以把下面的內容放到了接下來的另一篇。下一篇才是干貨，繼續........
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113573.html
摘要：前端知識點總結新特性新的語義標簽增強型表單音頻和視頻繪圖繪圖地理定位拖動增強型表單新新的表單元素新特性數據列表本身不可見為提供輸入建議列表新特性進度條左右晃動進度條具有指定進度值進度條新特性刻度尺用于標示一個值所值的范圍不 前端知識點總結——H5 1.html5新特性 (1)新的語義標簽 (2)增強型表單* (3)音頻和視頻 (4)Canvas繪圖 (5)SVG繪圖 (6)地...
摘要：是對標準的第五次修訂。新特性語義特性賦予網頁更好的意義和結構文件類型聲明僅有一型。新的屬性用于與用于用于。索引數據庫從本質上說，允許用戶在瀏覽器中保存大量的數據。 HTML5 是對 HTML 標準的第五次修訂。其主要的目標是將互聯網語義化，以便更好地被人類和機器閱讀，并同時提供更好地支持各種媒體的嵌入。HTML5 的語法是向后兼容的。現在國內普遍說的 H5 是包括了 CSS3，Java...
摘要：是對標準的第五次修訂。新特性語義特性賦予網頁更好的意義和結構文件類型聲明僅有一型。新的屬性用于與用于用于。索引數據庫從本質上說，允許用戶在瀏覽器中保存大量的數據。 HTML5 是對 HTML 標準的第五次修訂。其主要的目標是將互聯網語義化，以便更好地被人類和機器閱讀，并同時提供更好地支持各種媒體的嵌入。HTML5 的語法是向后兼容的。現在國內普遍說的 H5 是包括了 CSS3，Java...
摘要：是對標準的第五次修訂。新特性語義特性賦予網頁更好的意義和結構文件類型聲明僅有一型。新的屬性用于與用于用于。索引數據庫從本質上說，允許用戶在瀏覽器中保存大量的數據。 HTML5 是對 HTML 標準的第五次修訂。其主要的目標是將互聯網語義化，以便更好地被人類和機器閱讀，并同時提供更好地支持各種媒體的嵌入。HTML5 的語法是向后兼容的。現在國內普遍說的 H5 是包括了 CSS3，Java...
閱讀 1140·2021-11-23 10:04
閱讀 2400·2021-11-22 15:29
閱讀 2743·2021-11-19 09:40
閱讀 715·2021-09-22 15:26
閱讀 2116·2019-08-29 16:27
閱讀 2484·2019-08-29 16:10
閱讀 1917·2019-08-29 15:43
閱讀 3275·2019-08-29 12:43
