《HTML5與CSS3權威指南（第3版·上冊）》——2.1　語法的改變

華章計算機發表於2017-05-02
HTMLCSSS3

本節書摘來自華章出版社《HTML 5與CSS 3 權威指南（第3版·上冊）》一 書中的第2章，第2.1節，作者：陸凌牛，更多章節內容可以訪問雲棲社群“華章計算機”公眾號檢視。

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的時候能夠符合一個通用標準。
因為關於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識別符，宣告方法如下：

`
在HTML 5中像這樣的DOCTYPE宣告方式是允許的（不區分大小寫，引號不區分是單引號還是雙引號）。
3.?指定字元編碼
在HTML 4中，使用meta元素的形式指定檔案中的字元編碼，如下所示：

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

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

content=”text/html;charset=UTF-8″>`
從HTML 5開始，對於檔案的字元編碼推薦使用UTF-8。

2.1.3　HTML 5確保的相容性

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在此基礎上做了一些改進，當屬性值不包括空字串、“<”、“>”、“=”、單引號、雙引號等字元時，屬性值兩邊的引號可以省略。如下面的程式碼所示：

`

2.1.4　標記示例

現在，我們通過前面學到的HTML 5的語法知識來看一個關於HTML 5標記的示例。
程式碼清單2-1完全是用HTML 5寫成的。其中省略了、

、等元素。可以通過這個示例複習一下HTML 5的DOCTYPE宣告、用元素的charset屬性指定字元編碼、

元素的結束標記的省略、使用<元素/>的方式來結束元素，以及
元素等本節中所介紹的知識要點。
程式碼清單2-1　HTML 5標記示例

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML 5標記示例</title>
<p>這段程式碼是根據HTML 5語法
<br/>編寫出來的。```
這段程式碼在Firefox 4瀏覽器中的執行結果如圖2-1所示，另外，本書中如果沒有特別說明使用什麼瀏覽器，則使用的都是Firefox 4瀏覽器。

<div style="text-align: center"><img src="https://yqfile.alicdn.com/41bc87269180ada13caa86ba0af8ff0be1e6dbcd.png" width="" height="">


相關文章