好程式設計師web前端分享html中meta標籤及用法詳解

好程式設計師 web 前端分享 html 中 meta 標籤及用法詳解 ， 這篇文章給大家介紹了 html 中 meta 標籤及用法詳解，感興趣的朋友一起看看 ， Html中meta標籤

一、 meta標籤 含義

　　<meta> 元素 可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞。

　　<meta> 標籤位於文件的頭部，不包含任何內容。

　　<meta> 標籤的屬性定義了與文件相關聯的名稱/值對。

二、 meta 中常用屬性

1. charset  (字符集)

　　 說明：規定 HTML 文件的字元編碼。

　　 用法：   <meta charset="UTF-8">  

2.  viewport (視區)

　　 說明：是使用者網頁的可視區域。 大家都知道移動裝置的螢幕一般都比 PC小很多，webkit瀏覽器會將一個較大的“虛擬”視窗對映到移動裝置的螢幕上，預設的虛擬視窗為980畫素寬（目前大部分網站的標準寬度），然後按一定的比例（3：1或2：1）進行縮放。

　　　　 　也就是說當我們載入一個普通網頁的時候， webkit會先以980畫素的瀏覽器標準載入網頁，然後再縮小為490畫素的寬度。注意這個縮小是一個全域性縮小，也就是頁面上的所有元素都會縮小。

　　 用法：

1 、 <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

　　　　　　(1)  width

　　　　　　　　width 控制 viewport 的大小，一般為了自適應設定為device-width

　　　　　　(2) initial-scale

　　　　　　　  initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。

 　　　　　  (3) maximum-scale

　　　　　　　  maximum-scale 最大縮放。即允許的最大縮放程度。這也是一個浮點值，用以指出頁面大小與螢幕大小相比的最大乘數。

　　　　　　(4)  minimum-scale

　　　　　　　　minimum-scale：允許使用者縮放到的最小比例。和 maximum-scale 用法類似。

　　　　　　(5)  user-scalable

　　　　　　　　user-scalable 使用者調整縮放。即使用者是否能改變頁面縮放程度。如果設定為yes則是允許使用者對其進行改變，反之為no。

3. keywords (關鍵字)

　　說明：為搜尋引擎提供的關鍵字列表。各關鍵詞間用英文逗號 “,”隔開。指定搜尋引擎用來提高搜尋質量的關鍵詞。

　　用法： <Meta name="Keywords" Content="關鍵詞1,關鍵詞2，關鍵詞3,關鍵詞4,……">

4. description (描述、簡介)
 

　　　說明： Description用來告訴搜尋引擎你的網站主要內容。
 

　　　用法 ： <Meta name="Description" Content="你網頁的簡述">

5. format-detection (格式檢測)　　

　　　說明： format-detection 是用來檢測html裡的一些格式的。

　　　用法：關於 meta的format-detection屬性主要是有以下幾個設定：　　　 
 

1 、 meta name="format-detection" content="telephone=no" 2 、 　　　meta name="format-detection" content="email=no" 3 、 　　　meta name="format-detection" content="adress=no"

　　　　也可以連寫： meta name="format-detection" content="telephone=no,email=no,adress=no"　　

　　 （ 1）telephone
 

　　 你明明寫的一串數字沒加連結樣式，而 iPhone會自動把你這個文字加連結樣式、並且點選這個數字還會自動撥號！想去掉這個撥號連結該如何操作呢？這時我們的meta又該大顯神通了，程式碼如下：

　　 telephone=no就禁止了把數字轉化為撥號連結！
　　　　telephone=yes就開啟了把數字轉化為撥號連結，要開啟轉化功能，這個meta就不用寫了,在預設是情況下就是開啟！

　　 （ 2）email

　　 告訴裝置不識別郵箱，點選之後不自動傳送

　　 email=no禁止作為郵箱地址！
　　　　email=yes就開啟了把文字預設為郵箱地址，這個meta就不用寫了,在預設是情況下就是開啟！

　　 （ 3）adress

　　 adress=no禁止跳轉至地圖！
　　　　adress=yes就開啟了點選地址直接跳轉至地圖的功能,在預設是情況下就是開啟！

6. apple-touch-fullscreen

　　說明：新增到主螢幕後，全屏顯示。

　　用法： <meta name="apple-touch-fullscreen" content="yes">

7.  apple-mobile-web-app-capable

　　說明： 作用就是刪除預設的蘋果工具欄和選單欄。 content有兩個值”yes”和”no”,當我們需要顯示工具欄和選單欄時，這個行meta就不用加了，預設就是顯示。

　　用法： <meta name="apple-mobile-web-app-capable" content="yes" />

8.  App-Config

　　說明：保留歷史記錄以及動畫效果

　　用法： <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

9. msapplication-tap-highlight

　  說明：點選無高光(高亮)

　用法： <meta name="msapplication-tap-highlight" content="no">

總結

以上所述是小編給大家介紹的 html中meta標籤及用法詳解，希望對大家有所幫助 。