HTML5 簡介

HTML5 是什麼樣的，怎麼用？其實在我們的HTML教學(xué)的第一個章節(jié)，我們裡面給大家的例子裡面用的程式碼都是HTML來寫的。下面我們再來詳細(xì)了解HTML5

HTML5?簡介

##HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。 ######HTML5的設(shè)計目的是為了在行動裝置上支援多媒體。 ######HTML5 簡單易學(xué)。 ################

什麼是 HTML5?

HTML5 是下一代 HTML 標(biāo)準(zhǔn)。

HTML , HTML 4.01的上一個版本誕生於 1999 年。自從那以後，Web 世界已經(jīng)經(jīng)歷了巨變。

HTML5 仍處於完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支援。

HTML5 是如何開始的？

HTML5 是 W3C 與 WHATWG 合作的結(jié)果,WHATWG 指 Web Hypertext Application Technology Working Group。。

WHATWG 致力於 web 表單和應(yīng)用程序，而 W3C 專注於 XHTML 2.0。在 2006 年，雙方?jīng)Q定進行合作，來建立一個新版本的 HTML。

HTML5 中的一些有趣的新功能：

用於繪畫的canvas 元素

用於媒介回放的video 和audio 元素

對本地離線儲存的更好的支援

新的特殊內(nèi)容元素，例如article、footer、header、nav、section

新的表單控制項，例如calendar、date、time、email、url、search

#HTML5 <!DOCTYPE>

<! doctype> 宣告必須位於HTML5 文件中的第一行,使用非常簡單:

<!DOCTYPE html>

############### ######你可以看一下我們的第一章範(fàn)例是不是由<!DOCTYPE>開頭的###############最小的HTML5文件#### ########下面是一個簡單的HTML5文件：###

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文檔標(biāo)題</title>
</head>
<body>
文檔內(nèi)容......
</body>
</html>

注意：對於中文網(wǎng)頁需要使用?<meta charset="utf-8">?宣告編碼，否則會出現(xiàn)亂碼。

HTML5 的改進

##新屬性
完全支援CSS3
#Video 和Audio
2D/3D 製圖

本機儲存

本機SQL 資料

Web 應(yīng)用程式

HTML5 多媒體

使用HTML5 你可以簡單的在網(wǎng)頁中播放影片(video)與音訊(audio) 。 HTML5?<video>

HTML5?

<audio>

HTML5應(yīng)用
使用HTML5 你可以簡單地開發(fā)應(yīng)用程式
#本地資料儲存

##Javascript 工作者XHTMLHttpRequest 2

#HTML5 圖形
##使用HTML5 你可以簡單的繪製圖形:
使用?<canvas>?元素
#########使用內(nèi)嵌?SVG############使用CSS3 2D/3D###

HTML5 使用CSS3

#新選擇器
##新屬性
動畫
#2D/3D 轉(zhuǎn)換
圓角
陰影效果
可下載的字體

了解更多CSS3知識請查看本站的?CSS3 教學(xué)。

語意元素

#HTML5 新增了許多語意元素如下所示：

? ? ?? ? ?? ? <#article>定義頁面獨立的內(nèi)容區(qū)域。 ? ??<aside>#定義頁面的側(cè)邊欄內(nèi)容。 ? ??<bdi>#可讓您設(shè)定一段文本，使其脫離其父元素的文字方向設(shè)定。 ? ??<command>#定義指令按鈕，例如單選按鈕、核取方塊或按鈕

標(biāo)籤	說明

##? ??<dialog>定義對話框，例如提示框標(biāo)籤包含details 元素的標(biāo)題#規(guī)定獨立的串流內(nèi)容（影像、圖表、照片、程式碼等等）。定義 <figure> 元素的標(biāo)題

? ??<details>	用來描述文件或文件某部分的細(xì)部
	#? ??<dialog>
	? ??<summary>
	#? ??<figure>
	? ??<figcaption>

#########? ??<mark>定義帶有記號的文字。 #定義度量衡。僅用於已知最大值和最小值的度量。 #定義導(dǎo)覽連結(jié)的部分。

? ??<footer>	#定義 section 或 document 的頁尾。
? ??<header>	#定義了文件的頭部區(qū)域
	##? ??<mark>
	? ??<meter>
	? ??<nav>

######

