HTML5的基礎(chǔ)知識(shí)有哪些

本篇內(nèi)容介紹了“HTML5的基礎(chǔ)知識(shí)有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

　　HTML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團(tuán)隊(duì)。? HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。? 2012年12月17日，萬(wàn)維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開(kāi)放的Web網(wǎng)絡(luò)平臺(tái)的奠基石?！? 2013年5月6日， HTML 5.1正式草案公布。該規(guī)范定義了第五次重大版本，第一次要修訂萬(wàn)維網(wǎng)的核心語(yǔ)言：超文本標(biāo)記語(yǔ)言（HTML）。在這個(gè)版本中，新功能不斷推出，以幫助Web應(yīng)用程序的作者，努力提高新元素互操作性。? 本次草案的發(fā)布，從2012年12月27日至今，進(jìn)行了多達(dá)近百項(xiàng)的修改，包括HTML和XHTML的標(biāo)簽，相關(guān)的API、Canvas等，同時(shí)HTML5的圖像img標(biāo)簽及svg也進(jìn)行了改進(jìn)，性能得到進(jìn)一步提升

兼容

支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國(guó)內(nèi)的 遨游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實(shí)驗(yàn)版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、 瀏覽器等國(guó)產(chǎn)瀏覽器同樣具備支持HTML5的能力。

語(yǔ)法

· 內(nèi)容類型（ContentType）

· HTML5的文件擴(kuò)展符與內(nèi)容類型保持不變，仍然為".html"或".htm"

· DOCTYPE聲明

· 不區(qū)分大小寫(xiě)

· 指定字符集編碼

· <meta charset="UTF-8">

· 可省略標(biāo)記的元素

· 不允許寫(xiě)結(jié)束標(biāo)記的元素：br、col、embed、hr、img、input、、link、meta

· 可以省略結(jié)束標(biāo)記的元素：

· li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th

· 可以省略全部標(biāo)記的元素：html、head、body、colgroup、tbody

· 屬性值可以使用雙引號(hào)，也可以使用單引號(hào)。

語(yǔ)義化標(biāo)簽

在HTML 5出來(lái)之前，我們用div來(lái)表示頁(yè)面章節(jié)，但是這些div都沒(méi)有實(shí)際意義。（即使我們用css樣式的id和class形容這塊內(nèi)容的意義）。這些標(biāo)簽只是我們提供給瀏覽器的指令，只是定義一個(gè)網(wǎng)頁(yè)的某些部分。但現(xiàn)在，那些之前沒(méi)“意義”的標(biāo)簽因?yàn)橐驗(yàn)閔tml5的出現(xiàn)消失了，這就是我們平時(shí)說(shuō)的“語(yǔ)義”。

· section元素 表示頁(yè)面中的一個(gè)區(qū)塊

· article元素 表示一塊與上下文無(wú)關(guān)的獨(dú)立的內(nèi)容

· aside元素 在article之外的，與article內(nèi)容相關(guān)的輔助信息

· header元素 表示頁(yè)面中一個(gè)內(nèi)容區(qū)塊或整個(gè)頁(yè)面的標(biāo)題

· footer元素 表示頁(yè)面中一個(gè)內(nèi)容區(qū)塊或整個(gè)頁(yè)面的腳注

· nav元素 表示頁(yè)面中導(dǎo)航鏈接部分

· figure元素 表示一段獨(dú)立的內(nèi)容，使用figcaption元素為其添加標(biāo)題(第一個(gè)或最后一個(gè)子元素的位置)

· main元素 表示頁(yè)面中的主要的內(nèi)容(ie不兼容)

· hgroup標(biāo)題的一個(gè)分組

· mark定義高亮顯示的文本(span)

· time時(shí)間

· dialog標(biāo)記定義一個(gè)對(duì)話框(會(huì)話框)類似微信

· embed 標(biāo)記定義外部的可交互的內(nèi)容或插件 比如flash

多媒體標(biāo)簽

<video src=""></video> <audio src=""></audio>

· 屬性

· controls屬性：如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。

· autoplay屬性：如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。

· loop屬性：重復(fù)播放屬性。

· muted屬性：靜音屬性。

· poster屬性：規(guī)定視頻正在下載時(shí)顯示的圖像，直到用戶點(diǎn)擊播放按鈕。

· source

· <source> 標(biāo)簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。

· <source> 標(biāo)簽允許您規(guī)定可替換的視頻/音頻文件供瀏覽器根據(jù)它對(duì)媒體類型或者編解碼器的支持進(jìn)行選擇。

· Type屬性值：

· 用于視頻：video/ogg video/mp4 video/webm

· 用于音頻：audio/ogg audio/mpeg

HTML5表單

· 新增type類型

Type=“email” 限制用戶必須輸入email類型 Type=“url” 限制用戶必須輸入url類型 Type=“range” 產(chǎn)生一個(gè)滑動(dòng)條表單 Type=“number” 限制用戶必須輸入number類型Type=“search” 產(chǎn)生一個(gè)搜索意義的表單 Type=“color” 生成一個(gè)顏色選擇的表單 Type=“time” 限制用戶必須輸入時(shí)間類型 Type=“month” 限制用戶必須輸入月類型 Type=“week” 限制用戶必須輸入周類型 Type=“datetime-local” 選取本地時(shí)間 Type=”date”

· 新增表單屬性

required 監(jiān)測(cè)是否為空。 min 最小 max 最大 step 步幅 確定一個(gè)法定值。 -3 0 3 6 9 list 必須結(jié)合datalist標(biāo)簽，綁定datalist id名稱。 autocomplete 是否自動(dòng)提示信息 屬性值 on off placeholder 文本框的提示信息 autofocus 自動(dòng)聚焦。一個(gè)頁(yè)面只能由一個(gè)。 pattern 后面的屬性值是一個(gè)正則表達(dá)式。 novalidate 取消驗(yàn)證 multiple 選擇（上傳）多個(gè)

· 新增表單標(biāo)簽

· output

<form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">

<input id="a" type="range" min="0" max="100">100+

<input id="b" type="text" value="50">=

<output name="x" for="a b"></output></form>

· datalist 必須和list屬性結(jié)合使用。做提示信息。

<input type="url"     list="url_list"    name="link" /><datalist    id="url_list"> 

    <option label="W3School" value="http://www.W3School.com.cn" /> 

    <option label="Google" value="http://www.google.com" /> 

    <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>

“HTML5的基礎(chǔ)知識(shí)有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！