html中meta標籤及用法詳解

廢話，就不多說了，開始今天的主題。

Html中html/11675.html">meta標籤

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

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

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

1. charset (字符集)

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

用法： <meta charset=UTF-8>

2. viewport (視區)

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

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

用法：

 <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屬性主要是有以下設定：

 meta name=format-detection content=telephone=no meta name=format-detection content=email=no 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標籤及用法詳解，希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！