哪些游戏不用登录就可以玩

書名：精通HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)（視頻教學(xué)版）（第2版）
作者名：王英英
本章字?jǐn)?shù)： 2186字
更新時(shí)間： 2019-12-09 14:23:49

1.2 HTML5的文檔結(jié)構(gòu)

HTML5文檔最基本的結(jié)構(gòu)主要包括文檔類型說明、文檔開始標(biāo)記、元信息、主體標(biāo)記和頁(yè)面注釋標(biāo)記。

1.2.1 文檔類型說明

HTML5設(shè)計(jì)準(zhǔn)則中最重要的一條是化繁為簡(jiǎn)，Web頁(yè)面的文檔類型說明（Doctype）被極大地簡(jiǎn)化了。

在HTML4或早期的版本中，創(chuàng)建HTML文檔時(shí)，文檔頭部的類型說明代碼如下：

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

上面為XHTML文檔類型說明，讀者可以看到這段代碼既麻煩又難記，HTML5對(duì)文檔類型進(jìn)行了簡(jiǎn)化，簡(jiǎn)單到15個(gè)字符就可以了，代碼如下：

     <!DOCTYPE html>

技巧提示

Doctype聲明需要出現(xiàn)在HTML文件的第一行。

1.2.2 HTML標(biāo)記

HTML標(biāo)記代表文檔的開始，由于HTML語(yǔ)言語(yǔ)法的松散特性，該標(biāo)記可以省略，但是為了使之符合Web標(biāo)準(zhǔn)和文檔的完整性，用戶要養(yǎng)成良好的編寫習(xí)慣，建議不要省略該標(biāo)記。

HTML標(biāo)記以<html>開頭，以</html>結(jié)尾，文檔的所有內(nèi)容書寫在開頭和結(jié)尾的中間部分。語(yǔ)法格式如下：

     <html>
     …
     </html>

1.2.3 頭標(biāo)記head

頭標(biāo)記head用于說明文檔頭部相關(guān)信息，一般包括標(biāo)題信息、元信息、定義CSS樣式和腳本代碼等。HTML的頭部信息是以<head>開始，以</head>結(jié)束，語(yǔ)法格式如下：

     <head>
     …
     </head>

技巧提示

<head>元素的作用范圍是整篇文檔，定義在HTML文檔頭部的內(nèi)容往往不會(huì)在網(wǎng)頁(yè)上直接顯示。

1．標(biāo)題標(biāo)記title

HTML頁(yè)面的標(biāo)題一般用來(lái)說明頁(yè)面的用途，顯示在瀏覽器的標(biāo)題欄中。在HTML文檔中，標(biāo)題信息設(shè)置在<head>與</head>之間。標(biāo)題標(biāo)記以<title>開始，以</title>結(jié)束，語(yǔ)法格式如下：

     <title>
     …
     </title>

在標(biāo)記中間的“…”就是標(biāo)題的內(nèi)容，可以幫助用戶更好地識(shí)別頁(yè)面。預(yù)覽網(wǎng)頁(yè)時(shí)，設(shè)置的標(biāo)題在瀏覽器的左上方標(biāo)題欄中顯示（如圖1-1所示）。頁(yè)面的標(biāo)題只有一個(gè)，在HTML文檔的頭部，即<head>和</head>之間。

圖1-1 標(biāo)題欄在瀏覽器中的顯示效果

2．元信息標(biāo)記meta

表1-2 <meta>標(biāo)記提供的屬性及取值

（1）字符集charset屬性

在HTML5中，有一個(gè)新的charset屬性，使字符集的定義更加容易。例如，下列代碼告訴瀏覽器，網(wǎng)頁(yè)使用“ISO-8859-1”字符集顯示，代碼如下所示。

     <meta charset="ISO-8859-1">

（2）搜索引擎的關(guān)鍵字

早期，meta keywords關(guān)鍵字對(duì)搜索引擎的排名算法起到一定的作用，是很多人進(jìn)行網(wǎng)頁(yè)優(yōu)化的基礎(chǔ)。關(guān)鍵字在瀏覽時(shí)是看不到的，使用格式如下。

     <meta name="keywords" content="關(guān)鍵字,keywords" />

