pg爱尔兰精灵游戏免费

書名： HTML5權(quán)威指南
作者名： (美)Adam Freeman
本章字?jǐn)?shù)： 2468字
更新時(shí)間： 2020-01-10 15:29:12

3.3 創(chuàng)建HTML文檔

元素和屬性不會(huì)孤立存在，它們是用來標(biāo)記HTML文檔內(nèi)容的。要?jiǎng)?chuàng)建一個(gè)HTML文檔，最簡(jiǎn)單的方法是創(chuàng)建一個(gè)文本文件，并將其文件擴(kuò)展名設(shè)置成為這類文件規(guī)定的.html。這個(gè)文件可以直接從磁盤載入瀏覽器，也可以從Web服務(wù)器載入（在本書中，我一般都要使用Web服務(wù)器。我的Web服務(wù)器名為titan，這個(gè)名字經(jīng)常出現(xiàn)在書中屏幕截圖的瀏覽器窗口中）。

瀏覽器和用戶代理

在本章（及本書大部分章節(jié)）中，HTML文檔都是針對(duì)瀏覽器創(chuàng)建的。這樣看待HTML文檔較為省事，而且HTML文檔最常見的使用方式也是用瀏覽器查看。但是還有其他情況需要考慮。用于處理HTML文檔的各種軟件有一個(gè)共同的名稱叫做用戶代理（user agent）。瀏覽器是最流行的用戶代理，但不是唯一的一種。

非瀏覽器類用戶代理現(xiàn)在還很少，以后可能會(huì)多起來。在HTML5中更加強(qiáng)調(diào)將內(nèi)容與呈現(xiàn)形式分開，正是因?yàn)檎J(rèn)識(shí)到HTML內(nèi)容并不總是會(huì)被顯示給用戶看。本書盡管說的還是瀏覽器（因?yàn)檫@是最重要、最強(qiáng)勢(shì)的一類用戶代理），但是最好還是記住：你的HTML文檔有可能會(huì)給別的一些軟件處理。

HTML文檔具有特定的結(jié)構(gòu)，最起碼要有一些關(guān)鍵性的元素。本書絕大多數(shù)示例均為完整的HTML文檔，這樣讀者很快就能輕松看出元素的應(yīng)用方式和效果。為了給你一個(gè)初步印象，在此我要先帶你看一個(gè)基本的HTML文檔。代碼清單中所有的HTML元素都會(huì)在后面各章得到詳細(xì)講解，本章提供了它們的相關(guān)參照信息。

HTML與XHTML的對(duì)比

盡管本書講的是HTML，但我要是不提一下XHTML（在HTML前面加了一個(gè)X）的話，那就太不負(fù)責(zé)了。符合HTML語(yǔ)法的文檔不一定符合XML語(yǔ)法，因此用標(biāo)準(zhǔn)的XML解析程序處理HTML文檔可能會(huì)遇到麻煩。

為了解決這個(gè)問題，可以使用XHTML，它是HTML的XML序列化形式（這就是說，以符合XML規(guī)范的方式來表達(dá)文檔的內(nèi)容以及HTML元素和屬性，以便XML解析程序處理）。此外，也可以創(chuàng)建既是有效HTML文檔也是有效XML文檔的多語(yǔ)文檔（polyglot document），不過這要求使用HTML語(yǔ)法的一個(gè)子集。本書不講XHTML，想了解更多XHTML方面的信息的讀者可以參閱這個(gè)網(wǎng)址：http://wiki.whatwg.org/wiki/HTML_vs.XHTML。

3.3.1 外層結(jié)構(gòu)

HTML文檔的外層結(jié)構(gòu)由兩個(gè)元素確定：DOCTYPE和html，如代碼清單3-11所示。

代碼清單3-11 HTML文檔的外層結(jié)構(gòu)

        <! DOCTYPE HTML>
        <html>
            <! -- elements go here -->
        </html>

上例中的DOCTYPE元素讓瀏覽器明白其處理的是HTML文檔。這是用布爾屬性HTML表達(dá)的：

        <! DOCTYPEHTML>

緊跟著DOCTYPE元素的是html元素的開始標(biāo)簽。它告訴瀏覽器：自此直到html結(jié)束標(biāo)簽，所有元素內(nèi)容都應(yīng)作為HTML處理。用了DOCTYPE元素之后又接著使用html元素看起來可能有點(diǎn)奇怪，其實(shí)早在HTML標(biāo)準(zhǔn)小荷才露尖尖角的時(shí)候，具有同等地位的還有一些別的標(biāo)記語(yǔ)言，文檔中可能會(huì)混合使用多種標(biāo)記語(yǔ)言。

如今HTML已成為占絕對(duì)優(yōu)勢(shì)的標(biāo)記語(yǔ)言，即使在文檔中省略DOCTYPE和html元素，絕大多數(shù)瀏覽器仍會(huì)假定自己處理的是HTML文檔。不過這并不意味著不必再用這兩個(gè)元素。這是因?yàn)樗鼈冇兄匾挠猛荆乙蕾嚍g覽器的默認(rèn)行為模式就像輕信陌生人一樣不靠譜——多數(shù)情況下事情很順利，可是冷不防就會(huì)出大漏子。關(guān)于DOCTYPE和html元素詳見第7章。

