2. 程式人生 > >HTML——meta標籤彙總

HTML——meta標籤彙總

阿新 • • 發佈：2019-01-08

HTML 裡 meta常用標籤：

renderer:

<meta name="renderer" content="webkit|ie-comp|ie-stand">

 content的取值為webkit,ie-comp,ie-stand之一，區分大小寫。

     分別代表用webkit核心，IE相容核心，IE標準核心。
      若頁面需預設用極速核，增加標籤：<meta name="renderer" content="webkit"> 
      若頁面需預設用ie相容核心，增加標籤：<meta name="renderer" content="ie-comp"> 

     若頁面需預設用ie標準核心，增加標籤：<meta name="renderer" content="ie-stand">

<meta http-equiv = "X-UA-Compatible" content = "IE=7" >

#以上程式碼告訴IE瀏覽器，無論是否用DTD宣告文件標準，IE8/9都會以IE7引擎來渲染頁面。  

<meta http-equiv = "X-UA-Compatible" content = "IE=8" >   

#以上程式碼告訴IE瀏覽器，IE8/9都會以IE8引擎來渲染頁面。  

<meta http-equiv = "X-UA-Compatible" content = "IE=edge" >   

#以上程式碼告訴IE瀏覽器，IE8/9及以後的版本都會以最高版本IE來渲染頁面。  

<meta http-equiv = "X-UA-Compatible" content = "IE=7,IE=9" >   

<meta http-equiv = "X-UA-Compatible" content = "IE=7,9" >   

<meta http-equiv = "X-UA-Compatible" content = "IE=Edge,chrome=1" >

# 以上程式碼IE = edge告訴IE使用最新的引擎渲染網頁，chrome = 1則可以啟用Chrome Frame .

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width - viewport的寬度 height - viewport的高度
    initial-scale - 初始的縮放比例
    minimum-scale - 允許使用者縮放到的最小比例
    maximum-scale - 允許使用者縮放到的最大比例

    user-scalable - 使用者是否可以手動縮放

各瀏覽器平臺

Microsoft Internet Explorer

<!-- 優先使用最新的ie版本 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- 是否開啟cleartype顯示效果 -->
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">


<!-- Pinned Site -->
<!-- IE 10 / Windows 8 -->
<meta name="msapplication-TileImage" content="pinned-tile-144.png">
<meta name="msapplication-TileColor" content="#009900">
<!-- IE 11 / Windows 9.1 -->
<meta name="msapplication-config" content="ieconfig.xml">

    Google Chrome

<!-- 優先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 禁止自動翻譯 -->
<meta name="google" value="notranslate">

    360瀏覽器

<!-- 選擇使用的瀏覽器解析核心 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

    UC手機瀏覽器

<!-- 將螢幕鎖定在特定的方向 -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 全屏顯示頁面 -->
<meta name="full-screen" content="yes">
<!-- 強制圖片顯示，即使是"text mode" -->
<meta name="imagemode" content="force">
<!-- 應用模式，預設將全屏，禁止長按選單，禁止手勢，標準排版，強制圖片顯示。 -->
<meta name="browsermode" content="application">
<!-- 禁止夜間模式顯示 -->
<meta name="nightmode" content="disable">
<!-- 使用適屏模式顯示 -->
<meta name="layoutmode" content="fitscreen">
<!-- 當頁面有太多文字時禁止縮放 -->
<meta name="wap-font-scale" content="no">

    QQ手機瀏覽器

<!-- 鎖定螢幕在特定方向 -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 全屏顯示 -->
<meta name="x5-fullscreen" content="true">
<!-- 頁面將以應用模式顯示 -->
<meta name="x5-page-mode" content="app">

    Apple iOS

<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">


<!-- 禁止自動探測並格式化手機號碼 -->
<meta name="format-detection" content="telephone=no">


<!-- Add to Home Screen新增到主屏 -->
<!-- 是否啟用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 設定狀態列的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 新增到主屏後的標題 -->
<meta name="apple-mobile-web-app-title" content="App Title">

    Google Android

<meta name="theme-color" content="#E64545">
<!-- 新增到主屏 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

    App Links

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- More info: http://applinks.org/documentation/ -->

最後——移動端常用的meta

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果預設的工具欄和選單欄 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設定蘋果工具欄顏色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數字識別為電話，忽略email識別 -->
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用相容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點選無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 適應移動端end -->

keywords,description(經常用到的兩個)

頁面的關鍵字和描述，是寫給搜尋引擎看的，關鍵字可以有多個用 ‘,’號隔開

<meta name="keywords" content="HTML,CSS,JAVASCRIPT,PHP">
<meta name="description" content="html meta標籤大全,整理一下加強記憶">

Content-Type

告訴瀏覽器當前訪問的資源型別

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--告訴瀏覽器當前訪問的資源型別 並宣告編碼-->

refresh

<meta http-equiv="refresh" content="5;url="http://blog.csdn.net" />

full-screen

全屏顯示網頁(部分移動端瀏覽器的專有屬性)

<meta name="full-screen" content="yes"/>

browsermode

瀏覽器模式-強制堅屏顯示(部分移動端瀏覽器的專有屬性),

<meta name="browsermode" content="application"/>

format-detection

資料格式驗證渲染： 
telephone：而iPhone會自動把你這個文字加連結樣式、並且點選這個數字還會自動撥號！預設開啟 
email：瀏覽器會識別郵箱並加樣式，點選可以呼叫系統預設郵件應用給該地址發郵件，預設開啟 
adress：adress=yes就開啟了點選地址直接跳轉至地圖的功能，預設開啟

