De nombreux amis m'ont envoyé un message privé et m'ont posé des questions sur les nouvelles fonctionnalités et l'utilisation de HTML5. Laissez-moi vous présenter en détail les nouvelles fonctionnalités de HTML5.
1) Nouveaux en-têtes de pied de page de balises sémantiques, etc. 2) Formulaires améliorés 2.0 3) Audio et vidéo 4) Dessin sur toile 5) Dessin SVG 6) Géolocalisation 7) API glisser-déposer 8) Travailleur Web pour effectuer des tâches fastidieuses 9) Web Le stockage stocke de grandes quantités de données côté navigateur 10) web Socket est une connexion persistante (protocole non http)
(1) Je ne parlerai pas des nouvelles balises sémantiques.
Par exemple <footer></footer>
(2) Formulaire amélioré 2.0
un,1) Comparaison entre les nouveaux types d'entrée h4 et h5 !
Type de saisie en H4 : texte /mot de passe /radio /case à cocher/ sybmit/ réinitialiser / fichier /caché / image/
Type de saisie en H5 : email/url/numéro/tél/recherche /plage /couleur/mois/semaine /date
2) Nouveaux éléments de formulaire
Éléments de formulaire en H4 : input/textarea/select, option/label
Nouveaux éléments de formulaire dans H5 : datalist/progress/meter/output
2. Nouvel élément de formulaire dans h5--liste de suggestions datalist<datalist id=lunchList> <option>Émincé de porc à la sauce pékinoise</option> <option>Porc au guobao</option> <option>Émincé de porc à la saveur de poisson</option> <option>Émincé de porc au poivre vert</option> option> <option >Di Sanxian</option></datalist>
Veuillez saisir le déjeuner dont vous avez besoin ：<input type=text name=lunch list=lunchList/>
Il existe deux formulaires :
Il existe un style de plug-in de progression dans bootstrap
<form> Connexion réseau<progress></progress> <br/> <!-- Entre 0-1--> Progression du téléchargement <progress id=p3 value=0></progress> <input type=number value =1 ></form><script type=text/javascript> /*La différence entre settimeout et setInterval est que settimeout est exécuté une fois et setInterval est exécuté une fois sur deux*/ var t=setInterval(function(){ var v = p3.value; v += 0,1; p3.value = v; if(v>=1){ clearInterval(t); alerte (téléchargement terminé } </script>); 5. Nouvel élément de formulaire dans le compteur h5 <body> Teneur en huile : <meter id=m1 min=0 max=100 low=30 high=70 optimum=40 value=50></meter> Valeur PM : <meter id=m2 min=0 max=500 low= 100 élevé = 300 optimal = 150 valeur = 750></meter></body>
Compteur : Poids et mesures/balance/, utilisé pour marquer une plage : inacceptable (rouge)/acceptable (jaune)/très bon (vert)
<meter min=可取的最小值max=可取的最大值low=合理的下限值high=合理的上限值optimum=最佳值value=当前值></meter>
3) Nouveaux attributs des éléments de formulaire
1. Attributs des éléments de formulaire en H4 : <input>
identifiant/classe/titre/type/valeur/nom/style/readonly/disabled/checked/
Nouveaux attributs des éléments de formulaire dans H5
1) espace réservé : les caractères d'espace réservé ne peuvent pas être soumis comme invites
<input value=tom placeholder=请输入用户名/>
2) autofocus : Obtenez automatiquement le focus d'entrée (vous pouvez entrer sans cliquer. Seul le premier paramètre d'entrée est valide)
<input autofocus>
3) multiple : plusieurs valeurs d'entrée peuvent apparaître dans la zone de saisie, séparées par des virgules [email protected], [email protected]
<input type=email name=emails multiple>
4) formulaire : utilisé pour placer le champ de saisie en dehors du FORMULAIRE
<form id=f5></from>
<input form=f5>
=================Nouvelles propriétés liées à la validation des entrées============================ = =======
Pour un exemple, voir attributs liés à la validation d'entrée/yz.html
5)obligatoire : obligatoire, le contenu ne peut pas être vide
6) maxlength : Spécifiez la longueur maximale de la chaîne
7) minlength : Spécifiez la longueur minimale de la chaîne
8) max : la valeur maximale du nombre spécifié
9) min : la valeur minimale du nombre spécifié
10) modèle : spécifiez l'expression régulière à laquelle l'entrée doit correspondre
Les attributs de validation ci-dessus affecteront l'attribut de validité de l'objet js correspondant à l'élément de formulaire, et l'attribut de validité est l'attribut de vérification.
(3) vidéo vidéo et audio
1. Dans quels aspects le flash remplacé par H5 se reflète-t-il ?dessin flash (AS/FLEX) =>Toile/SVG
animation flash => minuterie + toile
Lecture vidéo et audio => VIDÉO/AUDIO
stockage client flash => WebStorage
2.Nouvelle fonctionnalité H5 - lecteur vidéo (c'est un élément de bloc en ligne. Vous pouvez donner la largeur et la hauteur)H5 propose un nouvel onglet pour lire les vidéos :
<video src=></video> <video src=> <source src=res/birds.mp4></source> <source src=res/birds.ogg></source> <source src=res/birds. webm></source>
Votre navigateur ne prend pas en charge la lecture VIDÉO !
</video> Il s'agit lui-même d'un élément de bloc en ligne de 300*150 Remarque : la source multiligne est écrite pour être compatible avec différents navigateurs. Parce que les navigateurs ne prennent pas en charge les formats vidéo de manière uniforme. Certains navigateurs, tels que certains navigateurs, prennent en charge le format mp4. S'il ne le prend pas en charge, vérifiez s'il prend en charge la vidéo ogg suivante. le prend en charge, alors il jouera, s'il n'est pas pris en charge, continuez vers le bas. Il n'y a pas de source ci-dessous, cela signifie que votre navigateur ne prend pas en charge la lecture VIDÉO ! .
Membres couramment utilisés de la balise/objet VIDEO :
Propriétés des membres :
<video id=v2 src= autoplay controls loop muted poster=2.jpg preload=auto></video>
lecture automatique : faux, lecture automatique, faux par défaut contrôles : faux, affichage ou non des contrôles de lecture, la valeur par défaut est faux boucle : faux, lecture en boucle, la valeur par défaut est faux muet : faux, sourdine de la lecture, la valeur par défaut est fausse affiche : '', en lecture L'affiche affichée avant la première image, qui peut être une image. La valeur par défaut est vide et pas de préchargement : stratégie de préchargement de la vidéo, valeurs possibles : auto : précharge les métadonnées de la vidéo et un certain temps de buffering. Elle ne doit pas être utilisée sur le téléphone mobile (taille/durée. Contenu de la première image, temps de buffering). (le pré-chargement gaspille du trafic) métadonnées : précharge uniquement les métadonnées de la vidéo (taille/durée, contenu de la première image,) pas de durée de mise en mémoire tampon, adapté aux téléphones mobiles aucun : ne précharge aucune donnée
-------------------------------------------------- --------------- L'utilisation de l'attribut de l'id v2 est par exemple :
v2.playbackRate=3 ;
currentTime : durée de lecture actuelle durée : durée totale en pause : vrai, si la vidéo actuelle est en pause, vrai signifie en pause, faux signifie volume de lecture : 1 La valeur par défaut est 1, volume de lecture actuel Taux : 1, taux de lecture supérieur à 1 signifie une lecture rapide, moins de 1 signifie une lecture lente
Méthode id v2 :
play() : lire la vidéo pause() : mettre en pause la lecture événement membre : onplay : un événement déclenché lorsque la lecture de la vidéo commence onpause : un événement déclenché lorsque la vidéo est en pause Pratique : personnaliser le bouton lecture/pause sans utiliser les commandes qui accompagnez la vidéo Déplacez la souris hors de la zone vidéo pour masquer le bouton ; déplacez la souris vers le bouton d'affichage. Par exemple : vidéo audio, canvas/video.html En pause, la publicité sera affichée et lorsque la souris est en pause. joué, la publicité sera masquée.
3. Nouveau lecteur audio fonctionnel H5
<audio src=></audio><audio src=><source src=res/birds.mp3></source><source src=res/birds.ogg></source><source src=res/birds. wav></source>
La méthode d'attribut est la même que pour la vidéo, sauf qu'il n'y a pas d'attribut poster*** pour déterminer si la case est cochée
cb.onchange=function(){ this.checked true signifie sélectionné, false signifie non sélectionné}(4), toile
Il n'y a qu'un seul objet pinceau sur chaque toile - appelé objet de contexte de dessin - utilisez cet objet pour dessiner !
var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象
Dessin sur toile --- difficulté ! ! !
1) Dessin SVG : technologie de dessin vectoriel, apparue en 2000 et intégrée ensuite au standard H5 2) Dessin Canvas : technologie de dessin bitmap, une technologie de dessin proposée par H5 3) Dessin WebGL : technologie de dessin 3D, qui n'existe pas. encore été intégré dans la norme H5.
technologie de dessin sur toile toile : toile, H5 implémente la technologie de dessin 2D
<canvas width=500 height=400>您的浏览器不支持canvas</canvas>
La balise canvas est un bloc en ligne de 300*150 par défaut dans le navigateur. La largeur et la hauteur du canevas ne peuvent être attribuées qu'à l'aide d'attributs HTML/JS, pas de styles CSS ! Il n'y a qu'un seul objet pinceau sur chaque toile - appelé objet de contexte de dessin - utilisez cet objet pour dessiner ! var ctx = canvas.getContext('2d') //Maintenant, seul 2d obtient l'objet canevas sur le canevas
1) Utilisez une toile pour dessiner un rectangle
Dessine un rectangle
ctx.lineWidth = 1 Largeur du trait ctx.fillStyle='#000' Couleur du style de remplissage ctx.StrokeStyle='#000' Couleur du style de trait ctx.fillRect(x,y,w,h); //Remplir un rectangle x , y coordonner w, h largeur et hauteur ctx.StrokeRect(x,y,w,h); //Tracer un rectangle ctx.clearRect(x,y,w,h) Effacer tous les dessins dans un rectangle
2) Utilisez un canevas pour dessiner du texte
Le point d'ancrage d'un morceau de texte se trouve au début de sa ligne de base de texte
ctx.textBaseline = 'alphabetic' //La valeur par défaut de la ligne de base du texte est la troisième ligne ctx.font=12px sans-serif //Taille et style de police ctx.fillText(str,x,y) //Remplir ctx.StrokeText (str ,x,y) //Tracer un morceau de texte ctx.measureText(str) //Définir le texte de mesure en fonction de la taille et de la police actuelles du texte, et l'objet renvoyé est {width: x}3) Utilisez un canevas pour tracer des chemins
Chemin : similaire à l'outil Plume de PS, il s'agit d'une forme arbitraire composée de plusieurs points de coordonnées. Le chemin est invisible et peut être utilisé pour le contour, le remplissage et le recadrage.
ctx.beginPath() //Démarrer un nouveau chemin ctx.closePath() //Fermer le chemin actuel ctx.moveTo(x,y) //Déplacer vers le point spécifié ctx.lineTo(x,y) //Depuis le chemin actuel pointez vers le point spécifié Tracez une ligne droite ctx.arc(cx,cy,r,start,end); //Dessinez un chemin en arc//cx cy est la coordonnée centrale du cercle xy r est le rayon, start est le l'angle de départ et la fin est l'angle de fin
Angle : 360 = Radians : 2PI 180 = 1PI Par exemple
ctx.arc(100,200,30,0,2*Math.PI)ctx.stroke(); //Trait du chemin actuel ctx.fill(); //Remplissage du chemin actuel ctx.clip();//Utiliser le recadrage du chemin actuel //************Le coin de la connexion************ctx.lineJoin='miter' //Un coin pointu apparaît au niveau de la connexion de la ligne ctx. lineJoin='rond' //Des coins arrondis apparaissent à la connexion de la ligne ctx.lineJoin = 'bevel' //Des coins carrés apparaissent à la connexion de la ligne
4) Utilisez une toile pour dessiner des images
Canvas est une technologie côté client, et l'image est sur le serveur, le navigateur doit donc d'abord télécharger l'image à dessiner et attendre que l'image soit chargée de manière asynchrone :
var img = new Images();img.src='x.png';console.log(img.width); //0 Requête asynchrone pour les images img.onload=function(){console.log(img.width, img .height); //Le chargement de l'image de la valeur est terminé //Commencez à dessiner l'image sur le canevas ctx.drawImage(img,x,y); //Dessin au format original ctx.drawImage(img,x,y,w,h); //Définir la largeur et la hauteur}Écoutez les événements de mouvement de la souris au-dessus du canevas
ctx.onmousemove = function(e){x=e.offsetX;y=e.offsetY;console.log(x,y);}2. Dégradé dans le dessin sur toile
Dégradé linéaire : LinearGradient Dégradé radial : radialGradient Vous pouvez vous référer à l'effet de dégradé dans ps,
var g = ctx.createLinearGradient(x1,y1,x2,y2);g.addColorStop(0,'#f00');g.addColorStop(0.5,'#ff0');g.addColorStop(1,'#0f0' );ctx.StrokeStyle=g;
Difficulté : il existe de nombreux axes de coordonnées et mots dans le système de coordonnées
3. Déformation du dessin
ctx.rotate(radians) // Faites pivoter l'objet de contexte de dessin (c'est-à-dire le pinceau), le point de l'axe est l'origine du canevas ctx.translate(x, y) // Traduisez l'origine de tout le canevas vers le point spécifié ctx. sava(); / /Enregistre toutes les valeurs actuelles de l'état de déformation du pinceau (depuis la sauvegarde dans le jeu) ctx.restore(); //Restaurer l'état de déformation du pinceau à la sauvegarde la plus récente (lire la sauvegarde dans le jeu) ctx.save(); //Enregistre la première variable de statut d'origine deg = 10*Math.PI/180; //L'angle à faire pivoter est de 10 degrés ctx.rotate(deg); //Rotated ctx.drawImage(img,0,0); //Dessiner des images, que dessiner si le pinceau est tordu Ils sont tous tordus ctx.restore(); // L'état d'origine enregistré lors de la suppression de la sauvegarde
(5) Dessin SVG
Commençons par comprendre ce que sont les bitmaps et les vecteurs. Comprenez-le simplement brièvement.
Bitmap : Il est composé de pixels les uns après les autres, chaque point a sa propre couleur et la couleur est délicate. Graphiques vectoriels : composés de lignes les unes après les autres. Chaque ligne peut spécifier une couleur, une direction et peut être mise à l'échelle à l'infini, mais les détails des couleurs ne sont pas assez riches.
1. Le dessin SVG utilise des balises pour le dessin et vous pouvez directement lier les écouteurs d'événements
<svg width=300 height=200 xmlns=http://www.w3.org/2000/svg> <rect width=100 height=100></rect></svg>
2. Comment créer une balise svg en utilisant js !
//var r1 = document.createElement('rect'); Cet élément svg ne peut pas être créé car il a une limite d'âge et un espace de noms (c'est-à-dire que si cela ne fonctionne pas, utilisez la méthode suivante pour le créer !!! !) varr1= document.createElementNS('http://www.w3.org/2000/svg','rect');r1.setAttribute('width','50');r1.setAttribute('height',300);s1 .appendChild(r1);3. Créez une ellipse avec SVG
<svg width=300 height=200 id=c6> <ellipse rx=100 ry=40 cx=100 cy=100 fill=#faa Stroke=#a00></ellipse></svg>
4. Créez une ligne droite en svg
<svg width=300 height=200 id=c6> <line x1=0 y1=0 x2=100 y2=200 Stroke=#000 Stroke-width=50 Stroke-linecap=square></line></svg>
Remarque : Stroke-linecap=square produira plus de carrés, Stroke-linecap=round produira plus de zones circulaires, Stroke-linecap=butt ne produira pas plus de carrés (c'est-à-dire que la ligne droite que vous créez a une différence entre le début et la fin de ces attributs ! Essayez-le vous-même et vous le découvrirez ! Les détails sont importants !)
5. Créez une polyligne en utilisant SVG
<svg width=300 height=200 id=c6> <polyline points=50,50 100,300 150,100></polyline> //Ce qui sort est un triangle <polyline points=50,50 100,300 150,100 fill=transparent Stroke=#000 >< /polyline> //Ce qui ressort est une polyligne</svg>
6. Géolocalisation (Demain, on n’aura plus besoin de client, on pourra aussi se localiser !)
Géolocalisation : Géolocalisation, utilisant JS pour obtenir les données de coordonnées géographiques (longitude, latitude, altitude, vitesse) du navigateur actuel, utilisée pour mettre en œuvre des applications LBS (Location Based Service), telles que Ele.me, Amap Navigation...
Comment les navigateurs mobiles obtiennent les informations de localisation :
1) Le premier choix est la puce GPS dans le téléphone mobile et la communication par satellite, la précision du positionnement est à quelques mètres 2) Le deuxième choix est la station de base du téléphone mobile pour l'acquisition du positionnement, la précision du positionnement est à quelques kilomètres (illégal) Comment obtenir informations de positionnement via un navigateur PC : 1) Inversion via l'adresse IP L'analyse et la précision du positionnement dépendent de la taille de la base de données d'adresses IP
HTML5 fournit un nouvel objet pour obtenir les informations de positionnement du navigateur actuel :
window.navigator.geolocation{ getCurrentPosition:fn, //Obtenir les informations de positionnement actuel watchPosition:fn, //Surveiller les modifications des données de positionnement clearWatch:fn //Annuler la surveillance}2. Extension : Comment intégrer Baidu Map dans une page Web
1) Enregistrez un compte de développeur Baidu map.baidu.com ---> lbsyun.baidu.com 2) Créez un site Web ; connectez-vous à Baidu Map et demandez une clé d'accès à la carte pour le site Web 3) Intégrez la carte fournie par Baidu Map. dans votre propre API de page Web, intégrée à la carte Baidu
Je ne parlerai pas beaucoup de la façon d’intégrer cela ici ! (N'oubliez pas que vous devez créer un compte pour utiliser Baidu Maps, puis citer simplement les bibliothèques d'autres personnes !)
7. API glisser-déposer
J'ai déjà parlé du glisser-déposer : amis, allez-y et retrouvez les blogs précédents par vous-même.
huit de stockage
Le stockage se compose principalement de cookies et de sessions (j'expliquerai plus tôt les différences et les précautions lors de la recherche de nombreuses méthodes d'écriture) : N'oubliez pas que les sessions disparaissent lorsque vous fermez le navigateur, et les cookies ne disparaissent pas lorsque vous fermez le navigateur ! Remarque : L'heure doit être ajoutée lors du stockage du cookie. Si aucune heure n'est ajoutée, elle disparaîtra après la fermeture du navigateur ! Ce stockage du navigateur peut être utilisé pour résoudre de nombreux problèmes fonctionnels, tels que la mémorisation des mots de passe et d'autres fonctions ! !
Neuf sockets Web
Faut-il en parler ? . . . . Parlons-en brièvement, tout dépend de la compréhension~~
Le socket Web est une connexion bidirectionnelle non http qui peut être établie entre le serveur et le client !
Cette connexion est en temps réel et permanente.
Le serveur peut activement envoyer des messages.
Le serveur n'a plus besoin d'interroger le client pour les requêtes et la communication entre le serveur et le client ne nécessite pas de rétablir la connexion.
C’est-à-dire une communication aller-retour durable.
Comment le créer ? Un morceau de code est terminé
var webSocket = new WebSocket (ws://localhost:8005/socket) ; //l'url doit commencer par ws ou wss text : parce que ce n'est pas http, c'est websocket, c'est votre propre identification, transmission cryptée, souvenez-vous-en simplement . webSocket.send() //Envoyer des données texte, seul le texte peut être envoyé. (Utilisez l'objet json pour convertir l'objet js en données texte avant l'envoi) webSocket.close();//Fermez et coupez la connexion de communication. webSocket.onmessage= function(event){ var data=event.data;} // Recevoir les messages du serveur webSocket.onopen =function(event){ //Traitement au démarrage de la communication} webSocket.onclose =function(event) { / /Traitement en fin de communication} RésumerCe qui précède est une liste complète des nouvelles fonctionnalités et de l'utilisation de HTML5 introduites par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !