制作網(wǎng)頁(yè)時(shí)，經(jīng)常需要設(shè)置頁(yè)面的基本信息，如頁(yè)面的標(biāo)題、作者、和其他文檔的關(guān)系等。為此HTML提供了一系列的標(biāo)記，這些標(biāo)記通常都寫在<head>標(biāo)記內(nèi)，因此被稱為頭部相關(guān)標(biāo)記。
1．<title></title>標(biāo)記
<title>標(biāo)記用于定義HTML頁(yè)面的標(biāo)題，即給網(wǎng)頁(yè)取一個(gè)名字，必須位于<head>標(biāo)記之內(nèi)。一個(gè)HTML文檔只能含有一對(duì)<title>標(biāo)記，<title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中。其基本語(yǔ)法格式如下：
<title>網(wǎng)頁(yè)標(biāo)題名稱</title>
|
了解了頁(yè)面標(biāo)題標(biāo)記<title>,下面通過(guò)一個(gè)簡(jiǎn)單的案例來(lái)演示<title>標(biāo)記的用法，如例1-3，效果如圖1-16所示。
例1-3 example03.htm
<!doctype html>
<html> <head> <title>卡梅隆</title> <meta charset="utf-8"> </head> <body> 詹姆斯-卡梅隆 代表作：《終結(jié)者》、《泰坦尼克號(hào)》、《阿凡達(dá)》、《真實(shí)的謊言》等 評(píng)價(jià)： 他在拍攝地是個(gè)苛求、專橫的“暴君”；在家庭中是個(gè)不會(huì)體貼 并且見(jiàn)異思遷的丈夫；在好萊塢同行看來(lái)，卡梅隆是一個(gè)偏執(zhí)狂和燒錢的機(jī)器。 但不能否認(rèn)，卡梅隆是個(gè)天才。 </body> </html> |
圖1-16設(shè)置網(wǎng)頁(yè)標(biāo)題標(biāo)記
2. <meta />標(biāo)記
<meta/>標(biāo)記用于定義頁(yè)面的元信息，可重復(fù)出現(xiàn)在<head>頭部標(biāo)記中，在HTML中是一個(gè)單標(biāo)記。<meta />標(biāo)記本身不包含任何內(nèi)容，通過(guò)“名稱/值”的形式成對(duì)的使用其屬性可定義頁(yè)面的相關(guān)參數(shù)，例如為搜索引擎提供網(wǎng)頁(yè)的關(guān)鍵字、作者姓名、內(nèi)容描述，以及定義網(wǎng)頁(yè)的刷新時(shí)間等。<meta />標(biāo)記常用的幾組設(shè)置，具體語(yǔ)法格式如下：
<meta name="名稱" content="值" /> |
<meta http-equiv="名稱" content="值" />
|
例如以下設(shè)置代碼：
| （1）設(shè)置網(wǎng)頁(yè)關(guān)鍵字代碼：<meta name="keywords" content="java培訓(xùn)" /> |
（2）設(shè)置網(wǎng)頁(yè)描述代碼：<meta name="description" content="IT培訓(xùn)" /> |
| （3）設(shè)置字符集格式代碼： <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| （4）設(shè)置頁(yè)面自動(dòng)刷新與跳轉(zhuǎn)： <meta http-equiv="refresh" content="10;url=http://www.itcast.cn" /> 下面通過(guò)一個(gè)案例1-4來(lái)演示<meta />標(biāo)記的用法，如例1-4所示。 |
例1-4 example04.htm
<!doctype html>
<html> <head> <title>meta標(biāo)記使用</title> <meta charset="utf-8"> <meta name="keywords" content="java培訓(xùn),.net培訓(xùn),PHP培訓(xùn),C/C++培訓(xùn),iOS培訓(xùn),網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn),平面設(shè)計(jì)培訓(xùn),UI設(shè)計(jì)培訓(xùn)" /> <meta name="description" content="IT培訓(xùn)的龍頭老大,口碑最好的java培訓(xùn)、.net培訓(xùn)、php培訓(xùn)、C/C++培訓(xùn),iOS培訓(xùn)，網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn)，平面設(shè)計(jì)培訓(xùn)，UI設(shè)計(jì)培訓(xùn)機(jī)構(gòu)，問(wèn)天下java培訓(xùn)、.net培訓(xùn)、php培訓(xùn)、C/C++培訓(xùn),iOS培訓(xùn)，網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn)，平面設(shè)計(jì)培訓(xùn)，UI設(shè)計(jì)培訓(xùn)機(jī)構(gòu)誰(shuí)與爭(zhēng)鋒? " /> <meta http-equiv="refresh" content="10;url=http://www.itcast.cn" /> </head> <body> </body> </html> |
3.<link>標(biāo)記
一個(gè)頁(yè)面往往需要多個(gè)外部文件的配合，在<head>中使用<link>標(biāo)記可引用外部文件，一個(gè)頁(yè)面允許使用多個(gè)<link>標(biāo)記引用多個(gè)外部文件。其基本語(yǔ)法格式如下：
<link rel="stylesheet" type="text/css" href="style.css" /> |
<link>標(biāo)記常用屬性，如表1-1所示：
表1-1 link標(biāo)記常用屬性
| 屬性名 | 常用屬性值 | 描述 |
| href | URL | 指定引用外部文檔的地址 |
| rel | stylesheet | 指定當(dāng)前文檔與引用外部文檔的關(guān)系，該屬性值通常為stylesheet，表示定義一個(gè)外部樣式表 |
| type | text/css | 引用外部文檔的類型為CSS樣式表 |
4.<style></style>標(biāo)記
<style>標(biāo)記用于為HTML文檔定義樣式信息，位于<head>頭部標(biāo)記中，其基本語(yǔ)法格式如下：
| <style 屬性=”屬性值”>樣式內(nèi)容</style> |
在HTML中使用style標(biāo)記時(shí)，常常定義其屬性為type，相應(yīng)的屬性值為text/css，表示使用內(nèi)嵌式的CSS樣式。
下面通過(guò)案例1-5來(lái)演示<style>標(biāo)記的用法,最終效果如圖1-17所示。
例1-5 example05.htm
| <!doctype html> <html> <head> <meta charset="utf-8"> <title>style標(biāo)記的使用</title> <style type="text/css"> h2{color:red;} p{color:blue;} </style> </head> <body> <h2>設(shè)置h2標(biāo)題為紅色字體</h2> <p>設(shè)置p段落為藍(lán)色字體</p> </body> </html> |
圖1-17 style標(biāo)記