<meta content="telephone=no" name="format-detection" />
<meta content="telephone=no,email=no,adress=no" name="format-detection" />

x5-orientation

QQ瀏覽器強制豎屏

<meta name="x5-orientation" content="portrait"/>

x5-fullscreen

QQ瀏覽器強制全屏

<meta name="x5-fullscreen" content="true"/>

x5-page-mode

QQ瀏覽器應用模式

<meta name="x5-page-mode" content="app"/>

X-UA-Compatible

IE的相容模式:以IE的哪個版本去渲染頁面（IE=8：以IE8的模式去渲染頁面，IE=Edge:以最新版本的IE去渲染頁面，當然這個最新指的是你係統裝的最高版本的IE）

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />


相關推薦

HTML——meta標籤彙總

HTML 裡 meta常用標籤：renderer:<meta name="renderer" content="webkit|ie-comp|ie-stand"> content的取值為webkit,ie-comp,ie-stand之一，區分大小寫。      分

HTML常用標籤彙總、CSS常用屬性彙總

  HTML標籤彙總 標籤名 屬性 及其取值 作用 單詞意思 是否記住 <a> href

HTML meta標籤小白學習記錄！

META標籤小白學習日記 剛剛接觸HTML，對於其中部分的標籤知識一個剛剛認識的階段，或許會使用很小的一部份，但是，確實遠沒有達到理解的程度。meta就是其中之一。剛剛看見的哦時候完全沒有辦法理解，這東西有什麼用啊！！！頭大。下面展示我的學習成果，知識copy的，外加自己

HTML meta標籤總結與屬性使用介紹

點選開啟連結, 介紹<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />的網址(https://blo

HTML meta標籤的使用

介紹： 用來設定元資料， 這些元資料將服務於瀏覽器（如何佈局或過載頁面），搜尋引擎和其它網路服務。 屬性：主要有name和http-equiv屬性 name的使用 name屬性主要用於描述網頁，比如網頁的關鍵詞，描述等。與之對應的屬性值為c

使用 HTML meta 標籤來禁用快取

如何完美滴使瀏覽器訪問一個 HTML 頁面時禁用快取？ 在測試某個 Web應用程式專案時，發現更改後 Chrome 瀏覽器頁面重新整理還是使用之前的版本。經除錯發現 Chrome 預設快取值為 300 秒。 經測試跨瀏覽器禁止快取的 headers 如下： Cache-

html的meta標籤

meta標籤的作用。 metadata 中文名叫做元資料，是用於描述資料的資料，他不會顯示在頁面上，但是機器可以識別，常用於定義頁面的說明，關鍵字，最後修改日期，和其他資訊，這些資訊儲存於瀏覽器，如何佈局或者重新載入頁面。搜尋引擎和其他服務。 兩個屬性 http-equiv屬性和name

html 所有標籤屬性彙總

A ➔ B 屬性 值 描述 屬性連結 charset char_encoding （ H5 不支援 ）規定目標 URL 的字元編碼 coords

html的基本標籤彙總

<html> <head> <!-- <base href="http://www.w3school.com.cn/i/" /> --> <basefont color="red" size="5" /> <b

HTML/CSS——移動端Meta標籤的一些設定

head標籤是html的頭標籤，對於移動端的開發，head標籤裡面有很多我們值得注意的地方。Meta標籤就是屬性設定 <!DOCTYPE html> <html lang = ""&

Html常用標籤使用方法彙總

<form> </form> property:   action:規定提交表單時，向何處傳送表單資料 name: 給表單命名 target: _blank  method：提交方式，post或get值

前端系列教程之HTML（常用meta標籤）

<head> <!-- 宣告文件使用的字元編碼 --> <meta charset='utf-8'> <!-- 優先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA

HTML：瀏覽模式設定（meta標籤）

IE瀏覽器 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <!--EmulateIE7 模式遵循 <!DOCTYPE> 指令。標準模式以 IE7 標

html中head裡的meta標籤的用法

meta標籤分兩大部分：HTTP-EQUIV和NAME變數。 ●HTTP-EQUIV類似於HTTP的頭部協議，它迴應給瀏覽器一些有用的資訊，以幫助正確和精確 地顯示網頁內容。常用的HTTP-EQUIV型別有： 1.expires(期限) 說明：可以用於設定網頁的到期時間。一旦網頁過期，必須到伺服器上重新調閱

HTML中的meta標籤

常用meta <meta charset='utf-8'> <!--宣告文件使用的字元編碼--> <meta name="description" content="不超過150個字元"/> <!--頁面描述--> &

HTML中meta標籤的作用與使用

META標籤用來描述一個HTML網頁文件的屬性 META標籤可分為兩大部分：HTTP-EQUIV和NAME變數。 HTTP例項 HTML程式碼例項中有一項內容是 <meta http-eq

HTML常用meta標籤詳細版

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不區分大小寫 --> <!-- 更加標準的 lang 屬性寫法 宣告瀏覽器語言環境 上面這一段表示這是一張中文網頁 常用的lang屬性有 1. 簡體中文頁面：

根據vue-router的meta動態設定html裡標籤的內容

路由檔案 ：router/index.js import Vue from 'vue' import Router from 'vue-router' import index '@/view/i

爬蟲技術 -- 進階學習（十一）【補充】獲取html中meta標籤中的content的內容

但是meta標籤中的content內容的抓取，沒有提及到！ 上網搜尋了下，發現很少提及，所以寫篇隨筆，備忘一下！ 還是在HtmlAgillityPack搭配ScrapySharp的環境下，具體如何配置點選上一篇連結。 例子：<meta name="keywords" content="召開新聞

html頭部meta標籤詳解

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="關鍵詞">