說明：

● 不同的關(guān)鍵字之間，應(yīng)用半角逗號(hào)隔開（英文輸入狀態(tài)下），不要使用“空格”或“|”間隔。

● 是keywords，不是keyword。

● 關(guān)鍵字標(biāo)簽中的內(nèi)容應(yīng)該是一個(gè)個(gè)的短語(yǔ)，而不是一段話。

例如，定義針對(duì)搜索引擎的關(guān)鍵詞，代碼如下：

     <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

關(guān)鍵字標(biāo)記keywords，曾經(jīng)是搜索引擎排名中很重要的因素，但現(xiàn)在已經(jīng)被很多搜索引擎完全忽略。加上這個(gè)標(biāo)記對(duì)網(wǎng)頁(yè)的綜合表現(xiàn)沒有壞處，不過如果使用不恰當(dāng)，對(duì)網(wǎng)頁(yè)非但沒有好處，還有欺詐的嫌疑。在使用關(guān)鍵字標(biāo)記keywords時(shí)，要注意以下幾點(diǎn)：

● 關(guān)鍵字標(biāo)記中的內(nèi)容要與網(wǎng)頁(yè)核心內(nèi)容相關(guān)，確信使用的關(guān)鍵字字出現(xiàn)在網(wǎng)頁(yè)文本中。

● 使用用戶易于通過搜索引擎檢索的關(guān)鍵字，過于生僻的詞匯不太適合做meta標(biāo)記中的關(guān)鍵字。

● 不要重復(fù)使用關(guān)鍵字，否則可能會(huì)被搜索引擎懲罰。

● 一個(gè)網(wǎng)頁(yè)的關(guān)鍵字標(biāo)記里最多包含5個(gè)重要的關(guān)鍵字，不要超過5個(gè)。

● 每個(gè)網(wǎng)頁(yè)的關(guān)鍵字應(yīng)該不一樣。

技巧提示

由于設(shè)計(jì)者或SEO優(yōu)化者以前對(duì)meta keywords關(guān)鍵字的濫用，導(dǎo)致目前它在搜索引擎排名中的作用很小。

（3）頁(yè)面描述

meta description（描述元標(biāo)記）是一種HTML元標(biāo)記，用來(lái)簡(jiǎn)略描述網(wǎng)頁(yè)的主要內(nèi)容，通常被搜索引擎用于搜索結(jié)果頁(yè)上展示給最終用戶看的一段文字片段。頁(yè)面描述在網(wǎng)頁(yè)中是不顯示出來(lái)的，使用格式如下：

     <meta name="description" content="網(wǎng)頁(yè)的介紹" />

例如，定義對(duì)頁(yè)面的描述，代碼如下：

     <meta name="description" content="免費(fèi)的web技術(shù)教程。" />

（4）頁(yè)面定時(shí)跳轉(zhuǎn)

使用<meta>標(biāo)記可以使網(wǎng)頁(yè)在經(jīng)過一定時(shí)間后自動(dòng)刷新，這可通過將http-equiv屬性值設(shè)置為refresh來(lái)實(shí)現(xiàn)。content屬性值可以設(shè)置為更新時(shí)間。

在瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)看到一些歡迎信息的頁(yè)面，在經(jīng)過一段時(shí)間后，這些頁(yè)面會(huì)自動(dòng)轉(zhuǎn)到其他頁(yè)面，這就是網(wǎng)頁(yè)的跳轉(zhuǎn)。頁(yè)面定時(shí)刷新跳轉(zhuǎn)的語(yǔ)法格式如下：

     <meta http-equiv="refresh" content="秒;[url=網(wǎng)址]" />

說明：上面的“[url=網(wǎng)址]”部分是可選項(xiàng)。如果有這部分，頁(yè)面定時(shí)刷新并跳轉(zhuǎn)；如果省略該部分，頁(yè)面只定時(shí)刷新，不進(jìn)行跳轉(zhuǎn)。

