Tutoriel de mise en page des balises HTML5

巴扎黑

Libérer： 2017-06-27 10:23:47

original

2272 Les gens l'ont consulté

balise d'élément d'en-tête HTML5 html5Élément de balise nouvellement ajouté

, apprenez grâce au didacticiel de base de l'en-tête HTML et servez également de compétences en matière de mise en page CSS d'en-tête

Avant la version HTML5, il était habituel d'utiliser des balises div pour mettre en page les pages Web. En HTML5, un nouvel élément de balise d'en-tête a été ajouté basé sur 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 devrait être reconnu par tout le monde 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.

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 :

Content

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

2. Définir l'identifiant

Zone de contenu d'en-tête

3. Définir la classe

Zone de contenu d'en-tête

Caractéristiques : comme l'élément de balise DIV, il peut être utilisé plusieurs fois, et l'identifiant ou la classe peut être utilisé pour définir différents styles à différents endroits.

3. Compatibilité - TOP

La balise d'en-tête étant un nouvel élément de balise en HTML5, elle n'est pas prise en charge par les anciennes versions des navigateurs. Elle nécessite les navigateurs IE9+ ou supérieurs, la dernière version de Google Chrome. et d'autres navigateurs pris en charge. 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 de la version IE fournie avec votre système, donc vous

Navigateur IE

Dans IE9 ou supérieur, il est naturellement compatible avec les nouveaux éléments de balise HTML5. 4. Cas comparatif de l'ancienne et de la nouvelle mise en page DIV - TOP

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.

1. Code complet HTML5+CSS de l'instance DIVCSS5

2. Captures d'écran des effets

<!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

Captures d'écran des effets de disposition des div et d'en-tête

Tutoriel de mise en page des balises HTML5 <header> Conseil spécial pour DIVCSS5 : le code est capturé dans le logiciel DW et les effets sont rendus dans PS sur le navigateur Google Chrome (prend en charge HTML5). Les IE6-IE8 ordinaires ne prennent pas en charge HTML5 et ne peuvent pas voir l'effet de mise en page HTML5. Vous avez besoin des navigateurs IE9 et supérieurs pour voir l'effet de mise en page.

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!