La différence entre H5 et HTML traditionnel

Cet article présente principalement les informations pertinentes sur la différence entre le HTML5 et le HTML traditionnel dans les notes d'étude HTML5. Les amis qui en ont besoin peuvent s'y référer 1. Modifications de la syntaxe HTML5 <.> Les changements mentionnés dans les points de connaissance font référence aux changements définis en fonction du HTML4, qui sont principalement les suivants :
1 L'extension de fichier (.html ou .htm) et le type de contenu (text/html) du HTML5 restent. inchangé.
2. En HTML5, les déclarations de version ne sont délibérément pas utilisées, et un seul document s'appliquera à toutes les versions de HTML.
3. À partir de HTML5, il est recommandé d'utiliser UTF-8 pour l'encodage des caractères des fichiers.
4.HTML5 garantit une compatibilité maximale avec les versions HTML précédentes.
Afin d'assurer la compatibilité, nous devons commencer par l'élément. En HTML5., la balise de l'élément peut être omise. Plus précisément, les balises des éléments sont divisées en trois types : "la balise de fin ne peut pas être écrite", "la balise de fin peut être omise" et "la balise de début et la balise de fin peuvent être omises".
• Les éléments de balises fermantes ne sont pas autorisés : zone, base, br, col....
• Les balises fermantes peuvent être omises : li, dt, dd, p, rt...
• Les deux la balise de début et la balise de fin peuvent être omises : html,
head, body.....
2.Nouveaux éléments structurels de •L'élément section représente un bloc de contenu dans la page, tel qu'un chapitre, un en-tête, un pied de page ou une autre partie de la page
•L'élément article représente une partie de la page qui n'est pas un contexte ; -un contenu indépendant lié, tel qu'un article dans un blog ou un article dans un journal ;
•l'élément de côté représente des informations auxiliaires liées au contenu de l'élément article en plus du contenu de l'élément article
• ; élément header Représente le titre d'un bloc de contenu dans la page ou la page entière ;
•l'élément hgroup est utilisé pour combiner les titres de la page entière ou d'un bloc de contenu dans la page
•l'élément footer représente l'intégralité ; page ou un contenu dans le pied de page du bloc de page. De manière générale, il contiendra le nom du créateur, la date de création et les coordonnées du créateur ; l'élément
•nav représente la partie
navigation liée de la page •figure ; représente un paragraphe indépendant Le contenu du flux représente généralement une unité indépendante dans le contenu du flux principal du document. Utilisez l'élément figcaption pour ajouter un titre au groupe d'éléments de la figure

2. Autres nouveaux éléments
. ·Définition de l'élément audio Audio , tel que de la musique ou d'autres flux audio •l'élément intégré est utilisé pour insérer divers
multimédia, le format peut être Midi, Wav, AU, MP3. , etc. ; •élément de marquage Pour présenter visuellement le texte qui doit être mis en surbrillance ou mis en évidence à l'utilisateur, une application typique consiste à mettre en évidence les mots-clés de recherche à l'utilisateur dans les résultats de
recherche ; >·l'élément progress représente le processus en cours • l'élément ruby ​​​​représente ruby ​​​​
commentaire
(phonétique ou caractère chinois) • l'élément rt représente l'explication ou la prononciation du caractère (phonétique chinoise phonétique ou caractère) • élément rp dans Utilisé dans les annotations Ruby pour définir le contenu affiché par les navigateurs qui ne prennent pas en charge les éléments Ruby.
•L'élément wbr représente des sauts de ligne doux, et lorsque la largeur n'est pas suffisante, des sauts de ligne sont activement effectués ici
•
canvas
les éléments représentent des graphiques, tels que des graphiques et d'autres images •Les éléments cammand représentent les commandes Button
, telles que Radio Button, Checkbox ou Button•L'élément détails représente les informations détaillées dont l'utilisateur a besoin et peut get• L'élément datagrid représente une liste de données facultatives, qui s'affiche sous la forme d'une liste arborescente
•
key
L'élément gen représente la clé générée•L'élément de sortie représente différents types de sortie, tels que des scripts Sortie • L'élément source définit les ressources multimédias pour les éléments multimédias (tels que 39000f942b2545a5315c57fa3276f220 et b97864c2e0ef2353a16c4d64c7734e92)
• L'élément menu représente la liste de menus

