游戏大全免费安装

書(shū)名： HTML5與CSS3權(quán)威指南（第2版·上冊(cè)）
作者名：陸凌牛
本章字?jǐn)?shù)： 6字
更新時(shí)間： 2018-12-31 22:03:22

2.1 語(yǔ)法的改變

2.1.1 HTML 5的語(yǔ)法變化

與HTML 4相比，HTML 5在語(yǔ)法上發(fā)生了很大的變化。可能有很多人會(huì)有疑問(wèn)，“之前的HTML已經(jīng)相當(dāng)普及了！”，“如果改變基礎(chǔ)語(yǔ)法，會(huì)產(chǎn)生什么影響？”等。

但是，HTML 5中的語(yǔ)法變化，與其他開(kāi)發(fā)語(yǔ)言中的語(yǔ)法變化在根本意義上有所不同。它的變化，正是因?yàn)樵贖TML 5之前幾乎沒(méi)有符合標(biāo)準(zhǔn)規(guī)范的Web瀏覽器！

HTML的語(yǔ)法是在SGML（Standard Generalized Markup Language）語(yǔ)言的基礎(chǔ)上建立起來(lái)的。但是SGML語(yǔ)法非常復(fù)雜，要開(kāi)發(fā)能夠解析SGML語(yǔ)法的程序也很不容易，所以很多瀏覽器都不包含SGML的分析器。因此，雖然HTML基本上遵從SGML的語(yǔ)法，但是對(duì)于HTML的執(zhí)行在各瀏覽器之間并沒(méi)有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)。

在這種情況下，各瀏覽器之間的互兼容性和互操作性在很大程度上取決于網(wǎng)站或網(wǎng)絡(luò)應(yīng)用程序的開(kāi)發(fā)者們?cè)陂_(kāi)發(fā)上所做的共同努力，而瀏覽器本身始終是存在缺陷的。

如上所述，在HTML 5中提高Web瀏覽器之間的兼容性是它的一個(gè)很大的目標(biāo)，為了確保兼容性，就要有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)。因此，在HTML 5中，就圍繞著這個(gè)Web標(biāo)準(zhǔn)，重新定義了一套在現(xiàn)有的HTML的基礎(chǔ)上修改而來(lái)的語(yǔ)法，使它運(yùn)行在各瀏覽器時(shí)各瀏覽器都能夠符合這個(gè)通用標(biāo)準(zhǔn)。

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

接下來(lái)，讓我們具體看一下在HTML 5中，到底對(duì)語(yǔ)法進(jìn)行了哪些改變。

2.1.2 HTML 5中的標(biāo)記方法

首先，讓我們來(lái)看一下在HTML 5中的標(biāo)記方法。

1.內(nèi)容類型（ContentType）

首先，HTML 5的文件擴(kuò)展符與內(nèi)容類型保持不變。也就是說(shuō)，擴(kuò)展符仍然為“.html”或“.htm”，內(nèi)容類型（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中，刻意不使用版本聲明，一份文檔將會(huì)適用于所有版本的HTML。HTML 5中的DOCTYPE聲明方法（不區(qū)分大小寫(xiě)）如下：

<!DOCTYPE html>

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

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

在HTML 5中像這樣的DOCTYPE聲明方式是允許的（不區(qū)分大小寫(xiě),引號(hào)不區(qū)分是單引號(hào)還是雙引號(hào)）。

3.指定字符編碼

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

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

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

<meta charset="UTF-8">

兩種方法都有效，可以繼續(xù)使用前面一種方式（通過(guò)content元素的屬性來(lái)指定），但是不能同時(shí)混合使用兩種方式。在以前的網(wǎng)站代碼中可能會(huì)存在下面代碼所示的標(biāo)記方式，但在HTML 5中，這種字符編碼方式將被認(rèn)為是錯(cuò)誤的，這一點(diǎn)請(qǐng)注意：

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

從HTML 5開(kāi)始，對(duì)于文件的字符編碼推薦使用UTF-8。

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

HTML 5的語(yǔ)法是為了保證與之前的HTML語(yǔ)法達(dá)到最大程度的兼容而設(shè)計(jì)的。例如，符合“沒(méi)有的結(jié)束標(biāo)記”的HTML代碼隨處可見(jiàn)，HTML 5中并沒(méi)有把這種情況作為錯(cuò)誤來(lái)處理，而是允許存在這種情況，但明確地規(guī)定了這種情況應(yīng)該怎么處理。

