更新時間:2023年04月26日14時00分 來源:傳智教育 瀏覽次數(shù):
制作網(wǎng)頁時,經(jīng)常需要設(shè)置網(wǎng)頁的基本信息,如網(wǎng)頁的標(biāo)題、作者等。為此,HTML提供了一系列設(shè)置網(wǎng)頁信息的標(biāo)簽,這些標(biāo)簽通常都寫在
<head>標(biāo)簽內(nèi),也被稱為HTML.文檔頭部相關(guān)標(biāo)簽。下面將介紹常用的HTML文檔頭部標(biāo)簽中的<title>和<meta>標(biāo)簽。
(1)<title>標(biāo)簽
<title>標(biāo)簽用于設(shè)置HTML頁面的標(biāo)題,也就是為網(wǎng)頁取一個名稱。在網(wǎng)頁結(jié)構(gòu)中,<title>標(biāo)簽必須位于<head>標(biāo)簽內(nèi)。一個HTML.文檔只能含有一個<title>標(biāo)簽,<title></title>標(biāo)簽之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中。例如,將某個頁面標(biāo)題設(shè)置為“輕松學(xué)習(xí)HTML.5”,示例代碼如下:
<title>輕松學(xué)習(xí)HIML.5</title>
上述代碼對應(yīng)的頁面效果如下圖:
(2)<meta>標(biāo)簽
<meta>標(biāo)簽用于定義頁面的元信息(元信息不會顯示在最終的頁面效果中),可重復(fù)出現(xiàn)在標(biāo)簽中。在HTML中,<meta>標(biāo)簽是一個單標(biāo)簽,本身不包含任何內(nèi)容,僅表示網(wǎng)頁的相關(guān)信息。通過標(biāo)簽的屬性,可以定義頁面的相關(guān)參數(shù)。
例如,為搜索引擎提供網(wǎng)頁的關(guān)鍵字、作者姓名、內(nèi)容描述,以及定義網(wǎng)頁的刷新時間等。下面介紹<meta/>標(biāo)簽常用的幾組設(shè)置,具體如下。
<meta name-”名稱”content-”值”>:在<meta>標(biāo)簽中使用 name 屬性和 content 屬性可以為搜索引擎提供信息。其中,name屬性提供搜索內(nèi)容名稱,content屬性提供對應(yīng)的搜索內(nèi)容值,這些屬性的具體應(yīng)用如下。
設(shè)置網(wǎng)頁關(guān)鍵字,如某圖像網(wǎng)站的關(guān)鍵字設(shè)置,示例代碼如下:
<meta name=“keywoxds”content=“千圖網(wǎng),免費素材下載,千圖網(wǎng)免費素材圖庫,矢量圖,矢量圖庫,圖像素材,網(wǎng)頁素材, 免費素材,PS素材,網(wǎng)站素材,設(shè)計模板,設(shè)計素材,網(wǎng)頁模板免費下載,千圖,素材中國,素材,免費設(shè)計,圖像”/>
在上述示例代碼中,nare屬性的屬性值為"keywonds”,該屬性值用于定義搜索內(nèi)容名稱為網(wǎng)頁關(guān)鍵字;content 屬性的屬性值用于定義關(guān)鍵字的具體內(nèi)容,多個關(guān)鍵字內(nèi)容之間可以用“,”分隔。
設(shè)置網(wǎng)頁描述,如某圖像網(wǎng)站的描述信息設(shè)置,示例代碼如下:
<meta name=”description”content=”專注免費設(shè)計素材下裁的網(wǎng)站!提供矢量圖素材,矢量青景圖像,矢量圖庫,還有 psd素材,PS素材,設(shè)計模板,設(shè)計素材,PPT素材,以及網(wǎng)頁素材,網(wǎng)站素材,網(wǎng)頁圖標(biāo)免費下載”/>
在上述示例代碼中,name屬性的屬性值為“deseription”,該屬性值用于定義搜索內(nèi)容名稱為網(wǎng)頁描述;comtent 屬性的屬性值用于定義描述的具體內(nèi)容。網(wǎng)頁描述的文字不必過多,能夠描述清晰即可。
設(shè)置網(wǎng)頁作者,如可以為網(wǎng)站增加作者信息,示例代碼如下:
<meta name-"author" content="網(wǎng)絡(luò)部"/>
在上述示例代碼中,name屬性的屬性值為”author”,該屬性值用于定義搜索內(nèi)容名稱為網(wǎng)頁作者;content屬性的屬性值用于定義具體的作者信息。
<meta http-equiv=”名稱”content=”值”>在<meta/>標(biāo)簽中,http-equiv 屬性和content 屬性可以設(shè)置服務(wù)器發(fā)送給瀏覽器的HTTP頭部信息,為瀏覽器顯示該頁面提供相關(guān)的參數(shù)標(biāo)準(zhǔn)。其中,http-equiv屬性提供參數(shù)類型,content屬性提供對應(yīng)的參數(shù)值,這些屬性的具體應(yīng)用如下。設(shè)置字符集,如某圖像官網(wǎng)字符集的設(shè)置,示例代碼如下:
<meta http-equiva"Content-Type" content="text/html; charset=gbk"/>
在上述示例代碼中,hitp-epuiv屬性的屬性值為“Content-Type”.content屬性的屬性值為“test/html”和“charset=gbk”,兩個屬性值之間用“:”隔開。其中,“text/html”用于說明當(dāng)前文檔類型為HIML“charset=gbk”用于說明文檔字符集為GBK(中文編碼)。
目前最常用的國際化字符集編碼格式是UTF-8,常用的中文字符集編碼格式主要是GBK和GB2312。當(dāng)用戶使用的字符集編碼格式與當(dāng)前瀏覽器不匹配時,網(wǎng)頁內(nèi)容就會出現(xiàn)亂碼。新版本的HTML.5簡化了字符集的寫法,示例代碼如下:
<meta charset="utf-g">
設(shè)置頁面自動刷新與跳轉(zhuǎn),如定義某個頁面10秒后跳轉(zhuǎn)至百度首頁,示例代碼如下:
<meta http-equiv""refresh" content="10; url- httpa://sww.baidu.com/"/>
在上述示例代碼中,http-equiv屬性的屬性值為“refresh”,content屬性的屬性值為數(shù)值和URL。兩個屬性值之間用“:”隔開,分別用于指定跳轉(zhuǎn)時間和目標(biāo)頁面的URL。跳轉(zhuǎn)時間默認以秒為單位。