Maison > Article > interface Web > Utilisation de la balise HTML

Utilisation de la balise HTML

巴扎黑original: 2017-06-07 11:41:336066parcourir

balise d'élément d'en-tête HTML5 Le nouvel élément de balise de html5 est

. Grâce au didacticiel de base de l'en-tête HTML, vous pouvez apprendre à l'utiliser comme technique de mise en page CSS d'en-tête.

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

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é. 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 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 a été 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 - TOP

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 donnez pas directement l'identifiant ou la classe

zone

2. Définir l'identifiant

Zone de contenu de l'en-tête

Zone de contenu de l’en-tête

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

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

Captures d'écran du code et effets dans le logiciel DW. Effectuez des rendus PS sur l'effet de 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. Utilisation de la balise HTML <header>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemples d'utilisation de la balise d'en-tête en HTMLArticle suivant：Exemples d'utilisation de la balise d'en-tête en HTML

Articles Liés

Voir plus