例如，實(shí)現(xiàn)每5秒刷新一次頁(yè)面，將下述代碼放入head標(biāo)記部分即可。

     <meta http-equiv="refresh" content="5" />

1.2.4 網(wǎng)頁(yè)的主體標(biāo)記body

網(wǎng)頁(yè)所要顯示的內(nèi)容都放在網(wǎng)頁(yè)的主體標(biāo)記內(nèi)，是HTML文件的重點(diǎn)所在，后面章節(jié)所要介紹的HTML標(biāo)記都將放在這個(gè)標(biāo)記內(nèi)。然而它并不僅僅是一個(gè)形式上的標(biāo)記，它本身也可以控制網(wǎng)頁(yè)的背景顏色或背景圖像，這會(huì)在后面進(jìn)行介紹。主體標(biāo)記以<body>開始、以</body>結(jié)束，語(yǔ)法格式如下：

     <body>
     …
     </body>

注意，在構(gòu)建HTML結(jié)構(gòu)時(shí)，標(biāo)記不允許交叉出現(xiàn)，否則會(huì)造成錯(cuò)誤。

例如，在下列代碼中，<body>開始標(biāo)記出現(xiàn)在<head>標(biāo)記內(nèi)。

     <html>
     <head>
     <title>標(biāo)記測(cè)試</title>
     <body>
     </head>
     </body>
     </html>

代碼中的第4行<body>開始標(biāo)記和第5行的</head>結(jié)束標(biāo)記出現(xiàn)了交叉，這是錯(cuò)誤的。HTML中的所有標(biāo)記都是不允許交叉出現(xiàn)的。

1.2.5 頁(yè)面注釋標(biāo)記

注釋是在HTML代碼中插入的描述性文本，用來(lái)解釋該代碼或提示其他信息。注釋只出現(xiàn)在代碼中，瀏覽器對(duì)注釋代碼不進(jìn)行解釋，并且在瀏覽器的頁(yè)面中不顯示。在HTML源代碼中適當(dāng)?shù)夭迦胱⑨屨Z(yǔ)句是一種非常好的習(xí)慣。對(duì)于設(shè)計(jì)者日后的代碼修改、維護(hù)工作很有好處。另外，如果將代碼交給其他設(shè)計(jì)者，其他人也能很快讀懂前者所撰寫的內(nèi)容。

語(yǔ)法格式如下：

     <!--注釋的內(nèi)容-->

注釋語(yǔ)句元素由前后兩半部分組成，前半部分一個(gè)左尖括號(hào)、一個(gè)半角感嘆號(hào)和兩個(gè)連字符，后半部分由兩個(gè)連字符和一個(gè)右尖括號(hào)組成。

     <html>
     <head>
     <title>標(biāo)記測(cè)試</title>
     </head>
     <body>
     <!-- 這里是標(biāo)題-->
     <h1>HTML5從入門到精通</h1>
     </body>
     </html>

頁(yè)面注釋不但可以對(duì)HTML中一行或多行代碼進(jìn)行解釋說明，而且可以注釋掉這些代碼。如果希望某些HTML代碼在瀏覽器中不顯示，可以將這部分內(nèi)容放在之間。例如，修改上述代碼，如下所示：

     <html>
     <head>
     <title>標(biāo)記測(cè)試</title>
     </head>
     <body>
     <!--
     <h1>HTML5從入門到精通</h1>
     -->
     </body>
     </html>

修改后的代碼，將<h1>標(biāo)記作為注釋內(nèi)容處理，在瀏覽器中將不會(huì)顯示。

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

精通HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)（視頻教學(xué)版）（第2版）

1.2 HTML5的文檔結(jié)構(gòu)

1.2.1 文檔類型說明

1.2.2 HTML標(biāo)記

1.2.3 頭標(biāo)記head

1．標(biāo)題標(biāo)記title

2．元信息標(biāo)記meta

1.2.4 網(wǎng)頁(yè)的主體標(biāo)記body

1.2.5 頁(yè)面注釋標(biāo)記