3. Nouvel élément de saisie
•
email le type représente la zone de saisie de texte où l'adresse E-main doit être saisie •le type d'url représente le zone de saisie de texte où l'adresse URL doit être saisie •type de numéro Zone de saisie de texte qui représente une valeur numérique qui doit être saisie
•
plage
le type représente une zone de saisie de texte qui doit être saisie avec une valeur numérique dans une certaine plage HTML5 a plusieurs nouvelles entrées pour sélectionner les dates et les heures Zone de texte : •
date
——Sélectionnez le jour, le mois et l'année•mois — —Sélectionnez le mois et l'année•week - sélectionnez la semaine et l'année
•heure - sélectionnez l'heure (heures et minutes)
•datetime - sélectionnez l'heure, le jour, le mois, l'année (heure UTC)
•datetime.local - Sélectionnez l'heure, le jour, le mois, l'année (heure locale)
3 Supprimer les éléments
1. >•Pour les éléments tels que base
font, big, center, font, s, strike, tt, u, parce que leurs fonctions sont uniquement destinées aux services d'affichage à l'écran, HTML5 préconise l'affichage à l'écran. La fonction est éditée uniformément dans le Feuille de style CSS, ces éléments sont donc supprimés 2. Ne plus utiliser frame
frame •Pour frame
set element, frame element et noframes Étant donné que les cadres de cadre ont un impact négatif sur la convivialité des pages Web, les cadres de cadre ne sont plus pris en charge en HTML5 uniquement siles cadres de cadre sont pris en charge, ou plusieurs pages créées par le serveur sous la forme d'un composite. page, les trois éléments ci-dessus sont supprimés en même temps. 3. Éléments pris en charge par certains navigateurs uniquement
• Pour les éléments tels que l'applet, bgsound, clin d'œil, marquee, etc., puisque seuls certains navigateurs prennent en charge ces éléments, notamment l'élément bgsound et le marquee. élément, uniquement pris en charge par Internet Explorer, il était donc obsolète dans HTML 5. L'élément applet peut être remplacé par l'élément ernedd ou l'élément
object, l'élément bgsound peut être remplacé par l'élément audio et le chapiteau peut être remplacé par le JavaScript programmationméthode4. Autres éléments abolis :
•Abolir l'élément rb et le remplacer par l'élément ruby•Abolir l'élément acronyme et le remplacer par l'élément abbr
•Supprimez l'élément dir et remplacez-le par l'élément ul
•Supprimez l'élément isindex et utilisez l'élément form combiné avec l'élément input pour remplacer
•Supprimez l'élément listing et utilisez l'élément pre pour remplacer
🎜>•Supprimez l'élément xmp et utilisez l'élément code pour remplacer
•Supprimez l'élément nextid et utilisez le remplacement GUIDS
• Détruisez l'élément de texte brut et utilisez le type MIME "text/plian" pour remplacer


4. Ajoutez l'attribut et dépréciez l'attribut 1. Nouveaux attributs
1 Attributs liés au formulaire
•Nouvel attribut de mise au point automatique, qui permet aux éléments d'obtenir automatiquement le focus lorsque l'écran est ouvert en spécifiant des attributs ;
•Nouvel attribut d'espace réservé, qui sera invité à saisir l'utilisateur, lui demandant ce qu'il peut saisir •Ajouter l'attribut de formulaire, déclarer ; à quel formulaire il appartient, puis placez-le n'importe où sur la page, pas dans le formulaire
• Ajout de l'attribut
require
d, qui indique qu'il sera vérifié lorsque l'utilisateur soumettra. saisir le contenu dans l'élément ; 2. Attributs liés au lien
•Ajouter l'attribut media, qui spécifie le type de média/appareil pour lequel l'URL cible est optimisée, et ne peut être utilisé lorsque l'attribut href existe ;
•Ajoutez l'attribut hreflang
et l'attribut rel pour rester cohérent avec l'élément a et l'élément link 3. 🎜>•Attribut révérend, qui spécifie la liste à afficher dans l'ordre inverse ;
•Ajoutez l'attribut async à l'élément de script, qui définit le script s'il doit être exécuté de manière asynchrone ;
2. Suppression des attributs

