communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison interface Web js tutoriel Explication des connaissances liées à HTML5/CSS3

Explication des connaissances liées à HTML5/CSS3

jacklove
jacklove
May 21, 2018 pm 02:53 PM
css css3 html5

J'ai rencontré quelques points de connaissances courants lors de l'apprentissage du HTML et du CSS. Cet article les expliquera en détail.

Qu'est-ce que HTML5 ? Quelles sont les nouvelles fonctionnalités ? Quelles sont les nouvelles balises ? Comment faire en sorte que les versions inférieures d'IE prennent en charge les nouvelles balises HTML5 ?

HTML5 est la cinquième révision majeure du HTML. Il a abandonné de nombreuses balises redondantes et a également ajouté de nombreuses nouvelles balises, rendant le HTML plus sémantique et plus riche en fonctions interactives.
En HTML5, il présente de nombreuses nouvelles fonctionnalités :
1. Plus de balises sémantiques, donnant aux pages Web une meilleure signification et une meilleure structure ;
Prend en charge le stockage local. L'application Web a un temps de démarrage plus court et une vitesse Internet plus rapide
3. Compatibilité des appareils. Les applications externes peuvent être directement connectées aux données à l'intérieur du navigateur. Par exemple, la vidéo et l'audio peuvent interagir directement avec les microphones et les caméras
4. La connexion est plus rapide. Implémentation d'événements envoyés par le serveur et de WebSockets, permettant un chat en temps réel basé sur une page, une expérience de jeu Web plus rapide et une communication en ligne plus optimisée
5. Les références aux balises audio et vidéo peuvent intégrer du contenu multimédia sur la page
6. Basé sur les fonctionnalités tridimensionnelles, graphiques et d'effets spéciaux de SVG et Canvas

Voici quelques nouvelles balises et modifications
1 À propos de DOCTYPE

//HTML précédent !DOCTYPE. html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">//HTML5< ;! DOCTYPE htm>

2. À propos de la méta

//HTML précédent//HTML5

3. La nouvelle balise
canvas définit des graphiques, tels que des graphiques et d'autres images. Cette balise est basée sur l'API de dessin JavaScript
audio définit le contenu audio
video définit la vidéo (vidéo ou film)
source définit les ressources multimédia


footer définit le pied de page de la section ou le document
l'en-tête définit la zone d'en-tête du document
la marque définit le texte avec des marques
le mètre définit les poids et mesures. Utilisé uniquement pour les mesures avec des valeurs maximales et minimales connues
navigation nav
la progression définit la progression de tout type de tâche
ruby définit l'annotation ruby ​​​​(phonétique ou caractère chinois)
rt définit le caractère (phonétique ou caractère chinois) interprétation ou prononciation
rp est utilisé dans les commentaires Ruby pour définir le contenu affiché par les navigateurs qui ne prennent pas en charge les éléments Ruby
section définit la section (section, section) dans le document
l'heure définit la date ou l'heure
wbr spécifie où ajouter des sauts de ligne dans le texte

Dans le passé, nous utilisions la balise

, et d'autres nouveaux éléments, la structure de la page sera plus claire

Comment faire en sorte que les versions inférieures d'IE prennent également en charge les nouveaux éléments HTML5
Méthode 1
Ajouter JavaScript à < ;head>