? ??<progress>	#定義任何類型的任務(wù)的進度。
? ??<ruby>	#定義 ruby?? 註解（中文註音或字元）。
? ??<rt>	#定義字元（中文註音或字元）的解釋或發(fā)音。
? ??<rp>	#在 ruby?? 註解中使用，定義不支援 ruby?? 元素的瀏覽器所顯示的內(nèi)容。
? ??<section>	#定義文件中的節(jié)（section、區(qū)段）。

? ??<time>	定義日期或時間。
? ??<wbr>	#規(guī)定在文本中的何處適合新增換行符號。

HTML5 表單

#新表單元素, 新屬性，新輸入類型，自動驗證。

#已移除元素

以下的HTML 4.01 元素在HTML5中已經(jīng)刪除:

<acronym>
<applet>
<basefont>
#<big>
<center>

###########################################' #########<dir>############<font>############<frame>##### #######<frameset>############<noframes>###########<strike>####### ##############實例?############下面的範(fàn)例給大家看一下在網(wǎng)頁上播放影片###r??rreee######你可以在本地找一個視頻，在src中放入視頻的位置及名稱，嘗試一下###############HTML5 瀏覽器支援#########

最新版本的 Safari、Chrome、Firefox 以及 Opera 支援某些 HTML5 特性。 Internet Explorer 9 將支援某些 HTML5 特性。

你可以讓一些早期的瀏覽器（不支援HTML5）支援 HTML5。

現(xiàn)代的瀏覽器都支援 HTML5。

此外，所有瀏覽器，包括舊的和最新的，對無法識別的元素會作為內(nèi)聯(lián)元素自動處理。

正因為如此，你可以?"教會"?瀏覽器處理?"未知"?的 HTML 元素。

甚至你可以教導(dǎo) IE6 (Windows XP 2001) 瀏覽器處理未知的 HTML 元素。

將HTML5 元素定義為區(qū)塊元素

##HTML5 定了8 個新的HTML?語意（semantic）?元素。所有這些元素都是?塊級?元素。
為了能讓舊版的瀏覽器正確顯示這些元素，你可以設(shè)定CSS 的?display?屬性值為?block:

header,

section

footer

aside

nav###, ###main###, ###article###, ## #figure ###{###??? display: block;?###}##################為HTML 新增元素########### ##你可以為HTML 新增新的元素。 ######此實例新增至 HTML的新元素，並為此元素定義樣式，元素名稱為?<myHero>?：###

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文檔標(biāo)題</title>
</head>
<body>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    你的瀏覽器不支持 video 標(biāo)簽。
</video>
</body>
</html>

###執(zhí)行程式看看###

JavaScript 語句?document.createElement("myHero")?是為 IE 瀏覽器新增新的元素。

Internet Explorer 瀏覽器問題

#你可以使用以上的方法來為IE 瀏覽器新增HTML5 元素，但是：

Internet Explorer 8 及更早IE 版本的瀏覽器不支援以上的方式。

我們可以使用Sjoerd Visscher 建立的"HTML5 Enabling JavaScript", "?shiv" 來解決該問題:

以上程式碼是註釋，作用是在IE 瀏覽器的版本小於IE9 時將讀取html5.js 文件，並解析它。

注意：國內(nèi)用戶請使用百度靜態(tài)資源庫（Google 資源庫在國內(nèi)不穩(wěn)定）：

針對IE瀏覽器html5shiv 是比較好的解決方案。 html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節(jié)點包裹子元素，並且不能應(yīng)用CSS樣式。

完美的Shiv 解決方案

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
    <meta charset="utf-8">
    <title>為 HTML 添加新元素</title>
    <script>document.createElement("myHero")</script>
    <style>
        myHero {
            display: block;
            background-color: #9dddd7;
            padding:40px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h1>我的第一個標(biāo)題</h1>
<p>我的第一個段落。</p>
<myHero>我的第一個新元素</myHero>
</body>
</html>

html5shiv.js 引用程式碼必須放在<head> 元素中，因為IE瀏覽器在解析HTML5 新元素時需要先載入該檔案。

繼續(xù)學(xué)習(xí)

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> <meta charset="utf-8"> <title>為 HTML 添加新元素</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #9dddd7; padding:40px; font-size: 30px; } </style> </head> <body> <h1>我的第一個標(biāo)題</h1> <p>我的第一個段落。</p> <myHero>我的第一個新元素</myHero> </body> </html>

提交重置程式碼

自動運行