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>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">
•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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
◦ Mode non bizarre (standard)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
À propos du mode document du
navigateur IE
<!doctype html>
.
charset
Copiez le code comme suit :
html5 Autrefois, cela s'écrirait ainsi sur la page web :
Chinois simplifié
<meta charset='utf-8'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Priorisez l'utilisation de la dernière version d'IE et Chrome
<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->
360 utilise Google Chrome Frame
<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->
De plus, par mesure de sécurité, ajoutez
<p>
<strong>菠萝</strong>和<strong>鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong>黄梨</strong>。
</p>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" />
<meta name="renderer" content="webkit">
dans l'en-tête. Liens associés : Déclaration de transcodage SiteApp
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
. Titre de la page
<meta http-equiv="Cache-Control" content="no-siteapp" />
Définir l'auteur du site Web
<title>your title</title>
Liens associés : WEB1038 - La balise contient une valeur non valide
<meta name="keywords" content="your keywords">
viewport peut faire la mise en page s'affichent mieux sur les navigateurs mobiles.
écrit généralement
<meta name="description" content="your description">
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">
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">
而如果你的网站不是响应式的，请不要使用initial-scale或者禁用缩放。
<meta name="viewport" content="width=device-width,user-scalable=yes">
相关链接：非响应式设计的viewport
ios 设备
添加到主屏后的标题（iOS 6 新增）
复制代码代码如下:
<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
是否启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->
设置状态栏的背景颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->
只有在 "apple-mobile-web-app-capable" content="yes" 时生效
content 参数：
•default 默认值。
•black 状态栏背景是黑色。
•black-translucent 状态栏背景是黑色半透明。
如果设置为 default 或 black ,网页内容从状态栏底部开始。
如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
禁止数字识自动别为电话号码
<meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
在HTML的列表中，dl(dt,dd)、ul(li)、ol(li) 有什么不同
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)
