TÊTE


HEAD

Type de document

Ajoutez une déclaration de mode standard à la première ligne de chaque page HTML pour garantir des performances cohérentes dans chaque navigateur. 

<!DOCTYPE html>

Attribut de langue

Pourquoi utiliser lang="zh-cmn-Hans" au lieu du lang="zh-CN" que nous écrivons habituellement Veuillez vous référer à la discussion sur Zhihu : La déclaration en tête de la page Web devrait ? utiliser lang ="zh" ou lang="zh-cn" ? 

<!-- 中文 -->
<html lang="zh-Hans">

<!-- 简体中文 -->
<html lang="zh-cmn-Hans">

<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">

<!-- English -->
<html lang="en">

Encodage des caractères

  • Utilise l'encodage utf-8 sans nomenclature comme format de fichier
  • La méta qui spécifie l'encodage des caractères doit être le premier élément enfant direct de la tête 
<html>
  <head>
    <meta charset="utf-8">
    ......
  </head>
  <body>
    ......
  </body>
</html>

Mode de compatibilité IE

 ; Donne la priorité à l'utilisation de la dernière version du noyau IE et Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Optimisation SEO

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- SEO -->
    <title>Style Guide</title>
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
</head>

viewport

  • viewport : fait généralement référence à la taille de la zone de contenu de la fenêtre du navigateur, à l'exclusion des barres d'outils, onglets, etc.;viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
  • width: 浏览器宽度，输出设备中的页面可见区域宽度；
  • device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
  • initial-scale: 初始缩放比例；
  • maximum-scale
    • width : largeur du navigateur, la largeur de la zone visible de la page dans le périphérique de sortie

device-width : résolution du périphérique ; width, la largeur visible de l'écran du périphérique de sortie ;

initial-scale : mise à l'échelle initiale

    maximum-scale : mise à l'échelle maximale
  • Optimisée pour ; appareils mobiles, définissez la largeur et la mise à l'échelle initiale de la zone visible. 
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">
iOS icon

apple-touch-icon les images sont automatiquement traitées en coins arrondis et en surbrillance

    apple-touch-icon-precomposed interdit au système d'ajouter automatiquement des effets et affiche directement le design original 
  • <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

<!-- iPad，72x72 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">

<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">

<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">
  •  ; favicon
Lorsque favicon n'est pas spécifié, la plupart des navigateurs demanderont favicon.ico dans le répertoire racine du serveur Web. Afin de garantir que le favicon est accessible et d'éviter le 404, une des deux méthodes suivantes doit être suivie :

Placer le fichier favicon.ico dans le répertoire racine du serveur Web
🎜Utiliser le lien pour spécifier le favicon ; 🎜🎜
<link rel="shortcut icon" href="path/to/favicon.ico">
🎜Modèle HEAD🎜
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Style Guide</title>
    <meta name="description" content="不超过150个字符">
    <meta name="keywords" content="">
    <meta name="author" content="name, email@gmail.com">

    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- iOS 图标 -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
    <link rel="shortcut icon" href="path/to/favicon.ico">
</head>
🎜🎜