Maison >interface Web >Tutoriel H5 >Explication détaillée de la tête de html5
Explication détaillée de la tête de html5
- 零下一度original
- 2017-07-16 15:39:144295parcourir
Le travail sur les terminaux mobiles est devenu de plus en plus une partie importante du travail front-end. En plus du développement de projet ordinaire, la fonction de balise d'en-tête HTML, en particulier la balise méta, est très importante.
La section d'en-tête d'un document HTML comprend généralement la spécification du titre de la page, la fourniture aux moteurs de recherche d'informations sur la page elle-même, le chargement de feuilles de style et le chargement de fichiers JavaScript (out Pour des raisons de performances, la plupart du temps JavaScript est chargé avant la fin de la balise 36cc49f0c466276486e50c850b7e4956 en bas de page). À l'exception du titre, le contenu de l'en-tête est invisible pour les visiteurs de la page
Ce qui suit est un exemple de la partie en-tête d'un document HTML :
<head>
<meta charset="utf-8" />
<meta name="author" content="Adam Freeman"/>
<title>Your page title</title>
<base href="http://titan/listings/" target="_blank"/>
<style type="text/css">
a{
background-color: grey;
color: white;
padding: 0.5em;
}
</style>
</head>DOCTYPE(. Type de document), cette déclaration se situe au tout début du document, avant la balise html. Cette balise indique au navigateur quelle spécification HTML ou XHTML utilise le document.
Utilisez le doctype HTML5, insensible à la casse.
élément title
L'élément head doit contenir un élément title Le contenu de cet élément apparaîtra dans l'onglet du navigateur ou dans le top. de la fenêtre du navigateur, utilisé comme titre de la page, est lié au navigateur. L'élément
base
élément de base est utilisé pour définir une URL de base sur laquelle les liens relatifs dans les documents HTML sont analysés. Si elle n'est pas spécifiée, l'URL du document actuellement chargé est utilisée. L'élément de base peut également définir la manière dont le lien s'ouvre lorsque l'utilisateur clique dessus et la manière dont le navigateur réagit lorsque le formulaire est soumis.
<base href="http://bjpowernode/listings/" target="_blank"/>
1) href est l'URL de base spécifiée.
2) L'attribut target spécifie où ouvrir tous les liens sur la page, y compris la valeur :
1) _blank : ouvre le document connecté dans une nouvelle fenêtre
2) _self ; : Par défaut, le document lié est ouvert dans le même cadre ;
3) _parent : Ouvrez le document lié dans le cadre parent
4) _top : Ouvrez le document lié dans toute la fenêtre ; ) framename : ouvre le document lié dans le cadre spécifié.
élément méta
l'élément méta est utilisé pour définir diverses métadonnées du document. L'élément méta peut être utilisé à des fins multiples, mais chaque élément méta ne peut être utilisé que. pour un Si vous devez en utiliser plusieurs, vous devez ajouter plusieurs éléments méta à l'élément head.Spécifier la paire de métadonnées nom/valeur
<meta name="author" content="Adam Freeman"/>L'attribut name est utilisé pour indiquer le type de métadonnées, et le L'attribut content fournit de la valeur. L'attribut name contient les valeurs suivantes : 1) nom de l'application : le nom du système d'application Web auquel appartient la page actuelle
2) auteur : le nom de l'auteur de la page actuelle 3) description : description de la page actuelle ;
4) générateur : le nom du logiciel utilisé pour générer du HTML
5) mots-clés : décrit le contenu de la page.
En plus des 5 noms de métadonnées prédéfinis ci-dessus, vous pouvez également utiliser des extensions de métadonnées. Ici (http://wiki.whatwg.org/wiki/MetaExtensions), vous trouverez une liste fréquemment mise à jour de ces extensions. Certaines extensions sont utilisées plus souvent, comme les métadonnées des robots, que l'auteur d'un document HTML peut utiliser pour indiquer aux moteurs de recherche comment traiter le document :
<meta name="robots" content="noindex"/>
1) noindex : Ne pas indexer cette page
2) noarchive : Ne pas archiver ou mettre en cache cette page 3) nofollow : Ne suivez pas cette page Le lien dans la page continue la recherche.
La plupart des moteurs de recherche fournissent des guides pour optimiser des pages Web ou des sites Web entiers. Vous pouvez consulter la page Web ou le guide d'optimisation de site Web fourni par le moteur de recherche correspondant.
<meta charset="utf-8" />Simulation des champs d'en-tête HTTP
L'élément méta peut être utilisé pour simuler ou remplacer les valeurs de trois champs d'en-tête HTTP.
<meta http-equiv="refresh" content="5"/>
1) rafraîchir : Spécifiez un intervalle de temps en secondes, après lequel la page actuelle sera rechargée depuis le serveur. Vous pouvez également spécifier une URL à charger par le navigateur, telle que :
<meta http-equiv="refresh" content="5;http://www.apress.com"/>
3) content-type : Une autre façon de déclarer l'encodage des caractères utilisé dans la page HTML ; , tel que :
<meta http-equiv="content-type" content="text/html charset=UTF-8"/>élément de style
définit le style CSS intégré dans le document HTML.
<style type="text/css">
a{
background-color: grey;
color: white;
padding: 0.5em;
}
</style>可以为style元素指定样式适用的媒体：
<style media="screen AND (min-width:500px)" type="text/css">
......
</style>media属性中的screen是设备类型，可选值的范围包括：
1）all：将样式用于所有设备（默认值）；
2）aural：将样式用于语音合成器；
3）braille：将样式用于忙问设备；
4）handheld：将样式用于手持设备；
5）projection：将样式用于投影机；
6）print：将样式用于打印预览和打印页面时；
7）screen：将样式用于计算机显示器屏幕；
8）tty：将样式用于电传打字机之类的等宽设备；
9）tv：将样式用于电视机。
media属性中的(min-width:500px)指定特性，包括：
1）width height：指定浏览器窗口的宽度和高度，单位px，例如：width:200px
2）device-width device-height：指定整个设备（而不仅仅是浏览器窗口）的宽度和高度，单位px，例如：min-device-height:200px
3）resolution：指定设备的像素密度，单位dpi（点/英寸）或dpcm（点/厘米），例如：max-resolution:600dpi
4）orientation：指定设备的较长边朝向，可选值为portrait和landscape
5）aspect-ratio device-aspect-ratio：指定浏览器窗口或整个设备的像素宽高比，例如：min-aspect-ratio:16/9
6）color monochrome：指定彩色或黑白设备上每个像素占用的二进制位数，例如：min-monochrome:2
7）color-index：指定设备所能显示的颜色数目，例如：max-color-index:256
8）scan：指定电视的扫描模式，包括值progressive和interlace
9）grid：指定设备的类型，支持的值为0和1（1代表网格型设备，使用固定的网格显示内容）
link元素
用来在HTML文档和外部资源（如CSS样式表）之间建立联系。link元素包含6个局部属性，如下：
1）href：指定link元素指向的资源的URL；
2）hreflang：说明所关联资源使用的语言；
3）media：说明所关联的内容用于哪种设备，同style中的media属性；
4）rel：说明文档与所关联资源的关系类型，值的范围如下：
---alternate：链接到文档的替代版本，比如另一种语言的译本；
---author：链接到文档的作者；
---help：连接到当前文档的说明文档；
---icon：指定图标资源；
---license：链接到当前文档的相关许可证；
---pingback：指定一个回探（pingback）服务器，从其他网站链接到博客的时候它能自动得到通知；
---prefetch：预先获取一个资源；
---stylesheet：载入外部样式表。
5）sizes：指定图标的大小；
6）type：指定所关联资源的MIME类型，如text/css、image/x-icon。
载入外部样式表
<link rel="stylesheet" type="text/css" href="styles.css"/>
可以使用多个link元素载入多个外部资源。
为页面定义网站标志
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
浏览器载入HTML页面时，会加载并显示网站标志。
注：如果网站标志文件位于/favicon.ico（即Web服务器的根目录），那就不必用到link元素，大多数浏览器在载入页面时都会自动请求这个文件，就算没有link元素也是如此。
预先获取资源
可以要求浏览器预先获取预计很快就要用到的资源。
<link rel="prefetch" href="/page2.html"/>
注：目前不是所有浏览器都支持该功能。
script元素
用于在页面中加入脚本，可以直接在文档中定义脚本和引用外部文件中的脚本。该元素支持的局部属性如下：
1）type：表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略
2）src：指定外部脚本文件的URL
3）defer async（HTML5新增）：设定脚本的执行方式，这两个属性只能与src属性一同使用
4）charset：说明外部脚本文件所用字符编码，该属性只能与src属性一同使用
定义文档内嵌脚本
<script>
document.write("This is from the script");
</script>默认情况下，浏览器在页面中一遇到脚本就会执行。
载入外部脚本库
可以将脚本放到单独的文件中，然后用script元素载入HTML文档。
<script src="simple.js"></script>
推迟脚本的执行
使用async和defer属性可以对脚本的执行方式加以控制，defer属性告诉浏览器要等页面载入和解析完成后才能执行脚本：
<script defer src="simple2.js"></script>
由于html遇到脚本就会执行，如果你的脚本需要使用到html脚本中的内容，通常你需要将脚本放到相应的html脚本后，但在html5中，使用defer属性就能达到同样的目的。
浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面，各个script元素依次同步执行。async属性可以在浏览器解析HTML文档时异步加载和执行脚本，如果运用得当，可以大大提高整体加载性能。
<script async src="simple2.js"></script>
noscript元素
noscript元素用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。
<noscript>
<h1>JavaScript is required!</h1>
<p>You cannot use this page without JavaScript</p>
</noscript>还有一种选择是在浏览器不支持JavaScript时将其引至另一个URL。
<noscript>
<meta http-equiv="refresh" content="0;www.apress.com"/>
</noscript>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!
Articles Liés
Voir plus- Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes
- Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)
- Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9
- Expressions régulières et nouveaux éléments HTML5
- Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur