Que signifie la définition de l'en-tête en HTML ?-tutoriel HTML-php.cn

Que signifie la définition de l'en-tête en HTML ?

醉折花枝作酒筹

Libérer： 2023-01-06 11:16:47

original

18869 Les gens l'ont consulté

En HTML, la balise header définit l'en-tête du document. Le format de syntaxe est "
content
". L'élément d'en-tête est un élément structurel doté de fonctions de guidage et de navigation. Il est généralement utilisé pour placer le titre de la page entière ou un bloc de contenu dans la page.

Que signifie la définition de l'en-tête en HTML ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

1. Introduction de base à l'élément de balise d'en-tête

Avant la version HTML5, il était d'usage d'utiliser des balises div pour mettre en page les pages Web. En HTML5, un nouvel élément de balise d'en-tête est ajouté en fonction de. la balise div. Également appelée "balise d'en-tête

". Dans le passé, nous divisions souvent les pages Web en en-tête, contenu et bas dans la mise en page CSS div. Pour les grandes structures, nous utilisons souvent des div avec des identifiants pour la mise en page. L'en-tête est souvent présenté en utilisant ou . Les caractéristiques sont différentes de la disposition div traditionnelle. il n'y a pas besoin de balise div, mais ajoutez une nouvelle balise d'élément.

Il est reconnu que « en-tête » est un nom couramment utilisé dans la mise en page HTML, c'est pourquoi un nouvel élément de balise d'en-tête est ajouté en HTML5. Vous pouvez comprendre pourquoi l'en-tête est ajouté en tant qu'élément d'étiquette en HTML5.

En plus d'utiliser directement la balise d'en-tête, vous pouvez également définir une classe ou un identifiant sur l'en-tête.

2. Structure syntaxique

L'élément de balise d'en-tête est utilisé de la même manière que div. Il y a un début et il y a une fin.

Syntaxe :

<header>内容</header>

Copier après la connexion

1. Ne donnez pas d'identifiant ou de classe directement

<header>头部内容区</header>

Copier après la connexion

2. Définir l'identifiant

<header id=”pcss5”>头部内容区</header>

Copier après la connexion

Définir la classe

<header class=”pcss5”>头部内容区</header>

Copier après la connexion

4. Caractéristiques : tout comme l'élément de balise div, il peut être utilisé plusieurs fois et différents styles peuvent être définis en utilisant l'identifiant ou la classe à différents endroits.

3. Compatibilité

Étant donné que la balise d'en-tête est un nouvel élément de balise en HTML5, elle n'est pas prise en charge par les anciennes versions des navigateurs. Elle nécessite des navigateurs tels que IE9+ ou supérieur et la dernière version de Google Chrome. pour le soutenir. Bien sûr, les navigateurs nationaux tels que 360 Browser, Baidu Browser et Aoyou Browser utilisent tous le noyau IE fourni avec le système, donc les navigateurs nationaux sont en fait la même version que la version IE fournie avec votre système, donc votre navigateur IE est IE9 ou supérieur La version est naturellement compatible avec les nouveaux éléments de balise HTML5.

4. Cas de comparaison des anciennes et nouvelles mises en page div

Observez et maîtrisez l'application de l'en-tête en comparant la mise en page div+CSS et la mise en page HTML5+CSS.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>html5 Header标签实例 DIVCSS5</title>
    <style>
      /* 传统布局CSS */
      #header {
        width: 300px;
        height: 40px;
        background: #ccc;
      }

      /* HTML5布局样式 */
      header {
        width: 400px;
        height: 70px;
        color: #f00;
        background: #f5f5f5;
      }
      .color-000 {
        color: #000;
        background: #666;
      }
    </style>
  </head>
  <body>
    <div id="header">我在传统div布局中</div>

    <header>
      我在传统div布局中,必须在支持HTML5浏览器才能看到效果，
      建议谷歌浏览器测试观察效果
    </header>

    <header class="color-000">我颜色为黑色,背景为#666</header>
  </body>
</html>

Copier après la connexion

Capture d'écran de l'effet

Que signifie la définition de len-tête en HTML ?