飞鱼辅助

書名： HTML5與CSS3權威指南（第2版·上冊）
作者名：陸凌牛
本章字數： 238字
更新時間： 2018-12-31 22:03:23

2.1 語法的改變

2.1.1 HTML 5的語法變化

與HTML 4相比，HTML 5在語法上發生了很大的變化。可能有很多人會有疑問，“之前的HTML已經相當普及了！”，“如果改變基礎語法，會產生什么影響？”等。

但是，HTML 5中的語法變化，與其他開發語言中的語法變化在根本意義上有所不同。它的變化，正是因為在HTML 5之前幾乎沒有符合標準規范的Web瀏覽器！

HTML的語法是在SGML（Standard Generalized Markup Language）語言的基礎上建立起來的。但是SGML語法非常復雜，要開發能夠解析SGML語法的程序也很不容易，所以很多瀏覽器都不包含SGML的分析器。因此，雖然HTML基本上遵從SGML的語法，但是對于HTML的執行在各瀏覽器之間并沒有一個統一的標準。

在這種情況下，各瀏覽器之間的互兼容性和互操作性在很大程度上取決于網站或網絡應用程序的開發者們在開發上所做的共同努力，而瀏覽器本身始終是存在缺陷的。

如上所述，在HTML 5中提高Web瀏覽器之間的兼容性是它的一個很大的目標，為了確保兼容性，就要有一個統一的標準。因此，在HTML 5中，就圍繞著這個Web標準，重新定義了一套在現有的HTML的基礎上修改而來的語法，使它運行在各瀏覽器時各瀏覽器都能夠符合這個通用標準。

因為關于HTML 5語法解析的算法也都提供了詳細的記載，所以各Web瀏覽器的供應商們可以把HTML 5分析器集中封裝在自己的瀏覽器中。最新的Firefox（默認為4.0以后的版本）與WebKit瀏覽器引擎中都迅速地封裝了供HTML 5使用的分析器，IE（Internet Explorer）與Opera也在努力加快對于HTML 5的支持—瀏覽器兼容性的提高指日可待。

接下來，讓我們具體看一下在HTML 5中，到底對語法進行了哪些改變。

2.1.2 HTML 5中的標記方法

首先，讓我們來看一下在HTML 5中的標記方法。

1.內容類型（ContentType）

首先，HTML 5的文件擴展符與內容類型保持不變。也就是說，擴展符仍然為“.html”或“.htm”，內容類型（ContentType）仍然為“text/html”。

2.DOCTYPE聲明

DOCTYPE聲明是HTML文件中必不可少的，它位于文件第一行。在HTML 4中，它的聲明方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在HTML 5中，刻意不使用版本聲明，一份文檔將會適用于所有版本的HTML。HTML 5中的DOCTYPE聲明方法（不區分大小寫）如下：

<!DOCTYPE html>

另外，當使用工具時，也可以在DOCTYPE聲明方式中加入SYSTEM識別符，聲明方法如下面的代碼所示：

<!DOCTYPE HTML SYSTEM "about:legacy-compat">

在HTML 5中像這樣的DOCTYPE聲明方式是允許的（不區分大小寫,引號不區分是單引號還是雙引號）。

3.指定字符編碼

在HTML 4中，使用meta元素的形式指定文件中的字符編碼，如下所示：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

在HTML 5中，可以使用對<meta>元素直接追加charset屬性的方式來指定字符編碼，如下所示：

<meta charset="UTF-8">

兩種方法都有效，可以繼續使用前面一種方式（通過content元素的屬性來指定），但是不能同時混合使用兩種方式。在以前的網站代碼中可能會存在下面代碼所示的標記方式，但在HTML 5中，這種字符編碼方式將被認為是錯誤的，這一點請注意：

<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">

從HTML 5開始，對于文件的字符編碼推薦使用UTF-8。

2.1.3 HTML 5確保了與之前HTML版本的兼容性

HTML 5的語法是為了保證與之前的HTML語法達到最大程度的兼容而設計的。例如，符合“沒有的結束標記”的HTML代碼隨處可見，HTML 5中并沒有把這種情況作為錯誤來處理，而是允許存在這種情況，但明確地規定了這種情況應該怎么處理。

那么，針對這個問題，讓我們從元素標記的省略、具有boolean值的屬性、引號的省略這幾方面來詳細看一下在HTML 5中是如何確保與之前版本的HTML達到兼容的。

1.可以省略標記的元素

在HTML 5中，元素的標記可以省略。具體來說，元素的標記分為“不允許寫結束標記”、“可以省略結束標記”和“開始標記和結束標記全部可以省略”三種類型。讓我們來針對這三類情況列舉一個元素清單，其中包括HTML 5中的新元素（關于這些新元素，2.2節將進行介紹）。

不允許寫結束標記的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
可以省略結束標記的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
可以省略全部標記的元素有：html、head、body、colgroup、tbody。

說明：“不允許寫結束標記的元素”是指，不允許使用開始標記與結束標記將元素括起來的形式，只允許使用“<元素/>”的形式進行書寫。例如“ ...”的書寫方式是錯誤的，正確的書寫方式為“ ”。當然，HTML 5之前的版本中 這種寫法可以被沿用。

“可以省略全部標記的元素”是指，該元素可以完全被省略。請注意，即使標記被省略了，該元素還是以隱式的方式存在的。例如將body元素省略不寫時，但它在文檔結構中還是存在的，可以使用document.body進行訪問。

2.具有boolean值的屬性

對于具有boolean值的屬性，例如disabled與readonly等，當只寫屬性而不指定屬性值時，表示屬性值為true；如果想要將屬性值設為false,可以不使用該屬性。另外，要想將屬性值設定為true時，也可以將屬性名設定為屬性值，或將空字符串設定為屬性值。

屬性值的設定方法可以參考下面的代碼示例：

<!--只寫屬性不寫屬性值代表屬性為true-->
<input type="checkbox" checked>
<!--不寫屬性代表屬性為false-->
<input type="checkbox">
<!--屬性值=屬性名，代表屬性為true-->
<input type="checkbox" checked="checked">
<!--屬性值=空字符串，代表屬性為true-->
<input type="checkbox" checked="">

3.省略引號

大家已經知道，指定屬性值的時候，屬性值兩邊既可以用雙引號，也可以用單引號。

HTML 5在此基礎上做了一些改進，當屬性值不包括空字符串、“<”、“>”、“=”、單引號、雙引號等字符時，屬性值兩邊的引號可以省略。如下面的代碼所示：

<!-- 請注意type的屬性值兩邊的引號-->
<input type="text">
<input type='text'>
<input type=text>

2.1.4 標記示例

現在，讓我們通過前面學到的HTML 5的語法知識來看一個關于HTML 5標記的示例。

代碼清單2-1完全是用HTML 5寫成的，省略了<html>、<head>、<body>等元素。可以通過這個示例復習一下HTML 5的DOCTYPE聲明、用<meta>元素的charset屬性指定字符編碼、元素的結束標記的省略、使用<元素/>的方式來結束<meta>元素，以及 元素等本節中所介紹到的知識要點。

代碼清單2-1 HTML 5標記示例

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML 5標記示例</title>
<p>這段代碼是根據HTML 5語法
<br/>編寫出來的。

這段代碼在Firefox 4瀏覽器中的運行結果如圖2-1所示，另外，本書中如果沒有特別說明使用什么瀏覽器的時候，默認使用的都是Firefox 4瀏覽器。

圖2-1 HTML 5標記示例

官术网_书友最值得收藏!

HTML5與CSS3權威指南（第2版·上冊）