Heim > Web-Frontend > H5-Tutorial > Wie verwende ich das HTML5-Quell-Tag? Einführung in HTML5-Quell-Tag-Attribute

Wie verwende ich das HTML5-Quell-Tag? Einführung in HTML5-Quell-Tag-Attribute

寻∝梦
Freigeben: 2018-08-17 17:34:06
Original
7553 Leute haben es durchsucht

Wie verwende ich das HTML5-Quell-Tag? Einführung in HTML5-Quell-Tag-Attribute. Lassen Sie uns nun den Inhalt dieses Artikels vorstellen. Ich werde Ihnen hauptsächlich die Verwendung von HTML5-Quell-Tags und eine detaillierte Einführung in die drei Attribute von HTML5-Quell-Tags

HTML5-Quell-Tag-Definition und -Verwendung erläutern: Das

-Tag definiert Medienressourcen für Medienelemente (wie

-Tag können Sie alternative Video-/Audiodateien angeben, die der Browser basierend auf seinem Medientyp oder seiner Codec-Unterstützung auswählen kann.

HTML5 Beispiel:

Audioplayer mit zwei Quelldateien. Der Browser sollte die unterstützten Dateien auswählen (falls vorhanden):

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>
Nach dem Login kopieren
Nach dem Login kopieren

grundlegende Attribute des Quell-Tags:

  • Medien: Der Typ der Medienressource, damit der Browser entscheiden kann, ob er heruntergeladen werden soll (Wert: media_query).

  • src: URL der Mediendatei (Wert: URL).

  • Typ: MIME-Typ der Medienressource (Wert: MIME_type).

Hinweis: Das -Tag unterstützt globale HTML-Attribute und HTML-Ereignisattribute

HTML5-Quell-Tag-Format:

<source src="媒体资源地址" />
Nach dem Login kopieren

HTML5Medienattribut:

Medienattribut verwenden:

<source src="movie.ogg" type="video/ogg" media="screen and (min-width:320px)">
Nach dem Login kopieren

HTML5Medienattributdefinition und -verwendung:

Das Medienattribut gibt den Typ der Medienressource an (für welches Medium/Gerät die Datei optimiert ist).

Anhand dieses Attributs kann der Browser ermitteln, ob er die Datei abspielen kann. Wenn Sie es nicht abspielen können, können Sie es auch nicht herunterladen.

Hinweis: Diese Eigenschaft kann mehrere Werte annehmen.

HTML5Medienattributsyntax:

<source media="value">
Nach dem Login kopieren

Hinweis: Da kein Browser das Medienattribut des -Tags unterstützt. Deshalb werde ich nicht viel mehr sagen.

HTML5src-Attribut:

Definition und Verwendung von HTML5src-Attribut:

src-Attribut Gibt die URL der abzuspielenden Mediendatei an.

HTML5src-Attributsyntax:

<source src="URL">
Nach dem Login kopieren

HTML5src-Attributverwendungsbeispiel:

Audioplayer mit zwei Ressourcendateien. Der Browser sollte auswählen, welche Datei er unterstützt (falls vorhanden):

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>
Nach dem Login kopieren
Nach dem Login kopieren

HTML5Attributwert des src-Attributs:

Wie verwende ich das HTML5-Quell-Tag? Einführung in HTML5-Quell-Tag-Attribute

HTML5type-Attribut:

HTML5Die Definition und Verwendung des type-Attributs:

Das type-Attribut gibt an media Der MIME-Typ der Ressource.

Verwendung des Typattributs:

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
Nach dem Login kopieren

HTML5Syntax des Typattributs:

<source type="MIME_type">
Nach dem Login kopieren

HTML5type attribute Attribut Wert:

Wie verwende ich das HTML5-Quell-Tag? Einführung in HTML5-Quell-Tag-Attribute

Unterschiede zwischen HTML 4.01 und HTML 5 Das

-Tag ist ein neues Tag in HTML 5.

Browserunterstützung:

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das

Hinweis: Internet Explorer 8 und früher unterstützen das -Tag nicht.

[Verwandte Empfehlungen]

Welche Rolle spielt das HTML-Meta-Tag? Einführung in allgemeine Attribute von HTML-Meta-Tags

Was ist das HTML-Map-Tag? Detaillierte Erläuterung der Struktur und spezifischen Verwendung des HTML-Map-Tags

Das obige ist der detaillierte Inhalt vonWie verwende ich das HTML5-Quell-Tag? Einführung in HTML5-Quell-Tag-Attribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage