Eine kurze Diskussion über neue und aufgegebene Tags in HTML5

Die folgenden HTML 4.01-Elemente wurden in HTML5 gelöscht. Obwohl Browser diese Tags aus Kompatibilitätsgründen weiterhin unterstützen, wird empfohlen, neue alternative Tags zu verwenden. Paradoxerweise unterstützen alte Browser neue Tags nicht ausreichend.

Zu diesen Elementen gehören „basefont“, „big“, „center“, „font“, „s“, „strike“, „tt“ und „u“. Diese Elemente dienen ausschließlich der Seitenanzeige und der angezeigte Inhalt sollte durch CSS vervollständigt werden.

Zu diesen Elementen gehören Frameset, Frame und Noframes. HTML5 unterstützt keine Frame-Frames, sondern nur Iframe-Frames oder verwendet ein serverseitiges Format, das aus mehreren Seiten besteht und der Seite entspricht, und löscht die oben genannten drei Tags.

Zu diesen Elementen gehören Applet, BGSound, Blink, Marquee und andere Tags.

Abschaffen Sie rb, verwenden Sie Ruby, um das Akronym zu ersetzen. Verwenden Sie abbr, um Abolition Dir zu ersetzen. Verwenden Sie ul, um Isindex zu ersetzen. Verwenden Sie eine Kombination aus Form und Eingabe, um Listing zu ersetzen. Verwenden Sie Pre, um xmp zu ersetzen. Verwenden Sie Code, um Abolition Nextid zu ersetzen. Verwenden Sie Guids, um Plaintex abzuschaffen. Verwenden Sie Text/ Plian (unformatierter Körper) MIME-Typ-Ersetzung

In HTML4.01 werden Divs häufig in verschiedenen Layoutumgebungen ohne klare Definition verwendet. HTML5 semantisiert Divs für SEO, und neu hinzugefügte Struktur-Tags lauten wie folgt:

a) Das Abschnittselement stellt einen Inhaltsblock auf der Seite dar, beispielsweise ein Kapitel, eine Kopfzeile, eine Fußzeile oder einen anderen Teil der Seite. Es kann in Kombination mit h1, h2... und anderen Elementen verwendet werden, um die Dokumentstruktur darzustellen. Beispiel: <section>……</section> in HTML5; <div>……</div> in HTML4.

b) Das Artikelelement stellt einen unabhängigen Inhalt auf der Seite dar, der keinen Bezug zum Kontext hat. Zum Beispiel ein Artikel.

c) Das Aside-Element stellt Hilfsinformationen dar, die sich auf den Inhalt des Artikelelements beziehen und sich nicht auf den Inhalt des Artikelelements beziehen.

d) Das Header-Element stellt einen Inhaltsblock auf der Seite oder den Titel der gesamten Seite dar.

e) Das hgroup-Element stellt eine Kombination der Titel der gesamten Seite oder eines Inhaltsblocks auf der Seite dar.

f) stellt das Fußzeilenelement die Fußnote der gesamten Seite oder eines Inhaltsblocks auf der Seite dar. Normalerweise enthält es den Namen des Erstellers, das Erstellungsdatum und die Kontaktinformationen des Erstellers.

g). Das Navigationselement stellt den Navigationslink-Teil der Seite dar.

h) Das Abbildungselement stellt einen unabhängigen Teil des Flussinhalts dar und stellt im Allgemeinen eine unabhängige Einheit im Hauptflussinhalt des Dokuments dar. Verwenden Sie das Element figcaption, um einer Gruppe von Abbildungselementen eine Beschriftung hinzuzufügen. Zum Beispiel:

 <figure> ​<figcaption>VR China</figcaption> ​<p>Die Volksrepublik China wurde 1949 gegründet</p></figure>

Allgemeines Schreiben in HTML4

 <dl> ​<h1>prc</h1> ​<p>Die Volksrepublik China wurde 1949 gegründet</p> ​</dl>

Laufergebnisse:

2,1 Meter

Stellt einen Wert innerhalb eines bestimmten Bereichs dar, der für Löhne, Mengen, Prozentsätze usw. verwendet werden kann. Max steht für den Maximalwert, Min für den Minimalwert und Wert für den aktuellen Wert.

 <meter max=100 min=0 value=60 style=width: 300px;></meter>

