Analyse détaillée de l'utilisation et des attributs des balises méta HTML

Le contenu de cet article est une analyse détaillée de l'utilisation et des attributs des balises méta html. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Depuis que j'ai appris le front-end par moi-même, je n'ai pas eu beaucoup de contact avec les balises méta, je me concentre principalement sur les balises qui peuvent être affichées, comme span, bouton, h1, etc. Parfois, je vérifie le code source de certains sites Web bien connus et trouve beaucoup de méta dans la balise head.

Aujourd’hui, apprenons à utiliser la méta et voyons quels sont ses attributs.

1. Définition et fonction

les méta, c'est-à-dire les métadonnées (métadonnées) sont les informations sur les données.

Cette balise fournit des métadonnées pour le document HTML. Les métadonnées ne seront pas affichées sur le client, mais seront analysées par le navigateur.

est généralement utilisé pour spécifier la description, les mots-clés, l'heure de la dernière modification du fichier, l'auteur et d'autres métadonnées de la page Web.

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.

2. Attributs

charset(htm5新增)	定义文档的字符编码
content	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	http响应头
name	属性名称
scheme (htm5废弃)	翻译 content 属性的值的方案

1. charset

Nouvel attribut HTML5 qui définit les caractères de la page actuelle. Codage

Nouvelle méthode d'écriture :

<meta charset="UTF-8">

Ancienne méthode d'écriture :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

En HTML5, la nouvelle méthode d'écriture est privilégiée

2. attribut de nom

a. mots-clés, mots-clés de la page Web actuelle, qui facilite l'identification des moteurs de recherche et améliore la précision de la recherche

<meta name="keywords" content="cdn，网络加速，运营商">

b. de la page Web actuelle, si elle est utilisée Lors d'une recherche sur Baidu, le contenu de la description sera affiché sous chaque titre des résultats de recherche pour permettre aux utilisateurs de localiser rapidement

<meta name="description" content="本公司专注提供CDN网络加速，同时也提供云计算服务">

c. compliqué et est principalement utilisé dans les pages Web mobiles et doit être écrit séparément. Un article, je vais temporairement sauter

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

d, les robots, la méthode d'indexation des robots des moteurs de recherche

<meta name="robots" content="none">

Les valeurs du contenu sont all, none, index, noindex, follow , nofollow, la valeur par défaut est all, les instructions spécifiques sont telles qu'indiquées dans le tableau :

all	文档可以被索引，文档中的链接可以被查询
none	文档不能被索引，同时文档中的链接不能被查询
index	文档可以被索引
noindex	文档不能被索引，但是文档中的链接可以被查询
follow	文档中的链接可以被查询
nofollow	文档可以被索引，但是文档中的链接不能被查询

e, auteur, le auteur du document

<meta name="author" content="liuhw，liuhuansir@126.com">

f, copyright, la description du copyright du document

<meta name="copyright" content="liuhw">

g, revisit-after, l'intervalle de temps pendant lequel les robots des moteurs de recherche doivent revisiter si votre. le site Web n'est pas mis à jour fréquemment, vous pouvez définir ce temps légèrement plus long, ce qui peut réduire légèrement la pression sur le serveur et économiser de l'argent sur les ressources de bande passante

<meta name="revisit-after" content="5 days" >

h, renderer, la méthode de rendu des navigateurs dual-core. , précisez quel noyau de navigateur est utilisé pour le rendu par défaut, par exemple, navigateur 360 :

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

3 , http-equiv

Simulez l'en-tête en http et renvoyer des informations au serveur

a expire, le délai d'expiration de la page Web Après l'expiration, vous devez revisiter le serveur

<meta http-equiv="expires" content="Sunday 26 October 2018 01:00 GMT" />

b, pragma (compatible avec http1. .0, 1.1), cache-control (nouveau dans http1.1), définissez la méthode de cache. Il est recommandé d'utiliser cache-control Pour le contenu de cet attribut, veuillez vous référer au cache dans http -control<🎜. >

<meta http-equiv="cache-control" content="no-cache">

c, actualiser, actualiser automatiquement et accéder à l'url déclarée dans le contenu

<meta http-equiv="refresh" content="5；URL=http://www.liuhw.club/"> //5秒后跳转向我自己的域名

d, set-cookie, ajouter un cookie

<meta http-equiv="set-cookie" content="TOKEN_KEY=81BBF72619795017B6AC214AE705F1F8; Domain=10.1.100.111; Path=/">

e, contenu -Tapez, l'encodage des caractères du document, le même que charset, il est recommandé d'utiliser charset

<meta http-equiv="content-type" content="text/html;charset=gb2312">

f, compatible x-ua, indiquez au navigateur quelle version utiliser pour restituer le document

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

Pour résumer, ce qui précède ne répertorie que certains attributs couramment utilisés. Pour ceux qui ne sont pas répertoriés, veuillez consulter la documentation lorsque vous devez les utiliser

[Recommandations associées :

Tutoriel vidéo HTML5]

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!