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