HTML常见meta大全(强烈推荐)

Meta标识是HTML語言head区的1个輔助性标识,它坐落于HTML文本文档头顶部的head标识和title标识之间,它出示客户不能见的信息内容。
Meta : 即 元数据信息(Metadata)是数据信息的数据信息信息内容。

元数据信息能够被应用访问器(怎样显示信息內容或再次载入网页页面),检索模块(重要词),或别的 Web 服务启用。

用大家的大白话文来讲,它自身是1个没甚么用的标识,可是1旦在它內部根据别的特性设定了一些实际效果,它就起功效了,因此大家称之为“ 元数据信息 ”。

<!-- 界定文本文档的标识符编号 -->
<meta charset="utf⑻" /> 
<!-- 强制性Chromium核心,功效于360访问器、QQ访问器等国产双核访问器 -->
<meta name="renderer" content="webkit"/>
<!-- 强制性Chromium核心,功效于别的双核访问器 -->
<meta name="force-rendering" content="webkit"/>
<!-- 假如有安裝 Google Chrome Frame 软件则强制性为Chromium核心,不然强制性本机适用的最高版本号IE核心,功效于IE访问器 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<!-- 
    设定视窗尺寸
    width    设定layout viewport  的宽度,为1个正整数金额,或标识符串"width-device"
    initial-scale    设定网页页面的原始放缩值,为1个数据,能够带小数
    minimum-scale    容许客户的最少放缩值,为1个数据,能够带小数
    maximum-scale    容许客户的最大放缩值,为1个数据,能够带小数
    shrink-to-fit=no IOS9中要想前面的特性起功效必须再加这个
    height    设定layout viewport  的高宽比,这个特性对大家其实不关键,非常少应用
    user-scalable    是不是容许客户开展放缩,值为"no"或"yes", no 意味着不容许,yes意味着容许
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- 网页页面叙述 -->
<meta name="description" content="不超出150个标识符"/>
<!-- 网页页面重要词 -->
<meta name="keywords" content=""/>
<!-- 网页页面作者 -->
<meta name="author" content="name, email"/>
<!-- 
    检索模块抓取
    all:文档将被查找,且网页页面上的连接能够被查寻; 
    none:文档将不被查找,且网页页面上的连接不能以被查寻;
    index:文档将被查找; 
    follow:网页页面上的连接能够被查寻; 
    noindex:文档将不被查找; 
    nofollow:网页页面上的连接不能以被查寻。 
-->
<meta name="robots" content="index,follow"/>
<!-- 忽视网页页面中的数据鉴别为电話,忽视email鉴别-->
<meta name="format-detection" content="telphone=no, email=no"/>

<!-- IOS begin -->
<!-- 加上到主屏后的题目(iOS 6 新增) -->
<meta name="apple-mobile-web-app-title" content="题目">
<!-- 当网站加上到主显示屏迅速起动方法,可掩藏详细地址栏,仅对于ios的safari (ios7.0版本号之后,safari上已看不见实际效果) -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是不是开启 WebApp 全屏方式,删掉iPhone默认设置的专用工具栏和工具栏 -->
<meta name="apple-touch-fullscreen" content="yes"/>
<!-- 加上智能化 App 广告宣传条 Smart App Banner(iOS 6+ Safari) -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 设定iPhone专用工具栏色调:默认设置值为 default(白色),能够定为 black(黑色)和 black-translucent(灰色半全透明) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 不让百度搜索转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 对于手持机器设备提升,关键是对于1些老的不鉴别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 标志 begin 
    网站加上至ios桌面上时的标志
-->
<!-- iPhone 和 iTouch,默认设置 57x57 像素,务必有 -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="table_ico57.png">
<!-- Retina iPhone 和 Retina iTouch,114x114 像素,能够沒有,但强烈推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="table_ico72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="table_ico114.png">
<!-- Retina iPad,144x144 像素,能够沒有,但强烈推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="table_ico144.png">

<!-- iOS 起动画面 begin -->
<!-- iPad 竖屏 768 x 1004(规范辨别率) -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen⑺68x1004.png"/>
<!-- iPad 横屏 1024x748(规范辨别率) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait⑴024x748.png"/>
<!-- iPad 竖屏 1536x2008(Retina) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen⑴536x2008.png"/>
<!-- iPad 横屏 2048x1496(Retina) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen⑵048x1496.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (规范辨别率) -->
<link rel="apple-touch-startup-image" href="/splash-screen⑶20x480.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen⑹40x960.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen⑹40x1136.png"/>
<!-- IOS end -->

<!-- Windows 8 磁贴色调 -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴标志 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- 加上 RSS 定阅 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

<!-- 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 -->

低版本号IE访问器浏览难题

加上好强制性Webkit核心的编码,应用国产访问器浏览网站早已不存在IE适配难题了,IE访客量将大大降低。但依然不能防止会有1些年久电脑上根据低版本号IE访问器浏览,假如大家专业以便这极小一部分客户开展 CSS HACK ,将比较严重加剧大家的工作中量。

何况自2016年1月起微软早已终止为IE11下列版本号出示适用和升级,早已这么久沒有升级,低版本号IE不但对CSS3和HTML5适用有难题,更有安全性难题。

那末,大家不去适用低版本号IE,这小一部分客户如何办呢?

大家可使用 if IE 句子给网站加上IE升級提醒,提醒客户开展访问器升級,或切换更优秀的访问器再浏览。

大家能够在不久的meta标识下加上1段自动跳转到IE升級提醒页的编码(当IE版本号低于IE11时自动跳转),完成低版本号IE客户浏览时提醒她们开展升級或拆换访问器。

强制性Webkit核心和提醒低版本号IE浏览客户升級详细编码以下所示,把这段编码加上到头顶部模版文档<head>标识下便可:

<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>

(@cc_on 是 IE10 及更旧版IE独有的标准编译程序句子,因而能够用来分辨是不是除 IE11 之外的别的IE版本号。)

由于低版本号IE浏览时由于兼容问题CSS3和HTML5网站常常是错版的,加上了上面这段编码,当低版本号IE客户浏览时就会自动跳转到升級提醒页,防止无须要的資源载入,减少网站服务器花销。

检测编码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF⑻" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>
  </head>
  <body>
        <h1>Hello world</h1>
  </body>
</html>

IE 11 会一切正常輸出

IE 10 可能看到下列网页页面

参照

前端开发 Meta 用法大汇总 - MR_LIXP

根据meta编码强制性访问器应用WebKit核心极速方式(处理 meta name="renderer" content="webkit" 不起功效)- [艾欢欢]

挪动端web网页页面的meta设定 - 恬雅过客

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。