首頁(yè)技術(shù)文章正文

HTML文檔頭部的title標(biāo)簽和meta有什么作用？

更新時(shí)間:2023-04-25 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

制作網(wǎng)頁(yè)時(shí)，經(jīng)常需要設(shè)置網(wǎng)頁(yè)的基本信息，如網(wǎng)頁(yè)的標(biāo)題、作者等。為此，HTML提供了一系列設(shè)置網(wǎng)頁(yè)信息的標(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頁(yè)面的標(biāo)題，也就是為網(wǎng)頁(yè)取一個(gè)名稱。在網(wǎng)頁(yè)結(jié)構(gòu)中，<title>標(biāo)簽必須位于<head>標(biāo)簽內(nèi)。一個(gè)HTML.文檔只能含有一個(gè)<title>標(biāo)簽，<title></title>標(biāo)簽之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中。例如，將某個(gè)頁(yè)面標(biāo)題設(shè)置為“輕松學(xué)習(xí)HTML.5”，示例代碼如下：

<title>輕松學(xué)習(xí)HIML.5</title>

上述代碼對(duì)應(yīng)的頁(yè)面效果如下圖：
1682410630693_輕松學(xué)習(xí).png

(2)<meta>標(biāo)簽

<meta>標(biāo)簽用于定義頁(yè)面的元信息(元信息不會(huì)顯示在最終的頁(yè)面效果中)，可重復(fù)出現(xiàn)在標(biāo)簽中。在HTML中,<meta>標(biāo)簽是一個(gè)單標(biāo)簽，本身不包含任何內(nèi)容，僅表示網(wǎng)頁(yè)的相關(guān)信息。通過(guò)標(biāo)簽的屬性，可以定義頁(yè)面的相關(guān)參數(shù)。

例如，為搜索引擎提供網(wǎng)頁(yè)的關(guān)鍵字、作者姓名、內(nèi)容描述，以及定義網(wǎng)頁(yè)的刷新時(shí)間等。下面介紹<meta/>標(biāo)簽常用的幾組設(shè)置，具體如下。

<meta name-”名稱”content-”值”>：在<meta>標(biāo)簽中使用 name 屬性和 content 屬性可以為搜索引擎提供信息。其中，name屬性提供搜索內(nèi)容名稱，content屬性提供對(duì)應(yīng)的搜索內(nèi)容值，這些屬性的具體應(yīng)用如下。

設(shè)置網(wǎng)頁(yè)關(guān)鍵字，如某圖像網(wǎng)站的關(guān)鍵字設(shè)置，示例代碼如下：

    <meta name=“keywoxds”content=“千圖網(wǎng)，免費(fèi)素材下載，千圖網(wǎng)免費(fèi)素材圖庫(kù)，矢量圖，矢量圖庫(kù)，圖像素材，網(wǎng)頁(yè)素材，
免費(fèi)素材，PS素材，網(wǎng)站素材，設(shè)計(jì)模板，設(shè)計(jì)素材，網(wǎng)頁(yè)模板免費(fèi)下載，千圖，素材中國(guó)，素材，免費(fèi)設(shè)計(jì)，圖像”/>

在上述示例代碼中，nare屬性的屬性值為"keywonds”，該屬性值用于定義搜索內(nèi)容名稱為網(wǎng)頁(yè)關(guān)鍵字;content 屬性的屬性值用于定義關(guān)鍵字的具體內(nèi)容，多個(gè)關(guān)鍵字內(nèi)容之間可以用“，”分隔。

設(shè)置網(wǎng)頁(yè)描述，如某圖像網(wǎng)站的描述信息設(shè)置，示例代碼如下：

    <meta name=”description”content=”專注免費(fèi)設(shè)計(jì)素材下裁的網(wǎng)站！提供矢量圖素材，矢量青景圖像，矢量圖庫(kù)，還有
psd素材，PS素材，設(shè)計(jì)模板，設(shè)計(jì)素材，PPT素材，以及網(wǎng)頁(yè)素材，網(wǎng)站素材，網(wǎng)頁(yè)圖標(biāo)免費(fèi)下載”/>

在上述示例代碼中，name屬性的屬性值為“deseription”，該屬性值用于定義搜索內(nèi)容名稱為網(wǎng)頁(yè)描述;comtent 屬性的屬性值用于定義描述的具體內(nèi)容。網(wǎng)頁(yè)描述的文字不必過(guò)多，能夠描述清晰即可。

設(shè)置網(wǎng)頁(yè)作者，如可以為網(wǎng)站增加作者信息，示例代碼如下：

<meta name-"author" content="網(wǎng)絡(luò)部"/>

在上述示例代碼中，name屬性的屬性值為”author”，該屬性值用于定義搜索內(nèi)容名稱為網(wǎng)頁(yè)作者;content屬性的屬性值用于定義具體的作者信息。

<meta http-equiv=”名稱”content=”值”>在<meta/>標(biāo)簽中，http-equiv 屬性和content 屬性可以設(shè)置服務(wù)器發(fā)送給瀏覽器的HTTP頭部信息，為瀏覽器顯示該頁(yè)面提供相關(guān)的參數(shù)標(biāo)準(zhǔn)。其中，http-equiv屬性提供參數(shù)類型，content屬性提供對(duì)應(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”，兩個(gè)屬性值之間用“：”隔開。其中，“text/html”用于說(shuō)明當(dāng)前文檔類型為HIML“charset=gbk”用于說(shuō)明文檔字符集為GBK(中文編碼)。

目前最常用的國(guó)際化字符集編碼格式是UTF-8，常用的中文字符集編碼格式主要是GBK和GB2312。當(dāng)用戶使用的字符集編碼格式與當(dāng)前瀏覽器不匹配時(shí)，網(wǎng)頁(yè)內(nèi)容就會(huì)出現(xiàn)亂碼。新版本的HTML.5簡(jiǎn)化了字符集的寫法，示例代碼如下：

<meta charset="utf-g">

設(shè)置頁(yè)面自動(dòng)刷新與跳轉(zhuǎn)，如定義某個(gè)頁(yè)面10秒后跳轉(zhuǎn)至百度首頁(yè)，示例代碼如下：

<meta http-equiv""refresh" content="10; url- httpa://sww.baidu.com/"/>

在上述示例代碼中，http-equiv屬性的屬性值為“refresh”，content屬性的屬性值為數(shù)值和URL。兩個(gè)屬性值之間用“：”隔開，分別用于指定跳轉(zhuǎn)時(shí)間和目標(biāo)頁(yè)面的URL。跳轉(zhuǎn)時(shí)間默認(rèn)以秒為單位。


分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！