Quelles sont les différences entre html5 et html4 ?

Différence : DOCTYPE, html, méta, script et autres balises sont simplifiées en HTML5. HTML5 a ajouté des balises sémantiques telles que l'en-tête, le pied de page, la section, l'article, la navigation, le hgroup, le côté et la figure ; une balise canevas a été ajoutée.

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

1 Méthodes de balisage en HTML5

1.1 Type de contenu (ContentType)

• L'extension de fichier et le type de contenu du HTML5 restent inchangés. Autrement dit, l'extension est toujours « .html » ou « .htm » et le type de contenu est toujours « texte/html ».

1.2 DOCTYPE

• HTML4

• HTML5

(insensible à la casse)

En H5, délibérément n'utilise pas de déclarations de version, et un document s'appliquera à toutes les versions de HTML.

De plus, lors de l'utilisation d'outils, vous pouvez également ajouter l'identifiant SYSTEM dans la méthode de déclaration DOCTYPE. La méthode de déclaration est la suivante :

(Insensible à la casse, les guillemets ne font pas de distinction entre les guillemets simples et les guillemets doubles)

1.3 Spécifier l'encodage des caractères

• HTML4

Utilisez l'élément méta pour spécifier l'encodage des caractères dans le fichier (spécifié via l'attribut du élément de contenu ), comme indiqué ci-dessous :

• HTML5

spécifie le codage des caractères en ajoutant directement l'attribut charset à l'élément

Remarque : les deux méthodes sont valides, mais vous ne pouvez pas mélanger les deux méthodes en même temps à partir de H5, par exemple. fichiers Il est recommandé d'utiliser UTF-8 comme codage de caractères.

2 Compatibilité assurée par HTML5

2.1 Les éléments marqués peuvent être omis

(1) Éléments qui ne sont pas autorisés à écrire des balises de fin (c'est-à-dire que la forme consistant à utiliser des balises de début et de fin pour encadrer des éléments n'est pas autorisée, seule la forme "" est autorisée)

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

(2) L'élément de la balise de fermeture

peut être omis li, dt, dd, p, rt, rp, optgroup, option, colgroup, thead, tbody, tfoot, tr, td, th

(3) Tous les éléments marqués peuvent être omis (ce qui signifie que l'élément peut être complètement omis)

html, head, body, colgroup, tbody

Remarque : même si la balise est omise, l'élément existe toujours implicitement . Par exemple, lorsque l'élément body est omis, il existe toujours dans la structure du document et est accessible à l'aide de document.body.

2.2 Attributs avec des valeurs booléennes

2.3 Omettre les guillemets

(1) Lors de la spécification des valeurs d'attribut, lorsque vous placez des guillemets autour de la valeur d'attribut, vous pouvez utiliser des guillemets doubles ou des guillemets simples.

(2) H5 a apporté quelques améliorations sur cette base. Lorsque la valeur de l'attribut n'inclut pas de chaînes vides, "<", ">", "=", guillemets simples, guillemets doubles et autres caractères. , les guillemets autour de la valeur de l'attribut peuvent être omis. Comme indiqué ci-dessous

3. Éléments nouveaux et supprimés en HTML5

3.1 Nouveaux éléments structurels

élément de section, élément d'article, élément de côté, élément d'en-tête, élément de pied de page, élément de navigation élément, élément figure, élément principal

Autres éléments ajoutés en 3.2

élément vidéo, élément audio, élément d'intégration, élément de marque, élément de progression, élément de compteur, élément de temps, élément ruby ​​​​, élément rt, rp élément, élément wbr, élément canevas, élément de commande, élément de détails, élément de liste de données, élément de grille de données, élément de keygen, élément de sortie, élément source, élément de menu, élément de dialogue

3.3 Nouveaux types d'éléments d'entrée

(1) email : une zone de saisie de texte indiquant qu'une adresse e-mail doit être saisie

(2) url : une zone de saisie de texte indiquant qu'une adresse URL doit être saisie

(3) nombre : une zone de saisie de texte qui indique une valeur numérique doit être saisie

(4) plage : une zone de saisie de texte qui indique une valeur numérique dans une certaine plage doit être saisie

(5) Sélecteurs de dates : H5 Il existe plusieurs nouvelles zones de texte de saisie pour sélectionner les dates et les heures

1. date : sélectionnez le jour, le mois et l'année

2. Mois : Sélectionnez le mois et l'année

3. semaine : sélectionnez la semaine et l'année

4. heure : sélectionnez l'heure (heures et minutes)

5. dateheure : sélectionnez l'heure, le jour, le mois, l'année (heure UTC)

6. datetime-local : sélectionnez l'heure, le jour, le mois, l'année (heure locale)

(6) recherche : utilisé pour recherche

(7) tél : dédié aux appels téléphoniques

(8) couleur : zone de texte de sélection de couleur. La valeur sélectionnée est un texte au format "#000000".

3.4 Éléments obsolètes

(1) Éléments pouvant être remplacés par CSS

tels que : basefont, big, center, font, s, strike , tt, u et autres éléments

Parmi eux, les éléments s et strike peuvent être remplacés par l'élément del, et l'élément tt peut être remplacé par l'attribut font-famliy de CSS.

(2) Ne plus utiliser de frames

Tels que : frameset, frame, noframes.

En raison de l'impact négatif des frames sur la convivialité des pages Web, H5 ne prend pas en charge les frames iframe ou les pages composites composées de plusieurs pages créées par le serveur en même temps. l’élément est aboli.

(3) Éléments qui ne sont pris en charge que par certains navigateurs

tels que : applet, bgsound, clignotant, marquee et autres éléments.

L'élément applet peut être remplacé par un élément embed ou un élément object, l'élément bsground peut être remplacé par un élément audio et le chapiteau peut être remplacé par une programmation javascript.

(4) Autres éléments supprimés

1. élément rb, remplacé par l'élément ruby ​​

2. élément acronyme, remplacé par l'élément abbr

3. L'élément dir est remplacé par l'élément ul

4. L'élément isindex est remplacé par la combinaison de l'élément form et de l'élément input

5. L'élément Listing est remplacé par l'élément list. élément pre

6. élément xmp, remplacé par l'élément code

7. élément nextid, remplacé par l'élément GUIDS

8. élément plaintext, utilisez "text/plain" MIMEL tapez plutôt

Tutoriel recommandé : "Tutoriel vidéo HTML"

Attributs globaux

Les attributs dits globaux font référence à des attributs qui peuvent être utilisés sur n'importe quel élément.

4.1 Attribut contentEditable

(1) La fonction principale

permet aux utilisateurs de modifier le contenu d'un élément, l'élément doit donc pouvoir obtenir élément de focus de la souris et fournit un curseur à l'utilisateur après avoir cliqué sur la souris, l'invitant à modifier le contenu de l'élément de manière séquentielle

(2) Valeur

Cet attribut est un attribut booléen qui peut être spécifié comme étant vrai ou faux.

(3) État hérité caché

Lorsque cet attribut n'est pas spécifié, il est déterminé par l'état hérité. Si l'élément parent de l'élément est modifiable, l'élément est modifiable.

(4) Attribut isContentEditable

Lorsque l'élément est modifiable, la valeur de cet attribut est vraie, sinon elle est fausse.

4.2 Attribut designMode

(1) La fonction

est utilisée pour spécifier si la page entière est modifiable Lorsque la page est modifiable, tout support. dans la page Les éléments avec l'attribut contentEditable deviennent modifiables.

(2) Valeur

Cet attribut a deux valeurs, "on" (la page est modifiable) et "off" (la page n'est pas modifiable).

(3) Cet attribut ne peut être édité et modifié que dans les scripts Javascript

document.designMode = " on ";

(4) Prise en charge du navigateur

1.IE8 : Pour des raisons de sécurité, cet attribut ne peut pas être utilisé pour entrer dans l'état d'édition de la page.

2.IE9 : Autoriser l'utilisation de cet attribut pour mettre la page en état d'édition.

3.Chorme3 et Safari : Utilisez . À la manière du cadre en ligne, le cadre en ligne est modifiable.

4.Firefox et Opera : Autoriser l'utilisation de cet attribut pour mettre la page en état d'édition.

4.3 attribut caché

(1) La fonction

avertit le navigateur de ne pas restituer l'élément, rendant l'élément invisible.

(2) Valeur

Attribut booléen, qui est vrai ou faux.

4.4 Attribut de vérification orthographique

L'attribut de vérification orthographique est un nouvel attribut fourni par H5 pour les deux zones de saisie de texte de l'élément d'entrée (type=text) et de la zone de texte.

(1) Fonction

Effectuer une vérification orthographique et grammaticale du contenu du texte saisi par l'utilisateur

(2) Valeur

Valeur booléenne, vraie. ou faux.

(3) Remarque

1. La valeur de l'attribut doit être déclarée vraie ou fausse.

2. Si l'attribut readOnly ou l'attribut désactivé de l'élément est défini sur true, la vérification orthographique ne sera pas effectuée.

(4) Prise en charge du navigateur

Actuellement, en plus d'IE, les navigateurs tels que Firefox, Chrome, Safari et Opera prennent tous en charge cet attribut.

4.5 Attribut tabindex

Le tabindex de chaque contrôle indique à quel contrôle on accède. (Appuyez sur la touche Tab)

(1) De nos jours, l'ordre de parcours des contrôles est déterminé par la position de l'élément sur la page, il n'est donc plus nécessaire.

(2) Une autre fonction

Par défaut, seuls les éléments de lien et les éléments de formulaire peuvent obtenir le focus en appuyant sur les touches. Si vous utilisez cet attribut sur d'autres éléments, l'élément obtiendra également le focus. Après avoir défini la valeur tabindex d'un élément sur une valeur négative (généralement -1), vous pouvez par programme autoriser l'élément à obtenir le focus, et l'élément n'obtiendra pas le focus lorsque la touche Tab est enfoncée.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!