Analyse complète de la structure du document et de la nouvelle étiquette de HTML5

Auteur：Eve Cole Date de mise à jour：2025-02-18 02:36:01

un. Structure du document HTML5

1. La première étape: ouvrez l'outil de développement et ouvrez le dossier spécifié;

2. Étape 2: Enregistrez le fichier index.html sur le disque, .html est un suffixe Web;

3. Étape 3: Commencez à écrire le format de base de HTML5.

 <! 1. <A-Head> // Incluant les métadonnées de document Démarrer pour démarrer <Meta Charset = UTF-8> // DÉCLAR ENODING DE CARACTÈRE </TITLE> // Définir le titre du document </ head> // <body> // signifie le contenu de Documents html <a href = http://www.baidu.com> baidu </a> // un élément hyperlien (tag) </ody> // indique html </html> // / exprimer l'extrémité du html document

deux. Analyse de la structure des documents

1.Doctype

Déclaration de type de document (Déclaration de type de document, également connu sous le nom de doctype). Il dit principalement au navigateur

Le type de vue de fichier. Dans les précédents HTML4.01 et XHTML 1.0, il indique la version et le style HTML spécifiques.

Maintenant, HTML5 n'a pas besoin de représenter la version et le style.

2.HTML Élément

Tout d'abord, l'élément signifie l'étiquette et l'élément HTML est l'étiquette HTML. Les éléments HTML sont des éléments qui commencent et terminent le document. Il s'agit d'une double étiquette, en écho et de queue, y compris du contenu.

Cet élément a un attribut et une valeur: lang = zh-cn,

Cela signifie que le document utilise le langage: chinois simplifié.

<html lang = zh-cn> // s'il est anglais, c'est en '

Page chinoise simplifiée: html lang = zh-cmn-hans

Page traditionnelle chinoise: html lang = zh-cmn-hant

Page d'anglais: html lang = en

3. Élément de tête

Utilisé pour inclure le contenu des métadonnées, les données de métadonnées incluent: <ink>, <meta>, <noscript>, <script>, <script>,

<Style>, <tit-title>. Ces contenus sont utilisés pour fournir des informations pour les navigateurs, tels que Link fournit des informations CSS, Script

Fournir des informations JavaScript, le titre fournit le titre de la page.

<A-Head> ... </-head> // Ces informations ne sont pas visibles sur la page

Les éléments <NOScript> sont utilisés pour définir le contenu alternatif (texte) lorsque le script n'est pas exécuté.

Cette balise peut être utilisée pour reconnaître le navigateur qui peut reconnaître l'étiquette <Script> mais ne peut pas prendre en charge le script.

4. Meta Element

Cet élément est utilisé pour fournir des informations sur la documentation. exprimer

Dites à la page du navigateur quels codes sont utilisés. Bien sûr, le fichier est conservé

UTF8, et le navigateur définit également UTF8 pour afficher correctement le chinois.

<Meta Charset = UTF-8> // En plus de la définition des codes, il y en a d'autres

Cet élément est très simple, comme son nom l'indique: Définissez le titre dans le coin supérieur gauche du navigateur.

<Title> Structure de base </TITME>

6. Body Element

Éléments utilisés pour contenir du contenu de document, c'est-à-dire la partie de zone du navigateur. Tout le contenu visible doit être ici

Ajoutez les éléments en interne.

7.A

Un hyperlien en discutera en détail plus tard.

<a href = http://www.baidu.com> baidu </a>

trois. Discussion sur l'étiquette élémentaire

HTML est une langue de marque, et nous avons discuté en détail de la structure tout à l'heure. Ici, analysons-les à nouveau

Les étiquettes ou les étiquettes l'appellent souvent ce qui est composé de choses comme des éléments écrits.

1. Éléments

Les éléments sont un ensemble d'étiquettes qui indiquent au navigateur comment gérer un certain contenu. Chaque élément a un mot-clé, comme

<body>, <tapie>, <Meta> sont des éléments. Différents noms d'étiquettes représentent des significations différentes et impliqueront des étiquettes de paragraphe, des balises de texte, des étiquettes de liaison, des étiquettes d'image, etc.