Sie können js verwenden, um es von 0 bis 100 zu steuern.

Zeit. Stellt einen Zeitwert dar. Das Attribut datetime betont die Uhrzeit: <time>2015-10-6</time>

 <time>2015-10-6</time>

Wir beginnen jeden Morgen um <time>8:30</time> mit dem Unterricht. Ich habe ein Date am <time datetime=2017-02-14>Valentinstag</time>.

Da es sich bei diesem Tag um ein semantisches Tag handelt, hat es keine besondere Wirkung, wenn es in einem Browser angezeigt wird. Es ist im Grunde die gleiche Wirkung, als ob das Tag nicht gesetzt wäre.

Wird zur Darstellung eines Fortschrittsbalkens verwendet

 <h3>Fortschritt</h3><progress value=75 max=100></progress>

max: Maximalwert, Wert bei Abschluss

Wert: aktueller Wert

Dieses Tag definiert eine Liste optionaler Daten. In Verbindung mit dem Eingabeelement können Sie eine Dropdown-Liste mit Eingabewerten erstellen.

In Kombination mit der Eingabe können sowohl die Auswahl als auch die Eingabe abgeschlossen werden.

 <input type=text list=countries /><datalist id=countries> <option value=China></option> <option value=United States></option> <option value=Japan></option></datalist >

Es wird hauptsächlich verwendet, um dem Benutzer den Text, der hervorgehoben oder hervorgehoben werden muss, visuell darzustellen. Suchbegriffe werden in typischen Anwendungssuchergebnissen hervorgehoben. HTML5<mark></mark>;HTML4 <span></span>.

Definieren Sie Ruby-Kommentare (chinesisches Pinyin oder Zeichen). Wird mit den Tags <ruby> und <rt> verwendet. Das Ruby-Element besteht aus einem oder mehreren Zeichen (die eine Erklärung/Aussprache erfordern), einem RT-Element, das diese Informationen bereitstellt, und einem optionalen RP-Element, das den anzuzeigenden Inhalt definiert, wenn der Browser das Ruby-Element nicht unterstützt.

Definiert die Interpretation oder Aussprache eines Zeichens (chinesische Lautschrift oder Schriftzeichen).

Wird in Ruby-Kommentaren verwendet, um zu definieren, was von Browsern angezeigt wird, die Ruby-Elemente nicht unterstützen.

Stellt einen weichen Zeilenumbruch dar. Der Unterschied zum br-Element: Das br-Element gibt an, dass hier ein Zeilenumbruch vorgenommen werden muss; wbr gibt an, dass die Zeile nicht breit ist, wenn das Browserfenster oder das übergeordnete Element breit ist (wenn kein Bedarf für einen Zeilenumbruch besteht). unterbrochen, aber wenn die Breite nicht ausreicht, wird die Linie hier automatisch umbrochen.

Definieren Sie Grafiken wie Diagramme und andere Bilder. Das <canvas>-Element ist nur ein Grafikcontainer (Canvas), und Sie müssen Skripte verwenden, um Grafiken zu zeichnen.

 <canvas id=myCanvas></canvas><script type=text/javascript> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ; ctx.fillRect(0, 0, 80, 100);</script>

Stellt eine Befehlsschaltfläche dar, z. B. ein Optionsfeld, ein Kontrollkästchen oder eine Schaltfläche. Das Befehlselement ist nur sichtbar, wenn es sich innerhalb eines Menüelements befindet. Andernfalls wird dieses Element nicht angezeigt, kann aber zur Angabe von Tastaturkürzeln verwendet werden.

 <menu> ​<command onclick=alert('Hello World')> ​Klick mich!</command> ​</menu>

Wird verwendet, um Details eines Dokuments oder eines Teils eines Dokuments zu beschreiben. Kann in Verbindung mit dem Summary-Tag verwendet werden, mit dem Titel für Details definiert werden können. Der Titel ist sichtbar und wenn der Benutzer auf den Titel klickt, werden die Details angezeigt. Zusammenfassung sollte das erste untergeordnete Element von Details sein.