• Tous les attributs pouvant être remplacés par des feuilles de style CSS sont supprimés • Les attributs redondants, tels que : cible, pro
fichier, version, etc. . sont supprimés ;
5.Attributs globaux
En HTML5, nouveau Le concept d'"attributs globaux". fait référence aux attributs qui peuvent être utilisés sur n'importe quel élément.
1. Attribut contentEditable •Cet attribut permet aux utilisateurs de modifier le contenu de l'élément, le focus de la souris peut être obtenu. une valeur booléenne et peut être spécifiée comme vraie ou fausse. De plus, cet attribut a également un héritage
state caché. Lorsqu'il est vrai, l'édition est autorisée. Lorsqu'il est faux, l'édition n'est pas autorisée. Lorsqu'il n'est pas spécifié, il est déterminé par héritage.
2. Attribut designMode •Cet attribut est utilisé pour déterminer si la page entière est modifiable. Il existe deux attributs « on » et « off ». Lorsque l'attribut est « activé », il peut être modifié ; lorsqu'il est « désactivé », il ne peut pas être modifié.
3. attribut caché
•Tous les éléments sont autorisés à utiliser un attribut caché, similaire à l'élément caché dans l'élément d'entrée. Sa fonction est d'avertir le navigateur de ne pas afficher l'élément et de le rendre invisible. La valeur de l'attribut est une valeur booléenne. Lorsqu'elle est vraie, elle est invisible ; lorsqu'elle est fausse, elle est visible.
4. Attribut de vérification orthographique
• Cet attribut est un nouvel attribut fourni par HTML 5 pour les deux zones de saisie de texte de l'élément d'entrée (type=text) et de la zone de texte. contenu. Vérification orthographique et grammaticale. La valeur de l'attribut est une valeur booléenne. Lors de l'écriture, vous devez clairement indiquer que la valeur de l'attribut est vraie ou fausse. La méthode d'écriture est la suivante :
87ccc8a14992ceb42b3b26647e6311ad textarea spellcheck="true" > 6c928bdf2ad5e19a27ffcb03b46ec6f6!—Les deux méthodes d'écriture suivantes sont incorrectes—> 9637d17c8c453ff4e81edc852d1653dd attribut de formulaire
en HTML4 En HTML5, les éléments subordonnés du formulaire doivent être écrits à l'intérieur du formulaire, mais en HTML5, ils peuvent être écrits n'importe où sur la page, puis spécifier un attribut de formulaire pour le element. La valeur de l'attribut est l'identifiant de l'unité de formulaire, afin que vous puissiez déclarer que l'élément appartient au formulaire spécifié.
Le code est le suivant :

L'élément de saisie appartient au formulaire. Il est écrit à l'intérieur du formulaire, et il n'est pas nécessaire de préciser le. attribut de formulaire pour cela. L'élément textarea est écrit en dehors du formulaire, mais il est subordonné au formulaire, donc l'identifiant du formulaire est défini sur l'attribut form de l'élément textarea.

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>form属性</title> 
</head> 
<body> 
<form action="" id="testform"> 
<input type="text" name="" /> 
</form> 
<textarea form="testform" name="" cols="30" rows="10"></textarea> 
</body> 
</html>

L'avantage est que lorsque vous devez ajouter des styles aux éléments de la page, vous pouvez les ajouter plus facilement, car ils ne sont plus dispersés parmi les formulaires.

[Recommandations associées]

1.

Tutoriel vidéo gratuit HTML5

2 Une zone de saisie apparaît lors de la création d'un virtuel. clavier en H5 Que faire en cas d'occlusion ?

3. Explication détaillée de la méthode d'implémentation de la lecture plein écran sur WeChat en HTML5

4 Explication détaillée des problèmes de compatibilité du navigateur avec. Nouvelles balises H5

5. Aperçu général de la façon d'utiliser H5 pour créer des pages Web

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!