資訊專欄INFORMATION COLUMN
摘要：列表好的使用，能更好地提高頁面的可用性及被檢索的幾率。假設頁面使用了標準的，那么此定義效果等同假設頁面并沒有使用標準的，那么將使用來渲染。需要注意的是并不是所有搜索引擎都支持，比較保守的做法是配合使用。
前言
在移動前端第一彈：viewport詳解中，我們講了viewport，那是一個關于meta的故事。這次我們會就將meta這個故事講得更廣闊、更有意思一些。
寫過HTML的童鞋，應該都對這個不陌生，或用它來定義頁面編碼，或用它來定義搜索引擎抓取方式，或用它定義頁面關鍵字，描述等等。
meta列表好的meta使用，能更好地提高頁面的可用性及被檢索的幾率。
這里并不會列出所有的meta使用方式，只挑選一些常用及實際意義比較大的講講，當然也包括一些廠商私有定制的。
常規 聲明文檔使用的字符編碼該聲明用來指定文檔的編碼，除了utf-8，可選值還有：ISO-8859-1、BIG5、iso-8859-2, iso-2022-jp, iso-2022-kr, gb2312等
當然，你可能還見過使用另外一種方式來定義文檔字符編碼：
相對于這種方式，更推薦你使用第1種，言外之意，就是推薦使用HTML5。
聲明頁面刷新或跳轉該聲明用來指定頁面自刷新或者跳轉到其它頁面，其中的時間單位是s。
聲明頁面過期時間該聲明用來指定頁面的過期時間，一旦網頁過期，從服務器上重新請求，其中時間必須使用GMT格式，或者直接是0（即不緩存）
聲明頁面是否緩存上述語句都可以用來指定文檔不被緩存。一些仍然在使用HTTP/1.0的可以使用第1條，第2條由HTTP/1.1提供，常用值還有：public, no-cache, no-store等
聲明作者信息 聲明文檔關鍵字多關鍵字之間以半角逗號分隔
聲明文檔描述文檔描述內容最好是完整的一句話，以不超過50個字符為宜
聲明使用的瀏覽器及版本x-ua-compatible設置是從IE8開始增加的（很明顯，只適用于IE），對于過往的版本無法識別。
開發者可以通過設置x-ua-compatible來指定渲染引擎的類型和版本，并且因為需求不同可以有多種不同的設置：
Case1:
當直接指定content為IE的某個具體版本，如上述代碼第1條，客戶端的IE將會使用IE7.0標準模式對頁面進行渲染，并忽略Doctype定義。
當指定的IE版本在客戶端IE中不存在時，IE將會嘗試將該值轉換為最為接近的版本。
例如指定一個錯誤的或者低于5.0的IE版本，如上述代碼第2，3條，客戶端的IE將會使用IE5.0對頁面進行渲染，由于IE5.0并沒有標準模式，所以將會直接使用quirks mode來渲染；
如果指定一個大于客戶端IE的版本，如上述代碼第4條，假定客戶端IE的最高版本為9.0，那么IE會將該值轉換為IE=9，即使用IE9.0標準模式對頁面進行渲染。
Case2:
當指定的content值加了Emulate前綴時，如上述代碼，客戶端IE將會根據Doctype定義來決定如何來對頁面進行渲染。假設頁面使用了標準的Doctype，那么此定義效果等同Case1；假設頁面并沒有使用標準的Doctype，那么將使用quirks mode來渲染。
Case3:
當指定的content值為IE=Edge時，如上述代碼，客戶端的IE將會使用最高的標準模式對頁面進行渲染。
Case4:
當指定的content值有多個版本時，如上述代碼，假定客戶端IE版本為8.0或者9.0，則使用IE7.0標準模式對頁面進行渲染；假定客戶端IE版本為10.0或者11.0，則直接使用對應版本的標準模式對頁面進行渲染。
Case5:
當指定的content值為IE=Edge, chrome=1時，如上述代碼，假定客戶端安裝了Google Chrome Frame，則在IE中使用chrome的渲染引擎來渲染頁面，否則，將會使用客戶端IE最高的標準模式對頁面進行渲染。
聲明搜索引擎抓取方式通知搜索引擎文檔是否需要被索引。可選值有：
all（默認值，索引當前頁并跟蹤鏈接，相當于：index, follow）
none（忽略當前頁，相當于：noindex, nofollow）
index（索引當前頁）
noindex（不索引當前頁）
follow（跟蹤當前頁鏈接，不論當前頁是否被索引）
nofollow（不跟蹤當前頁鏈接，不論當前頁是否被索引）
如果聲明沖突，某些引擎可能會做嚴格處理：
類似上述代碼，在Google引擎中，會執行noindex這個更為嚴格的聲明。
需要注意的是并不是所有搜索引擎都支持robots meta，比較保守的做法是配合robots.txt使用。
聲明搜索引擎抓取間隔有時候你可能并不希望站點一直被搜索引擎抓取，而是每間隔一段時間才來訪問一次，這時，可以聲明revisit-after meta。
移動 聲明viewport視口該聲明用于指定在移動設備上頁面的布局視口如何設置。對于viewport meta的詳細設置，請參考：viewport詳解
聲明添加到主屏幕的Web App標題iOS Safari允許用戶將一個網頁添加到主屏幕然后像App一樣來操作它。我們知道每個App下方都會有一個名字，iOS Safari提供了一個私有的meta來定義這個名字，代碼如下：
Android Chrome31.0，Android Browser5.0也開始支持添加到主屏幕了，但并沒有提供相應的定義標題的方式，所以如果你想統一iOS和Android平臺定義Web app名稱的方式，可以使用title標簽來定義，代碼如下：
Web App名稱
但如果你想要網頁標題和App名字不一樣的話，那就只有iOS才行。
聲明添加到主屏幕時隱藏地址欄和狀態欄（即全屏）當我們將一個網頁添加到主屏幕時，會更希望它能有像App一樣的表現，沒有地址欄和狀態欄全屏顯示，代碼如下：
該方案在 iOS 和 Android5.0+ 上都通用。
聲明添加到主屏幕時設置系統頂欄顏色當我們將一個網頁添加到主屏幕時，還可以對 系統顯示手機信號、時間、電池的頂部狀態欄 顏色進行設置，前提是開啟了：
有了這個前提，你可以通過下面的方式來進行定義：
content只有3個固定值可選：default | black | black-translucent
如果設置為 default，狀態欄將為正常的，即白色，網頁從狀態欄以下開始顯示；
如果設置為 black，狀態欄將為黑色，網頁從狀態欄以下開始顯示；
如果設置為 black-translucent，狀態欄將為灰色半透明，網頁將充滿整個屏幕，狀態欄會蓋在網頁之上；
該設置只在 iOS 上有效。
電話號碼識別在 iOS Safari （其他瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理為電話鏈接，比如：
7位數字，形如：1234567
帶括號及加號的數字，形如：(+86)123456789
雙連接線的數字，形如：00-00-00111
11位數字，形如：13800138000
可能還有其他類型的數字也會被識別，但在具體的業務場景中，有些時候這是不必須的，所以你可以關閉電話自動識別，然后在需要撥號的地方，開啟電話呼出和短信功能。
關閉電話號碼識別：
開啟撥打電話功能：
123456
開啟發送短信功能：
123456
在 Android （iOS不會）上，瀏覽器會自動識別看起來像郵箱地址的字符串，不論有你沒有加上郵箱鏈接，當你在這個字符串上長按，會彈出發郵件的提示。
關閉郵箱地址識別：
開啟郵件發送：
dooyoe@gmail.com
如果想同時關閉電話和郵箱識別，可以把它們寫到一條 meta 內，代碼如下：
附注部分meta定義來自于trip
轉載：http://web.jobbole.com
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49835.html
摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。服務端技術棧登錄授權用認證機制，來實現登錄登出。服務器配置和緩存策略，根據不同的來代理。申請證書全站升級到，配置的協議。一、前言提綱 基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。 二、歷史版本 基于Vue-CLI2.0:點我查看 這個分支版本是一兩年前...
摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。服務端技術棧登錄授權用認證機制，來實現登錄登出。服務器配置和緩存策略，根據不同的來代理。申請證書全站升級到，配置的協議。 一、前言提綱 基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。 二、歷史版本 基于Vue-CLI2.0:點我查看這個分支版本是一兩...
摘要：我今天的工作又遇到一個難題。前端右下角這個按鈕被設置為禁用狀態。這個按鈕的可用狀態由屬性控制。而行執行之前，還沒有這個的屬性。我成功找到了我在尋找的給添加了的代碼位置。 我今天的工作又遇到一個難題。前端UI右下角這個按鈕被設置為禁用(disabled)狀態。 showImg(https://segmentfault.com/img/remote/1460000016811187); 這...
摘要：我今天的工作又遇到一個難題。前端右下角這個按鈕被設置為禁用狀態。這個按鈕的可用狀態由屬性控制。而行執行之前，還沒有這個的屬性。我成功找到了我在尋找的給添加了的代碼位置。 我今天的工作又遇到一個難題。前端UI右下角這個按鈕被設置為禁用(disabled)狀態。 showImg(https://segmentfault.com/img/remote/1460000016811187); 這...
摘要：取決于你的高度咦還是不能動因為我們還需要運用的兩個重要技巧偽類和通用兄弟元素選擇器，才能讓選項卡與內容塊做切換。加入偽類與通用兄弟元素選擇器我們為加上偽類，表示當這個被選中時等于對應的標簽被選中使才會呈現的樣式。 先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例頁面 講到選項卡（...
閱讀 970·2023-04-25 23:55
閱讀 2691·2023-04-25 14:13
閱讀 3286·2019-08-26 13:47
閱讀 2957·2019-08-23 18:16
閱讀 618·2019-08-23 17:20
閱讀 3217·2019-08-23 16:55
閱讀 3135·2019-08-22 15:39
閱讀 3184·2019-08-20 18:10
