HTML5是繼HTML4以后的下一代HTML標(biāo)準(zhǔn)規(guī)范，它提供了一些新的元素和屬性。新型的標(biāo)簽有利于搜索引擎和語(yǔ)義分析，同時(shí)更好地幫助小屏幕裝置和視障人士使用，除此之外，也提供了一些新的功能，總結(jié)而言，有如下幾大特點(diǎn)：

1、取消了一些HTML4里過(guò)時(shí)的元素和屬性標(biāo)記

其中包括純粹顯示效果的標(biāo)記，如和

，它們已經(jīng)被CSS取代。HTML5吸取了XHTML2的一些建議，包括一些用來(lái)改善文檔結(jié)構(gòu)的功能，比如，新的HTML標(biāo)簽header，footer，dialog，aside，figure等的使用，將使內(nèi)容創(chuàng)作者更加語(yǔ)義地創(chuàng)建文檔，之前的開(kāi)發(fā)者在實(shí)現(xiàn)這些功能時(shí)一般都是使用p。

2、內(nèi)容與展式分離

b和i標(biāo)簽依然保留，但它們意義和之前有不同，這些標(biāo)簽的意義是為了將一段文字標(biāo)識(shí)出來(lái)，而不是為了設(shè)置粗體或斜體樣式。u,font,center,strike這些標(biāo)簽則被完全去掉了。

3、新增加一些全新的表單輸入對(duì)象

包括日期，URL，Email地址，其它的對(duì)象則增加了對(duì)非拉丁字符的支持。HTML5還引入了微數(shù)據(jù)，這一使用機(jī)器可以識(shí)別的標(biāo)簽標(biāo)注內(nèi)容的方法，使語(yǔ)義Web的處理更為簡(jiǎn)單。總的來(lái)說(shuō)，這些與結(jié)構(gòu)有關(guān)的改進(jìn)使內(nèi)容創(chuàng)建者可以創(chuàng)建更干凈、更容易管理的網(wǎng)頁(yè)，這樣的網(wǎng)頁(yè)對(duì)搜索引擎、對(duì)讀屏軟件等更為友好。

4、全新的、更合理的標(biāo)簽

多媒體對(duì)象將不再全部綁定在object或embedTag中，而是視頻有video標(biāo)簽，音頻有audio標(biāo)簽。

5、本地存儲(chǔ)

增加了localStorage/sessionStorage/indexedDB等瀏覽器端存儲(chǔ)功能。

6、Canvas對(duì)象

將給瀏覽器帶來(lái)直接繪制圖形的能力，可以直接在瀏覽器中操作圖形。

7、新的API擴(kuò)展

為HTMLDocument和HTMLElement接口提供了新的API擴(kuò)展。

8、新語(yǔ)法

(1)DOCTYPE

HTML5的HTML語(yǔ)法要求文檔必須聲明DOCTYPE以確保瀏覽器可以在標(biāo)準(zhǔn)模式下展示頁(yè)面。聲明方式是：

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

(2)Charset

HTML5的HTML語(yǔ)法里，有三種形式可以聲明字符串的encoding類(lèi)型：在傳輸級(jí)別(transport level)上，在HTTP實(shí)例的header里設(shè)置Content-Type。

在文件的開(kāi)頭，設(shè)置一個(gè)Unicode的Bype Order Mark(BOM)，該字符為文件的encoding方式提供了一個(gè)簽名。

在文檔的前1024個(gè)byte之間的內(nèi)容里，使用帶有charset屬性的meta元素來(lái)聲明encoding方式。例如：。

(3)MathML和SVG

HTML5的HTML語(yǔ)法允許在文檔里使用MathML(數(shù)學(xué)標(biāo)記語(yǔ)言)和SVG(可伸縮矢量圖)元素。例如，一個(gè)非常簡(jiǎn)單的HTML頁(yè)面包含一個(gè)svg元素畫(huà)出的圓：

SVG in text/html

A green circle:

section

section 元素是對(duì)頁(yè)面文檔結(jié)構(gòu)進(jìn)行劃分的最基本也是最主要的結(jié)構(gòu)元素，主要用來(lái)對(duì)網(wǎng)站或應(yīng)用程序中的頁(yè)面上的內(nèi)容進(jìn)行層次結(jié)構(gòu)上的劃分。一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。

如果元素的內(nèi)容集中到一起顯示可以表達(dá)相應(yīng)的意思的話，可以定義成article元素，而沒(méi)必要使用section元素。

section元素不是一般的容器元素，所以如果一個(gè)元素需要定義相應(yīng)的style或script腳本的話，推薦使用p元素，section的使用是確保這個(gè)元素的內(nèi)容能夠明確地展示在文檔的大鋼里。

如：

