前端meta標籤內容定義及使用說明，meta詳細說明，meta標籤使用

xinxiaoyong發表於2018-07-10
前端

一、圖片觀看：


二，文字描述：

<HEAD>

//1.基本標籤

   <！ - 宣告文件使用的字元編碼 - >

    <meta charset =“utf-8”/>

      <！ - 優先使用IE最新版本和Chrome - >
   <meta http-equiv =“X-UA-Compatible”content =“IE = edge，chrome = 1”>
// 2.SEO優化
    <！ - 頁面關鍵詞 - >
   <meta name =“keywords”content =“個人活動釋出，會辦app，活動管理，會議管理，社群管理“/>
   <！ - 頁面描述 - >
   <meta name =”description“content =”釋出個人會議，釋出公司會議，w我們都可以幫你找到合適的會議地點和參會觀眾“>
   <！ - 網頁作者 - >
   <meta name =”author“content =”xin1642868874@163.com“>
   <！ - 搜尋引擎抓取robotterms是一組使用逗號（， ）分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。 - >
   <meta name =“機器人“content =”索引，按照“>
   <！ - 頁面重定向和重新整理 - >
   <meta http-equiv =”refresh“content =”0; url =“/>
//3.可選標籤
   <！ - 為移動裝置新增視口 - >
   <meta name =“viewport”content =“width = device-width，initial-scale = 1，maximum-scale = 1，minimum-scale = 1，user-scalable = no” “>
