Résumé des codes couramment utilisés

Cette fois, je vais vous présenter un résumé des codes couramment utilisés. Quelles sont les précautions d'utilisation des codes

Attributs requis

属性	值	描述
content	some text	定义与http-equiv或name属性相关的元信息

Propriétés

Valeur

content

属性	值	描述
http-equiv	content-type / expire / refresh / set-cookie	把content属性关联到HTTP头部。
name	author / description / keywords / generator / revised / others	把 content 属性关联到一个名称。
content	some text	定义用于翻译 content 属性值的格式。

certains text

Définir les méta-informations liées aux attributs http-equiv ou name

Attributs facultatifs

Attributs	Valeur	Description
http-equiv	type de contenu / expirer / actualiser / set-cookie	Associez l'attribut content à l'en-tête HTTP.
nom	auteur / description / mots-clés / générateur / révisé / autres	Associer l'attribut content à un nom.
contenu	du texte	Définissez le format utilisé pour traduire la valeur de l'attribut de contenu.

Optimisation SEO

Document de référence

• Mots clés de la page, chaque page Web doit avoir une description Un ensemble unique de mots-clés pour le contenu de cette page Web.
  Utilisez des mots-clés et des expressions descriptifs et représentatifs que les gens sont susceptibles de rechercher, et décrivez avec précision les informations fournies sur la page. Marquez le contenu trop court et les moteurs de recherche pourraient ne pas le considérer comme pertinent. De plus, les balises ne doivent pas dépasser 874 caractères.

<span style="font-size: 14px;"><meta name="keywords" content="your tags" /></span>

• Description de la page doit contenir une description de 150 caractères maximum qui reflète fidèlement le contenu de la page. page Web.

<span style="font-size: 14px;"><meta name="description" content="150 words" /></span>

• Méthode d'indexation des moteurs de recherche, robotterms est un ensemble de valeurs séparées par des virgules (,), généralement comme suit Valeurs : none, noindex, nofollow, all, index et follow. Assurez-vous d'utiliser correctement les valeurs des attributs nofollow et noindex.

<span style="font-size: 14px;"><meta name="robots" content="index,follow" /><!--<br/>    all：文件将被检索，且页面上的链接可以被查询；<br/>    none：文件将不被检索，且页面上的链接不可以被查询；<br/>    index：文件将被检索；<br/>    follow：页面上的链接可以被查询；<br/>    noindex：文件将不被检索；<br/>    nofollow：页面上的链接不可以被查询。<br/> --></span>

• Redirection et actualisation de la page : le nombre dans le contenu représente le temps (secondes), c'est-à-dire combien de temps il prend pour se rafraîchir. Si vous ajoutez une URL, elle sera redirigée vers la page Web spécifiée (les moteurs de recherche peuvent la détecter automatiquement, et elle peut facilement être considérée comme trompeuse par le moteur et être punie).

<span style="font-size: 14px;"><meta http-equiv="refresh" content="0;url=" /></span>

• Autre

<span style="font-size: 14px;"><meta name="author" content="author name" /> <!-- 定义网页作者 --><meta name="google" content="index,follow" /><meta name="googlebot" content="index,follow" /><meta name="verify" content="index,follow" /></span>

Mobile

• viewport de l'appareil : peut optimiser l'affichage des navigateurs mobiles. Si le site Web ne répond pas, n'utilisez pas la mise à l'échelle initiale et ne désactivez pas la mise à l'échelle.
  La largeur de la fenêtre d'affichage de la plupart des appareils de 4,7 à 5 pouces est définie sur 360 pixels ; l'appareil de 5,5 pouces est défini sur 400 pixels ; l'iPhone6 ​​​​est réglé sur 375 pixels ; l'iPhone6 ​​​​plus est réglé sur 414 pixels.

<span style="font-size: 14px;"><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/><!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  --></span>

1. largeur : largeur (nombre/largeur de l'appareil) (plage de 200 à 10 000, 980 pixels par défaut)

2. hauteur : hauteur (nombre/hauteur de l'appareil) (plage de 223 à 10 000)

3. échelle initiale : mise à l'échelle initiale (allant de > 0 à 10)

4. minimum-scale：允许用户缩放到的最小比例

5. maximum-scale：允许用户缩放到的最大比例

6. user-scalable：用户是否可以手动缩 (no,yes)

7. minimal-ui：可以在页面加载时最小化上下状态栏。（已弃用）

注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

• WebApp全屏模式：伪装app，离线应用。

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 --></span>

• 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /></span>

• 添加到主屏后的标题

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-title" content="标题"></span>

• 忽略数字自动识别为电话号码

<span style="font-size: 14px;"><meta content="telephone=no" name="format-detection" /> </span>

• 忽略识别邮箱

<span style="font-size: 14px;"><meta content="email=no" name="format-detection" /></span>

• 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner

<span style="font-size: 14px;"><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> </span>

• 其他 参考文档

<span style="font-size: 14px;"><!-- 针对手持设备优化，主要是针对一些老的不识别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"></span>

网页相关

• 申明编码

<span style="font-size: 14px;"><meta charset=&#39;utf-8&#39; /></span>

• 优先使用 IE 最新版本和 Chrome

<span style="font-size: 14px;"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!-- 关于X-UA-Compatible --><meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 --><meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 --><meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 --></span>

• 浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。参考文档

<span style="font-size: 14px;"> <meta name="renderer" content="webkit|ie-comp|ie-stand"></span>

国内双核浏览器默认内核模式如下：
1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）
2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）

• 禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。

<span style="font-size: 14px;"><meta http-equiv="Pragma" content="no-cache"></span>

• Windows 8

<span style="font-size: 14px;"><meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --><meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 --></span>

• 站点适配：主要用于PC-手机页的对应关系。

<span style="font-size: 14px;"><meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url"><!--<br/>[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；<br/>url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。<br/> --></span>

• 转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta

<span style="font-size: 14px;"><meta http-equiv="Cache-Control" content="no-siteapp" /></span>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5+Canvas使用案例详解

怎样使用javascript Date Format方法

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!