自己一直想成為高級前端開發工程師，而自學。奈何最近感覺自學收效甚微，一度迷茫。 不破不立，打算改變這樣的狀態。 春節後上班第一天，今年打算好好實現自己的前端夢想。 重新整理、總結前端技術。 廢話，就不多說了，開始今天的主題。 Html中meta標簽 一、meta標簽 含義 <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像素的寬度。註意這個縮小是一個全局縮小，也就是頁面上的所有元素都會縮小。
用法：<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">