//4. IOS裝置
   <！ - 刪除預設的蘋果工具欄和選單欄.-->
   <meta name =”apple-mobile-web-app-capable“content =”yes“>
   <！ - 新增到主屏後的標題（iOS 6新增） - >
   <meta name =“apple-mobile-web-app-title”content =“標題”>
   <！ - 是否啟用WebApp全屏模式 - >
   <meta name = “apple-mobile-web-app-capable”content =“yes”>
   <！ - 設定狀態列的背景顏色，只有在“apple-mobile-web-app-capable”content =“yes”`時生效，如果設定為預設或黑色，網頁內容從狀態列底部開始。如果設定為black-translucent，網頁內容充滿整個螢幕，頂部會被狀態列遮擋。 - >
   <！- 禁止數字識自動別為電話號碼 - >
   <meta name =“format-detection”content =“telephone = no”>
   <！ - 禁止自動自動識別地址 - >
   <meta name =“format-detection”content =“address = no”>
   <！ - 禁止自動自動識別日期 - >
   <meta name =“format-detection”content =“date = no”>
   <！ -禁止自動自動識別電子郵件 - >
   <meta name =“format-detection”content =“email = no”>
   iOS圖示<link rel =“apple-touch-icon圖片自動處理成圓角和高光等效果/ apple- touch-icon-precomposed禁止系統自動新增效果，直接顯示設計原圖“>：
       <！ - iPhone和iTouch，預設57x57畫素，必須有 - > 
       <link rel =”apple-touch-icon-precomposed“href =“/ apple-touch-icon-57x57-precomposed.png”>
       <！ - iPad，72x72畫素，可以沒有，但推薦有 - >
       <link rel =“apple-touch-icon-precomposed”sizes =“ 72x72“href =”/apple-touch-icon-72x72-precomposed.png“>
       <！ - Retina iPhone和Retina iTouch，114x114畫素，可以沒有，但推薦有 - >
       <link rel =“apple-touch-icon-precomposed”sizes =“114x114”href =“/ apple-touch-icon-114x114-precomposed.png”>
     <!--  Pad的啟動畫面是不包括狀態列區域的。-->
              <！ - iPad豎屏768 x 1004（標準解析度） - >
              <link rel =“apple-touch-startup-image”sizes =“768x1004”href =“/ splash-screen-768x1004.png”> 
              < ！ - iPad豎屏1536x2008（Retina） - >
              <link rel =“apple-touch-startup-image”sizes =“1536x2008”href =“/ splash-screen-1536x2008.png”> 
              <！ - iPad橫屏2048x1496（Retina） - >
              <link rel =“apple-touch-startup-image”sizes =“2048x1496”href =“/ splash-screen-2048x1496.png”> 
      <!-- iPhone和iPod touch的啟動畫面是包含狀態列區域的。-->
              <！ - iPhone / iPod Touch豎屏320x480（標準解析度） - >
              <link rel =“apple-touch-startup-image”href =“/ splash-screen-320x480.png“> 
              <！ - iPhone / iPod Touch豎屏640x960（Retina） - >
              <link rel =”apple-touch-startup-image“sizes =”640x960“href =”/ splash- screen-640x960.png“> 
              <！ - iPhone 5 / iPod Touch 5豎屏640x1136（Retina） - >
              <link rel =”apple-touch-startup-image“sizes =”640x1136“href =”/ splash- screen-640x1136.png“> 
 <！ - 新增智慧App廣告條智慧應用橫幅（iOS 6+ Safari） - >
 <meta name =”apple-itunes-app“content =”app-id = myAppStoreID，affiliate-data = myAffiliateData，app-argument = myURL“>
// 5.Android 
   <！ - Android Lollipop中的Chrome 39增加主題顏色元標籤，用來控制選項卡顏色.-->

   <meta name =“theme-color”content =“＃db5945”> 

 Windows 8

   <！ - Windows 8磁貼顏色 - >
   <meta name =“msapplication-TileColor”content =“＃000”/>
   <！ - Windows 8磁貼圖示 - >
360瀏覽器
   <！ - 設定360瀏覽器渲染模式： webkit為極速核心，ie-comp為IE相容核心，ie-stand為IE標準核心.-->
   <meta name =“renderer”content =“webkit”>
UC瀏覽器：
   <！ - 設定螢幕方向：portrait為橫屏，landscape為豎屏.-->
   <meta name =“screen-orientation”content =“portrait | landscape”>
   <！ - 設定全屏 - >
   <meta name =“full-screen”content =“是“>
   <！ - 設定適應螢幕排版（縮放是否顯示滾動條） - >
    <meta name =“viewport”content =“uc-fitscreen = no | yes”>
   <！ - 排版模式：適合螢幕）及標準模式（標準） - >
   <meta name =“layoutmode”content =“fitscreen | standard”>
   <！ - 夜間模式：可以幫助使用者在低亮度或黑暗情況下更舒適的進行頁面瀏覽。注意：頁面內的frame / iframe中的夜間模式的元不生效.-->
   <meta name =“nightmode”content =“enable | disable”>
   <！ - 整頁圖片強制顯示：為了節省流量及加快速度，UC為使用者提供了無圖模式 - >
   <meta name =“imagemode”content =“force”>
   <！ - 開啟應用模式：為方便Web應用及遊戲開發者設定的綜合開關，通過元標籤進行指示開啟，當進入應用模式時，瀏覽器將自動調整以下引數： - >
   
   <meta name =“browsermode”content =“application”>
QQ瀏覽器（X5核心）：
   <！ - 設定橫屏，豎屏顯示，縱橫屏，風景豎屏 - >
  <meta name =“x5-orientation”content =“portrait | landscape”>
  <！ - 設定全屏顯示 - >
  <meta name =“x5-fullscreen”content =“true”>
  <！ - 開啟應用模式 - >
  <meta name =“x5-page-mode”content =“app”>
其它：
   <！ - 禁止Chrome瀏覽器中自動提示翻譯 - >
   <meta name =“google”value =“notranslate”>
   <！ - - 禁止百度轉碼 - >
   <meta http-equiv =“Cache-Control”content =“no-siteapp”>
    <！ - 禁止瀏覽器從本地計算機的快取中訪問頁面內容：這樣設定，訪問者將無法離線瀏覽.-->
    <meta http-equiv =“Pragma”content =“no-cache”>
    <！ - 作用是控制狀態列顯示樣式 - >
   <meta name =“apple-mobile-web -app-status-bar-style“content =”black-translucent“>
   <！ - winphone系統a，輸入標籤被點選時產生的半透明灰色背景怎麼去掉 - >
   <meta name =”msapplication-tap-突出顯示“content =”no“>
   <！ - 用來阻止廣告 - >
   <meta http-equiv =“Content-Security-Policy”content =“default-src gap：// ready file：; style-src'self''unsafe-inline'; script-src'unsafe-inline''unsafe- EVAL'“>
   <！ - 是否開啟cleartype顯示效果 - >
   <meta http-equiv =“cleartype”content =“on”>
   < - 指定360瀏覽器用webkit核心渲染網頁 - >
   <meta name =“force-rendering” content =“webkit”/>
   <！ - 自定義標籤：app版本號說明 - >
    <meta name =“app-version”content =“1.13.3”>
   <title>活動報名</ title>

</ HEAD>


本文件僅供初學者或首次開發提供參考。如代解釋不清晰之處，請見諒。如果有更好的前端開發程式碼規範經驗，歡迎指點一二。謝謝觀看！

相關文章