Definieren Sie eine Liste mit Optionen. Verwenden Sie dieses Element in Verbindung mit dem Eingabeelement, um die möglichen Werte der Eingabe zu definieren. Die Datenliste und ihre Optionen werden nicht angezeigt, es handelt sich lediglich um eine Liste gültiger Eingabewerte. Verwenden Sie das Listenattribut des Eingabeelements, um die Datenliste zu binden.

Definieren Sie verschiedene Arten der Ausgabe, z. B. die Skriptausgabe.

 <form action=form_action.asp method=get name=sumform> ​<output name=sum></output> ​</form>

Menüliste definieren. Verwenden Sie diese Bezeichnung, wenn Sie Formularsteuerelemente auflisten möchten. Beachten Sie den Unterschied zum Navigationsmenü, das speziell für Formularsteuerelemente verwendet wird.

Wenn Sie Audio und Video auf der Seite abspielen müssen, verwenden wir häufig folgende Methoden:

a)、einbetten

 <embed src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf'allowFullScreen='true' quality='high' width='480' height='400' align=' middle'allowScriptAccess='always' type='application/x-shockwave-flash'></embed>​<embed src=img/iceage4.mp4></embed>

b) Verwenden Sie einen Flash-Player

Zum Beispiel einige Plug-Ins von Drittanbietern, flowplayer602

HTML5-Multimedia-Komponenten beziehen sich auf Video-(Video-)Komponenten und Audio-(Audio-)Komponenten. HTML5-Multimedia-Komponenten können Multimedia-Komponenten ohne die Hilfe von Drittanbieter-Plug-Ins wie Flash Player direkt in Ihre Webseiten einbetten. Die neue Fähigkeit von Browsern, native Unterstützung für Videos anzubieten, erleichtert Webentwicklern das Hinzufügen von Videokomponenten zu ihren Websites, ohne auf die Verfügbarkeit externer Plug-Ins angewiesen zu sein. Aufgrund der Einschränkungen der derzeit von Apple auf dem iPhone und iPad verwendeten Flash-Technologie sind die Fähigkeiten von HTML5-Multimedia-Komponenten besonders wichtig.

Wird zum Abspielen von Videos und Filmen verwendet

Die Grundformel des Etiketts lautet wie folgt:

 <video width=800 height=600 Controls=controls poster=content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video /webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value=autostart=true&amp;file=myvideo.swf /> </object> Der aktuelle Browser unterstützt keine direkte Videowiedergabe. Klicken Sie hier, um das Video herunterzuladen: <a href=a.mp4>Herunterladen Video</ a></video>

Quelle ist die Videoquelle, die aus mehreren Typen bestehen kann. Wenn einer ausfällt, wird der nächste ausgewählt. Es gibt drei Haupttypen:

Ogg = Ogg-Datei mit Theora-Videokodierung und Vorbis-Audiokodierung MPEG4 = MPEG 4-Datei mit H.264-Videokodierung und AAC-Audiokodierung WebM = WebM-Datei mit VP8-Videokodierung und Vorbis-Audiokodierung

Beachten:

 <video src=img/a.mp4 Controls=controls poster=img/1.jpg>Ihr Browser ist zu alt, bitte aktualisieren Sie, Video-Download <a href=#>Adresse</a></video>

Der innerHTML-Inhalt der meisten HTML5-Tags ist der Inhalt, der angezeigt wird, wenn der Browser das Tag nicht unterstützt.

Der Unterschied zwischen Ereignisbindung und Zuhören:

 <!DOCTYPE html><html>​ <head> <meta charset=UTF-8> <title>Der Unterschied zwischen Ereignisbindung und Überwachung</title> </head>​ <body> <button id=btnA>Button A </button> <button id=btnB>Button B</button> <script type=text/javascript> var btnA = document.getElementById(btnA); btnB = document.getElementById(btnB); btnA.onclick = function() { warning(you clicked); { Alert(Sie haben geklickt); },false); btnB.addEventListener(click,function(event){ warning(Sie haben erneut geklickt); },false); </script> </body>​</html>

