Comment utiliser la balise

du HTML

php中世界最好的语言

Libérer： 2017-11-22 17:17:23

original

5244 Les gens l'ont consulté

Dans les versions antérieures à HTML5, vous avez peut-être l'habitude d'utiliser des balises DIV pour mettre en page des pages Web, mais H5 ajoute un élément de balise d'en-tête basé sur la balise DIV, qui est ce que nous appelons souvent la balise head dans le passé. les pages Web sont divisées en mises en page. Pour l'en-tête, le contenu et le bas, il existe désormais des balises systématiques pour nous aider à planifier, ce qui est également beaucoup plus pratique. Alors, comment utiliser cette balise d'en-tête ? Aujourd'hui, nous allons examiner de plus près

Il est reconnu par tout le monde que "en-tête" est un nom couramment utilisé dans mise en page HTML , donc un nouvel élément de balise d'en-tête a été ajouté au 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.

Structure grammaticale

L'élément de balise d'en-tête a le même usage que p. Il y a un début et il y a une fin.

Syntaxe :

<header>内容</header>

Copier après la connexion

Ne pas donner directement l'identifiant ou la classe

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

Copier après la connexion

Définir l'identifiant

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

Copier après la connexion

Définir la classe

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

Copier après la connexion

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.

Compatibilité

Étant donné que la balise d'en-tête est un nouvel élément de balise en HTML5, les anciennes versions des navigateurs ne la prennent pas en charge. Elle nécessite des navigateurs tels que IE9+ ou supérieur et la dernière version de Google Chrome pour la prendre 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 IEDans IE9 ou supérieur, il est naturellement compatible avec les nouveaux éléments de balise HTML5.

Cas de comparaison de mise en page DIV nouveau et ancien

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.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>html5 Header标签实例</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> 
<p id="header">我在传统p布局中</p> 
 
<header>我在传统p布局中,必须在支持HTML5浏览器才能看到效果， 
建议谷歌浏览器测试观察效果</header> 
 
<header class="color-000">我颜色为黑色,背景为#666</header> 
</body> 
</html>

Copier après la connexion

Il y a tellement d'utilisations des balises. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php Autres articles liés !

Lecture connexe :

IE6 prend-il en charge le survol ?

Partage du code d'image et de texte pour la production de barre de navigation HTML

Comment utiliser CSS pour manipuler le z-index de p

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!