HTML5入門經典
第一篇 基礎知識篇
第2章 HTML5帶來的標記變化
本章介紹HTML的各種基本標記，這些都是一個完整的網頁必不可少的。通過它們可以瞭解網頁的基本結構及其工作原理。
通過學習本章，讀者可以達到以下學習目的：
❑掌握HTML頭部標記；
❑掌握標題標記＜title＞；
❑掌握基底網址標記＜base＞；
❑掌握元資訊標記＜meta＞；
❑掌握頁面的主題標記；
❑熟悉各種標記的應用。
2.1 重中之重——頭部標記
在HTML語言的頭元素中，一般需要包括標題、基底資訊、元資訊等。HTML的頭元素是以＜head＞為開始標記、以＜/head＞為結束標記的。一般情況下，CSS和JavaScript都定義在頭元素中的，而定義在HTML語言頭部的內容往往不會在網頁上直接顯示。它用於包含當前文檔的相關資訊。
常用的頭部標記內容如表2.1所示。
＜head＞與＜/head＞之間的內容不會在流覽器的文件視窗顯示，但是，其中的元素有特殊重要的意義。下面就來分別介紹這些標記的作用
2.2 名稱所在——標題＜title＞
HTML檔的標題顯示在流覽器的標題列，用以說明文件的用途。每個HTML文檔都應該有標題，在HTML文檔中，標題文字位於＜title＞和＜/title＞標記之間。＜title＞和＜/title＞標記位於HTML文檔的頭部，即位於＜head＞和＜/head＞標記之間。
語法：
＜title＞...＜/title＞
標記內部就是標題的內容。
實例代碼：
＜html＞
＜head＞
＜title＞簡單的HTML文件＜/title＞
＜/head＞
＜body text="blue"＞
＜h2 align="center"＞HTML你好＜/h2＞
＜hr＞
＜p＞讓我們認識HTML吧＜/p＞
＜/body＞
＜/html＞
上面的代碼中的粗體顯示的就是頁面的標題。保存頁面後在IE中打開，可以看到流覽器的標題列中顯示了剛才設置的標題“簡單的HTML檔”，效果如圖2.1所示。
圖 2.1 HTML頁面的標題
2.3 隱藏很深——元資訊標記＜meta＞
＜meta＞元素提供的資訊是使用者不可見的，它不顯示在頁面中，一般用來定義頁面資訊的名稱、關鍵字、作者等。在HTML中，meta標記不需要設置結束標記，在一個尖括弧內就是一個meta內容，而在一個HTML頭頁面中可以有多個meta元素。meta元素的屬性有兩種：name和http-equiv，其中name屬性主要用於描述網頁，以便於搜尋引擎機器人查找、分類。下面根據功能的不同分別介紹元資訊標記的使用方法。
2.3.1 頁面關鍵字
關鍵字是為搜尋引擎提供的，例如一個音樂網站，為了提高在搜尋引擎中被搜索到的幾率，可以設定多個和音樂主題相關的關鍵字以便搜索。這些關鍵字不會出現在流覽器的顯示中。需要注意的是，大多數搜尋引擎檢索時會限制關鍵字的數量，有時關鍵字過多，該網頁會在檢索中被忽略。所以關鍵字的輸入不宜過多，應以切中要害為准。另外，關鍵字之間要用逗號分隔。
語法：
＜meta name="keywords"
content="具體的關鍵字"＞
在該語法中，name為屬性名稱，這裡是keywords，也就是設置網頁的關鍵字屬性，而在content中則定義了具體的關鍵字內容。
實例代碼：
＜html＞
＜head＞
＜title＞設置頁面關鍵字＜/title＞
＜meta name="keywords"
content="音樂,html，流行"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在該實例中設定了“音樂”、"html"和“流行”這3個詞語作為該頁面的關鍵字。
2.3.2 頁面描述
對於一個網站的頁面，可以在原始程式碼中添加說明語句，將網站的主題描述清晰，這就是描述語句的作用。這個描述語句內容也不會出現在流覽器的顯示中。說明文字可供搜尋引擎尋找網頁，可存儲在搜尋引擎的伺服器中，在流覽者搜索時隨時調用，還可以在檢索到網頁時作為檢索結果返回給流覽者。搜尋引擎同樣限制說明文字的字數，所以內容要儘量簡明扼要。
語法：
＜meta name="description"
content="對頁面的描述語言"＞
在該語法中，name為屬性名稱，這裡設置為description，也就是將元資訊屬性設置為頁面描述，在content中定義具體的描述語言。
實例代碼：
＜html＞
＜head＞
＜title＞設置頁面描述＜/title＞
＜meta name="keyword"
content="html,元信息，關鍵字"＞
＜meta name="description"
content="關於HTML使用的網站"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在該實例中，設置“關於HTML使用的網站”為頁面的描述。
2.3.3 編輯工具
現在有很多編輯軟體都可以製作網頁，在原始程式碼的頭頁面中可以設置網頁編輯工具的名稱。與其他meta元素相同，編輯工具也只是在頁面的原始程式碼中可以看到，而不會顯示在流覽器中。
語法：
＜meta name="generator" content="編輯軟體的名稱"＞
在該語法中，name為屬性名，設置為generator，也就是設置編輯工具，在content中定義具體的編輯器名稱。
實例代碼：
＜html＞
＜head＞
＜title＞設置編輯工具＜/title＞
＜meta name="keyword"
content="html,元信息，關鍵字"＞
＜meta name="description"
content="關於HTML使用的網站"＞
＜meta name="generator"
content="Adobe Dreamweaver CS5.5"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在這一實例中，設置Adobe Dreamweaver CS5.5作為網頁的編輯工具。
2.3.4 作者資訊設置
在頁面的原始程式碼中，可以顯示頁面製作者的姓名及個人資訊。這使得可以在原始程式碼中保留作者希望保留的資訊。
語法：
＜meta name="author"
content="作者的姓名"＞
在該語法中，name為屬性名，設置為author，也就是設置作者資訊，在content中定義具體的資訊。
實例代碼：
＜html＞
＜head＞
＜title＞設定作者資訊＜/title＞
＜meta name="keyword"
content="html,元信息，關鍵字"＞
＜meta name="description"
content="關於HTML使用的網站"＞
＜meta name="generator"
content="Adobe Dreamweaver CS5.5"＞
＜meta name="author"
content="李小米"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在這一實例中，將作者的姓名“李小米”添加到了網頁的原始程式碼中。
2.3.5 限制搜索方式
網頁可以通過在meta中的設置來限制搜尋引擎對頁面的搜索方式。
語法：
＜meta name="robots"
content="搜索方式"＞
在該語法中，搜索方式的值和其所對應的含義如表2.2所示。
實例代碼：
＜html＞
＜head＞
＜title＞限制搜索方式＜/title＞
＜meta name="robots"
content="index"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
2.3.6 網頁文字及語言
在網頁中還可以通過語句來設定語言的編碼方式，這樣，流覽器就可以自動地選擇語言，而不需要手動選擇。
語法：
第一種方法：＜meta http-equiv="Content-Type"
content="text/html;charset=字元集類型"＞
第二種方法：＜meta
http-equiv="Content-Language" content="語言"＞
在該語法中，http-equiv用於傳送HTTP通信協定的標頭，也就是設定標頭屬性的名稱，而在content中才設置具體的屬性值。其中charset設置了網頁的內碼語系，也就是字元集的類型，charset往往設置為gb_2312，即簡體中文。英文是ISO-8859-1字元集，此外還有BIG5、utf-8、shift-Jis、Euc、Koi8等字元集。如果採用第二種方法，則簡體中文的設置為：
＜meta
http-equiv="Content-Language" content="zh_CN"＞
2.3.7 定時跳越網頁面
在流覽網頁時經常會看到一些歡迎資訊的介面，在經過一段時間後，這一頁面會自動轉到其他頁面中，這就是網頁的跳轉。使用HTTP代碼就可以很輕鬆地實現這一功能。
語法：
＜meta http-equiv="refresh"
content="跳轉時間;url=連結位址"＞
在該語法中，refresh表示網頁的刷新，而在content中設定刷新的時間和刷新後的位址，時間和連結位址之間用分號相隔。預設情況下，跳轉時間是以秒為單位的。
實例代碼：
＜html＞
＜head＞
＜title＞設置網頁的定時跳轉＜/title＞
＜meta http-equiv="refresh"
content="3;url=http://www.mingribook.com"＞
＜/head＞
＜body＞
您好，本頁在3秒之後將自動跳轉到明日圖書網
＜/body＞
＜/html＞
運行程式，效果如圖2.2所示。在3秒之後，網頁自動跳轉到了明日圖書網站，如圖2.3所示。
圖 2.2 運行自動跳轉的頁面
圖 2.3 跳轉後的頁面
2.3.8 有效期的設置
在某些網站上會設置網頁的到期時間，一旦過期則必須到伺服器上重新調用。
語法：
＜meta http-equiv="expires"
content="到期的時間"＞
在該語法中，到期的時間必須是GMT時間格式，即“星期日月年時分秒”，這些時間都使用英文和數位進行設定。
實例代碼：
＜html＞
＜head＞
＜title＞設置有效期限＜/title＞
＜meta http-equiv="expires"
content="Web,14 september 2012 16:20:00 GMT"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在實例中設置了網頁的到期時間為2012年9月14日16:20。
2.3.9 禁止從緩存中調用
使用網頁緩存可以加快流覽網頁的速度，因為緩存將曾經流覽過的頁面暫存在電腦中，當使用者下次打開同一個網頁時，即可快速流覽該網頁，省去讀取同一網頁的時間。但是如果網頁的內容頻繁更新，網頁製作者希望用戶隨時都能查看到最新的網頁內容，則可以通過meta語句禁用頁面緩存。
語法：
＜meta
http-equiv="cache-control" content="no-cache"＞
＜meta http-equiv="pragma"
content="no-cache"＞
在該語法中，cache-control和pragma都可以用來設定緩存的屬性，而在content中則是真正禁止調用緩存的語句。
實例代碼：
＜html＞
＜head＞
＜title＞禁止從緩存中調用＜/title＞
＜meta http-equiv="cache-control"
content="no-cache"＞
＜meta http-equiv="pragma"
content="no-cache"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
2.3.10 刪除過期的cookie
如果網頁過期，則應刪除存檔的cookie。
語法：
＜meta
http-equiv="set-cookie" content="到期的時間"＞
在該語法中，到期的時間同樣是GMT時間格式。
實例代碼：
＜html＞
＜head＞
＜title＞刪除過期的cookie＜/title＞
＜meta
http-equiv="set-cookie" content="Web,14 september 2012 16:20:00
GMT"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在實例中，設置了網頁的到期時間為2012年9月14日16:20，也就是在這個時候刪除存檔的cookie。
2.3.11 強制打開新視窗
強制網頁在當前視窗中以獨立的頁面顯示，可以防止自己的網頁被別人當作一個frame頁調用。
語法：
＜meta
http-equiv="windows-target" content="_top"＞
在該語法中，windows-target表示新網頁的打開方式，而content中設置_top則代表打開的是一個獨立頁面。
實例代碼：
＜html＞
＜head＞
＜title＞強制打開新視窗＜/title＞
＜meta
http-equiv="windows-target" content="_top"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
2.3.12 網頁的過渡效果設置
在流覽某些網站時，常常會在進入或退出某個網頁時看到一些過渡效果，這將使得網頁更加生動。這些效果在meta屬性中就可以實現。
語法：
＜meta http-equiv="過渡事件" content="revealtrans(duration=過渡效果持續時間,
transition=過渡方式)"＞
在該語法中，過渡事件可以進入頁面或者離開頁面。進入頁面的http-equiv值為page-enter，離開頁面的http-equiv值為page-exist。過渡效果的持續時間預設情況下以秒為單位元，過渡方式的編號如表2.3所示。
【例2.1】利用下面的實例來演示進入和離開網頁的過渡效果，其中以水準線效果進入頁面2-enter.html，而以垂直百葉窗效果展開頁面2-exit.html。
實例位置：光碟\MR\源碼\第2章\2.1
其實現的過程如下：
Step 1 建立一個2-gd.html頁面，在該頁面中設置頁面的背景顏色為橘色，在該頁面中插入一張圖片，以便觀察頁面切換轉場的效果。在該頁面中插入兩個連接文字，分別是“進入網頁”和“離開網頁”。其實現的代碼如下：
＜html＞
＜head＞
＜title＞頁面的過渡效果＜/title＞
＜/head＞
＜body bgcolor="#FFCC00"＞
＜center＞＜h2＞頁面的過渡效果＜/h2＞
＜img src="images/1.jpg"
width="498" height="349"/＞＜br/＞＜br/＞＜br/＞
＜a href="2-enter.html"＞進入網頁＜/a＞＜br/＞＜br/＞＜br/＞
＜a href="2-exit.html"＞離開網頁＜/a＞
＜/center＞
＜/body＞
＜/html＞
運行效果如圖2.4所示。
圖 2.4 頁面的過渡效果
Step 2 當點擊圖2.4中的“進入網頁”連結後，將在流覽器中顯示水準線的轉場效果，如圖2.5所示。3秒鐘過後，進入如圖2.6所示的頁面，按一下“返回”連結後回到2-gd.html。
圖 2.5 進入頁面的水準線效果
圖 2.6 頁面的進入頁
其實現的代碼如下：
＜html＞
＜head＞
＜title＞頁面的進入效果＜/title＞
＜meta
http-equiv="page-enter"
content="revealtrans(duration=3,transition=21)"/＞
＜/head＞
＜body bgcolor="#FFCC99"＞
＜center＞＜h2＞顯示頁面的進入效果＜/h2＞
＜img src="images/2.jpg"
width="498" height="462"/＞＜br/＞＜br/＞
＜a href="2-gd.html"＞返回＜/a＞
＜/center＞
＜/body＞
＜/html＞
Step 3 當點擊圖2.4中的“離開網頁”連結後，進入如圖2.7所示的網頁的離開頁面，按一下“返回”連結後，回到如圖2.8所示的頁面，經過5秒鐘，顯示離開頁面時的垂直百葉窗轉場效果。
圖 2.7 頁面的退出頁
圖 2.8 頁面的垂直百葉窗離開效果
實現的代碼如下：
＜html＞
＜head＞
＜meta
http-equiv="page-exit"
content="revealtrans(duration=5,transition=8)"/＞
＜title＞頁面的離開效果＜/title＞
＜/head＞
＜body bgcolor="#FFCC99"＞
＜center＞＜h2＞顯示頁面的退出效果＜/h2＞
＜img src="images/3.jpg"
width="498" height="462"/＞＜br/＞＜br/＞
＜a href="2-gd.html"＞返回＜/a＞
＜/center＞
＜/body＞
＜/html＞
注意 本例在IE9及以上版本不能正常實現過渡效果，建議用IE6運行本例，以便更好地瞭解網頁的過渡效果。
2.4 基底網址標記＜base＞
URL路徑是一種互聯網位址的標記法，在這個資料裡可以包括以何種協議連接、要連接到哪一個位址、連接位址的埠（Port）號以及伺服器（Server）裡頁面的完整路徑和頁面名稱等資訊。在HTML中，URL路徑分為兩種形式：絕對路徑和相對路徑。絕對路徑是將伺服器上磁碟機名稱和完整的路徑寫出來，同時也會表現出磁片上的目錄結構；相對路徑是相對于當前HTML文檔所在目錄或網站根目錄的路徑。
HTML頁面通過基底網址，把當前HTML頁面中所有的相對URL轉換成絕對URL。一般情況下，通過基底網址標記＜base＞設置HTML頁面的絕對路徑，那麼在頁面中的連結位址只需設置成相對位址即可。當流覽器流覽頁面時，會通過＜base＞標記將相對位址附在基底網址的後面，從而轉化成絕對位址。
例如，在HTML頁面的頭部定義基底網址如下：
＜base href="http://www.mingribook.com/html"＞
在頁面主體中設置的某一個相對位址如下：
＜a href="../html/book.html"＞
當使用流覽器流覽時，這個連結位址就變成如下的絕對位址：
http://www.mingribook.com/html/book.html
因此，在HTML頁面中設置基底標記時不應該多於一個，而且要將其放置在頭部以及任何包含URL位址的語句之前。
語法：
＜base href="連結位址" target="新視窗的打開方式"＞
在該語法中，“連結位址”就是要設置的頁面的基底位址，而“新視窗的打開方式”可以設置為不同的效果，其屬性值及含義如表2.4所示。
實例代碼：
＜html＞
＜head＞
＜base href="http://www.mingribook.com"
target="_blank"＞
＜title＞基底網址標記＜/title＞
＜/head＞
＜body＞
＜a href="../1-2.htm"＞打開一個相對位址＜/a＞
＜/body＞
＜/html＞
運行該程式，當滑鼠移動到連結文字上面時，可以看到在IE的狀態列中顯示出其完整的連結位址，它是由代碼中設置的基底位址加上程式中的相對位址組成的，如圖2.9所示。
圖 2.9 設置基底位址
2.5 容量瓶——頁面的主體標記＜body＞
網頁的主體部分以＜body＞標記標誌它的開始，以＜/body＞標誌它的結束。在網頁的主體標記中有很多的屬性設置如表2.5所示。
下面就來分別介紹這些屬性的應用。
2.5.1 彩色字體——text
＜body＞元素的text屬性可以改變整個頁面預設文字的顏色。在沒有對文字進行單獨定義顏色的時候，這個屬性將對頁面中所有的文字產生作用。
語法：
＜body text="顏色代碼"＞
在該語法中，text的屬性值與設置頁面背景色相同，也就是說該屬性設置也和在頁面的主體標記放置在一起。
實例代碼：
＜html＞
＜head＞
＜title＞設置頁面文字顏色＜/title＞
＜/head＞
＜body text="#0000FF"＞
設定頁面的文字顏色為藍色
＜/body＞
＜/html＞
運行這段代碼，實現的效果如圖2.10所示。
圖 2.10 設置頁面文字顏色為藍色
2.5.2 背景顏色屬性——bgcolor
＜body＞元素的bgcolor屬性用來設定整個頁面的背景顏色。與文字顏色相似，也是使用顏色名稱或者十六進位值來表現顏色效果。
語法：
＜body bgcolor="顏色代碼"＞
該語法中的body就是頁面的主體標記，也就是說設置頁面的顏色要和頁面的主體標記放置在一起。
實例代碼：
＜html＞
＜head＞
＜title＞設置頁面文字顏色＜/title＞
＜/head＞
＜body bgcolor="#0000FF"
text="#FFFFFF"＞
設定頁面的背景為藍色，文字的顏色為白色
＜/body＞
＜/html＞
運行這段代碼，可以看到打開的頁面背景色為#0000FF（藍色），文字的顏色為#FFFFFF（白色），效果如圖2.11所示。
圖 2.11 設置頁面的背景為藍色
2.5.3 背景圖像屬性——background
頁面中可以使用jpg或gif圖片來作為頁面的背景圖，通過＜body＞語句中background屬性來實現。它與向網頁中插入圖片不同，它放在網頁的最底層，文字和圖片等都位於它的上面。文字、插入的圖片等會覆蓋背景圖片。在預設的情況下，背景圖片在水準方向和垂直方向上會不斷重複出現，直到鋪滿整個網頁。
語法：
＜body background="檔連結位址" bgproperties="背景圖片固定屬性"＞
“檔連結位址”可以是相對位址，也就是本機上圖片檔的存儲位置，也可以設置為網上的圖片資料，如http://www.mingribook.com/book.jpg。在預設情況下，使用者可以省略bgproperties屬性，這時圖片會按照水準和垂直的方向不斷重複出現，直到鋪滿整個頁面。如果將bgproperties屬性設置為fixed，那麼當滾動頁面時，背景圖像也會跟著移動，相對於流覽者來說，就是總停留在相同的位置上。
【例2.2】下面以實例說明背景圖片的設置與顯示效果。
Step 1 設置一個圖片檔作為網頁的背景，在預設情況下不設置bgproperties屬性，此時圖片將在水準和垂直方向上平鋪圖像。2-5.html代碼如下：
實例位置：光碟\MR\源碼\第2章\2.2
＜html＞
＜head＞
＜title＞背景圖片＜/title＞
＜/head＞
＜body background="images/1.jpg"＞
＜/body＞
＜/html＞
運行這段代碼，可以看到如圖2.12所示的效果，圖像在水準和垂直方向平鋪。
圖 2.12 平鋪圖像作為背景
Step 2 如果希望圖片不重複顯示，一般情況下需要借助CSS樣式。
對於網頁背景的樣式設置，一般在頭部標記中添加style標記，2-6.html代碼如下：
＜html＞
＜head＞
＜title＞背景圖片不重複出現＜/title＞
＜style type="text/css"＞
body{background-repeat:no-repeat}
＜/style＞
＜/head＞
＜body background="images/1.jpg"＞
＜/body＞
＜/html＞
在這段代碼中，background-repeat的值設置為no-repeat，也就是不重複，運行效果如圖2.13所示。
圖 2.13 背景圖像單獨顯示
如果在這段代碼中，將background-repeat的值設置為repeat-x，則背景圖片值在水準方向平鋪，效果如圖2.14所示。相反，如果設置為repeat-y，則只在垂直方向平鋪。
圖 2.14 背景圖像水平平鋪效果
Step 3 除了設置背景是否重複之外，在網頁中還可以設置背景圖片是否隨拖動條的拖動而變化。這一屬性是通過bgproperties參數來設定的，將bgproperties的值設置為fixed，背景圖片會固定在頁面上靜止不動。2-8.html的代碼如下：
＜html＞
＜head＞
＜title＞背景圖片＜/title＞
＜style type="text/css"＞
body{background-repeat:no-repeat}
＜/style＞
＜/head＞
＜body background="images/1.jpg"
bgproperties="fixed" text="#00FFCC"＞
1行金樽清酒鬥十千＜br/＞
2行玉盤珍羞直萬錢＜br/＞
3行停杯投箸不能食＜br/＞
4行拔劍四顧心茫然＜br/＞
5行欲渡黃河冰塞川＜br/＞
6行將登太行雪滿山＜br/＞
7行閑來垂釣碧溪上＜br/＞
8行忽複乘舟夢日邊＜br/＞
9行行路難行路難＜br/＞
10行多歧路今安在＜br/＞
11行長風破浪會有時＜br/＞
12直掛雲帆濟滄海＜br/＞
＜/body＞
＜/html＞
運行這段代碼後的效果如圖2.15所示。當拖動捲軸時，會發現只有文字在動，而背景卻是靜止不動的，如圖2.16所示。
圖 2.15 運行代碼的效果
圖 2.16 拖動捲軸的效果
2.5.4 連結文字屬性——link
在網頁創建中，除了文字、圖片，超連結也是最常用的一種元素。超連結中以文字連結最多，在預設情況下，流覽器以藍色作為超連結顯示文字的顏色；訪問過的文字則變為暗紅色。用戶在創作網頁時，可以通過link參數修改連結文字的顏色。
語法：
＜body link="顏色代碼"＞
這一屬性的設置與前面幾個設置顏色的參數類似，都是與body標籤放置在一起，表明它對網頁中所有未單獨設置的元素起作用。
【例2.3】下面通過實例設置未訪問的連結文字的顏色。2-9.html代碼如下：
實例位置：光碟\MR\源碼\第2章\2.3
＜html＞
＜head＞
＜title＞頁面的連結文字＜/title＞
＜/head＞
＜body text="#6699FF"
link="#FF0000"＞
＜center＞
設置文字的連結效果
＜br/＞＜br/＞
＜a href="http://www.mingribook.com"＞連結文字＜/a＞
＜br/＞＜br/＞
＜/center＞
＜/body＞
＜/html＞
Step 1 運行這段代碼，可以看到連結文字的顏色已經不是預設的藍色，而是設置成了紅色，如圖2.17所示。
圖 2.17 設置連結文字的顏色
Step 2 在上面的代碼中，添加正在訪問的文字顏色設置，這一屬性需要用到alink參數。添加後的2-10.html代碼如下：
＜html＞
＜head＞
＜title＞頁面的連結文字＜/title＞
＜/head＞
＜body text="#6699FF" link="#FF0000"
alink="#99FF00"＞
＜center＞
設置文字的連結效果
＜br/＞＜br/＞
＜a href="http://www.mingribook.com"＞連結文字＜a/＞
＜br/＞＜br/＞
＜a href="http://www.mrbccd.com"＞正在訪問的連結＜/a＞
＜/center＞
＜/body＞
＜/html＞
運行這段代碼之後，按一下連結文字“正在訪問的連結”，會發現按下滑鼠時，文字顏色變成了綠色，如圖2.18所示。
圖 2.18 設置正在訪問的文字顏色
Step 3 在上面的代碼中，繼續使用vlink參數設置訪問後的文字連結顏色。2-11.html實現的代碼如下：
＜html＞
＜head＞
＜title＞頁面的連結文字＜/title＞
＜meta
http-equiv="Content-Type" content="text/html;charset=gb2312"＞
＜/head＞
＜body text="#6699FF"
link="#FF0000" alink="#99FF00" vlink="#CCCCCC"＞
＜center＞
設置文字的連結效果
＜br/＞＜br/＞
＜a href="http://www.mingribook.com"＞連結文字＜/a＞
＜br/＞＜br/＞
＜a href="2-11.html"＞訪問後的連結＜/a＞
＜/center＞
＜/body＞
＜/html＞
運行這段代碼之後，當按一下“訪問後的連結”文字連結後，同時也就完成了頁面的跳轉（這裡設置的是跳轉回本頁）。這時會看到訪問過的連結文字顏色變成了灰色，如圖2.19所示。
圖 2.19 設置訪問後的文字連結顏色
2.5.5 邊距——margin
在網頁的製作過程中，還可以定義頁面的空白，也就是內容與流覽器邊框之間的距離。其中包括上邊框和左邊框，設定合適的邊距可以防止網頁外觀過於擁擠。
語法：
＜body topmargin=上邊距的值leftmargin=左邊距的值＞
在預設情況下，邊距的值是以圖元為單位的。
實例代碼：
＜html＞
＜head＞
＜title＞設置邊距＜/title＞
＜/head＞
＜body topmargin="60"
leftmargin="50"＞
設置頁面的上邊距為60圖元
＜br/＞
設置頁面的左邊距為50圖元
＜/body＞
＜/html＞
運行此段代碼，可以看到設置邊距前後的對比效果。設置邊距前的效果如圖2.20所示，設置自訂邊距效果如圖2.21所示。
圖 2.20 預設的頁面的效果
圖 2.21 設置邊距的效果
2.6 程式師的備忘錄——注釋＜!----＞
在網頁中，除了以上這些基本元素外，還包含一種不顯示在頁面中的元素，那就是代碼的注釋文字。適當的注釋可以幫助用戶更好地瞭解網頁中各個模組的劃分，也有助於以後對代碼的檢查和修改。給代碼加注釋是一種很好的程式設計習慣。
語法：
＜!--注釋的文字--＞
注釋文字的標記很簡單，只需要在語法中“注釋的文字”的位置上添加需要的內容即可。
2.7 上機實踐
2.7.1 創建基本的HTML網頁
題目描述
本節中創建一個基本的HTML網頁，在這個HTML網頁中完成對明日科技公司的簡介。本例的運行效果如圖2.22所示。
圖 2.22 明日科技公司簡介
技術指導
具體步驟如下：
Step 1 創建一個html檔，將其命名成slyl.html。
Step 2 在＜title＞...＜/title＞標籤中定義檔的標題為“明日科技公司簡介”。
Step 3 在頁面的主題標記內，將頁面的背景圖片、文字的顏色設置成黑色，上邊距、左右邊距都設置成10圖元。其實現的代碼如下：
＜body background="images/1.png"
text="#333333" topmargin="10" leftmargin="10"
rightmargin="10"＞
吉林省明日科技有限公司是一家以電腦軟體技術為核心的高科技型企業，公司創建於2000年12月，是專業的應用軟體發展商和服務提供者。多年來始終致力於行業管理軟體發展、數位化出版物開發製作、電腦網路系統綜合應用、行業電子商務網站開發等領域，涉及生產、管理、控制、倉貯、物流、行銷、服務等行業。公司擁有軟體發展和項目實施方面的資深專家和學習型技術團隊，公司的開發團隊不僅是開拓進取的技術實踐者，更致力於成為技術的普及和傳播者，並以軟體工程為指導思想建立了軟體研發和銷售服務體系。公司基於長期研發投入和豐富的行業經驗，本著“讓客戶輕鬆工作，同客戶共同成功”的奮鬥目標，努力發揮“專業、易用、高效”的產品優勢，竭誠為大使用者提供優質的產品和服務。＜br/＞＜br/＞
企業宗旨：為企業服務，打造企業智慧管理平臺，改善企業的管理與運作過程，提高企業效率，降低管理成本，增強企業核心競爭力。為企業快速發展提供源動力。＜br/＞＜br/＞
企業精神：博學、創新、求實、篤行＜br/＞＜br/＞
公司理念：以高新技術為依託，戰略性地開發具有巨大市場潛力的高價值的產品。＜br/＞＜br/＞
公司遠景：成為擁有核心技術和核心產品的高科技公司，在某些領域具有領先的市場地位。＜br/＞＜br/＞
核心價值觀：永葆創業激情、每一天都在進步、容忍失敗，鼓勵創新、充分信任、平等交流。
＜/body＞
Step 4 通過CSS樣式的style標記，去除重複的背景圖。其實現的代碼如下：
＜style type="text/css"＞
body{background-repeat:no-repeat}
＜/style＞
2.7.2 設定自動刷新
題目描述
本練習使用HTTP-EQUIV屬性中的REFRESH，能夠設定頁面的自動刷新，就是每隔幾秒的時間刷新頁面的內容。如常用的互聯網現場圖文直播、論壇消息的自動刷新，效果如圖2.23所示。
圖 2.23 設定自動刷新
技術指導
HTTP-EQUIV傳送HTTP通信協議的標頭，REFRESH代表刷新，CONTENT中寫下刷新間隔的秒數。本上機實踐的關鍵代碼參考如下：
＜html＞
＜head＞
＜title＞頁面的自動刷新＜/title＞
＜meta http-equiv="refresh"
content="180"＞
＜/head＞
＜body＞
＜p＞本頁面每隔三分鐘自動刷新一次＜/p＞
＜/body＞
＜/html＞
2.8 小結
本章主要對HTML檔的主體標記中的功能進行了詳細的介紹，包括HTML頭部標記、標題標記、元資訊標記、基底網址標記、頁面的注釋標記。對標記中的主要屬性以實例的形式進行了詳細的介紹。這些標記和屬性是HTML的“基石”，要想建立HTML的大廈，就要好好的學好本章的“基石”。
2.9 習題
選擇題
1.設置連結顏色使用哪種標記？（____）
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.在網頁中，必須使用（____）標記來完成超級連結。
A.＜a＞...＜/a＞
B.＜p＞...＜/p＞
C.＜link＞...＜/link＞
D.＜li＞...＜/li＞
5.用HTML標記語言編寫一個簡單的網頁，網頁最基本的結構是（____）。
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.若要設計網頁的背景圖形為bg.jpg，以下標記中，正確的是（____）。
A.＜body background="bg.jpg"＞
B.＜body bground="bg.jpg"＞
C.＜body image="bg.jpg"＞
D.＜body bgcolor="bg.jpg"＞
填空題
1.頭部標記是指________。
2.元資訊標記是________。
0 留言:
發佈留言