3.3.2 元數(shù)據(jù)

HTML文檔的元數(shù)據(jù)部分可以用來向?yàn)g覽器提供文檔的一些信息。元數(shù)據(jù)包含在head元素內(nèi)部，如代碼清單3-12所示。

代碼清單3-12 在HTML文檔中添加head元素

        <! DOCTYPE HTML>
        <html>
<head>
<!-- metadata goes here -->
<title>Example</title>
</head>

</html>

這個(gè)清單中的元數(shù)據(jù)少到不能再少，只有title元素一項(xiàng)。按說HTML文檔中都應(yīng)該包含title元素，但是沒有的話瀏覽器通常也不會(huì)在意。大多數(shù)瀏覽器把title元素的內(nèi)容顯示在其窗口的標(biāo)題欄上或用來顯示文檔的標(biāo)簽頁(yè) IE中稱為選項(xiàng)卡。——譯者注的標(biāo)簽位置上。第7章會(huì)詳細(xì)說明head元素和title元素，以及可以放在head元素中的所有其他元數(shù)據(jù)元素。

提示

代碼清單3-12也演示了HTML文檔中注釋的寫法。注釋以標(biāo)簽<! --開頭，以-->結(jié)尾。瀏覽器會(huì)忽略這兩個(gè)標(biāo)簽之間的一切內(nèi)容。

除了可包含用于說明HTML文檔的元素，head元素還能用來規(guī)定文檔與外部資源（如CSS樣式表）的關(guān)系，定義內(nèi)嵌CSS樣式，放置和載入腳本程序。第7章將會(huì)示范所有這些用途。

3.3.3 內(nèi)容

文檔的第三部分是文檔內(nèi)容，這也是最后一個(gè)部分，放在body元素之中，如代碼清單3-13所示。

代碼清單3-13 在HTML文檔中添加body元素

        <! DOCTYPE HTML>
        <html>
            <head>
              <! -- metadata goes here -->
              <title>Example</title>
            </head>
<body>
<!-- content and elements go here -->
I like <code>apples</code> and oranges.
</body>
          </html>

body元素告訴瀏覽器該向用戶顯示文檔的哪個(gè)部分。自然，本書大部分篇幅都花在那些需要放在body元素之中的東西上面。把body元素加進(jìn)來后，HTML文檔的基本框架業(yè)已成型，本書大部分例子都要用到這個(gè)框架。

3.3.4 父元素、子元素、后代元素和兄弟元素

HTML文檔中元素之間有明確的關(guān)系。包含另一個(gè)元素的元素是被包含元素的父元素。在代碼清單3-13中，body元素是code元素的父元素，這是因?yàn)閏ode元素位于body元素的開始標(biāo)簽和結(jié)束標(biāo)簽之間。反過來說，code元素是body元素的子元素。一個(gè)元素可以擁有多個(gè)子元素，但只能有一個(gè)父元素。

包含在其他元素中的元素也可以包含別的元素。從代碼清單3-13中也可以看到：html元素包含著body元素，而后者又包含著code元素。body元素和code元素都是html元素的后代元素，但是二者中只有body元素才是html元素的子元素。子元素是關(guān)系最近的后代元素。具有同一個(gè)父元素的幾個(gè)元素互為兄弟元素。在代碼清單3-13中，head元素和body元素就是兄弟，這是因?yàn)樗鼈兌际莌tml元素的子元素。

元素間關(guān)系的重要性在HTML中隨處可見。一個(gè)元素能以什么樣的元素為父元素或子元素是有限制的，這些限制通過元素類型表現(xiàn)出來（下一節(jié)將討論這個(gè)問題）。即將在第4章講述的CSS中元素間的關(guān)系也很重要，圈定應(yīng)用樣式的元素的方法之一就要借助元素的父子關(guān)系。最后，本書第四部分中介紹的文檔對(duì)象模型（DOM）也會(huì)涉及通過搜索文檔樹查找文檔中某個(gè)元素，而文檔樹正是元素之間關(guān)系的一種表述。在HTML世界里，從后代中辨認(rèn)兄弟是一種重要能力。

3.3.5 了解元素類型

HTML5規(guī)范將元素分為三大類：元數(shù)據(jù)元素（metadata element）、流元素（flow element）和短語(yǔ)元素（phrasing element）。

元數(shù)據(jù)元素用來構(gòu)建HTML文檔的基本結(jié)構(gòu)，以及就如何處理文檔向?yàn)g覽器提供信息和指示。其說明見第7章。

另外兩種元素略有不同，它們的用途是確定一個(gè)元素合法的父元素和子元素范圍。短語(yǔ)元素是HTML的基本成分。第8章會(huì)介紹最常用的短語(yǔ)元素。流元素是短語(yǔ)元素的超集。這就是說，所有短語(yǔ)元素都是流元素，但并非所有流元素都是短語(yǔ)元素。

有些元素?zé)o法歸入上述三種類型，這些元素要么沒有什么特別的含義，要么只能用在一些非常有限的情況下。li元素就是受限元素的一個(gè)例子。它表示列表項(xiàng)，只能有三種父元素：ol（表示有序列表）、ul（表示無序列表）和menu（表示菜單）。該元素詳見第9章。從第6章開始的所有元素說明都包含了元素所屬類型的信息。

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