Graduation Ceremony Summer 2022

Graduation

Ceremony

Opening Procession

Speech by Validactorian

Speech by Class President

Presentation of Diplomas

Closing Speech by Headmaster

Graduates

• Molly Carpenter
• Anastasia Luccio
• Ebenezar McCoy
• Karrin Murphy
• Thomas Raith
• Susan Rodriguez

article

article 元素代表文檔、頁(yè)面或應(yīng)用程序中的所有“正文”部分，它所描述的內(nèi)容應(yīng)該是獨(dú)立的、完整的、可以獨(dú)自被外部引用的，可以是一篇博客、一篇報(bào)刊中的文章、一篇論壇帖子、一段用戶(hù)評(píng)論、一個(gè)獨(dú)立的插件，或任何獨(dú)立于上下文中其他部分的內(nèi)容。

article是一個(gè)特殊的section標(biāo)簽，它比section具有更明確的語(yǔ)義，它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊。一般來(lái)說(shuō)，article會(huì)有標(biāo)題部分。

當(dāng)article內(nèi)嵌article時(shí)，原則上來(lái)說(shuō)，內(nèi)部的article的內(nèi)容是和外層的article內(nèi)容相關(guān)的。例如，一篇博客中，包含用戶(hù)提交的評(píng)論的article應(yīng)該嵌套在包含博客文章article中。

Safari 5 released

7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC.

Apple announced the release of Safari 5 for Windows and Mac......

nav

nav 元素是一個(gè)可以作為頁(yè)面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁(yè)面或當(dāng)前頁(yè)面的其他部分。一個(gè)頁(yè)面可以擁有多個(gè)nav元素，作為頁(yè)面整體不同部分的導(dǎo)航。在nav元素中，一般以u(píng)l列表的形式來(lái)具體放置該組鏈接元素。

下面是w3c給出的一個(gè)示例代碼：

The Wiki Center Of Exampland

• Home
• Current Events

...more...

Demos in Exampland

Written by A. N. Other.

• Public demonstrations
• Demolitions

...more...

Public demonstrations

...more...

Demolitions

...more...

...more...

Edit | Delete | Rename

? copyright 1998 Exampland Emperor

aside

aside元素用來(lái)表示當(dāng)前頁(yè)面或文章的附屬信息部分，它可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條、以及其他有別于主要內(nèi)容的部分。

根據(jù)目前的規(guī)范，aside元素有兩種使用方法：被包含在article中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是當(dāng)前文章有關(guān)的引用，詞匯列表等。

在article外使用，作為頁(yè)面或站點(diǎn)全局的附屬信息部分；最典型的形式是側(cè)邊欄，其中的內(nèi)容可以是友情鏈接、附屬導(dǎo)航或廣告單元等。

下面的代碼示例綜合了以上兩種方法：

My Blog

My Blog Post

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua.

Glossary

Lorem

ipsum dolor sit amet

Blogroll

• My Friend
• My Other Friend
• My Best Friend

hgroup

hgroup 元素是將標(biāo)題及其子標(biāo)題進(jìn)行分組的元素。hgroup元素通常對(duì)h1~h6元素進(jìn)行分組，如將一個(gè)內(nèi)容區(qū)塊的標(biāo)題及其子標(biāo)題劃為一組：

Welcome to my WWF

For a living planet

The rest of the content...

header

header 元素是一種具有引導(dǎo)作用和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來(lái)放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)article元素或section元素的標(biāo)題，也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片。

我們可以使用該標(biāo)簽來(lái)顯示整個(gè)網(wǎng)頁(yè)的標(biāo)題部分：

The most important heading on this page

同一個(gè)頁(yè)面內(nèi)，每一個(gè)內(nèi)容區(qū)塊都可以有自己的header元素，例如：

The most important heading on this page

Title of this article

...Lorem Ipsum dolor set amet...

footer

footer 元素可以作為其上層父級(jí)內(nèi)容區(qū)塊或一個(gè)根區(qū)塊的腳注。footer 元素通常包括其相關(guān)區(qū)塊的腳注信息，如作者、相關(guān)閱讀鏈接以及版權(quán)信息等。

過(guò)去(及目前)，我們通常使用類(lèi)似下面這樣的代碼來(lái)寫(xiě)頁(yè)面的頁(yè)腳：

• copyright
• sitemap
• contact
• to top

在HTML5中，我們可以不使用p，而用更加語(yǔ)義化的footer來(lái)寫(xiě)：

• copyright
• sitemap
• contact
• to top

在同一個(gè)頁(yè)面中可以使用多個(gè)footer元素，即可以用作頁(yè)面整體頁(yè)腳，也可以作為一個(gè)內(nèi)容區(qū)塊的結(jié)尾，例如，我們可以將footer直接寫(xiě)在section或是article中：

