標籤：半透明 viewport 網站 告訴 html網頁 .com a標籤 緩衝 one
<meta>標籤基本介紹<meta>標籤是HTML網頁原始碼中一個重要的html標籤。META便簽用來描述一個HTML網頁文檔的屬性，例如作者、日期、關鍵詞、頁面重新整理。除此之外<meta>標籤用於搜尋引擎最佳化（SEO）。它位於HTML文檔中<head>元素內，雖然它提供的資訊不可見，但它卻是文檔最基本的元資訊。
<meta>標籤的屬性列舉<meta>標籤中屬性可以分為必選屬性和可選的屬性。
1.必選屬性：content屬性。該屬性是為了定義與http-equiv或者name屬性相關的元資訊，其中的內容是為了便於搜尋機器人尋找資訊和分類使用的。
2.可選屬性
① name屬性該屬性主要用於描述網頁。Name屬性的值可以有：author、description、keyword、generator等等
② http-equiv屬性。該屬性相當與http的標頭檔作用，可以向瀏覽器返回一些有用的資訊，以協助正確和精確顯示內容。http-equiv屬性的值可以有content-type、expires、refresh等等；
<meta>標籤中name屬性應用1. name= ” Keywords ” （關鍵字：告訴瀏覽器你的網頁的關鍵字是什麼）2. name= ” description ” （描述：告訴瀏覽器你的網頁主要內容是什麼）這兩個屬性值作用相似，設定這兩個值可以協助你的首頁被各大搜尋引擎登入，提高網站的訪問量。於是這兩個屬性值得設定是格外重要的。因為按照搜尋引擎的工作原理，搜尋引擎會首先檢索頁面中的keywords和description，並將其加入到自己的資料庫，然後根據關鍵詞的密度將網站排序。
<meta name=”keywords” content=”關於meta標籤的使用”>
<meta name=”description” content=”HTML中的<meta>標籤如何正確使用”>
注意:keywords的content內容要限制在36個字之內；
Description的content內容要限制在76個字之內;
name一定要和content屬性配合使用。
3.robot（機器人嚮導：用於告訴機器人哪些頁面需要索引，哪些頁面不需要索引）該屬性的值有all、none、index、noindex、follow和nofollow 預設為all
設為all:檔案將被檢索，且頁面上的連結可以被查詢；
設為none：檔案將不被檢索，且頁面上的連結不可以被查詢；
設為index：檔案將被檢索；
設為follow：頁面上的連結可以被查詢；
設為noindex：檔案將不被檢索，但頁面上的連結可以被查詢；
設為nofollow：檔案將被檢索，頁面上的連結不可以被查詢；
<meta>標籤中的http-equiv屬性應用1. http-equiv= ’ content-type ’ （文檔內容類型：用於設定文件類型和字元集）這是meta便簽中最為常見的一種設定，在製作網頁時，我們在純HTML代碼可以看到他是定義你的網頁的語言當瀏覽器訪問到你的網頁時，瀏覽器便會根據此來識別並進行相應的設定，否則，瀏覽器就會使用預設的設定方法。
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8”>
2. http-equiv= ’ expires ’ (期限：可以用於設定網頁的到期期限)一旦網頁到期，那麼就必須在伺服器上重新重新整理而不能通過緩衝擷取網頁。值得注意的是:其中設定的時間必須是GMT格式。
<meta http-eqive=”expires” content=”Fri,12 Jan 2001 15:15:15 GMT”>
如果你在瀏覽器中設定瀏覽器網頁先從本機快取中的頁面擷取，那麼當瀏覽時，就會只從本機快取中擷取，直到meta中設定的時間到期，瀏覽器才會擷取新頁面。
3. http-equiv= ’ pragma ’ (cache模式)說明:禁止瀏覽器從本地計算的緩衝中訪問頁面內容。
<meta http-equiv=”pragma” content=”no-cache”>
這代碼錶示不從緩衝擷取頁面，於是訪問者將無法離線工作。
4. refresh（重新整理:等待一定時間自動重新整理或跳轉到到其他url）<meta http-equiv=”refresh” content=”1;url=https://www.baidu.com”/>
<meta>標籤中在移動端的使用1. name= ” viewport ” (移動端螢幕的縮放)Viewport也就是可是地區
<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= ” formmat-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應用程式**”，就是說該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” content=”xx,[email protected]”>
HTML中<meta>標籤的使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
