Maison > Article > interface Web > Quelle est la différence entre HTML et HTML5
Quelle est la différence entre HTML et HTML5
- 醉折花枝作酒筹original
- 2021-04-07 13:46:567325parcourir
Différences : 1. En termes de déclaration de document, le code html est très long et difficile à retenir alors que la déclaration de html5 est relativement simple, avec la syntaxe "8b05045a5be5764f313ed5b9168a17e6". 2. HTML n'a pas de balises qui reflètent la sémantique structurelle, mais HTML5 ajoute de nombreuses nouvelles balises sémantiques. 3. HTML5 peut dessiner, mais HTML ne le peut pas.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.
1. Les déclarations de type de document sont différentes
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html5 : La déclaration de document est relativement plus simple et aide les programmeurs à lire et à développer rapidement.
<!DOCTYPE html>
2. En termes de structure sémantique
html: Il n'y a pas d'étiquette sémantique structurelle (en termes simples, elle est peu pratique à lire et ne vous le dit pas où est la tête et où est la queue)
html5: ajoute de nombreuses balises sémantiques,
rend la structure du code claire et améliore la lisibilité du code.
Voici quelques balises sémantiques en html5 :
1fd589692e180fb978cda37041cfc5e26e916e0f7d1e588d4f442bf645aedb2f : courtes, descriptives, uniques (améliore le classement dans les moteurs de recherche)
b35601808ee30eac9a0f11ecc3d2c015631de3dd0df8235a13014b55a1414c03 : h1~ h6 hiérarchique en-tête, utilisé pour créer des relations hiérarchiques entre les informations de la page.
1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5 : L'en-tête comprend généralement le logo du site Web, la navigation principale, les liens à l'échelle du site et le champ de recherche.
convient également pour marquer un ensemble de contenus d'introduction ou de navigation au sein de la page.
c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f : navigation par marques, utilisée uniquement pour les groupes de liens importants dans le document.
61b85035edf2b42260fdb5632dc5728a07ebbc2b3735b6cb0330715d08d2749e : Le contenu principal de la page, qui ne peut être utilisé qu'une seule fois sur une page. S'il s'agit d'une application web, entourez ses principales fonctions.
23c3de37f2f9ebcb477c4a90aac6fffd7618f95bdc39e398f223d37049478af1 : Représente un document, une page, une application ou un conteneur indépendant
2f8332c8dcfd5c7dec030a070bf652c34d7ab0de9a42de71c682b0860bad1410 : Un groupe de contenu avec des thèmes similaires, comme la page d'accueil d'un site Web peut être divisé. dans les introductions et les actualités, les coordonnées, etc.
15221ee8cba27fc1d7a26c47a001eb9bb68cffaf0006380b7e39ea0c3d532826 : Spécifiez la colonne de la barre latérale, y compris les citations, les barres latérales, un ensemble de liens vers des articles, des publicités, des liens conviviaux, des listes de produits associés, etc.
c37f8231a37e88427e62669260f0074d84122da5b51c58ef54d7045814144010 : Pied de page, uniquement lorsque le parent est le corps, c'est le pied de page de toute la page.
d015d241ae6d34c34210679b5204fe857552a991a706bdbcb00625c14ce34064 : Précisez les détails et saisissez la clause de non-responsabilité, l'annotation, la signature et le droit d'auteur. À utiliser uniquement pour des phrases courtes, et non pour de longues déclarations juridiques telles que « Conditions d'utilisation » ou « Politique de confidentialité ».
8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0 : Indique l'importance du contenu.
907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338 : Marquez les points clés du contenu (largement utilisé pour améliorer la sémantique du texte du paragraphe).
En HTML5, em est le seul élément qui représente l'accent, tandis que strong représente l'importance.
a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a : Un bloc de texte qui rappelle au lecteur à des fins pratiques et ne véhicule aucune importance supplémentaire
46dd80ba616c57a652514755c74c421191be1970faf1a1e6511e94af3a0f5b95 : Marque l'heure. L'attribut datetime suit un format spécifique. Si cet attribut est omis, le contenu du texte doit être dans un format de date ou d'heure légal. Les moments qui ne sont plus pertinents sont étiquetés avec s.
8a7974376be5f6c00c121222b727adb94f2d06a7b2d26e0ad682bc6a608fa811 : Explication des abréviations. Utilisez l'attribut title pour fournir le nom complet, ce qui est correct s'il est utilisé uniquement lors de la première occurrence.
abbr[title]{
border-bottom:1px dotted #000;
}7f9d788ef50b059a7f76f3d2e4ccc9d1c182393edfae081cb9fa666d3b96fd2b : élément de terme de définition, qui doit être immédiatement adjacent à la définition, et peut être utilisé dans l'élément dl de la liste de description.
208700f394e4cf40a7aa505373e0130bf6b6163991889e046b98f3ad8b2fe548 : Coordonnées (adresse e-mail, lien vers la page de contact) de l'auteur, de la personne ou de l'organisation concernée. Si vous fournissez les coordonnées de l'auteur pour la page entière, elles sont généralement placées dans le pied de page au niveau de la page. Il ne peut pas contenir de documents ou d'autres contenus tels que des documents.
ffbe95d20f3893062224282accb13e8f1cd55414ff5abdfea5dd958e7e547fdd : code tag. Contient des exemples de code ou des noms de fichiers (6d267e5fab17ea8bc578f9e7e5e1570b )
e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec : texte préformaté. Préserve les sauts de ligne et les espaces inhérents au texte.
Fonction de dessin 3.html5
1) canevas
Avant HTML5, les développeurs Web front-end ne pouvaient pas dessiner dynamiquement des images sur des pages HTML. HTM5 ajoute un nouvel élément 5ba626b379994d53f7acf72a64f9b69716ab709d6e762724edaacac9390c2909, qui équivaut à un canevas. Cependant, il n'a pas la capacité de dessiner des images et un script doit être utilisé pour effectuer la tâche de dessin proprement dite. À l'aide de la méthode getContext, vous pouvez renvoyer un objet qui fournit les propriétés et les méthodes de peinture.
• Étape 1 : Récupérez l'objet 5ba626b379994d53f7acf72a64f9b69716ab709d6e762724edaacac9390c2909DOM
• Étape 2 : Appelez la méthode getContext() de l'objet Canvas pour obtenir l'objet CanvasRederingContext2D (passez un paramètre dans la méthode getContext : "2d")
• Étape 3 : Appelez CanvasRederingContext2D pour terminer le dessin
2) SVG : Scalable Vector Graphics, graphiques vectoriels utilisés pour définir le Web.
Partage de vidéos d'apprentissage : tutoriel vidéo HTML
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!