HTML中標籤如何正確使用

時間 2019-11-11

標籤 html 標籤如何正確使用欄目 HTML 简体版

原文原文鏈接

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

　　若是咱們在瀏覽器中按下F12或者Ctrl+shift+J，即可以打開開發者工具，在element中便可看到<head>元素中有很多<meta>元素。對於網頁而言，<meta>元素是必不可少的。咱們在建立一個html5文檔時，就會發現相似於<meta charset="UTF-8">這樣的標籤，來規定解析文檔的字符類型。那麼，它還有哪些做用呢？下面，我將一探究竟！我會經過下面幾個部分來說解，若是你但願直接看後面部分的內容，能夠直接點擊下面的文字。javascript

<meta>標籤的基本介紹
<meta>標籤中的屬性列舉
<meta>標籤中的name屬性應用
<meta>標籤中的http-equiv屬性應用
<meta>標籤中在移動端的使用

第一部分：<meta>標籤的基本介紹

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

第二部分：<meta>標籤中的屬性列舉

　　<meta>標籤中屬性咱們能夠分爲必選的屬性和可選的屬性。html5

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

2.可選屬性：web

name屬性。該屬性主要用於描述網頁。name屬性的值能夠有：author、description、keywords、generator等等
http-equiv屬性。該屬性至關於http的頭文件做用，能夠向瀏覽器返回一些有用的信息，以幫助正確和精確的顯示內容。http-equiv屬性的值能夠有content-type、expires、refresh等等。

第三部分：<meta>標籤中的name屬性應用

　　A keywords（關鍵字：告訴瀏覽器你的網頁的關鍵字是什麼）

　　B description（描述：告訴瀏覽器你的網頁的主要內容是什麼）

　　　　這兩個屬性值我放在一塊兒說，是由於它們的做用很是類似。由於設置這兩個值能夠幫助你的主頁被各大搜索引擎登錄，提升網站的訪問量。因而這兩個屬性值的設置是格外重要的。由於按照搜索引擎的工做原理，搜索引擎會首先排除機器人自動檢索頁面中的keywords和description，並將其加入本身的數據庫，而後根據關鍵詞的密度將網站排序數據庫

咱們能夠像下面這樣使用：瀏覽器

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

　　注意：keywords的content內容要限制在36個字。緩存

　　　　　 description的content內容要限制在76個字。服務器

　　值得注意的是，name必定要和content屬性配合使用。app

　　C robot（機器人嚮導：用於高速機器人哪些頁面須要索引，哪些頁面不須要索引）

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

　　設定爲all：文件將被檢索，且頁面上的連接能夠被查詢；

　　設定爲none：文件將不被檢索，且頁面上的連接不能夠被查詢；

　　設定爲index：文件將被檢索；

　　設定爲follow：頁面上的連接能夠被查詢；

　　設定爲noindex：文件將不被檢索，但頁面上的連接能夠被查詢；

　　設定爲nofollow：文件將不被檢索，頁面上的連接能夠被查詢。

　　咱們能夠像下面這樣使用：

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

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

　　D author（做者：用於告訴搜索機器人網頁的做者）

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

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

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

　　這是meta便籤中最爲常見的一中設置，在製做網頁時，咱們在純HTML代碼可看到它是定義你的網頁的語言，當瀏覽器訪問到你的網頁時，瀏覽器便會根據此來識別並進行相應的設定，不然，瀏覽器就會使用默認的設定方法。

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

B.expires(期限：能夠用於設定網頁的到期期限)

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

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

　　若是你在瀏覽器中設置瀏覽器網頁先從本地緩存中的頁面獲取，那麼當瀏覽時，就會只從本地緩存獲取，直到meta中設置的時間到期，瀏覽器纔會獲取新頁面。

C.pragma（cashe模式：便是否從緩存中訪問網頁內容）

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

　這行代碼表示不從緩存獲取頁面，因而訪問者將沒法脫機工做。

D.refresh(刷新：等待必定時間自動刷新或跳轉到其餘url)

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

第五部分：<meta>標籤中在移動端的使用

　　這幾年，隨着移動端的興起，咱們對移動端愈來愈須要進行專門的網頁設計，下面，我來介紹一些關於移動端佈局中<meta>標籤的使用。

　　1.name屬性的viewport的值（移動端屏幕的縮放）

　　viewport也就是可視區域，就是出去全部工具欄、狀態欄、滾動條等等咱們看網頁的區域。通常咱們能夠操控的屬性有width、height、initial-scale、minimum-scale、maxmum-scale、user-scalable。

　　舉例以下：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

　　即：強制讓文檔與設備的寬度保持1:1；文檔的其實比例和最大比例都是1.0。利用user-scalable=no定義用戶不能夠經過手動縮放，使得頁面固定。

　　2.name屬性的format-detection值。

　　咱們能夠經過這個屬性禁止自動識別電話和郵箱。舉例以下：

<meta name="format-detection" content="telephone=no,email=no"/>

　　這樣，是設備瀏覽網頁時對數字不啓用電話功能（注意不一樣設備的解釋可能不一樣），忽略將頁面中的數字識別爲電話號碼。對郵箱一樣如此。

　　3.name屬性的apple-mobile-web-app-capable值（網站開啓對web app程序的支持）

<meta name="app-mobile-web-app-capable" content="yes"/>

　　說明：1.網站開啓對web app的支持

　　　　　2.該meta能夠看出內容爲」蘋果設備web應用程序xx「，就是說該meta是專門定義web應用的。

　　4.name屬性的apple-mobile-web-app-status-bar-style值（改變頂部狀態條的顏色）

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

　說明：1.在web app應用下狀態條的顏色爲黑色；

　　　　　2.默認值爲default(白色)，能夠定義爲black（黑色）和black-translucent(灰色半透明)；

　　5.name屬性設置做者姓名以及聯繫方式

<meta name="author" contect="zzw, zhuzhenwei789@gmail.com" />

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

HTML中 標籤如何正確使用

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

第一部分：<meta>標籤的基本介紹

第二部分：<meta>標籤中的屬性列舉

第三部分：<meta>標籤中的name屬性應用

A keywords（關鍵字：告訴瀏覽器你的網頁的關鍵字是什麼）

B description（描述：告訴瀏覽器你的網頁的主要內容是什麼）

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

第五部分：<meta>標籤中在移動端的使用

HTML中標籤如何正確使用

　　A keywords（關鍵字：告訴瀏覽器你的網頁的關鍵字是什麼）

　　B description（描述：告訴瀏覽器你的網頁的主要內容是什麼）