Méta-encyclopédie HTML

La balise Meta est une balise auxiliaire dans la zone head du langage HTML Elle se situe entre la balise head et la balise title en tête du document HTML. fournit des informations invisibles pour l’utilisateur.
Méta : les métadonnées sont les informations sur les données.

Les métadonnées peuvent être appelées à l'aide de navigateurs (comment le contenu est affiché ou les pages sont rechargées), de moteurs de recherche (mots-clés) ou d'autres services Web.

Dans notre langue vernaculaire, c'est une balise inutile en soi, mais une fois que certains effets sont définis à l'intérieur via d'autres attributs, cela fonctionne, nous l'appelons donc "méta" données".

<!-- 定义文档的字符编码 -->
<meta charset="utf-8" /> 
<!-- 强制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  的宽度，为一个正整数，或字符串"width-device"
    initial-scale    设置页面的初始缩放值，为一个数字，可以带小数
    minimum-scale    允许用户的最小缩放值，为一个数字，可以带小数
    maximum-scale    允许用户的最大缩放值，为一个数字，可以带小数
    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@gmail.com"/>
<!-- 
    搜索引擎抓取
    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 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<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">
<!-- 设置苹果工具栏颜色:默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 不让百度转码 -->
<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 图标 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-768x1004.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.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 竖屏 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"/>
<!-- 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 -->

Problèmes d'accès aux navigateurs IE de version basse

Ajoutez le code pour forcer le noyau Webkit IE à n'existe plus lors de l'utilisation de navigateurs nationaux. accéder aux sites Web. S’il y a un problème de compatibilité, le nombre de visiteurs d’IE sera considérablement réduit. Mais il est toujours inévitable que certains anciens ordinateurs accèdent via des versions inférieures des navigateurs IE. Si nous effectuons spécifiquement CSS HACK pour ce très petit nombre d'utilisateurs, cela augmentera considérablement notre charge de travail.

De plus, Microsoft a cessé de fournir du support et des mises à jour pour les versions inférieures à IE11 depuis janvier 2016. Il n'y a pas eu de mise à jour depuis si longtemps. Les versions inférieures d'IE ont non seulement des problèmes pour prendre en charge CSS3 et HTML5, mais aussi. ont des problèmes de sécurité.

Donc, si nous ne prenons pas en charge les versions inférieures d’IE, qu’arrivera-t-il à ce petit nombre d’utilisateurs ?

Nous pouvons utiliser l'instruction if IE pour ajouter une invite de mise à niveau d'IE au site Web, invitant l'utilisateur à mettre à niveau le navigateur ou à passer à un navigateur plus avancé avant de revenir.

Nous pouvons ajouter un morceau de code sous la balise méta tout de suite pour accéder à la page d'invite de mise à niveau d'IE (sauter lorsque la version d'IE est inférieure à IE11), afin que les utilisateurs disposant de versions inférieures d'IE puissent être invités. pour mettre à niveau ou modifier lors de leur visite dans le navigateur.

Forcer le noyau Webkit et inviter les utilisateurs ayant accès à une version basse à IE à mettre à niveau. Le code complet est le suivant. Ajoutez ce code au fichier de modèle d'en-tête sous la balise 93f0f5c25f18dab9d176bd4f6de5d30e > ( @cc_on est une instruction de compilation conditionnelle unique à IE10 et aux versions antérieures d'IE, elle peut donc être utilisée pour déterminer s'il s'agit d'autres versions d'IE autres que IE11)

Parce que les versions inférieures d'IE sont souvent incompatibles avec Sites Web CSS3 et HTML5 lors de l'accès. Mauvaise version. Le code ci-dessus a été ajouté. Lorsque les utilisateurs de versions inférieures d'IE visitent, ils accèdent à la page d'invite de mise à niveau pour éviter un chargement inutile des ressources et réduire la surcharge du serveur du site Web.

Code de test

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

IE 11 sortira normalement

IE 10 sortira normalement Vous verrez la page suivante

Tutoriels recommandés : "

PHP

" "HTML"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!