- HTML5從入門到精通（第3版）
- 明日科技
- 6024字
- 2020-03-06 11:55:20
第2章 HTML文件基本標記
（
視頻講解：43分鐘）
本章介紹HTML的各種基本標記，這些都是一個完整的網(wǎng)頁必不可少的。通過它們可以了解網(wǎng)頁的基本結(jié)構(gòu)及其工作原理。
通過閱讀本章，您可以：
掌握HTML頭部標記
掌握標題標記<title>
掌握基底網(wǎng)址標記<base>
掌握元信息標記<meta>
掌握頁面的主體標記
熟練各種標記的應用
2.1 HTML頭部標記
視頻講解
在HTML語言的頭元素中，一般需要包括標題、基底信息、元信息等。HTML的頭元素是以<head>為開始標記，以</head>為結(jié)束標記的。一般情況下，CSS和JavaScript都定義在頭元素中的，而定義在HTML語言頭部的內(nèi)容往往不會在網(wǎng)頁上直接顯示。它用于包含當前文檔的相關信息。
常用的頭部標記內(nèi)容如表2.1所示。
表2.1 頭部標記
<head>與</head>之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是，其間的元素有特殊重要的意義。下面就來分別介紹這些標記的作用。
2.2 標題標記<title>
HTML文件的標題顯示在瀏覽器的標題欄，用以說明文件的用途。每個HTML文檔都應該有標題，在HTML文檔中，標題文字位于<title>和</title>標記之間。<title>和</title>標記位于HTML文檔的頭部，即位于<head>和</head>標記之間。
語法
語法解釋
標記內(nèi)部就是標題的內(nèi)容
實例代碼
上面的代碼中的粗體顯示的就是頁面的標題。保存頁面后在IE中打開，可以看到瀏覽器的標題欄中顯示了剛才設置的標題“簡單的HTML文件”，效果如圖2.1所示。
圖2.1 HTML頁面的標題
2.3 元信息標記<meta>
視頻講解
meta元素提供的信息是用戶不可見的，它不顯示在頁面中，一般用來定義頁面信息的名稱、關鍵字、作者等。在HTML中，meta標記不需要設置結(jié)束標記，在一個尖括號內(nèi)就是一個meta內(nèi)容，而在一個HTML頭頁面中可以有多個meta元素。meta元素的屬性有兩種：name和http-equiv，其中name屬性主要用于描述網(wǎng)頁，以便于搜索引擎機器人查找、分類。下面根據(jù)功能的不同分別介紹元信息標記的使用方法。
2.3.1 設置頁面關鍵字
設置頁面關鍵字是為了向搜索引擎說明這一網(wǎng)頁的關鍵詞，從而幫助搜索引擎對該網(wǎng)頁進行查找和分類，它可以提高被搜索到的幾率，一般可設置不止一個關鍵字，之間用逗號隔開。但是由于很多搜索引擎在檢索時會限制關鍵字數(shù)量，因此在設置關鍵字時不要過多，應“一擊即中”。
語法
語法解釋
在該語法中，name為屬性名稱，這里是keyname，也就是設置網(wǎng)頁的關鍵字屬性，而在content中則定義了具體的關鍵字的內(nèi)容。
實例代碼
在該實例中設定了“html”“元信息”“關鍵字”這3個詞語作為該頁面的關鍵字。
2.3.2 設置頁面描述
設置頁面描述也是為了便于搜索引擎的查找，它用來描述網(wǎng)頁的主題等，與關鍵字一樣，設置的頁面描述也不會在網(wǎng)頁中顯示出來。
語法
語法解釋
在該語法中，name為屬性名稱，這里設置為description，也就是將元信息屬性設置為頁面描述，在content中定義具體的描述語言。
實例代碼
在該實例中，設置了“關于HTML使用的網(wǎng)站”為網(wǎng)頁的描述。
2.3.3 設置編輯工具
現(xiàn)在有很多編輯軟件都可以制作網(wǎng)頁，在源代碼的頭頁面中可以設置網(wǎng)頁編輯工具的名稱。與其他meta元素相同，編輯工具也只是在頁面的源代碼中可以看到，而不會顯示在瀏覽器中。
語法
語法解釋
在該語法中，name為屬性名，設置為generator，也就是設置編輯工具，在content中定義具體的編輯器名稱。
實例代碼
在這一實例中，以Adobe Dreamweaver CS5.5作為網(wǎng)頁的編輯工具。
2.3.4 設定作者信息
在頁面的源代碼中，可以顯示頁面制作者的姓名及個人信息。這可以在源代碼中保留作者希望保留的信息。
語法
語法解釋
在該語法中，name為屬性名，設置為author，也就是設置作者信息，在content中定義具體的信息。
實例代碼
在這一實例中，將作者的姓名“李小米”添加到了網(wǎng)頁的源代碼中。
2.3.5 限制搜索方式
網(wǎng)頁可以通過在meta中的設置來限制搜索引擎對頁面的搜索方式。
語法
語法解釋
在該語法中，搜索方式的值和其所對應的含義如表2.2所示。
表2.2 content值與其對應的含義
實例代碼
2.3.6 設置網(wǎng)頁文字及語言
在網(wǎng)頁中還可以通過語句來設定語言的編碼方式。這樣，瀏覽器就可以正確地選擇語言，而不需要手動選取。
語法
語法解釋
在該語法中，http-equiv用于傳送HTTP通信協(xié)議的標頭，也就是設定標頭屬性的名稱，而在content中才設具體的屬性值。其中charset設置了網(wǎng)頁的內(nèi)碼語系，也就是字符集的類型，charset往往設置為utf-8，此外還有BIG5、GB2312、shift-Jis、Euc、Koi8等字符集。如果采用第二種方法，則簡體中文的設置為：
當然，上述為HTML4版本中設置網(wǎng)頁編碼的方式，而在HTML5中，設置網(wǎng)頁編碼格式更加簡單化，直接在<meta>標簽中通過charset屬性中設置編碼格式即可，其語法如下：
關于HTML5與HTML4的區(qū)別，在后面的章節(jié)中會有具體介紹，此處不再贅述。本書中所有實例將使用HTML5中的方式設置網(wǎng)頁編碼方式。
2.3.7 設置網(wǎng)頁的定時跳轉(zhuǎn)
在瀏覽網(wǎng)頁時經(jīng)常會看到一些歡迎信息的界面，在經(jīng)過一段時間后，這一頁面會自動轉(zhuǎn)到其他頁面中，這就是網(wǎng)頁的跳轉(zhuǎn)。使用HTTP代碼就可以很輕松地實現(xiàn)這一功能。
語法
語法解釋
在該語法中，refresh表示網(wǎng)頁的刷新，而在content中設定刷新的時間和刷新后的地址，時間和鏈接地址之間用分號相隔。默認情況下，跳轉(zhuǎn)時間是以秒為單位的。
實例代碼
運行程序，效果如圖2.2所示。在3秒之后，網(wǎng)頁自動跳轉(zhuǎn)到了明日圖書網(wǎng)站，如圖2.3所示。
圖2.2 運行自動跳轉(zhuǎn)的頁面
圖2.3 跳轉(zhuǎn)后的頁面
2.3.8 設定有效期限
在某些網(wǎng)站上會設置網(wǎng)頁的到期時間，一旦過期則必須到服務器上重新調(diào)用。
語法
語法解釋
在該語法中，到期的時間必須是GMT時間格式，即星期，日 月 年 時 分 秒，這些時間都使用英文和數(shù)字進行設定。
實例代碼
在實例中設置了網(wǎng)頁的到期時間為2011年9月14日16:20。
2.3.9 禁止從緩存中調(diào)用
使用網(wǎng)頁緩存可以加快瀏覽器網(wǎng)頁的速度，因為緩存將曾經(jīng)瀏覽過的頁面暫存在電腦中，當用戶下次打開同一個網(wǎng)頁內(nèi)容時，即可快速瀏覽該網(wǎng)頁，省去讀取同一網(wǎng)頁的時間。但是如果網(wǎng)頁的內(nèi)容經(jīng)常頻繁地更新，網(wǎng)頁制作者希望用戶隨時都能查看到最新的網(wǎng)頁內(nèi)容，則可以通過meta語句禁用頁面緩存。
語法
語法解釋
在該語法中，cache-control和pragma都可以用來設定緩存的屬性，而在content中則是真正禁止調(diào)用緩存的語句。
實例代碼
2.3.10 刪除過期的cookie
如果網(wǎng)頁過期，則刪除存盤的cookie。
語法
說明
在該語法中，到期的時間同樣是GMT時間格式。
實例代碼
在實例中，設置了網(wǎng)頁的到期時間為2011年9月14日16:20，也就是這個時候刪除存盤的cookie。
2.3.11 強制打開新窗口
強制網(wǎng)頁在當前窗口中以獨立的頁面顯示，可以防止自己的網(wǎng)頁被別人當作一個frame頁調(diào)用。
語法
語法解釋
在該語法中，windows-target表示新網(wǎng)頁的打開方式，而content中設置_top則代表打開的是一個獨立頁面。
實例代碼
2.3.12 設定建立網(wǎng)站的日期
通過設置可以設定網(wǎng)站建立的日期。
語法
語法解釋
在該語法中，build表示要設定網(wǎng)站建立的日期，在content中定義網(wǎng)站建立的具體時間。
實例代碼
在實例中，設置了網(wǎng)頁的建立時間為2008年8月8日。
2.3.13 設定網(wǎng)頁版權(quán)信息
通過設置可以說明網(wǎng)頁的版權(quán)信息。
語法
語法解釋
在該語法中，copyright表示要設定網(wǎng)頁的版權(quán)信息，在content中定義網(wǎng)頁版權(quán)的具體信息。
實例代碼
在實例中，設置了網(wǎng)頁的版權(quán)信息，網(wǎng)頁版權(quán)為明日科技。
2.3.14 設定聯(lián)系人的郵箱
通過設置可以設定聯(lián)系人的郵箱。
語法
語法解釋
在該語法中，reply-to表示要設定網(wǎng)站聯(lián)系人的郵箱，在content中定義網(wǎng)站聯(lián)系人的具體的郵箱地址。
實例代碼
在實例中，設置了網(wǎng)站的聯(lián)系人郵箱地址為mingrisoft@mingrisoft.com。
2.4 基底網(wǎng)址標記<base>
URL路徑是一種互聯(lián)網(wǎng)地址的表示法，在這個數(shù)據(jù)里可以包括以何種協(xié)議連接、要連接到哪一個地址、連接地址的端口（Port）號以及服務器（Server）里頁面的完整路徑和頁面名稱等信息。在HTML中，URL路徑分為兩種形式：絕對路徑和相對路徑。絕對路徑是將服務器上磁盤驅(qū)動器名稱和完整的路徑寫出來，同時也會表現(xiàn)出磁盤上的目錄結(jié)構(gòu)；相對路徑是相對于當前HTML文檔所在目錄或站點根目錄的路徑。
HTML頁面通過基底網(wǎng)址把當前HTML頁面中所有的相對URL轉(zhuǎn)換成絕對URL。一般情況下，通過基底網(wǎng)址標記<base>設置HTML頁面的絕對路徑，那么在頁面中的鏈接地址只需設置成相對地址即可，當瀏覽器瀏覽頁面時，會通過<base>標記將相對地址附在基底網(wǎng)址的后面，從而轉(zhuǎn)換成絕對地址。
例如，在HTML頁面的頭部定義基底網(wǎng)址如下。
在頁面主體中設置的某一個相對地址，如下：
當使用瀏覽器瀏覽時，這個鏈接地址就變成如下的絕對地址：
http://www.mingribook.com/html/book.html
因此，在HTML頁面中設置基底標記時不應該多于一個，而且要將其放置在頭部以及任何包含URL地址的語句之前。
語法
語法解釋
在該語法中，“鏈接地址”就是要設置的頁面的基底地址，而“新窗口的打開方式”可以設置為不同的效果，其屬性值及含義如表2.3所示。
表2.3 鏈接窗口的打開方式
實例代碼
運行該程序，當鼠標移動到鏈接文字上面時，可以看到在IE的狀態(tài)欄中顯示出其完整的鏈接地址，它是由代碼中設置的基底地址加上程序中的相對地址組成的，如圖2.4所示。
圖2.4 設置基底地址
2.5 頁面的主體標記<body>
視頻講解
網(wǎng)頁的主體部分以<body>標記標志它的開始，以</body>標志它的結(jié)束。在網(wǎng)頁的主體標記中有很多的屬性設置如表2.4所示。
表2.4 <body>元素的屬性
下面就來分別介紹這些屬性的應用。
2.5.1 設置文字顏色——text
<body>元素的text屬性可以改變整個頁面默認文字的顏色。在沒有對文字進行單獨定義顏色時，這個屬性將對頁面中所有的文字產(chǎn)生作用。
語法
語法解釋
在該語法中，text的屬性值與設置頁面背景色相同，也就是說該屬性設置也和在頁面的主體標記放置在一起。
實例代碼
運行這段代碼，實現(xiàn)的效果如圖2.5所示。
圖2.5 設置頁面文字顏色為藍色
2.5.2 背景顏色屬性——bgcolor
<body>元素的bgcolor屬性用來設定整個頁面的背景顏色。與文字顏色相似，也是使用顏色名稱或者十六進制值來表現(xiàn)顏色效果。
語法
語法解釋
該語法中的body就是頁面的主體標記，也就是說設置頁面的顏色要和頁面的主體標記放置在一起。
實例代碼
運行這段代碼，可以看到打開的頁面背景色為#0000FF藍色，文字的顏色為#FFFFFF白色，效果如圖2.6所示。
圖2.6 設置頁面的背景顏色為藍色
2.5.3 背景圖像屬性——background
頁面中可以使用jpg或gif圖片來表現(xiàn)。這些圖片可以作為頁面的背景圖，通過<body>語句中background屬性來實現(xiàn)。它與向網(wǎng)頁中插入圖片不同，放在網(wǎng)頁的最底層，文字和圖片等都位于它的上面。文字、插入的圖片等會覆蓋背景圖片。在默認情況下，背景圖片在水平方向和垂直方向上會不斷重復出現(xiàn)，直到鋪滿整個網(wǎng)頁。
語法
語法解釋
文件的鏈接地址可以是相對地址，也就是本機上圖片文件的存儲位置，也可以設置為網(wǎng)上的圖片資料，如http://www.mingribook.com/book.jpg。在默認情況下，用戶可以省略bgproperties屬性，這時圖片會按照水平和垂直的方向不斷重復出現(xiàn)，直到鋪滿整個頁面，如果將bgproperties屬性設置為fixed，那么當滾動頁面時，背景圖像也會跟著移動，這相對瀏覽者來說，就是總停留在相同的位置上。
【例2.1】下面以實例說明背景圖片的設置與顯示效果。
（1）設置一個圖片文件作為網(wǎng)頁的背景，在默認情況下不設置bgproperties屬性，此時圖片將在水平和垂直方向平鋪圖像，如圖2.7所示。（實例位置：資源包\TM\sl\2\1）
實例代碼
運行這段代碼，可以看到如圖2.7所示的效果，圖像在水平和垂直方向平鋪。
圖2.7 平鋪圖像作為背景
（2）如果希望圖片不重復顯示，一般情況下需要借助CSS樣式，這里簡單介紹一下，在后面的章節(jié)中將詳細介紹CSS的相關內(nèi)容。
對于網(wǎng)頁背景的樣式設置，一般在頭部標記中添加style標記，代碼如下。
在這段代碼中，background-repeat的值設置為no-repeat，也就是不重復，運行效果如圖2.8所示。
圖2.8 背景圖像單獨顯示
如果在這段代碼中，將background-repeat的值設置為repeat-x，則背景圖片值在水平方向平鋪，效果如圖2.9所示。相反，如果設置為repeat-y，則只在垂直方向平鋪。
圖2.9 背景圖像水平平鋪效果
（3）除了設置背景是否重復之外，在網(wǎng)頁中還可以設置背景圖片是否隨拖動條的拖動而變化。這一屬性是通過bgproperties參數(shù)來設定的，將bgproperties的值設置為fixed，背景圖片會固定在頁面上靜止不動。代碼如下。
運行這段代碼后的效果如圖2.10所示。當拖動滾動條時，會發(fā)現(xiàn)只有文字在動，而背景卻是靜止不動的，如圖2.11所示。
圖2.10 運行代碼的效果
圖2.11 拖動滾動條的效果
2.5.4 設置鏈接文字屬性——link
在網(wǎng)頁創(chuàng)建中，除了文字、圖片，超鏈接也是最常用的一種元素。超鏈接中以文字鏈接最多，在默認情況下，瀏覽器以藍色作為超鏈接文字的顏色；訪問過的文字則變?yōu)榘导t色。用戶在創(chuàng)作網(wǎng)頁時，可以通過link參數(shù)修改鏈接文字的顏色。
語法
語法解釋
這一屬性的設置與前面幾個設置顏色的參數(shù)類似，都是與body標簽放置在一起，表明它對網(wǎng)頁中所有未單獨設置的元素起作用。
【例2.2】下面通過實例設置未訪問的鏈接文字的顏色。（實例位置：資源包\TM\sl\2\2）
代碼如下。
運行這段代碼，可以看到鏈接文字的顏色已經(jīng)不是默認的藍色，而是設置成了紅色，如圖2.12所示。
圖2.12 設置鏈接文字的顏色
在上面的代碼中，添加正在訪問的文字顏色設置。這一屬性需要用到alink參數(shù)，添加后的代碼如下。
運行這段代碼之后，單擊鏈接文字“正在訪問的鏈接”，會發(fā)現(xiàn)按下鼠標時，文字顏色變成了綠色，如圖2.13所示。
圖2.13 設置正在訪問的文字顏色
在上面的代碼中，繼續(xù)使用vlink參數(shù)設置訪問后的文字鏈接顏色，實現(xiàn)的代碼如下。
運行這段代碼之后，當單擊“訪問后的鏈接”文字鏈接后，于此同時也就完成了頁面的跳轉(zhuǎn)（這里設置的是跳轉(zhuǎn)回本頁），這時會看到訪問過得鏈接文字顏色變成了灰色，如圖2.14所示。
圖2.14 設置訪問后的文字鏈接顏色
2.5.5 設置邊距——margin
在網(wǎng)頁的制作過程中，還可以定義頁面的空白，也就是內(nèi)容與瀏覽器邊框之間的距離。其中包括上邊框和左邊框，設定合適的邊距可以防止網(wǎng)頁外觀過于擁擠。
語法
語法解釋
在默認情況下，邊距的值是以像素為單位的。
實例代碼
運行此段代碼，可以看到設置邊距前后的對比效果，設置邊距前的效果如圖2.15所示，設置自定義邊距效果如圖2.16所示。
圖2.15 默認的頁面效果
圖2.16 設置邊距的效果
2.6 頁面的注釋標記——<!-- -->
在網(wǎng)頁中，除了以上這些基本元素外，還包含一種不顯示在頁面中的元素，那就是代碼的注釋文字。適當?shù)淖⑨尶梢詭椭脩舾玫亓私饩W(wǎng)頁中各個模塊的劃分，也有助于以后對代碼的檢查和修改。給代碼加注釋，是一種很好的編程習慣。
語法
語法解釋
注釋文字的標記很簡單，只需要在語法中“注釋的文字”的位置上添加需要的內(nèi)容即可。
2.7 實例演練——創(chuàng)建基本的HTML網(wǎng)頁
【例2.3】本節(jié)中創(chuàng)建一個基本的HTML網(wǎng)頁，在這個HTML網(wǎng)頁中完成對明日科技公司的簡介。（實例位置：資源包\TM\sl\2\3）
具體步驟如下。
（1）創(chuàng)建一個html文件，將其命名成slyl.html。
（2）在<title>…</title>標簽中定義文件的標題為“明日科技公司簡介”。
（3）在頁面的主題標記內(nèi)，設置頁面的背景圖片、文字的顏色為黑色，上邊距、左右邊距都設置成10像素。其實現(xiàn)的代碼如下。
（4）通過CSS樣式的style標記，去除重復的背景圖。其實現(xiàn)的代碼如下。
本例的運行效果如圖2.17所示。
圖2.17 明日科技公司簡介
2.8 小結(jié)
本章主要對HTML文件的主體標記中的功能進行了詳細的介紹，包括HTML頭部標記、標題標記、元信息標記、基底網(wǎng)址標記、頁面的注釋標記。對標記中的主要屬性以實例的形式進行詳細的介紹。這些標記和屬性是HTML的基石，要想建立HTML的大廈，就要好好地學好本章的內(nèi)容。
2.9 習題
選擇題
1．設置鏈接顏色使用哪種標記？（ ?。?/p>
A．<body bgcolor=?>
B．<body text=?>
C．<body link=?>
D．<body vlink=?>
2．HTML語言中，設置背景顏色的代碼是（ ?。?。
A．<body bgcolor=?>
B．<body text=?>
C．<body link=?>
D．<body vlink=?>
3．在HTML中，（ ）不是鏈接的目標屬性。
A．self
B．new
C．blank
D．top
4．在網(wǎng)頁中，必須使用（ ?。擞泚硗瓿沙溄?。
A．<a>…</a>
B．<p>…</p>
C．<link>…</link>
D．<li>…</li>
5．用HTML標記語言編寫一個簡單的網(wǎng)頁，網(wǎng)頁最基本的結(jié)構(gòu)是（ ?。?。
A．<html> <head>…</head> <frame>…</frame> </html>
B．<html> <title>…</title> <body>…</body> </html>
C．<html> <title>…</title> <frame>…</frame> </html>
D．<html> <head>…</head> <body>…</body> </html>
6．若要是設計網(wǎng)頁的背景圖形為bg.jpg，以下標記中，正確的是（ ?。?/p>
A．<body background="bg.jpg">
B．<body bground="bg.jpg">
C．<body image="bg.jpg">
D．<body bgcolor="bg.jpg">
判斷題
7．超鏈接：是一種標記，形象的說法就是單擊網(wǎng)頁中的這個標記能夠加載另一個網(wǎng)頁，這個標記可以做在文本上也可以做在圖像上。（ ）
8．HTML的顏色屬性值中，Black的代碼是""#f00000""。（ ?。?/p>
填空題
9．頭部標記是指______。
10．元信息標記是______。
- OpenStack Cloud Computing Cookbook（Third Edition）
- Raspberry Pi for Python Programmers Cookbook（Second Edition）
- Practical Data Science Cookbook（Second Edition）
- C和C++安全編碼（原書第2版）
- SQL Server與JSP動態(tài)網(wǎng)站開發(fā)
- Cybersecurity Attacks：Red Team Strategies
- NGINX Cookbook
- Microsoft Dynamics AX 2012 R3 Financial Management
- Visual FoxPro 6.0程序設計
- Mastering Apache Storm
- 體驗之道：從需求到實踐的用戶體驗實戰(zhàn)
- Python深度學習（第2版）
- React.js實戰(zhàn)
- 秒懂算法：用常識解讀數(shù)據(jù)結(jié)構(gòu)與算法
- Getting Started with Hazelcast