Nach der Bindung eines Ereignisses unter Verwendung des Ereignisnamens on überschreibt die Bindung das zuvor gebundene Ereignis, d. h. das zuletzt gebundene Ereignis wird wirksam.

Durch die Verwendung von addEventListener zum Binden von Ereignissen werden keine Ereignisse überschrieben, und mehrere identische Ereignisse können gleichzeitig an ein Element gebunden werden.

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>Video-Tag</title> </head> <body> <video id=videoIce width=800 height=600 Controls=Controls Poster =content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video/webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value= autostart=true&amp;file=myvideo.swf /> </object> Der aktuelle Browser unterstützt keine direkte Videowiedergabe. Klicken Sie hier, um das Video herunterzuladen: <a href=content/a.mp4>Video herunterladen</a> </video> <h2> <button onclick=play()>Play</button> <button onclick=pause()>Pause</button> <span id=msg></span> </h2> <script type =text/javascript> var videoIce=document.getElementById(videoIce); function play() { videoIce.play( }​ function pause() { videoIce.pause(); } videoIce.ontimeupdate = function() { document.getElementById(msg).innerHTML=videoIce.currentTime; } </script> </body>​</html>

Audio kann die Funktion der Ton- und Musikwiedergabe realisieren.

 <audio src=http://baidu/demo/test.mp3 Controls >Ihr Browser unterstützt das Audioelement nicht</autio><audio src=content/a.mp3 Controls=controls autoplay=autoplay></audio>

Viele der Attribute des Audio-Tags sind mit denen des Videos identisch:

Autoplay: true|false, wenn true, wird das Audio abgespielt, sobald es fertig ist. Steuerelemente: true|false Wenn true, werden dem Benutzer Steuerelemente angezeigt, z. B. eine Wiedergabeschaltfläche. Ende: Der numerische Wert definiert, an welcher Stelle im Audiostream der Player die Wiedergabe stoppt. Standardmäßig wird der Ton bis zum Ende abgespielt. loopend: Der numerische Wert definiert die Position, an der die Loop-Wiedergabe im Audiostream stoppt. Der Standardwert ist der Wert des Endattributs. Loopstart: Der numerische Wert definiert die Startposition der Loop-Wiedergabe im Audiostream. Der Standardwert ist der Wert des Startattributs. Playcount: Der numerische Wert definiert, wie oft der Audioclip abgespielt wird. Der Standardwert ist 1. src: url Die URL des wiedergegebenen Audios. start: Der numerische Wert definiert die Position im Audiostream, an der der Player mit der Wiedergabe beginnt. Standardmäßig wird der Ton am Anfang abgespielt.

Beispiel für die Verwendung des Quellelements als Unter-Tag eines Multimedia-Elements:

 <audio>​<source src='test.mp3 ' type='audio/mpeg'/>​<source src='test.ogg ' type='audio/ogg'/>​<source src='test.spx ' type='audio/ogg'/>​</audio>

Mithilfe des Quellelements durchsucht der Browser nacheinander die Liste, bis er ein Dateiformat findet, das er abspielen kann. Sobald er die Datei gefunden hat, spielt er die Datei ab und ignoriert andere Elemente, die darauf folgen.

Die API von Audio ist grundsätzlich dieselbe wie die von Video. Hier ist ein Beispiel für die Anpassung der Lautstärke:

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>audio tag</title> </head> <body> <h2>audio tag</h2> <audio src=content/ fcml.mp3 control=controls autoplay=autoplay id=mp3> <marquee><h2>Ändern Sie den Browser, er ist zu alt</h2></marquee> </audio> <input type=range min=0 max=100 onchange=setVolume(this) /> <script type=text/javascript> function setVolume(obj){ document.getElementById(mp3).volume=obj.value*0.01; /script> </body></html>

Die Lautstärke liegt nur zwischen 0-1.

Wird zum Einbetten von Inhalten (einschließlich verschiedener Medien) verwendet. Das Format kann Midi, Wav, AIFF, AU, MP3, Flash usw. sein.

Beispiel: <embed src=flash.swf /> Codebeispiel in HTML4 <object data=flash.swf type=application/x-shockwave-flash><object>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.