head裡放的一系列media標籤

HEAD一系列的你需要放在<head>標籤裡的東西
元素
<title>頁面標題</ title>

<base href =“ https:// example.com/page.html“>

<style>主體{顏色:紅色;} </ style>

<script src =“ script.js”> </ script>



元元素
<meta charset =“ utf-8”>

<meta name =“ viewport” content =“ width = device-width,initial-scale = 1”>

<meta name =“ keywords” content =“您的關鍵字,此處,逗號,分隔,不,空格”>

<meta name =“ description” content =“ 150個字符”>

<meta name =“ subject” content =“您網站的主題”>

<meta name =“ language” content =“ zh_CN”>

<meta name =“ robots” content =“ index,follow”>

<meta name =“ revised” content =“ 2010年7月18日,星期日,下午5:15”>

<meta name =“抽象” content =“”>

<meta name =“ topic” content =“”>

<meta name =“ summary” content =“”>

<meta name =“ classification” content =“ business”>

<meta name =“作者” content =“名稱,email@example.com”>

<meta name =“ designer” content =“”>

<meta name =“ reply-to” content =“ email@example.com”>

<meta name =“ owner” content =“”>

<meta name =“ url” content =“ https:// example.com/“>

<meta name =“ identifier-URL” content =“ https:// example.com/“>

<meta name =“ directory” content =“ submission”>

<meta name =“ category” content =“”>

<meta name =“ coverage” content =“ Worldwide”>

<meta name =“ distribution” content =“ Global”>

<meta name =“ rating” content =“ General”>

<meta name =“ revisit-after” content =“ 7天”>

<meta http-equiv =“ refresh” content =“ 300; url = https:// example.com/“>

<meta name =“ theme-color” content =“#E64545”>

<!-緩存控制->

<meta http-equiv =“ Expires” content =“ 0”>

<meta http-equiv =“ Pragma” content =“ no-cache”>

<meta http-equiv =“ Cache-Control” content =“ no-cache”>



鏈接元素

<link rel =“ copyright” href =“ copyright.html”>

<link rel =“ stylesheet” href =“ https:// example.com/styles.css“>

<link rel =“ alternate” href =“ https:// feeds.feedburner.com/ma rtini“ type =” application / rss + xml“ title =” RSS“>

<link rel =“ alternate” href =“ https:// example.com/feed.atom“ type =” application / atom + xml“ title =” Atom 0.3“>

<link rel =“ me” href =“ https:// google.com/profiles/the nextweb“ type =” text / html“>

<link rel =“ archives” href =“ https:// example.com/2003/05/“ title =” 2003年5月“>

<link rel =“ index” href =“ https:// example.com/” title =“ DeWitt Clinton”>

<link rel =“ start” href =“ https:// example.com/photos/patt ern_recognition_1_about /“ title =”模式識別1“>

<link rel =“ prev” href =“ https:// example.com/opensearch/ opensearch-and-openid-a-sure-way-to-get-my-attention /“ title =” OpenSearch和OpenID?確保引起我注意的肯定方法。“>

<link rel =“ search” href =“ / search.xml” type =“ application / opensearchdescription + xml” title =“ Viatropos”> <link rel =“ self” type =“ application / atom + xml” href =“ https :// example.com/atomFeed.ph p?page = 3“>

<link rel =“ first” href =“ https:// example.com/atomFeed.ph p“>

<link rel =“ next” href =“ https:// example.com/atomFeed.ph p?page = 4“>

<link rel =“ previous” href =“ https:// example.com/atomFeed.ph p?page = 2“> <link rel =” last“ href =” https:// example.com/atomFeed.ph p?page = 147“>

<link rel =“ shortlink” href =“ https:// example.com/?p = 43625“>

<link rel =“ canonical” href =“ https:// example.com/2010/06/9-t hings-to-do-before-entering-social-media.html“>