那么，針對(duì)這個(gè)問(wèn)題，讓我們從元素標(biāo)記的省略、具有boolean值的屬性、引號(hào)的省略這幾方面來(lái)詳細(xì)看一下在HTML 5中是如何確保與之前版本的HTML達(dá)到兼容的。

1.可以省略標(biāo)記的元素

在HTML 5中，元素的標(biāo)記可以省略。具體來(lái)說(shuō)，元素的標(biāo)記分為“不允許寫(xiě)結(jié)束標(biāo)記”、“可以省略結(jié)束標(biāo)記”和“開(kāi)始標(biāo)記和結(jié)束標(biāo)記全部可以省略”三種類型。讓我們來(lái)針對(duì)這三類情況列舉一個(gè)元素清單，其中包括HTML 5中的新元素（關(guān)于這些新元素，2.2節(jié)將進(jìn)行介紹）。

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

說(shuō)明：“不允許寫(xiě)結(jié)束標(biāo)記的元素”是指，不允許使用開(kāi)始標(biāo)記與結(jié)束標(biāo)記將元素括起來(lái)的形式，只允許使用“<元素/>”的形式進(jìn)行書(shū)寫(xiě)。例如“ ...”的書(shū)寫(xiě)方式是錯(cuò)誤的，正確的書(shū)寫(xiě)方式為“ ”。當(dāng)然，HTML 5之前的版本中 這種寫(xiě)法可以被沿用。

“可以省略全部標(biāo)記的元素”是指，該元素可以完全被省略。請(qǐng)注意，即使標(biāo)記被省略了，該元素還是以隱式的方式存在的。例如將body元素省略不寫(xiě)時(shí)，但它在文檔結(jié)構(gòu)中還是存在的，可以使用document.body進(jìn)行訪問(wèn)。

2.具有boolean值的屬性

對(duì)于具有boolean值的屬性，例如disabled與readonly等，當(dāng)只寫(xiě)屬性而不指定屬性值時(shí)，表示屬性值為true；如果想要將屬性值設(shè)為false,可以不使用該屬性。另外，要想將屬性值設(shè)定為true時(shí)，也可以將屬性名設(shè)定為屬性值，或?qū)⒖兆址O(shè)定為屬性值。

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

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

3.省略引號(hào)

大家已經(jīng)知道，指定屬性值的時(shí)候，屬性值兩邊既可以用雙引號(hào)，也可以用單引號(hào)。

HTML 5在此基礎(chǔ)上做了一些改進(jìn)，當(dāng)屬性值不包括空字符串、“<”、“>”、“=”、單引號(hào)、雙引號(hào)等字符時(shí)，屬性值兩邊的引號(hào)可以省略。如下面的代碼所示：

<!-- 請(qǐng)注意type的屬性值兩邊的引號(hào)-->
<input type="text">
<input type='text'>
<input type=text>

2.1.4 標(biāo)記示例

現(xiàn)在，讓我們通過(guò)前面學(xué)到的HTML 5的語(yǔ)法知識(shí)來(lái)看一個(gè)關(guān)于HTML 5標(biāo)記的示例。

代碼清單2-1完全是用HTML 5寫(xiě)成的，省略了<html>、<head>、<body>等元素。可以通過(guò)這個(gè)示例復(fù)習(xí)一下HTML 5的DOCTYPE聲明、用<meta>元素的charset屬性指定字符編碼、元素的結(jié)束標(biāo)記的省略、使用<元素/>的方式來(lái)結(jié)束<meta>元素，以及 元素等本節(jié)中所介紹到的知識(shí)要點(diǎn)。

代碼清單2-1 HTML 5標(biāo)記示例

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML 5標(biāo)記示例</title>
<p>這段代碼是根據(jù)HTML 5語(yǔ)法
<br/>編寫(xiě)出來(lái)的。

這段代碼在Firefox 4瀏覽器中的運(yùn)行結(jié)果如圖2-1所示，另外，本書(shū)中如果沒(méi)有特別說(shuō)明使用什么瀏覽器的時(shí)候，默認(rèn)使用的都是Firefox 4瀏覽器。

圖2-1 HTML 5標(biāo)記示例

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

HTML5與CSS3權(quán)威指南（第2版·上冊(cè)）