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

來源:互聯網
上載者:User

標籤:add   更新   數學   使用   dialog   imp   margin   檔案的   取消   

HTML5介紹

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

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

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

  • 內容與展示分離

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

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

包含日期,URL,Email 地址。其他的對象則添加了對非拉丁字元的支援。

HTML5 還引入了微資料。這一使用機器能夠識別的標籤標註內容的方法。使語義Web 的處理更為簡單。總的來說。這些與結構有關的改進使內容建立者能夠建立更乾淨,更easy管理的網頁,這種網頁對搜尋引擎。對讀屏軟體等更為友好。

  • 全新的、更合理的標籤

多媒體對象將不再所有綁定在 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(可伸縮向量圖)元素。比如。一個很easy的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一樣。

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.