<鏈路的rel =“EditURI的”href =“ https://開頭?example.com/xmlrpc.php RSD“ type =” application / rsd + xml“ title =” RSD“>

<link rel =“ pingback” href =“ https:// example.com/xmlrpc.php“>

<link rel =“ webmention” href =“ https:// example.com/webmention“>

<link rel =“ manifest” href =“ manifest.json”>



網站圖示

<!-對於IE 10及以下->

<!-沒有鏈接,只需在根目錄中放置一個名為favicon.ico的文件->

<!-對於IE 11,Chrome,Firefox,Safari,Opera->

<link rel =“ icon” href =“ path / to / favicon-16.png” size =“ 16x16” type =“ image / png”>

<link rel =“ icon” href =“ path / to / favicon-32.png” size =“ 32x32” type =“ image / png”>

<link rel =“ icon” href =“ path / to / favicon-48.png” size =“ 48x48” type =“ image / png”>

<link rel =“ icon” href =“ path / to / favicon-62.png” size =“ 62x62” type =“ image / png”>
所有有關Favicons(和触摸圖標)的信息



社交
Facebook /開放圖
<meta property =“ og:url” content =“ https:// www。example.com/“>
<meta property =“ og:title” content =“內容標題”>

<meta property =“ og:description” content =“此處描述”>

<meta property =“ og:site_name” content =“網站名稱”>

<meta property =“ og:image” content =“ https:// example.com/image.jpg“>

<meta property =“ og:type” content =“ website”>

<meta property =“ og:locale” content =“ zh_CN”>

<meta property =“ fb:app_id” content =“ Facebook數字ID”>

<meta property =“ fb:admins” content =“ Facebook數字ID”>
Facebook開放圖標記
開放圖協議

推特
<meta name =“ twitter:card” content =“ summary_large_image”>
<meta name =“ twitter:site” content =“ @ publisher_handle”>

<meta name =“ twitter:creator” content =“ @ author_handle”>

<meta name =“ twitter:title” content =“內容標題”>

<meta name =“ twitter:description” content =“內容描述少於200個字符”> <meta name =“ twitter:image” content =“ https:// example.com/image.jpg“>

<!-帶有大圖像的Twitter摘要卡必須至少為280x150px->
Twitter卡:入門指南
Twitter卡驗證器

Google+ / http:// Schema.org
<meta itemprop =“名稱” content =“內容標題”>
<meta itemprop =“ description” content =“內容描述少於200個字符”>

<meta itemprop =“圖像” content =“ https:// example.com/image.jpg“>
瀏覽器/平台

蘋果iOS
<meta name =“格式檢測” content =“ telephone = no”>
<meta name =“ apple-mobile-web-app-title” content =“我的應用”>

<meta name =“ apple-mobile-web-app-capable” content =“ yes”>

<meta name =“ apple-mobile-web-app-status-bar-style” content =“ black”>

<meta name =“ apple-touch-fullscreen” content =“ yes”>

<link rel =“ apple-touch-icon” href =“ apple-touch-icon.png”>

<link rel =“ apple-touch-icon-precomposed” href =“ apple-touch-icon-precomposed.png”>

<link rel =“ apple-touch-startup-image” href =“ startup.png”>
Apple Meta標籤

IE瀏覽器
<meta http-equiv =“ x-ua-compatible” content =“ ie = edge”>
<meta http-equiv =“ cleartype” content =“ on”>

<!-固定站點-> <!-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”>

Internet Explorer(請勿使用舊版)
<!-舊版標籤(請勿使用)->
<meta name =“ mssmarttagspreventparsing” content =“ true”>

<meta http-equiv =“ page-enter” content =“ revealtrans(duration = 2,transition = 2)”>

<meta http-equiv =“ page-exit” content =“ revealtrans(duration = 3,transition = 12)”>


Safari 9:El Capitan中的“固定”選項卡
<link rel =“ mask-icon” href =“ icon.svg” color =“ red”>








