HTML5是下一代的HTML炭玫。
什么是HTML5
HTML5將成為HTML脑又、XHTML以及HTML DOM的新標(biāo)準(zhǔn)叉趣。
HTML的上一個(gè)版本誕生于1999年泞边。自從那以后，Web世界已經(jīng)經(jīng)歷了巨變疗杉。HTML5仍處于完善之中阵谚。然而，大部分現(xiàn)代瀏覽器已經(jīng)支持HTML5特性乡数。
HTML5是如何起步的?
HTML5是W3C與WHATWG合作的結(jié)果
W3C是指World Wide Web Consortium椭蹄，萬維網(wǎng)聯(lián)盟
WHATWG是指 Web Hypertext Application Technology Working Group。
WHATWG致力于web表單和應(yīng)用程序净赴，而W3C專注于XHTML2.0.在2006年，雙方?jīng)Q定進(jìn)行合作罩润，來創(chuàng)建一個(gè)新版本的HTML玖翅。
HTML5開發(fā)建立的一些規(guī)則是：
- 新特性應(yīng)該基于HTML、CSS、DOM以及JavaScript
- 減少對外部插件的需求（比如Flash）
- 更優(yōu)秀的錯(cuò)誤處理
- HTML5應(yīng)該獨(dú)立于設(shè)備
- 開發(fā)進(jìn)程應(yīng)對公眾透明
HTML5新特性
- 用于會(huì)話的Canvas元素
- 用于媒介回放的video和audio元素
- 對本地離線存儲(chǔ)的更好的支持
- 地理定位金度、套接字应媚、Web工作線程
- 新的特殊內(nèi)容元素，比如article猜极、footer中姜、header、nav跟伏、section
- 新的表單控件丢胚，比如calender、date受扳、time携龟、email、URL勘高、search
HTML5示例
文件后綴為：.html
<!DOCTYPE HTML>
<html>
<head>
<title>This is Shenzhen</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World!</h1>
<p>細(xì)看來峡蟋，不是楊花，點(diǎn)點(diǎn)是調(diào)式淚华望。</p>
</body>
</html>
- <html>標(biāo)簽用于描述網(wǎng)頁
- <body>表示可見的頁面內(nèi)容
- < h1 >文本顯示為標(biāo)題
- < p >文本顯示為段落
HTML5工作流程
- 瀏覽器加載一個(gè)文檔蕊蝗，其中包括用HTML寫的標(biāo)記和用CSS寫的樣式。
- 瀏覽器加載頁面時(shí)赖舟，會(huì)為你的文檔創(chuàng)建一個(gè)內(nèi)部模型蓬戚，其中包含HTML標(biāo)記的所有元素。這個(gè)模型就是文檔對象模型（Document Object Model）建蹄，簡稱為DOM碌更。
- 瀏覽器加載頁面時(shí)，還會(huì)加載JavaScript代碼洞慎，通常是頁面加載之后就開始執(zhí)行這些代碼痛单。
- 通過這些API，你就可以訪問音頻和視頻劲腿、使用畫布完成2D繪圖旭绒、訪問本地存儲(chǔ)，還可以使用構(gòu)建應(yīng)用所需的很多其他優(yōu)秀技術(shù)焦人。要使用所有這些API挥吵，需要用到JavaScript。
主要的JavaScript API有：套接字花椭、畫布忽匈、離線緩存、Web工作線程矿辽、視頻丹允、本地存儲(chǔ)郭厌、音頻、表單雕蔽、拖放折柠、地理定位。
JavaScript
JavaScript為你的Web應(yīng)用打開了一個(gè)新的世界批狐，提供類豐富的描述和功能下面來看看利用JavaScript和HTML5可以做的的一些事情：
- 直接在頁面上創(chuàng)建一個(gè)可繪制的2D表面扇售，根本無需插件
- 使頁面掌握位置信息，知道你的用戶所在的位置
- 使用Web工作線程可以 提高JavaScript代碼的效率嚣艇，完成一些復(fù)雜的計(jì)算
- 使用瀏覽器存儲(chǔ)在本地緩存數(shù)據(jù)承冰，提高移動(dòng)應(yīng)用的速度
- 不需要特使插件來播放視頻
...
...
...
當(dāng)我們談?wù)揌TML5時(shí)，我們在談?wù)撌裁?/h2>
非官方說法： 標(biāo)記 + JavaScript + CSS = HTML5
大多數(shù)人談?wù)揌TML5的種種承諾時(shí)髓废，實(shí)際上就是指所有這些技術(shù)的結(jié)合巷懈。也就是說，我們會(huì)有標(biāo)記來搭建頁面的核心結(jié)構(gòu)慌洪，用JavaScript和所有相關(guān)API增加行為和新功能顶燕，另外用CSS為頁面增加樣式，它們結(jié)合在一起冈爹，這些就是我們用來構(gòu)建未來Web應(yīng)用的技術(shù)涌攻。
JavaScript和HTML示例
<!DOCTYPE HTML>
<html>
<head>
<title>My First JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<script>
var drink = "Coca"
var lyrics = "";
var cans = 99;
while (cans > 0) {
lyrics = lyrics + cans + " bottle of " + drink + " on the wall <br>";
if (cans > 1) {
lyrics = lyrics + (cans - 1) + " bottle of " + drink + " on the wall <br>"
} else {
lyrics = lyrics + "No more bottle of " + drink + " on the wall <br>"
}
cans = cans - 1;
}
document.write(lyrics);
</script>
</body>
</html>
瀏覽器運(yùn)行結(jié)果如下：