Les éléments sont généralement divisés en deux types: étiquettes uniques (éléments d'air) et double étiquettes. Une seule étiquette est généralement utilisée pour déclarer ou insérer un certain yuan

Par exemple, le codage du caractère de l'instruction est utilisé <mesta>, et <Mg> est inséré dans l'image; p> ... </p>.

2. Propriétés et valeurs

En plus d'une division simple et double, les attributs internes et les valeurs de l'élément peuvent être définis. Ces valeurs d'attribut sont utilisées pour modifier les éléments

Acte. Par exemple, les hyperliens: <a> Attributs HREF, remplacez l'URL dans laquelle vous pouvez créer un lien vers différents sites Web.

Quatre. entité

L'entité HTML est affichée par des caractères de sens spéciaux via le code physique.

Affichez les résultats du nom de l'entité de la description du numéro d'entité

Espace

<<<<<<<< 2

>> supérieur au nombre

& & & Et numéro

guillemets

'' '

￠ ¢ ¢ ¢

镑镑 £ £

圆圆 ¥ ¥ ¥ ¥

元元 € euro

§ § § Small Festival

权权 © Copyright

® ® ® CATTEMALLE COMPRESSE

Marque de commerce ™ ™ ™

× × × numéro de multiplication

÷ ÷ sauf le nombre

5. Nouvelle étiquette structurelle

Élément de l'article

Représente un contenu indépendant qui n'est pas lié au contexte de la page. Par exemple, un article, un article de blog, un article de forum, vous pouvez l'utiliser

élément de section

Représente un bloc de contenu dans la page, tels que les chapitres, l'en-tête, le pied de page ou d'autres parties de la page. Il peut être utilisé en combinaison avec H1, H2 ... et d'autres éléments pour indiquer la structure du document. Exemple: <Arlage> ... </prection>;

Meste élément

Exprimez les informations auxiliaires liées au contenu de l'élément d'article en plus du contenu de l'élément d'article.

élément de tête

Représente le titre d'un bloc de contenu ou d'une vraie page dans la page.

élément Hgroup

Indiquez une combinaison du bloc de titre de la page ou de la page réelle.

Pied de page

Indique la note de bas de page du bloc de contenu dans toute la page ou la page. D'une manière générale, il inclura le nom du créateur, la date créative et les coordonnées du Créateur.

Élément de navigation

Représente la partie du lien de navigation sur la page.

Élément de figure

Indique une section de contenu de flux indépendant, qui représente généralement une unité indépendante dans le contenu du document. Utilisez l'élément FigCaption pour ajouter un titre au groupe d'élément Figure. Par exemple:

 <Figigne> <Figcaption> PRC </Gigcaption> <p> La République de Chine des peuples est née en 1949 </p> </gigne>

cinq. Métadonnées

<Meta> Les éléments peuvent définir diverses métadonnées dans le document, et une page HTML peut contenir plusieurs <méta>

élément.

1. Spécifiez la paire de métadonnées de nom / valeur

 <meta name = auteur contenu = bnbbs> <meta name = Description Content = Ceci est une page html5> <meta name = keywords contenu = html5, css3, réponse> <meta name = gen = gen erator content = sublime text 3>

Description du nom des données métropolitaines

Auteur de l'auteur Page en cours

Description de la page actuelle de description

Mots-clés Page actuelle Mot clé

L'outil d'encodage de la page actuelle du générateur

2. Déclarer le codage des caractères

3. Champ d'en-tête HTTP SIMULATION

 // 5 secondes sautent à l'URL spécifiée <meta http-equiv = refresh contenu = 5; >

Description de la valeur d'attribut

Rafraîchir recharge la page actuelle ou spécifie une URL. L'unité des secondes.

Type de contenu Une autre façon de déclarer le codage des caractères

six. Attribut global

Avant cela, les éléments que nous avons impliqués ont expliqué ses données locales, et bien sûr, nous connaissons également certains attributs mondiaux, tels que

IDENTIFIANT. Les attributs globaux sont le comportement commun de tous les éléments.

1.ID Attribut

 <p id = ABC> Paragraphe </p>

Explication: L'attribut ID alloue un identifiant unique à l'élément. Cet identifiant est généralement utilisé pour donner CSS et JavaScript

Appelez l'élément de sélection. Il n'y a que le même nom d'ID une fois par page.

2.Classe Attribut

 <p class = ABC> Paragraphe </p> <p class = ABC> Paragraphe </p> <p class = ABC> Paragraphe </p>

Explication: L'attribut de classe est utilisé pour classer les éléments. Définissez CSS-like en même temps via un ou plusieurs éléments du document

Mode.

3. Attribut ACCESSKEY

 <input type = Text Name = User AccountKey = N>

Explication: L'opération de raccourci, la touche spécifiée ALT + sous Windows, prémisse que le navigateur ALT ne confond pas.

4. Attribut contenu

 <P ContentEdIT = true> Puis-je modifier </p>

Explication: Soit le texte dans un état modifiable. Ou directement

Définissez l'attribut.

5.DIR Attribut

 <p dir = rtl> texte à droite </p>

Explication: Laissez le texte de gauche à droite (LTR), ou de droite à gauche (RTL).

6. attribut imité

 <P Hidden> Texte à droite </p>

Explication: cachez des éléments.

7. Attribut llang

 <p lang = en> html5 </p>

Explication: Vous pouvez définir la langue localement.

8. Attribut Tital

 <p type = application / x-shockwave-flash> </ objet>

3. Range

4. Autofocus

5. Mark

<Mark> est principalement utilisé pour présenter les mots qui doivent être proéminents visuellement. Une application plus typique de l'étiquette <MARK> consiste à afficher les mots clés de recherche aux utilisateurs des résultats de recherche.

HTML5: <MARK> </KARK>

Html4: <span> </span>

6. Résumé

La balise <summary> contient le titre de l'élément de détails, et l'élément de détails est utilisé pour décrire les détails du fragment de document ou de document pertinent. L'élément récapitulatif doit être le premier sous-élévation de l'élément de détails.

HTML5: <Dettores> <summary> HTML 5 </summary> Ce document vous apprend tout ce que vous avez pour laisser HTML 5. </DETTORES>

Html4: aucun

7. Détaliste

<DaTalist> Label définit la liste de données facultative. Avec l'élément d'entrée, vous pouvez faire la liste Drop -Down des valeurs d'entrée.

Datalist et ses options ne seront pas affichées, ce n'est qu'une liste de valeur d'entrée légale.

Veuillez utiliser la propriété de liste de l'élément d'entrée pour lier le datalist.

 <entrée list = cras /> <datalist id = Cars> <option value = bmw> <option value = form> <option value = volvo> </saDaRalist>

9. Commande

Exprimer le bouton de commande

Ce n'est que lorsque l'élément de commande est dans l'élément de menu, l'élément est visible. Sinon, cet élément ne sera pas affiché, mais vous pouvez l'utiliser pour spécifier les touches de raccourci clavier

 <ennu> <commande onclick = alert ('Hello World')> Cliquez sur moi!

huit. Étiquette abandonnée

Élément d'expression

bas de base

grand

centre

FONTE

grève

Il est recommandé de les remplacer par une sémantique correcte et d'utiliser CSS pour assurer l'effet après le rendu

Élément de type cadre

En raison des nombreuses disponibilité et accessibilité du cadre, la spécification HTML5 supprime les éléments suivants.

cadre

jeu de cadres

noframe

Mais HTML5 prend en charge Iframe.

Classe d'attribut

De nombreux attributs expressifs sont également supprimés par de nouvelles spécifications, comme suit:

aligner

Lien, vlink, alilink, attributs de texte sur les étiquettes corporelles

bgcolor

hauteur et largeur

Décroquerie des propriétés sur l'élément IFRAME

Valider

HSPACE et VSPACE

Cadrage de cellule, d'espacement des cellules et d'attributs de bordure sur les étiquettes de la table

Attributs de profil sur l'étiquette d'en-tête

L'attribut cible sur la balise de liaison A

Attributs Longdesc des éléments IMG et IFRAME

ABBR remplace l'acronyme (utilisé pour représenter l'abréviation)

Applet remplacé d'objet

UL remplacé Dir

autre

Ce qui précède est la structure du document et la nouvelle étiquette du HTML5 présentée par l'éditeur. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!