<head>
     <script type="text/javascript">
          document.createElement(&#39;header&#39;)          document.createElement(&#39;footer&#39;)     </script></head>
Copier après la connexion

De cette façon, vous pouvez utiliser les balises ajoutées dans IE


Méthode 2
Utilisez html5shiv.js
Ajouter 

<!--[if lt IE 9]>
<script type="text/javascript"  src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->
Copier après la connexion

Si la version du navigateur est inférieure à IE9, ce script sera analysé

Quoi de neuf dans la saisie Ajouter un type ?

emali saisit l'e-mail. S'il n'est pas conforme au format de l'e-mail, il ne peut pas être soumis et une invite apparaîtra
url Entrez l'URL si elle n'est pas conforme au format de l'URL. , il ne peut pas être soumis et une invite apparaîtra
le numéro ne peut saisir que des nombres
plageUn contrôle de déplacement

Explication des connaissances liées à HTML5/CSS3

plage<.>

Contrôle de sélection de date

Cookie et Quelle est la différence entre localStorage ? Comment localStorage stocke-t-il les données supprimées ?

Qu'est-ce qu'un cookie
Le cookie fait référence aux données que certains sites Web stockent sur le terminal local de l'utilisateur (côté client) afin d'identifier l'identité de l'utilisateur
Le cookie est toujours stocké dans le client, selon le stockage dans l'emplacement du client peut être divisé en cookies de mémoire et cookies de disque dur.
Les cookies de mémoire sont conservés par le navigateur et stockés en mémoire. Ils disparaissent après la fermeture du navigateur et leur durée d'existence est de courte durée. Les cookies du disque dur sont stockés sur le disque dur et ont un délai d'expiration À moins que l'utilisateur ne les nettoie manuellement ou que le délai d'expiration ne soit atteint, les cookies du disque dur ne seront pas supprimés et leur durée d'existence est à long terme. Par conséquent, selon la durée d'existence, ils peuvent être divisés en cookies non persistants et cookies persistants
Prenons l'exemple de la connexion
1. Le client envoie le nom d'utilisateur et le mot de passe au serveur
2. Le le serveur s'authentifie avec succès et authentifie l'utilisateur La liaison du statut et de l'ID de session est enregistrée côté serveur
3 Lors de la réponse au client, l'ID de session sera écrit dans le champ d'en-tête de réponse Set-Cookie
4. reçoit la réponse et enregistre le SessionID en tant que cookie. Désormais, les requêtes envoyées par le client porteront ce cookie dans l'en-tête de la requête
Qu'est-ce que localStorage
localStorage est une API pour le stockage persistant local des données client.
Les sites Web avec le même nom de domaine partagent le même objet localStorage, les localStorage de différents noms de domaine ne peuvent pas accéder entre eux (il en va de même pour les cookies)
L'espace de stockage de chaque nom de domaine est limité, au moins 5 Mo (cookie ne fait qu'environ 4 Ko)
localStorage utilise des paires clé-valeur pour stocker les données, la valeur clé doit être une chaîne (il en va de même pour les cookies)
Quelle est la différence entre cookie et localStorage ?
1. Le serveur apportera des cookies lors de l'envoi des demandes
2. Les cookies ont une période de stockage et expireront automatiquement à leur expiration, mais localStorage ne le fera pas à moins d'être supprimé manuellement
3 La limite de taille des cookies est d'environ 4 Ko. , localStorage est d'environ 5 Mo

Cet article expliquera tml et css Pour plus de contenu connexe, veuillez faire attention au site Web chinois php.

Recommandations associées :

Résumé des API couramment utilisées pour les opérations Javascript sur DOM

Résumé complet JavaScript de minuteurs et document DOM

Explication détaillée du fonctionnement d'AJAX et de ses avantages et inconvénients

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille
3 Il y a quelques semaines By DDD
Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour
2 Il y a quelques semaines By DDD
Où trouver la courte de la grue à atomide atomique
3 Il y a quelques semaines By DDD
Assassin's Creed Shadows - Comment trouver le forgeron et déverrouiller les armes et la personnalisation des armes
1 Il y a quelques mois By DDD
<🎜>: Dead Rails - Comment relever chaque défi
3 Il y a quelques semaines By DDD
Afficher plus

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?
7634
15
Tutoriel CakePHP
1390
52
Quel est le format du nom de compte de Steam
90
11
Clé d&amp;amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent
71
19
NYT Connexions Indices et réponses
32
147
Afficher plus
Related knowledge
Comment utiliser Bootstrap en Vue Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Comment écrire des lignes fendues sur bootstrap Comment écrire des lignes fendues sur bootstrap Apr 07, 2025 pm 03:12 PM

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

Comprendre HTML, CSS et JavaScript: un guide pour débutant Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

À quoi se réfère H5? Explorer le contexte À quoi se réfère H5? Explorer le contexte Apr 12, 2025 am 12:03 AM

H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo

Comment utiliser le bouton bootstrap Comment utiliser le bouton bootstrap Apr 07, 2025 pm 03:09 PM

Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton

Comment redimensionner le bootstrap Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Comment configurer le cadre de bootstrap Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

See all articles