Section content appears here.

Footer information for section.

Article content appears here.

Footer information for article.

address

address元素用來(lái)在文檔中呈現(xiàn)聯(lián)系信息，包括文檔創(chuàng)建者的名字、站點(diǎn)鏈接、電子郵箱、真實(shí)地址、電話號(hào)碼等；address不只是用來(lái)呈現(xiàn)電子郵箱或真實(shí)地址這樣的“地址”概念，而應(yīng)該包括與文檔創(chuàng)建人相關(guān)的各類(lèi)聯(lián)系方式信息。

根據(jù)以上定義，我們可以使用下面的代碼來(lái)展示一些志愿者的名字及主頁(yè)鏈接：The HTML5 Doctor is run by the following group of volunteers:

Jack Osborne,

Rich Clark,

Mike Robinson,

下面是另一個(gè)范例：

by

Jack Osborne

on November 4th, 2009

video

通過(guò)標(biāo)簽，我們可以拋棄最近不怎么討好的Flash，直接在頁(yè)面中播放視頻文件。視頻文件自然是最符合語(yǔ)義化的文件格式，但該元素標(biāo)簽同樣支持音頻與圖片。

過(guò)去(及目前)，我們通常要使用類(lèi)似下面這樣繁冗丑陋的代碼來(lái)將視頻放置在頁(yè)面中，但這種方式要求瀏覽器安裝有Flash插件，并支持JavaScript：

height="344"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">

src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">

HTML5的方式：

Try this page in Safari 4! Or you can

download the video

instead.

標(biāo)簽有如下幾個(gè)常用屬性：Autoplay: 用來(lái)設(shè)定視頻是否在頁(yè)面加載后自動(dòng)播放。

Src: 為視頻指定文件鏈接或下載路徑，當(dāng)瀏覽器不支持標(biāo)簽或發(fā)生某種播放錯(cuò)誤時(shí)，可以提供給用戶(hù)進(jìn)行下載。

Autobuffer: 用來(lái)設(shè)定視頻是否自動(dòng)緩沖；如果設(shè)定，那么頁(yè)面加載之后，視頻會(huì)自動(dòng)下載緩沖，當(dāng)用戶(hù)點(diǎn)擊播放按鈕后，至少已經(jīng)有一部分視頻可以直接觀看而無(wú)需等待了。

Poster: 用來(lái)為視頻設(shè)置一個(gè)“相框默認(rèn)圖片”性質(zhì)的背景圖片；當(dāng)視頻無(wú)法正常加載播放時(shí)可以向用戶(hù)呈現(xiàn)。

Controls: 用來(lái)設(shè)置是否為視頻添加控制條，例如“播放”、“暫停”等；控制條的外觀可以自定義。

Loop: 用來(lái)設(shè)置視頻是否循環(huán)播放。

Width , Height: 用來(lái)控制視頻的寬度與高度。

audio

HTML5中的新元素標(biāo)簽是被大家等待已久的，它有原生支持音頻播放的功能，而不需要瀏覽器安裝額外的擴(kuò)展

元素標(biāo)簽的一些常用屬性：src：音頻文件路徑。

autobuffer：設(shè)置是否在頁(yè)面加載時(shí)自動(dòng)緩沖音頻。

autoplay：設(shè)置音頻是否自動(dòng)播放。

loop：設(shè)置音頻是否要循環(huán)播放。

controls：設(shè)置是否顯示播放控制面板。

可以看到這些屬性和元素標(biāo)簽的屬性很類(lèi)似。下面我們來(lái)看一個(gè)代碼范例：

根據(jù)定義規(guī)范，以下幾種API方法是可以使用的：play()：播放音頻

pause()：暫停播放

canPlayType()：命令瀏覽器判斷當(dāng)前音頻文件是否可以被播放

buffered()：設(shè)定文件需要緩沖部分的開(kāi)始與結(jié)束時(shí)間點(diǎn)。

另外，我們可以使用元素標(biāo)簽來(lái)配合；用來(lái)指定多個(gè)音頻文件，如果當(dāng)前瀏覽器不支持第一個(gè)文件，那么會(huì)自動(dòng)嘗試播放下面一個(gè)中指定的文件；我們還可以在它們后面加上目前常規(guī)的代碼來(lái)加載Flash播放器，作為后備方案；范例如下：

datalist

datalist 與 input 的新屬性list一起使用可以創(chuàng)建組合框，雙擊input的時(shí)候可以提供選項(xiàng)讓用戶(hù)選擇，類(lèi)似歷史記錄一樣。

總結(jié)

以上是生活随笔為你收集整理的h5怎么加入php代码,HTML5主要新增标签的使用代码分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。