HTML5學習筆記簡明版(1):HTML5介紹與語法

HTML5介紹

HTML5是繼HTML4以後的下一代HTML標準規範,它提供了一些新的元素和屬性(例如<nav>網站導航塊和<footer>)。新型的標籤有利於搜索引擎和語義分析,同時更好地幫助小屏幕裝置和視障人士使用,除此之外,也提供了一些新的功能,比如視頻音頻用的<video><audio>,總結而言,有如下幾大特點:

  • 取消了一些HTML4裏過時的元素和屬性標記

其中包括純粹顯示效果的標記,如<font><center>,它們已經被CSS取代。HTML5 吸取了XHTML2 一些建議,包括一些用來改善文檔結構的功能,比如,新的HTML 標籤 headerfooterdialogasidefigure 等的使用,將使內容創作者更加語義地創建文檔,之前的開發者在實現這些功能時一般都是使用div

  • 內容與展示分離

b 和 i 標籤依然保留,但它們的意義和之前有所不同,這些標籤的意義只是爲了將一段文字標識出來,而不是爲了爲它們設置粗體或斜體式樣。ufontcenterstrike 這些標籤則被完全去掉了。

  • 新增加一些全新的表單輸入對象

包括日期,URL,Email 地址,其它的對象則增加了對非拉丁字符的支持。HTML5 還引入了微數據,這一使用機器可以識別的標籤標註內容的方法,使語義Web 的處理更爲簡單。總的來說,這些與結構有關的改進使內容創建者可以創建更乾淨,更容易管理的網頁,這樣的網頁對搜索引擎,對讀屏軟件等更爲友好。

  • 全新的、更合理的標籤

多媒體對象將不再全部綁定在 object 或 embed Tag 中,而是視頻有視頻的Tag,音頻有音頻的 Tag。

  • 本地存儲

這個功能將內嵌一個本地的SQL 數據庫,以加速交互式搜索,緩存以及索引功能。同時,那些離線Web 程序也將因此獲益匪淺。不需要插件的富動畫。 

  • Canvas對象

將給瀏覽器帶來直接在上面繪製矢量圖的能力,這意味着用戶可以脫離Flash 和Silverlight,直接在瀏覽器中顯示圖形或動畫。

  • 新的API擴展

HTMLDocumentHTMLElement藉口提供了新的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類型:

  1. 在傳輸級別(transport level)上,在HTTP實例的header裏設置Content-Type。
  2. 在文件的開頭設置一個Unicode的Byte Order Mark(BOM),該字符爲文件的encoding方式提供了一個簽名。
  3. 在文檔的前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一樣。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章