Viele Freunde haben mir privat eine Nachricht zu den neuen Funktionen und der Verwendung von HTML5 gesendet. Lassen Sie mich diese für Sie zusammenfassen.
1) Neue semantische Tags, Fußzeile, Kopfzeile usw. 2) Enhanced Forms 2.0 3) Audio und Video 4) Canvas-Zeichnung 5) SVG-Zeichnung 6) Geolokalisierung 7) Drag-and-Drop-API 8) Web-Worker zum Ausführen zeitaufwändiger Aufgaben 9) Web Der Speicher speichert große Datenmengen auf der Browserseite. 10) Web Socket ist eine dauerhafte Verbindung (Nicht-http-Protokoll).
(1) Ich werde nicht über neue semantische Tags sprechen.
Zum Beispiel <footer></footer>
(2) Erweitertes Formular Formular 2.0
eins,1) Vergleich zwischen neuem Eingabetyp h4 und h5!
Eingabetyp in H4: Text /Passwort /Radio /Checkbox/ Sybmit/Reset / Datei /Versteckt / Bild/
Eingabetyp in H5: E-Mail/URL/Nummer/Telefon/Suche/Bereich/Farbe/Monat/Woche/Datum
2) Neue Formularelemente
Formularelemente in H4: Eingabe/Textbereich/Auswahl, Option/Beschriftung
Neue Formularelemente in H5: datalist/progress/meter/output
2. Neues Formularelement in h5 – Datalist-Vorschlagsliste<datalist id=lunchList> <option>Geschnetzeltes Schweinefleisch mit Peking-Sauce</option> <option>Schweinefleisch in Guobao</option> <option>Geschnetzeltes Schweinefleisch mit Fischgeschmack</option> <option>Geschnetzeltes Schweinefleisch mit grünem Pfeffer</ option> <option >Di Sanxian</option></datalist>
Bitte geben Sie das Mittagessen ein, das Sie benötigen ：<input type=text name=lunch list=lunchList/>
Es gibt zwei Formen:
In Bootstrap gibt es einen Fortschritts-Plug-In-Stil
<form> Netzwerkverbindung<progress></progress> <br/> <!-- Between 0-1--> Download-Fortschritt <progress id=p3 value=0></progress> <input type=number value =1 ></form><script type=text/javascript> /*Der Unterschied zwischen settimeout und setInterval besteht darin, dass settimeout einmal ausgeführt wird und setInterval jedes zweite Mal ausgeführt wird*/ var t=setInterval(function(){ var v = p3.value; v += 0,1; p3.value = v; if(v>=1){ Alert(Download abgeschlossen); 5. Neues Formelement im h5-Meter <body> Ölgehalt: <meter id=m1 min=0 max=100 low=30 high=70 optimal=40 value=50></meter> PM-Wert: <meter id=m2 min=0 max=500 low= 100 hoch=300 optimal=150 Wert=750></meter></body>
Messgerät: Gewichte und Maße/Skala/, wird zur Markierung eines Bereichs verwendet: inakzeptabel (rot)/akzeptabel (gelb)/sehr gut (grün)
<meter min=可取的最小值max=可取的最大值low=合理的下限值high=合理的上限值optimum=最佳值value=当前值></meter>
3) Neue Attribute von Formularelementen
1. Attribute von Formularelementen in H4: <input>
id/class/title/type/value/name/style/readonly/disabled/checked/
Neue Attribute von Formularelementen in H5
1) Platzhalter: Platzhalterzeichen können nicht als Eingabeaufforderungen übermittelt werden
<input value=tom placeholder=请输入用户名/>
2) Autofokus: Eingabefokus automatisch erhalten (Eingabe ohne Klicken möglich. Nur die erste Eingabeeinstellung ist gültig)
<input autofocus>
3) mehrfach: Im Eingabefeld dürfen mehrere Eingabewerte angezeigt werden, getrennt durch Kommas [email protected], [email protected]
<input type=email name=emails multiple>
4) Formular: Wird verwendet, um das Eingabefeld außerhalb des FORMULARS zu platzieren
<form id=f5></from>
<input form=f5>
=================Neue Eigenschaften im Zusammenhang mit der Eingabevalidierung========================== = =======
Ein Beispiel finden Sie unter input validation related attributes/yz.html
5)erforderlich: erforderlich, der Inhalt darf nicht leer sein
6) maxlength: Geben Sie die maximale Länge der Zeichenfolge an
7) minlength: Geben Sie die Mindestlänge der Zeichenfolge an
8) max: der Maximalwert der angegebenen Zahl
9) min: der Mindestwert der angegebenen Zahl
10) Muster: Geben Sie den regulären Ausdruck an, mit dem die Eingabe übereinstimmen muss
Die oben genannten Validierungsattribute wirken sich auf das Gültigkeitsattribut des dem Formularelement entsprechenden js-Objekts aus, und das Gültigkeitsattribut ist das Attribut der Überprüfung.
(3) Video, Video und Audio
1. In welchen Aspekten wird Flash durch H5 ersetzt?Flash-Zeichnung (AS/FLEX) =>Canvas/SVG
Flash-Animation => Timer+Canvas
Video- und Audiowiedergabe => VIDEO/AUDIO
Flash-Client-Speicher => WebStorage
2.H5 neue Funktion – Videoplayer (es ist ein Inline-Blockelement. Sie können Breite und Höhe angeben)H5 bietet eine neue Registerkarte zum Abspielen von Videos:
<video src=></video> <video src=> <source src=res/birds.mp4></source> <source src=res/birds.ogg></source> <source src=res/birds. webm></source>
Ihr Browser unterstützt keine VIDEO-Wiedergabe!
</video> Es handelt sich selbst um ein 300*150 großes Inline-Blockelement. Hinweis: Die mehrzeilige Quelle ist so geschrieben, dass sie mit verschiedenen Browsern kompatibel ist. Da Browser das MP4-Format nicht einheitlich unterstützen, prüfen Sie, ob das folgende OGG-Format unterstützt wird unterstützt es, dann wird es abgespielt, wenn es nicht unterstützt wird, fahren Sie fort. Wenn unten keine Quelle vorhanden ist, bedeutet dies, dass Ihr Browser die VIDEO-Wiedergabe nicht unterstützt. .
Häufig verwendete Mitglieder von VIDEO-Tags/-Objekten:
Mitgliedseigenschaften:
<video id=v2 src= autoplay controls loop muted poster=2.jpg preload=auto></video>
Autoplay: false, ob die Wiedergabe automatisch abgespielt werden soll, Standardeinstellung: false. Steuerelemente: false, ob Wiedergabesteuerelemente angezeigt werden sollen. Die Standardeinstellung ist false. Schleife: false, ob die Wiedergabe wiederholt werden soll. Die Standardeinstellung ist false. Muted: false, ob die Wiedergabe stummgeschaltet werden soll. Die Standardeinstellung ist false poster: '', Wiedergabe Das vor dem ersten Bild angezeigte Poster, bei dem es sich um ein Bild handeln kann. Der Standardwert ist leer und kein Vorladen: Video-Vorladestrategie, mögliche Werte: Auto: Lädt die Metadaten des Videos und eine bestimmte Pufferzeit vor. Es darf nicht auf dem Mobiltelefon verwendet werden (Größe/Dauer. Erster Bildinhalt, Pufferzeit). (Vorladen verschwendet Datenverkehr) Metadaten: Lädt nur die Metadaten des Videos vor (Größe/Dauer, Inhalt des ersten Bildes). Keine Pufferdauer, für Mobiltelefone geeignet. Keine: Lädt keine Daten vor
-------------------------------------------------- --------------- Die Attributverwendung von id v2 ist zum Beispiel:
v2.playbackRate=3;
currentTime: aktuelle Wiedergabedauer Dauer: Gesamtdauer pausiert: wahr, ob das aktuelle Video angehalten ist, wahr bedeutet angehalten, falsch bedeutet Wiedergabelautstärke: 1 Der Standardwert ist 1, aktuelle Lautstärke Wiedergaberate: 1, Wiedergaberate größer als 1 bedeutet schnelle Wiedergabe, weniger als 1 bedeutet langsame Wiedergabe
ID v2-Methode:
play(): Video abspielen pause(): Wiedergabe anhalten Mitgliedsereignis: onplay: ein Ereignis, das ausgelöst wird, wenn die Wiedergabe des Videos beginnt onpause: ein Ereignis, das ausgelöst wird, wenn das Video angehalten wird Übung: Passen Sie die Wiedergabe-/Pause-Schaltfläche an, ohne die entsprechenden Steuerelemente zu verwenden Mit dem Video kommen Bewegen Sie die Maus aus dem Videobereich, um die Schaltfläche auszublenden. Zum Beispiel: Video Audio, Canvas/Video.html Wenn die Werbung angehalten ist, wird sie angezeigt abgespielt, wird die Werbung ausgeblendet.
3. H5 neuer Feature-Audio-Player
<audio src=></audio><audio src=><source src=res/birds.mp3></source><source src=res/birds.ogg></source><source src=res/birds. wav></source>
Die Attributmethode ist dieselbe wie beim Video, außer dass es kein Posterattribut*** gibt, um zu bestimmen, ob das Kontrollkästchen aktiviert ist
cb.onchange=function(){ this.checked true bedeutet ausgewählt, false bedeutet nicht ausgewählt}(4), Leinwand
Auf jeder Leinwand gibt es nur ein Pinselobjekt – das sogenannte Zeichnungskontextobjekt – verwenden Sie dieses Objekt zum Zeichnen!
var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象
Leinwand zeichnen – schwierig! ! !
1) SVG-Zeichnung: Vektorzeichentechnologie, die im Jahr 2000 erschien und später in den H5-Standard integriert wurde. 2) Canvas-Zeichnung: Bitmap-Zeichentechnologie, eine von H5 vorgeschlagene Zeichentechnologie noch nicht in den H5-Standard übernommen.
Leinwand-Zeichentechnologie Leinwand: Leinwand, H5 implementiert 2D-Zeichentechnologie
<canvas width=500 height=400>您的浏览器不支持canvas</canvas>
Das Canvas-Tag ist im Browser standardmäßig ein Inline-Block von 300*150. Die Breite und Höhe der Leinwand können nur über HTML/JS-Attribute zugewiesen werden, nicht über CSS-Stile! Auf jeder Leinwand gibt es nur ein Pinselobjekt – das sogenannte Zeichnungskontextobjekt – verwenden Sie dieses Objekt zum Zeichnen! var ctx = canvas.getContext('2d') //Jetzt ruft nur 2d das Canvas-Objekt auf der Leinwand ab
1) Zeichnen Sie mit der Leinwand ein Rechteck
Zeichnen Sie ein Rechteck
ctx.lineWidth = 1 Strichbreite ctx.fillStyle='#000' Füllstilfarbe ctx.StrokeStyle='#000' Strichstilfarbe ctx.fillRect(x,y,w,h); //Ein Rechteck x, y füllen Koordinate w, h Breite und Höhe ctx.StrokeRect(x,y,w,h); //Ein Rechteck streichen ctx.clearRect(x,y,w,h) Alle Zeichnungen innerhalb eines Rechtecks löschen
2) Verwenden Sie die Leinwand, um Text zu zeichnen
Der Ankerpunkt eines Textstücks liegt am Anfang seiner Textgrundlinie
ctx.textBaseline = 'alphabetic' //Der Standardwert der Textgrundlinie ist die dritte Zeile ctx.font=12px sans-serif //Schriftgröße und -stil ctx.fillText(str,x,y) //Füllen Sie ctx.StrokeText (str ,x,y) //Ein Textstück streichen ctx.measureText(str) //Legen Sie den Messtext basierend auf der aktuellen Textgröße und Schriftart fest, und das zurückgegebene Objekt ist {width: x}3) Verwenden Sie die Leinwand, um Pfade zu zeichnen
Pfad: Ähnlich wie das Stiftwerkzeug in PS handelt es sich um eine beliebige Form, die aus mehreren Koordinatenpunkten besteht. Der Pfad ist unsichtbar und kann zum Strich, Füllen und Zuschneiden verwendet werden.
ctx.beginPath() //Neuen Pfad starten ctx.closePath() //Aktuellen Pfad schließen ctx.moveTo(x,y) //Zum angegebenen Punkt bewegen ctx.lineTo(x,y) //Vom aktuellen Zeigen Sie auf den angegebenen Punkt. Zeichnen Sie eine gerade Linie ctx.arc(cx,cy,r,start,end); //Zeichnen Sie einen Bogenpfad//cx cy ist die Mittelpunktskoordinate des Kreises xy r ist der Radius, start ist der Startwinkel und Ende ist der Endwinkel
Winkel: 360 = Bogenmaß: 2PI 180 = 1PI Zum Beispiel
ctx.arc(100,200,30,0,2*Math.PI)ctx.Stroke(); //Aktueller Pfadstrich ctx.fill(); //Aktuelle Pfadfüllung ctx.clip();//Aktuelle Pfadbeschneidung verwenden //***************Die Ecke der Verbindung**********ctx.lineJoin='miter' //Eine scharfe Ecke erscheint an der Verbindung der Linie ctx. lineJoin='round ' //Abgerundete Ecken erscheinen am Anschluss der Linie ctx.lineJoin = 'bevel' //Quadratische Ecken erscheinen am Anschluss der Linie
4) Verwenden Sie Leinwand zum Zeichnen von Bildern
Canvas ist eine clientseitige Technologie und das Bild befindet sich auf dem Server. Daher muss der Browser zuerst das zu zeichnende Bild herunterladen und warten, bis das Bild asynchron geladen wird:
var img = new Images();img.src='x.png';console.log(img.width); //0 Asynchrone Anfrage für Bilder img.onload=function(){console.log(img.width, img .height); //Das Laden des Wertbildes ist abgeschlossen //Mit dem Zeichnen des Bildes auf der Leinwand beginnen ctx.drawImage(img,x,y); //Zeichnung in Originalgröße ctx.drawImage(img,x,y,w,h); //Breite und Höhe festlegen}Hören Sie sich Mausbewegungsereignisse über der Leinwand an
ctx.onmousemove = function(e){x=e.offsetX;y=e.offsetY;console.log(x,y);}2. Farbverlauf beim Zeichnen auf Leinwand
Linearer Farbverlauf: linearGradient Radialer Farbverlauf: radialGradient Sie können sich auf den Farbverlaufseffekt in ps beziehen,
var g = ctx.createLinearGradient(x1,y1,x2,y2);g.addColorStop(0,'#f00');g.addColorStop(0.5,'#ff0');g.addColorStop(1,'#0f0' );ctx.StrokeStyle=g;
Schwierigkeit: Das Koordinatensystem enthält viele Koordinatenachsen und Wörter
3. Zeichnungsverformung
ctx.rotate(radians) //Drehen Sie das Zeichnungskontextobjekt (d. h. Pinsel), der Achsenpunkt ist der Ursprung der Leinwand ctx.translate(x,y) //Übersetzen Sie den Ursprung der gesamten Leinwand zum angegebenen Punkt ctx. sava(); //Alle aktuellen Verformungsstatuswerte des Pinsels speichern (vom Speichern im Spiel) ctx.restore(); //Stellen Sie den Verformungsstatus des Pinsels auf den letzten Speicherstand wieder her (lesen Sie den Speicherstand). im Spiel) ctx.save(); //Speichere die ursprüngliche erste Statusvariable deg = 10*Math.PI/180; //Der zu drehende Winkel wird um 10 Grad gedreht ctx.rotate(deg); //Gedreht ctx.drawImage(img,0,0); //Bilder zeichnen, was gezeichnet werden soll wenn der Pinsel schief ist Sie sind alle schief ctx.restore(); // Der ursprüngliche Zustand wurde beim Herausnehmen des Speichervorgangs gespeichert
(5) SVG-Zeichnung
Lassen Sie uns zunächst verstehen, was Bitmaps und Vektoren sind. Verstehen Sie es einfach kurz.
Bitmap: Es besteht aus Pixeln nacheinander, jeder Punkt hat seine eigene Farbe und die Farbe ist zart. Vektorgrafiken: Bestehend aus nacheinander aufeinanderfolgenden Linien. Jede Linie kann eine Farbe und Richtung angeben und ist stufenlos skalierbar, die Farbdetails sind jedoch nicht reichhaltig genug.
1. Beim SVG-Zeichnen werden Tags zum Zeichnen verwendet, und Sie können Ereignis-Listener direkt binden
<svg width=300 height=200 xmlns=http://www.w3.org/2000/svg> <rect width=100 height=100></rect></svg>
2. So erstellen Sie ein SVG-Tag mit js!
//var r1 = document.createElement('rect'); Dieses SVG-Element kann nicht erstellt werden, da es eine Altersbeschränkung und einen Namespace hat (das heißt, wenn dies nicht funktioniert, verwenden Sie die folgende Methode, um es zu erstellen!!! !) var r1= document.createElementNS('http://www.w3.org/2000/svg','rect');r1.setAttribute('width','50');r1.setAttribute('height',300);s1 .appendChild(r1);3. Erstellen Sie eine Ellipse mit SVG
<svg width=300 height=200 id=c6> <ellipse rx=100 ry=40 cx=100 cy=100 fill=#faa Stroke=#a00></ellipse></svg>
4. Erstellen Sie eine gerade Linie in 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>
Hinweis: Stroke-Linecap=Quadrat erzeugt mehr Quadrate, Stroke-Linecap=Round erzeugt mehr Kreisflächen, Stroke-Linecap=Butt erzeugt nicht mehr Quadrate (d. h. die von Ihnen erstellte gerade Linie unterscheidet sich vom Anfang und das Ende dieser Attribute! Probieren Sie es selbst aus und Sie werden es herausfinden!
5. Erstellen Sie eine Polylinie mit SVG
<svg width=300 height=200 id=c6> <polyline points=50,50 100,300 150,100></polyline> //Was dabei herauskommt, ist ein Dreieck <polyline points=50,50 100,300 150,100 fill=transparent Stroke=#000 >< /polyline> //Was dabei herauskommt, ist eine Polylinie</svg>
6. Geolokalisierung (In Zukunft brauchen wir keinen Kunden mehr, wir können uns auch selbst lokalisieren!)
Geolokalisierung: Geolokalisierung, bei der mithilfe von JS die geografischen Koordinatendaten (Längengrad, Breitengrad, Höhe, Geschwindigkeit) des aktuellen Browsers abgerufen und zur Implementierung von LBS-Anwendungen (Location Based Service) wie Ele.me, Amap Navigation usw. verwendet werden.
So erhalten mobile Browser Standortinformationen:
1) Die erste Wahl ist der GPS-Chip in der Mobiltelefon- und Satellitenkommunikation, die Positionsgenauigkeit liegt innerhalb von Metern. 2) Die zweite Wahl ist die Mobilfunk-Basisstation für die Positionserfassung. Die Positionsgenauigkeit liegt innerhalb von Kilometern (illegal). So erhalten Sie sie Positionierungsinformationen über einen PC-Browser: 1) Rückwärts über IP-Adresse. Parsing und Positionierungsgenauigkeit hängen von der Größe der IP-Adressdatenbank ab
HTML5 bietet ein neues Objekt zum Abrufen der Positionierungsinformationen des aktuellen Browsers:
window.navigator.geolocation{ getCurrentPosition:fn, //Aktuelle Positionsinformationen abrufen watchPosition:fn, //Änderungen in Positionsdaten überwachen clearWatch:fn //Überwachung abbrechen}2. Erweiterung: So betten Sie Baidu Map in eine Webseite ein
1) Registrieren Sie ein Baidu-Entwicklerkonto map.baidu.com ---> lbsyun.baidu.com 2) Erstellen Sie eine Website; melden Sie sich bei Baidu Map an und beantragen Sie einen Karten-AccessKey für die Website 3) Betten Sie die von Baidu Map bereitgestellte Karte ein in Ihrer eigenen Webseiten-API, eingebettet in die Baidu-Karte
Ich werde hier nicht viel darüber reden, wie man das einbettet! (Denken Sie daran, dass Sie ein Konto registrieren müssen, um Baidu Maps nutzen zu können, und zitieren Sie dann einfach die Bibliotheken anderer Leute!)
7. API per Drag-and-Drop verschieben
Ich habe Drag & Drop bereits erwähnt: Freunde, sucht selbst nach früheren Blogs.
acht Speicher
Die Speicherung besteht hauptsächlich aus Cookies und Sitzungen (ich werde die Unterschiede und Vorsichtsmaßnahmen bei der Suche nach vielen Schreibmethoden weiter oben erläutern): Denken Sie daran, dass Sitzungen verschwinden, wenn Sie den Browser schließen, und Cookies nicht verschwinden, wenn Sie den Browser schließen! Hinweis: Beim Speichern des Cookies muss eine Zeit hinzugefügt werden. Wenn keine Zeit hinzugefügt wird, verschwindet es nach dem Schließen des Browsers! Dieser Browserspeicher kann zur Lösung vieler Funktionsprobleme verwendet werden, z. B. zum Merken von Passwörtern und anderen Funktionen! !
Neun Web-Sockets
Sollen wir darüber reden? . . . . Lassen Sie uns kurz darüber sprechen, es hängt alles vom Verständnis ab~~
Web-Socket ist eine bidirektionale Nicht-HTTP-Verbindung, die zwischen dem Server und dem Client hergestellt werden kann!
Diese Verbindung ist in Echtzeit und dauerhaft.
Der Server kann Nachrichten aktiv pushen.
Der Server muss den Client nicht mehr nach Anfragen abfragen, und die Kommunikation zwischen dem Server und dem Client erfordert keinen erneuten Verbindungsaufbau.
Das heißt, nachhaltige Hin- und Her-Kommunikation.
Wie erstelle ich es? Ein Codeteil ist fertig
var webSocket = new WebSocket (ws://localhost:8005/socket); //url muss mit ws oder wss beginnen text: weil es nicht http ist, ist es websocket, es ist Ihre eigene Identifikation, verschlüsselte Übertragung, denken Sie daran . webSocket.send() //Textdaten senden, es kann nur Text gesendet werden. (Verwenden Sie das JSON-Objekt, um das JSON-Objekt vor dem Senden in Textdaten umzuwandeln.) webSocket.close();//Schließen und unterbrechen Sie die Kommunikationsverbindung. webSocket.onmessage= function(event){ var data=event.data;} // Nachrichten vom Server empfangen webSocket.onopen =function(event){ //Verarbeitung beim Start der Kommunikation} webSocket.onclose =function(event) { / /Verarbeitung am Ende der Kommunikation} ZusammenfassenDas Obige ist eine umfassende Liste der vom Herausgeber eingeführten neuen Funktionen und der Verwendung von HTML5. Ich hoffe, dass sie Ihnen hilfreich sein wird. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!