html中meta標籤

語言: CN / TW / HK

html中meta標籤

meta標籤的作用

meta標籤用於定義頁面的元資訊,可重複出現再頭部標籤中。它是單標籤,通過“名稱/值”的形式成對使用其屬性。
meta標籤主要分為兩大類,一類對頁面進行設定,另一類對搜尋引擎進行設定。

  • 對頁面進行設定的格式:<meta http-equiv="名稱" content="值"/>
  • 對搜尋引擎進行設定的格式:<meta name="名稱" content="值"/>

http-equiv/content

http-equiv/content屬性對用於設定重新整理、失效期、 cookie等頁面資訊。

名稱 描述
Refresh 時間值;url地址 用於設定頁面重新整理時間和跳轉地址,時間單位是秒,兩個值之間用分號“;”分隔
Expires 到期時間 用於設定網頁的失效期,這個時間必須為GMT時間,即按照“星期 日 月 年 時間 GMT”的格式
Set - Cookie Cookie值;失效期;路徑 用於設定cookie並進行頁面快取,這裡失效期仍然為GMT格式,三個引數值之間用分號“;”分隔

用法示例:

  • 頁面停留20秒後跳轉到www.baidu.com
    <meta http-equiv="Refresh" content="20;Url=www.baidu.com"/>

  • 網頁於2021年7月26號8點過期
    <meta http-equiv ="Expires" content="Thur,26 Jul 2021 08:00:00 GMT"/>

  • 設定cookie並進行頁面快取

<meta http-equiv ="Set-Cookie" content="cookievalue = xxx; expires= Thur,26 Jul 2021 08:00:00 GMT; path=/">

name/content

http-equiv/content屬性對用於設定關鍵字、簡介、作者、機器人嚮導、 版權、編輯器等。

名稱 描述
Author 作者資訊 用於設定作者姓名或相關資訊,多個值之間用逗號“,”分隔。
Description 描述文字 用於設定網頁的描述,搜尋引擎會把這個描述文字顯示在搜尋結果中。
keywords 關鍵字 用於設定關鍵字,多個關鍵字之間用逗號“;”分隔。
generator 編輯器型別 用於說明網頁是什麼編輯器生成的。
revised 修改資訊 用於說明網頁最後修改的人和時間等,多個之間用逗號“,”分隔。

用法示例:

  • 用於標註網頁的作者和Email
    <meta name = "Author" Content = "劉明,[email protected]" />

  • 為搜尋引擎提供網站簡介
    <meta name ="Description" Content ="網站簡介"/>

  • 為搜尋引擎提供關鍵字
    <meta name="keywords" content="漫步時尚廣場,時尚,購物,影視,餐飲"/>

  • 為搜尋引擎提供編輯器型別
    <meta name="generator" content="Dreamweaver CC2020"/>

  • 為搜尋引擎提供提供最新版本資訊
    <meta name="revised" content="David,2021/1/25"/>

charset

charset是HTML5新增的字元編碼屬性。屬性取值必須是標準字符集的名稱,常用的字元編碼如下:

  • ISO-8859-1:國際標準化組織針對不同的字母表/語言定義的標準字符集( 拉丁字母表的字元編碼),是瀏覽器預設的字符集

  • utf-8:Unicode 聯盟開發的標準,utf-8 是網頁和電子郵件的首選編碼。

  • gb2312:資訊交換用漢字編碼字符集,中國國家標準總局1980年釋出。適用於漢字處理、漢字通訊等系統之間的資訊交換。
    用法示例:

  • 設定utf-8字元編碼標準
    <meta charset=utf-8/>

練習

在Begin - End區域內補充程式碼

具體要求:

  1. 在之間新增網頁標題的設定,標題文字為“設定元資訊”;
  2. 在之間為瀏覽器提供10秒後跳轉至百度首頁https://www.baidu.com/的元資訊;
  3. 在之間為瀏覽器設定頁面失效期,失效時間是2021年12月31日8點整;
  4. 在之間為搜尋引擎設定網頁關鍵詞,關鍵詞分別為“前端”、“元資訊”、“網頁跳轉”、“失效期”、“搜尋關鍵詞”。
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <!-- ********* Begin ********* -->




  <!-- ********* End ********* -->
 </head>
 <body>
  <h1 align="center">元資訊的設定</h1>  
 </body> 
</html>

參考答案

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <!-- ********* Begin ********* -->
<title>設定元資訊</title>
	 <meta http-equiv="Refresh" content="10;Url=https://www.baidu.com/"/>
     <meta http-equiv="Expires" content="Fri,31 Dec 2021 08:00:00 GMT"/>
	 <meta name="keywords" content="前端,元資訊,網頁跳轉,失效期,搜尋關鍵詞"/>
  <!-- ********* End ********* -->
 </head>
 <body>
  <h1 align="center">元資訊的設定</h1>  
 </body> 
</html>