歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> HTML中<meta>標簽如何正確使用

HTML中<meta>標簽如何正確使用

日期:2017/3/1 9:09:59   编辑:Linux編程

  如果我們在浏覽器中按下F12或者Ctrl+shift+J,便可以打開開發者工具,在element中即可看到<head>元素中有不少<meta>元素。對於網頁而言,<meta>元素是必不可少的。我們在創建一個html5文檔時,就會發現類似於<meta charset="UTF-8">這樣的標簽,來規定解析文檔的字符類型。那麼,它還有哪些作用呢?下面,我將一探究竟!我會通過下面幾個部分來講解,如果你希望直接看後面部分的內容,可以直接點擊下面的文字。

  • <meta>標簽的基本介紹
  • <meta>標簽中的屬性列舉
  • <meta>標簽中的name屬性應用
  • <meta>標簽中的http-equiv屬性應用

第一部分:<meta>標簽的基本介紹

  <meta>標簽是HTML網頁源代碼中的一個重要的html標簽。META便簽用來描述一個HTML網頁文檔的屬性,例如作者、日期和時間、關鍵詞、頁面刷新。除此之外,<meta>標簽用於搜索引擎優化(seo)。它位於HTML文檔中<head>元素內,雖然它提供的信息用戶不可見,但它卻是文檔最基本的元信息。

第二部分:<meta>標簽中的屬性列舉

  <meta>標簽中屬性我們可以分為必選的屬性和可選的屬性。

1.必選屬性:content屬性。該屬性是為了定義與http-equiv或者name屬性相關的元信息,其中的內容是為了便於搜索機器人查找信息和分類使用的。

2.可選屬性:

  • name屬性。該屬性主要用於描述網頁。name屬性的值可以有:author、description、keywords、generator等等
  • http-equiv屬性。該屬性相當於http的頭文件作用,可以向浏覽器返回一些有用的信息,以幫助正確和精確的顯示內容。http-equiv屬性的值可以有content-type、expires、refresh等等。

第三部分:<meta>標簽中的name屬性應用

  A keywords(關鍵字:告訴浏覽器你的網頁的關鍵字是什麼)

  B description(描述:告訴浏覽器你的網頁的主要內容是什麼)

    這兩個屬性值我放在一起說,是因為它們的作用非常相似。因為設置這兩個值可以幫助你的主頁被各大搜索引擎登陸,提高網站的訪問量。於是這兩個屬性值的設置是格外重要的。因為按照搜索引擎的工作原理,搜索引擎會首先排除機器人自動檢索頁面中的keywords和description,並將其加入自己的數據庫,然後根據關鍵詞的密度將網站排序

我們可以像下面這樣使用:

1 2 <meta name="keywords" content="關於meta標簽,網頁,918之初"> <meta name="description" content="HTML中<meta>標簽如何正確使用">

  值得注意的是,name一定要和content屬性配合使用。

  C robot(機器人向導:用於高速機器人哪些頁面需要索引,哪些頁面不需要索引)

  該屬性的值有all、none、index、noindex、follow和nofollow。默認為all。

  設定為all:文件將被檢索,且頁面上的鏈接可以被查詢;

  設定為none:文件將不被檢索,且頁面上的鏈接不可以被查詢;

  設定為index:文件將被檢索;

  設定為follow:頁面上的鏈接可以被查詢;

  設定為noindex:文件將不被檢索,但頁面上的鏈接可以被查詢;

  設定為nofollow:文件將不被檢索,頁面上的鏈接可以被查詢。

  我們可以像下面這樣使用:

1 <meta name="robot" content="none">

  即搜索機器人在自動檢索頁面時,將不會檢索到這個頁面。

  D author(作者:用於告訴搜索機器人網頁的作者)

1 <meta name="author" content="somebody">

第四部分:<meta>標簽中的http-equiv屬性應用

A.content-type(文檔內容類型:用於設定文檔的類型和字符集)

  這是meta便簽中最為常見的一中設置,在制作網頁時,我們在純HTML代碼可看到它是定義你的網頁的語言,當浏覽器訪問到你的網頁時,浏覽器便會根據此來識別並進行相應的設定,否則,浏覽器就會使用默認的設定方法。

? 1 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

B.expires(期限:可以用於設定網頁的到期期限)

  一旦網頁過期,那麼就必須在服務器上重新刷新而不能通過緩存獲取網頁。值得注意的是:其中設置的時間必須是GMT格式。

1 <meta http-equiv="expires" content="Fri,12 Jan 2001 15:15:15 GMT">

  如果你在浏覽器中設置浏覽器網頁先從本地緩存中的頁面獲取,那麼當浏覽時,就會只從本地緩存獲取,直到meta中設置的時間到期,浏覽器才會獲取新頁面。

C.pragma(cashe模式:即是否從緩存中訪問網頁內容)

1 <meta http-equiv="pragma" content="no-cache">

 這行代碼表示不從緩存獲取頁面,於是訪問者將無法脫機工作。

D.refresh(刷新:等待一定時間自動刷新或跳轉到其他url)

1 <meta http-equiv="refresh" content="1; url=https://www.linuxidc.com"/>

Copyright © Linux教程網 All Rights Reserved