Maison > Article > interface Web > Comment utiliser la structure d'en-tête en HTML
Comment utiliser la structure d'en-tête en HTML
- php中世界最好的语言original
- 2018-01-26 10:23:462188parcourir
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 1a309583e26acea4f04ca31122d8c535, 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">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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">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)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">◦ Mode partiellement bizarre (presque standard)
À propos du mode document du
navigateur IE
<!doctype html>modèle de boîte
.
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">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> -->
360 utilise Google Chrome Frame
<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->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> 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" />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">
dans l'en-tête. Liens associés : Déclaration de transcodage SiteApp
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">Partie d'optimisation SEO
. Titre de la page6ba3f8c8f29e6c859231c29a49d1ef72 (l'en-tête est requis)
<meta http-equiv="Cache-Control" content="no-siteapp" />Description du contenu de la page
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!