HTML5的基礎知識有哪些

本篇內容介紹了“HTML5的基礎知識有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

兼容

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

語法

· 內容類型（ContentType）

· HTML5的文件擴展符與內容類型保持不變，仍然為".html"或".htm"

· DOCTYPE聲明

· 不區分大小寫

· 指定字符集編碼

· <meta charset="UTF-8">

· 可省略標記的元素

· 不允許寫結束標記的元素：br、col、embed、hr、img、input、、link、meta

· 可以省略結束標記的元素：

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

· 可以省略全部標記的元素：html、head、body、colgroup、tbody

· 屬性值可以使用雙引號，也可以使用單引號。

語義化標簽

在HTML 5出來之前，我們用div來表示頁面章節，但是這些div都沒有實際意義。（即使我們用css樣式的id和class形容這塊內容的意義）。這些標簽只是我們提供給瀏覽器的指令，只是定義一個網頁的某些部分。但現在，那些之前沒“意義”的標簽因為因為html5的出現消失了，這就是我們平時說的“語義”。

· section元素 表示頁面中的一個區塊

· article元素 表示一塊與上下文無關的獨立的內容

· aside元素 在article之外的，與article內容相關的輔助信息

· header元素 表示頁面中一個內容區塊或整個頁面的標題

· footer元素 表示頁面中一個內容區塊或整個頁面的腳注

· nav元素 表示頁面中導航鏈接部分

· figure元素 表示一段獨立的內容，使用figcaption元素為其添加標題(第一個或最后一個子元素的位置)

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

· hgroup標題的一個分組

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

· time時間

· dialog標記定義一個對話框(會話框)類似微信

· embed 標記定義外部的可交互的內容或插件 比如flash

多媒體標簽

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

· 屬性

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

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

· loop屬性：重復播放屬性。

· muted屬性：靜音屬性。

· poster屬性：規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。

· source

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

· <source> 標簽允許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。

· Type屬性值：

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

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

HTML5表單

· 新增type類型

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

· 新增表單屬性

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

· 新增表單標簽

· 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屬性結合使用。做提示信息。

<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的基礎知識有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！