Maison > Article > interface Web > Explication des connaissances liées à HTML5/CSS3

Explication des connaissances liées à HTML5/CSS3

jackloveoriginal: 2018-05-21 14:53:181219parcourir

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>

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]-->

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：

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

Article précédent：Explication détaillée des étapes pour transmettre des données dans les composants vueArticle suivant：Explication détaillée des étapes pour transmettre des données dans les composants vue

Articles Liés

Voir plus