Qu'est-ce qu'une balise méta ? résumé de la balise méta-tutoriel HTML-php.cn

définition de balise méta
peut fournir des méta-informations sur la page (méta-information), telles que pour la recherche Index Qing et mise à jour descriptions et mots-clés de fréquence.
Ce qui précède est l'explication sur w3c. Les méta-informations sont des données utilisées pour décrire des données, c'est-à-dire certaines informations utilisées pour décrire la page actuelle. Par exemple : définir la description de la page, les mots-clés, l'auteur, etc.

contient l'attribut
1.name attribut
name L'attribut fournit le nom dans la paire nom/valeur (et l'attribut de contenu qui sera mentionné plus tard est la valeur correspondant au nom). Si nous imaginons une page comme un objet physique dans nos vies, prenons un CV comme analogie. Le nom, le sexe, le lieu d'origine, les compétences, l'expérience du projet, etc. peuvent tous être considérés comme l'attribut du nom d'un CV, et le contenu. L'attribut est équivalent aux valeurs correspondant à ces noms.

<meta name="名称" content="具体的描述">

Copier après la connexion

2.attribut content
L'attribut content fournit la valeur dans la paire nom/valeur. La valeur peut être n’importe quelle chaîne valide.
L'attribut content doit toujours être utilisé avec l'attribut name ou l'attribut http-equiv.
3.attribut http-equiv
equiv est l'abréviation d'équivalent, qui signifie égal et équivalent. Il n'est pas difficile de comprendre que cela équivaut à la fonction d'en-tête de fichier de http. Il peut renvoyer des informations utiles au navigateur pour aider à afficher correctement et avec précision le contenu de la page Web. La valeur d'attribut correspondante est content. en fait chacun La variable valeur du paramètre. (Les étudiants qui ne comprennent pas http peuvent trouver des informations pertinentes pour en savoir plus).

<meta http-equiv="名称" content="具体的描述">

Copier après la connexion

Paires nom/valeur couramment utilisées
1. keywords (keyword)
Description : Utilisé pour indiquer au moteur de recherche les mots-clés de votre page Web. Exemple :

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

Copier après la connexion

2.description (description du contenu du site Web)
Description : Utilisé pour indiquer aux moteurs de recherche que vous Le contenu principal du site Web. Exemple :

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

Copier après la connexion

3.author (auteur)
Description : Utilisé pour marquer l'auteur du page Web. Exemple :

<meta name="author" content="Lxxyx,841380530@qq.com">

Copier après la connexion

4.renderer (méthode de rendu du navigateur double cœur)
Description : le moteur de rendu est préparé pour les navigateurs dual-core et est utilisé pour spécifier comment le navigateur dual-core restitue la page par défaut. Par exemple, navigateur 360. Exemple :

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

Copier après la connexion

5.viewport(fenêtre mobile)
Explication : la fenêtre d'affichage est considérée comme un attribut de la conception du terminal mobile

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" name="viewport">

Copier après la connexion

largeur - largeur de la fenêtre d'affichage
hauteur - la hauteur de la fenêtre
échelle initiale - le rapport de mise à l'échelle initial
minimum -scale - Échelle minimale sur laquelle l'utilisateur est autorisé à zoomer
maximum-scale – Échelle maximale sur laquelle l'utilisateur est autorisé à zoomer
évolutif par l'utilisateur – Indique si l'utilisateur peut zoomer manuellement sur Zoom

6.content-Type(设定网页字符集)
说明：用于设定网页字符集，便于浏览器解析与渲染页面举例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  //旧的HTML，不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8

Copier après la connexion

7.X-UA-Compatible(浏览器采取何种版本渲染当前页面)
说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）举例：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

Copier après la connexion

8.refresh(自动刷新并指向某页面)
说明：网页将在设定的时间内，自动刷新并调向设定的网址。举例:

<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> //5秒后重定向到w3c官网

Copier après la connexion

额额额，一个一个的太累了，下面是一大坨meta标签：

    <!-- 声明文档使用的字符编码 -->
    <meta charset=&#39;utf-8&#39;>
    <!-- 优先使用 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">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
 
    <!-- 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 图标 begin -->
    <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（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 横屏 2048x1496（Retina） -->
 
    <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 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="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 磁贴颜色 -->
    <meta name="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 -->

Copier après la connexion

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!