Cette fois, je vais vous montrer comment utiliser la structure d'en-tête en HTML. Quelles sont les précautions lors de l'utilisation de la structure d'en-tête en HTML. Voici des cas pratiques, jetons un coup d'oeil.
Ce qui suit présente la structure d'en-tête couramment utilisée, ainsi que la signification et les scénarios d'utilisation de chaque balise et élément (cet article est basé sur l'article d'un maître et est un résumé étendu).
La structure d'en-tête de padding.me
Copiez le code comme suit :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<meta name="keywords" content="PaddingMe,front-end,前端,前端工程师,web开发工程师,HTML,CSS,JavaScript,HTML5,CSS3,git,Github">
<meta name="description" content="PaddingMe - he is a front-end developer.">
<meta name="robots" content="index,follow">
<meta name="author" content="PaddingMe,padding4me@gmail.com"></p>< p> <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta></p>< p> <meta http-equiv="Cache-Control" content="no-siteapp"></p>< p> <title>PaddingMe</title>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"></p>< p> <link rel="author" href="<a href="https://plus.google.com/u/1/105241873904238310190/?rel=author">https://plus.google.com/u/1/105241873904238310190/?rel=author</a>">
<link type="text/plain" rel="author" href="<a href="http://padding.me/humans.txt">http://padding.me/humans.txt</a>" /></p>< p> <link rel="stylesheet" href="/css/screen.css">
<link rel="stylesheet" href="/css/font.css">
<link rel="stylesheet" href="/css/social.css">
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<a href="http://feeds.feedburner.com/paddingme">http://feeds.feedburner.com/paddingme</a>" />
</head>Copier après la connexion
DOCTYPE (Type de document), la déclaration se trouve dans le document La position la plus en avant, avant la balise html , cette balise indique au navigateur quelle spécification HTML ou XHTML le document utilise.
L'instruction DTD (Document Type Definition) commence par , elle n'est pas sensible à la casse et il n'y a pas de contenu devant. S'il y a un autre contenu (sauf des espaces), le navigateur s'ouvrira. un mode étrange dans IE (mode bizarreries) restitue les pages Web. DTD publique, le format du nom est "enregistrement // organisation // balise de type // langue", "enregistrement" indique si l'organisation est enregistrée auprès de l'Organisation internationale de normalisation (ISO), + signifie oui, - signifie non. « Organisation » est le nom de l'organisation, tel que : W3C ; « Type » est généralement une DTD et « Étiquette » est une description de texte public désigné, c'est-à-dire un nom descriptif unique pour le texte public référencé, qui peut être suivi d'un numéro de version. La dernière « langue » est l'identifiant de langue ISO 639 de la langue DTD, par exemple : EN signifie anglais, ZH signifie chinois. XHTML 1.0 peut déclarer trois types de DTD. Représente respectivement la version stricte, la version de transition et le document HTML basé sur un framework. HTML 4.01 strict HTML5 introduit une écriture plus concise, qui est compatible vers l'avant et vers l'arrière, et dont l'utilisation est recommandée.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Copier après la connexion
Le doctype en HTML a deux objectifs principaux.
•Vérifier la validité des documents.
Il indique à l'agent utilisateur et au validateur la DTD selon laquelle ce document est rédigé. Cette action est passive. Chaque fois que la page est chargée, le navigateur ne télécharge pas la DTD et ne vérifie pas la validité. Elle n'est activée que lorsque la page est vérifiée manuellement.
•Déterminez le mode de rendu du navigateur
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Copier après la connexion
Pour les opérations réelles, indiquez au navigateur quel algorithme d'analyse utiliser lors de la lecture du document. S'il n'est pas écrit, le navigateur analysera le code selon ses propres règles, ce qui peut sérieusement affecter la mise en page HTML. Les navigateurs disposent de trois méthodes pour analyser les documents HTML.
◦ Mode non bizarre (standard)
◦ Mode bizarre
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Copier après la connexion
◦ Mode partiellement bizarre (presque standard)
À propos du mode document du
navigateur IE
, mode navigateur , mode strict, mode bizarre, balise DOCTYPE, mode verbeux ? standard! , et
<!doctype html>
Copier après la connexion
modèle de boîte
.
charset
déclare l'encodage de caractères utilisé dans le document,
Copiez le code comme suit :
html5 Autrefois, cela s'écrirait ainsi sur la page web :
Ces deux-là sont équivalents, vous pouvez lire plus précisément : http://stackoverflow.com/questions/4696499/meta -charset-utf-8- vs-meta-http-equiv-content-type, il est donc recommandé d'en utiliser un plus court et plus facile à retenir.
Attribut lang
Chinois simplifié
Chinois traditionnel
<meta charset='utf-8'>
Copier après la connexion
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Copier après la connexion
Dans de rares cas, il est nécessaire de ajoutez le code de la région , généralement pour souligner les différences dans l'utilisation du chinois selon les régions, par exemple :
Pour plus de détails, veuillez consulter http://zhi.hu/XyIa
Priorisez l'utilisation de la dernière version d'IE et Chrome
<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->
Copier après la connexion
Copier après la connexion
360 utilise Google Chrome Frame
<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->
Copier après la connexion
Copier après la connexion
Le navigateur 360 passera immédiatement au noyau de vitesse correspondant après avoir lu ceci étiqueter.
De plus, par mesure de sécurité, ajoutez
<p>
<strong>菠萝</strong>和<strong>鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong>黄梨</strong>。
</p>Copier après la connexion
L'effet qui peut être obtenu en écrivant de cette façon est que si Google Chrome Frame est installé, GCF sera utilisé pour rendre le Si GCF n'est pas installé, la version la plus élevée du noyau IE sera utilisée pour le rendu.
Liens connexes : Documentation sur les balises méta de contrôle du noyau du navigateur
Baidu interdit le transcodage
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Copier après la connexion
Lorsque vous ouvrez une page Web via un téléphone mobile Baidu, Baidu peut transcoder votre page Web, vos vêtements et vos publicités pour chiens. des pansements cutanés sur votre corps. À cet effet, vous pouvez ajouter
<meta name="renderer" content="webkit">
Copier après la connexion
dans l'en-tête. Liens associés : Déclaration de transcodage SiteApp
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Copier après la connexion
Partie d'optimisation SEO
. Titre de la page (l'en-tête est requis)
Mots clés de la page
<meta http-equiv="Cache-Control" content="no-siteapp" />
Copier après la connexion
Description du contenu de la page
Définir l'auteur du site Web
<title>your title</title>
Copier après la connexion
Liens associés : WEB1038 - La balise contient une valeur non valide
viewport
<meta name="keywords" content="your keywords">
Copier après la connexion
viewport peut faire la mise en page s'affichent mieux sur les navigateurs mobiles.
écrit généralement
<meta name="description" content="your description">
Copier après la connexion
width=device-width, ce qui fera apparaître des bordures noires lorsque l'iPhone 5 est ajouté à l'écran d'accueil et ouvert en mode plein écran WebApp (http ://bigc.at/ios-webapp-viewport-meta.orz)
<meta name="author" content="author,email address">
Copier après la connexion
content 参数：
•width viewport 宽度(数值/device-width)
•height viewport 高度(数值/device-height)
•initial-scale 初始缩放比例
•maximum-scale 最大缩放比例
•minimum-scale 最小缩放比例
•user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
Copier après la connexion
而如果你的网站不是响应式的，请不要使用initial-scale或者禁用缩放。
<meta name="viewport" content="width=device-width,user-scalable=yes">
Copier après la connexion
相关链接：非响应式设计的viewport
ios 设备
添加到主屏后的标题（iOS 6 新增）
复制代码代码如下:
<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
Copier après la connexion
是否启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->
Copier après la connexion
设置状态栏的背景颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->
Copier après la connexion
只有在 "apple-mobile-web-app-capable" content="yes" 时生效
content 参数：
•default 默认值。
•black 状态栏背景是黑色。
•black-translucent 状态栏背景是黑色半透明。
如果设置为 default 或 black ,网页内容从状态栏底部开始。
如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
禁止数字识自动别为电话号码
<meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->
Copier après la connexion
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
在HTML的列表中，dl(dt,dd)、ul(li)、ol(li) 有什么不同
html怎样使用超链接打开新窗口并且控制该窗口属性
HTML的head头标签有哪些用法
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
