萬盛學電腦網 >> 網頁制作 >> xml編程 >> HTML5學習筆記簡明版（1）：HTML5介紹與語法
HTML5學習筆記簡明版（1）：HTML5介紹與語法
HTML5介紹
HTML5是繼HTML4以後的下一代HTML標准規范，它提供了一些新的元素和屬性（例如<nav>網站導航塊和<footer>）。新型的標簽有利於搜索引擎和語義分析，同時更好地幫助小屏幕裝置和視障人士使用，除此之外，也提供了一些新的功能，比如視頻音頻用的<video>和<audio>，總結而言，有如下幾大特點：
- 取消了一些HTML4裡過時的元素和屬性標記
其中包括純粹顯示效果的標記，如<font>和<center>，它們已經被CSS取代。HTML5 吸取了XHTML2 一些建議，包括一些用來改善文檔結構的功能，比如，新的HTML 標簽 header, footer, dialog, aside, figure 等的使用，將使內容創作者更加語義地創建文檔，之前的開發者在實現這些功能時一般都是使用div。
- 內容與展示分離
b 和 i 標簽依然保留，但它們的意義和之前有所不同，這些標簽的意義只是為了將一段文字標識出來，而不是為了為它們設置粗體或斜體式樣。u，font，center，strike 這些標簽則被完全去掉了。
- 新增加一些全新的表單輸入對象
包括日期，URL，Email 地址，其它的對象則增加了對非拉丁字符的支持。HTML5 還引入了微數據，這一使用機器可以識別的標簽標注內容的方法，使語義Web 的處理更為簡單。總的來說，這些與結構有關的改進使內容創建者可以創建更干淨，更容易管理的網頁，這樣的網頁對搜索引擎，對讀屏軟件等更為友好。
- 全新的、更合理的標簽
多媒體對象將不再全部綁定在 object 或 embed Tag 中，而是視頻有視頻的Tag，音頻有音頻的 Tag。
- 本地存儲
這個功能將內嵌一個本地的SQL 數據庫，以加速交互式搜索，緩存以及索引功能。同時，那些離線Web 程序也將因此獲益匪淺。不需要插件的富動畫。
- Canvas對象
將給浏覽器帶來直接在上面繪制矢量圖的能力，這意味著用戶可以脫離Flash 和Silverlight，直接在浏覽器中顯示圖形或動畫。
- 新的API擴展
為HTMLDocument和HTMLElement借口提供了新的API擴展。
- HTML5取代Flash和Silverlight
語法(Syntax)
1 文檔媒體類型
HTML5定義的HTML語法大部分都兼容於HTML4和XHTML1，但是也有一部分不兼容。大多數的HTML文檔都是保存成text/html媒體類型。
HTML5為HTML語法定義了詳細的解析規則（包括錯誤處理），用戶必須遵守這些規則將它保存成text/html媒體類型。如下是一個符合HTML語法規范的例子：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
HTML5為HTML語法也定義了一個text/html-sandboxed媒體類型，以便可以host不信任的內容。
其它能夠用在HTML5的語法是XML，它兼容於XHTML1。用XML語法的話需要將文檔保存成XML媒體類型，並且根據XML的規范需要設置命名空間（namespace）為http://www.w3.org/1999/xhtml。
下面的例子文檔符合HTML5裡的XML語法規范，需要注意的是XML文檔必須保存成XML媒體類型的，例如application/xhtml+xml或者application/xml。
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
2 Character Encoding
HTML5的HTML語法裡，有三種形式可以聲明字符串的encoding類型：
- 在傳輸級別（transport level）上，在HTTP實例的header裡設置Content-Type。
- 在文件的開頭設置一個Unicode的Byte Order Mark(BOM)，該字符為文件的encoding方式提供了一個簽名。
- 在文檔的前1024個byte之前的內容裡，使用帶有charset屬性的meta元素來聲明encoding方式。例如：<meta charset="UTF-8">表明該文檔是UTF-8格式的。它是替換原有的<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">語法聲明，盡管原有的語法依然可用，但在HTML5裡不推薦使用。
對於HTML5裡的XML語法，依然和以前的XML語法聲明式一樣的。
3 DOCTYPE
HTML5的HTML語法要求文檔必須聲明DOCTYPE以確保浏覽器可以在標准模式下展示頁面。這個DOCTYPE沒有其它的目的，並且在XML裡是可選項，因為XML媒體格式的文檔一直就是在標准模式下處理的。
DOCTYPE的聲明方式是<!DOCTYPE html>，不區分大小寫。HTML的早期版本聲明的DOCTYPE需要很長是因為HTML語言是建立在SGML的基礎上，所以需要關聯引用一個相對應的DTD。HTML5和之前的版本不一樣了，僅僅需要聲明DOCTYPE就可以告訴文檔啟用的是HTML5語法標准了，浏覽器會為<!DOCTYPE html>做剩余的工作的。
4 MathML和SVG
HTML5的HTML語法允許在文檔裡使用MathML（數學標記語言）和SVG（可伸縮矢量圖）元素。例如，一個非常簡單的HTML頁面包含一個svg元素畫出的圓：
<!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
更多復雜的組合標記也是支持的，比如使用svg的foreignObject元素你可以嵌套MathML, HTML，或者自身嵌套。
5 其它
HTML5已經原生支持IRI了，盡管這些IRI只能在UTF-8和UTF-16的文檔裡使用。
lang屬性如果設置的不合法，將會更新為空字符串，以告訴浏覽器是一個未知的語言，作用和XML裡的xml:lang一樣。
