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