移動前端頭部標籤(HTML5 head meta)
<!DOCTYPE html> <!-- 使用HTML5 doctype,不區分大小寫-->
<html lang =“ zh-cmn-Hans”>

<頭>

<!-- 聲明文檔使用的字符編碼-->

<meta charset ='utf-8'>


<!-- 優先使用IE 最新版本和Chrome --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<!-- 頁面描述--><meta name="description" content="不超過150個字符"/>

<!-- 頁面關鍵詞--> <meta name="keywords" content=""/>

<!-網頁作者-> <meta name =“ author” content =“ name,email@gmail.com” />

<!-- 搜索引擎抓取--><meta name="robots" content="index,follow"/>

<!-- 為移動設備添加viewport --><meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

<!-- iOS 設備begin --><meta name="apple-mobile-web-app-title" content="標題">

<!-- 添加到主屏後的標題(iOS 6 新增) --><meta name="apple-mobile-web-app-capable" content="yes"/>

<!-- 是否啟用WebApp 全屏模式,刪除蘋果默認的工具欄和菜單欄-->

<meta name =“ apple-itunes-app” content =“ app-id = myAppStoreID,affiliate-data = myAffiliateData,app-argument = myURL”>

<!-- 添加智能App 廣告條Smart App Banner(iOS 6+ Safari) --><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">

<!-- 不讓百度轉碼--> <meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 針對手持設備優化,主要是針對一些老的不識別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">

<!-iOS圖標開始-> <link rel =“ apple-touch-icon-precomposed” href =“ / apple-touch-icon-57x57-precomposed.png” />

<!-- iPhone 和iTouch,默認57x57 像素,必須有--> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png "/>

<!-- Retina iPhone 和Retina iTouch,114x114 像素,可以沒有,但推薦有--> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon- 144x144-precomposed.png"/>

<!-- Retina iPad,144x144 像素,可以沒有,但推薦有--> <!-- iOS 圖標end --> <!-- iOS 啟動畫面begin --> <link rel="apple-touch-startup -image" sizes="768x1004" href="/splash-screen-768x1004.png"/>

<!-- iPad 豎屏768 x 1004(標準分辨率) --> <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>

<!-iPad豎屏1536x2008(視網膜)-> <link rel =“ apple-touch-startup-image” size =“ 1024x748” href =“ / Default-Portrait-1024x748.png” />

<!-- iPad 橫屏1024x748(標準分辨率) --> <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>

<!-iPad橫屏2048x1496(視網膜)-> <link rel =“ apple-touch-startup-image” href =“ / splash-screen-320x480.png” />

<!-- iPhone/iPod Touch 豎屏320x480 (標準分辨率) --> <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/ >

<!-iPhone / iPod Touch豎屏640x960(視網膜)-> <link rel =“ apple-touch-startup-image” size =“ 640x1136” href =“ / splash-screen-640x1136.png” />

<!-- iPhone 5/iPod Touch 5 豎屏640x1136 (Retina) --> <!-- iOS 啟動畫面end --> <!-- iOS 設備end --> <meta name="msapplication-TileColor" content ="#000"/>

<!-Windows 8磁貼顏色-> <元名稱=“ msapplication-TileImage” content =“ icon.png” />

<!-Windows 8磁貼圖標-> <link rel =“ alternate” type =“ application / rss + xml” title =“ RSS” href =“ / rss.xml” />

<!-添加RSS訂閱-> <link rel =“ shortcut icon” type =“ image / ico” href =“ / favicon.ico” />

<!-- 添加favicon icon --> <!-- sns 社交標籤begin --> <!-- 參考微博API --> <meta property="og:type" content="類型" />

<meta property =“ og:url” content =“ URL地址” />

<meta property =“ og:title” content =“標題” />

<meta property="og:image" content="圖片" />

<meta property =“ og:description” content =“描述” />

<!-- sns 社交標籤end --> <title>標題</title> </head>

分類