Was sind die neuen Tags in HTML5?-Front-End-Fragen und Antworten-php.cn

Heim

Web-Frontend

Front-End-Fragen und Antworten

Was sind die neuen Tags in HTML5?

青灯夜游

Nov 23, 2022 pm 06:55 PM

html5

HTML5 neue Tags: Canvas, Audio, Video, Quelle, Einbettung, Spur, Datenliste, Keygen, Ausgabe, Artikel, Seite, BDI, Navigation, Mark, RT, RP, Ruby, Zeit, WBR usw. Das Canvas-Tag kann Grafiken definieren, das Audio-Tag kann Audioinhalte definieren, Video kann Video definieren, Quelle kann Multimedia-Ressourcen definieren und Embed kann eingebettete Inhalte definieren usw.

Was sind die neuen Tags in HTML5?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

HTML5 ist die neueste Version von HTML, die 2014 vom W3C an den Standard angepasst wurde. Verbesserte native Browserfunktionen reduzieren die Anzahl der Browser-Plug-in-Anwendungen (z. B. Flash), verbessern die Zufriedenheit der Benutzer und machen die Entwicklung komfortabler. HTML hat von 1.0 bis 5.0 enorme Veränderungen erfahren, von einer einzelnen Textanzeigefunktion zu einer Multimedia-Anzeigefunktion mit Bildern und Texten. Nach vielen Jahren der Verbesserung haben sich viele Funktionen zu einer sehr wichtigen Auszeichnungssprache entwickelt.

Neue Tags in HTML5

HTML5 fügt einige neue Struktur-Tags, Multimedia-Tags und Formular-Tags hinzu. Lassen Sie mich es Ihnen unten vorstellen.

Tag	Beschreibung
	Tags definieren Grafiken, wie Diagramme und andere Bilder. Dieses Tag basiert auf der Zeichen-API von JavaScript.

Neues Multimedia-Element.

Definition Video (Video oder Film)Multimedia-Ressourcen definieren

Eingebettete Inhalte wie Plug-ins definieren. Gibt eine externe Textspur für Medien wie

Neues Formularelement Beschriftung Beschreibung

Tag

Definieren Sie die Optionsliste. Verwenden Sie dieses Element in Verbindung mit einem Eingabeelement, um die möglichen Werte der Eingabe zu definieren. Gibt das Schlüsselpaargeneratorfeld an, das für das Formular verwendet werden soll. Definieren Sie verschiedene Arten der Ausgabe, z. B. die Skriptausgabe.

Neue semantische und strukturelle Elemente

Tags	Beschreibung
	definieren unabhängige Inhaltsbereiche der Seite.
	Definieren Sie den Inhalt der Seitenleiste der Seite.
	Ermöglicht Ihnen, einen Text unabhängig von der Textrichtungseinstellung seines übergeordneten Elements festzulegen.
	Befehlsschaltflächen definieren, z. B. Optionsfelder, Kontrollkästchen oder Schaltflächen
	Wird verwendet, um die Details eines Dokuments oder eines Teils eines Dokuments zu beschreiben
< ;dialog>	Definieren Sie ein Dialogfeld, z. B. ein Eingabeaufforderungsfeld
	Das Tag enthält den Titel des Detailelements
	Gibt unabhängige Flussinhalte an (Bilder, Diagramme, Fotos, Code usw.).
	Definieren Sie den Titel des -Elements
	Definieren Sie die Fußzeile des Abschnitts oder Dokuments.
	definiert den Kopfbereich des Dokuments
	definiert Text mit Markierungen.
	Definition von Gewichten und Maßen. Nur für Messungen mit bekannten Maximal- und Minimalwerten verwenden.
	Definieren Sie den Teil des Navigationslinks.
	Definieren Sie den Fortschritt jeder Art von Aufgabe.
	Ruby-Kommentare definieren (chinesische Lautschrift oder Zeichen).
	Definition der Interpretation oder Aussprache eines Zeichens (chinesische Lautschrift oder Schriftzeichen).
	wird in Ruby-Kommentaren verwendet, um den Inhalt zu definieren, der von Browsern angezeigt wird, die Ruby-Elemente nicht unterstützen.
	Definieren Sie den Abschnitt (Abschnitt, Abschnitt) im Dokument.
	Datum oder Uhrzeit festlegen.
	Gibt an, wo im Text Zeilenumbrüche eingefügt werden sollten.

Beispiele für die Verwendung von HTML5-Tags

(1) Definieren Sie den Navigationslink

Es ist auch ein aussagekräftiges Tag, es bedeutet nicht, dass dieses Tag irgendwo hinzugefügt wird. Es ist nur ein Sinnvoll p. Fügen Sie den Menü-Tag

zum

hinzu kann das Menülayout realisieren, das Sie zuvor nur p verwendet haben

(2) Definieren Sie das Artikel-Tag

Sie können das Artikelblock-Tag zum Schreiben von Artikeln verwenden. Verwenden Sie dieses Tag um einen Artikel im Abschnittsabschnitt zu schreiben, der mit
kombiniert werden kann
(3) Definieren Sie die Gruppierung von Medieninhalten und deren Titel
A. Dieses Tag kann in Verbindung mit dem passenden Tag
verwendet werden, aber schreiben Sie den Titel
```
<header>
    <p>这是一个header部分</p>
    <nav>    
        <ul>    
            <li>首页</li>
            <li>关于</li>
            <li>产品</li>
            <li>联系</li>
        </ul>
    </nav>
</header>
```
B in die Mitte von
. Es kann auch in Verbindung mit
verwendet werden, wobei
zum Schreiben von Inhalten verwendet wird. Der Anzeigeeffekt ist ebenfalls unterschiedlich aus dem Effekt der unterstützenden Verwendung
```
/*定义nav的高和颜色*/ 
nav{
    height:30px;
    background-color:#F33;
    margin-top:100px;}
/*正常设置li的样式*/
li{
    list-style:none;
    float:left;
    width:100px;
    height:30px;
}
```
(4) Definieren Sie ein Dialogfeld oder Fenster
Sie können in diesem Tag auch die Tags dd und dt verwenden. Der Titel und der Inhalt des Dialogfelds Das Feld hat das Attribut „offen“. Die Kompatibilität dieses Tags ist nicht sehr gut. Dieses Tag kann zusammen mit li
<article> 　　<h2>文章标题</h2> 　　<p>文章内容文章内容文章内容文章内容文章内容文章内容　　<br> 　　文章内容文章内容文章内容文章内容文章内容文章内容<br> 　　文章内容文章内容文章内容</p> </article>　
B verwendet werden. Sie können Ihren eigenen Inhalt per Rechtsklick hinzufügen (nur Firefox ist kompatibel)
Union (Befehle/Menüelemente definieren, die der Benutzer aus dem Popup-Menü aufrufen kann) mit
article{ background-color:#F33; width:500px; text-align:center; /*水平居中*/ margin:0px auto; }
<figure> <figcaption>标题</figcaption> <p>标题内容</p> </figure>
Das gewünschte Element markieren erscheint nach einem Rechtsklick. Klicken Sie auf den gewünschten Menüpunkt
, und der Inhalt wird angezeigt
(6) Titelgruppe
Sie können einige Kombinationen von Titeln < h3> für den allgemeinen Gebrauch
<figure> <dt>标题1</dt> <dd>标题内容</dd> </figure>

(7) Definieren Sie kleinen Text
Dieses Tag ähnelt tatsächlich anderen Fett-Tags
<dialog open> <dt>1问题</dt> <dd>1答案</dd> <dt>2问题</dt> <dd>2答案</dd> </dialog>
(8) Definieren Sie die Details des Elements< Details>

Der darin enthaltene Inhalt kann mit den Titel- und Inhalts-Tags verwendet werden
<menu> <li>定义列表</li> <li>定义列表</li> <li>定义列表</li> </menu>
Klicken Sie auf die Details, um den Titel und den Inhalt anzuzeigen
(9) Definieren Sie einen Ruby-Kommentar
Ich erkenne es nicht. Sie können dies verwenden, um Pinyin für Zeichen zu kommentieren, aber die Kompatibilität ist nicht sehr gut. Sie können es ändern, wenn es soweit ist.
<menu type="context" id="cai">  <menuitem label="菜单一" onclick="alert('这是菜单一')" icon="右键单击显示的图片"></menuitem> </menu>
(10) Definieren Sie die Messung innerhalb des vordefinierten Bereichs
Es gibt mehrere Attributwerte, min="" max="" value="" low="" high="", wobei low und high Bereiche sind, die überschritten werden, werden unterschiedliche Effekte angezeigt
<span contextmenu="cai">单击我试试</span>

Der Wert überschreitet Nachdem der Bereich bestimmt wurde
<hgroup> <h3>标题</h3> <h3>标题1</h3> <h3>标题2</h3> <h3>标题3</h3> </hgroup>
(11) Die Bezeichnung des Fortschrittsbalkens
<small>法律条文</small> <small>联系我们</small> <small>客户意见</small>
Der Maximalwert ist die Länge des Fortschrittsbalkens und der Wert Der Wert ist der angezeigte Fortschritt. Verwenden Sie ihn, um einen dynamischen Fortschrittsbalken zu erstellen. Der Fortschrittsbalken kann auf diese Weise vervollständigt werden, als nur in js zu schreiben
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmieren lernen! !

Das obige ist der detaillierte Inhalt vonWas sind die neuen Tags in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

So retten Sie alle 4 <🎜> Kinder in 99 Nächten im Wald

1 Monate vor By DDD

Windows 11 KB5062660 24H2 mit Funktionen, direkte Download -Links für Offline -Installateur (.msu)

4 Wochen vor By Jack chen

<🎜> Gigantamax Journey Timed Research Quest Schritte und Code

4 Wochen vor By Jack chen

PHP nennt AI intelligente Sprachassistenten PHP Voice Interaction System Construction

3 Wochen vor By

So verwenden Sie PHP, um soziale Freigabefunktionen zu erstellen. PHP Sharing Interface Integration Practice

3 Wochen vor By

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial

1543

276

Related knowledge

Was sind HTML5 -Datenattribute? Aug 06, 2025 pm 05:39 PM

Html5datAatttributesArecustom, validHtmlattributesusesedTostoreExtrainFormationInelementsforjavaScriptorcs.1.TheyaredefinedasData-*Attribute, LikeData-User-ID = "123" .2.

Wie benutze ich die Canvas -API für die grundlegende Zeichnung in HTML5? Aug 07, 2025 am 07:15 AM

Um die HTML5Canvas -API für die grundlegende Zeichnung zu verwenden, erstellen Sie zunächst das Canvas -Element in HTML und setzen Sie das Breiten- und Höhenattribut und erhalten Sie dann seinen 2D -Rendering -Kontext über JavaScript. 1. Verwenden Sie Fillrect, Strokerect und Clearrect, um zu zeichnen und zu klären. 2. Erstellen Sie Pfade und zeichnen Sie Linien oder benutzerdefinierte Formen durch BeginnPad, MoveTo, Lineto und Conepath. 3. Zeichnen Sie ARC, um Kreise oder Bögen zu zeichnen. V. 5. Fillstyle, Strokestyle, Lin

Wofür ist das beiseite, für das in HTML5 beiseite ist? Aug 12, 2025 pm 04:37 PM

Die Auslagerung sollte fürsortiert, dass die Tätigkeiten, solche ASSIDEBARS, PullQuotes, Definitionen, Anzeigen, OrteLatedLinks; 2. ItcanbeplaceInsieTIDEANTICDETEPENDINGINGONCONTEXTELECTEN;

So erstellen Sie eine einfache HTML5 -Webseite Aug 12, 2025 am 11:51 AM

Um eine einfache HTML5 -Webseite zu erstellen, müssen Sie zuerst den Deklarationsdokumenttyp verwenden und dann eine grundlegende Struktur erstellen, die die Charaktercodierung, den Ansichtsfenster und den Titel feststellt, sichtbare Inhalte wie Titel, Absatz, Link, Bilder und Listen hinzufügen. Speichern Sie es als .html -Datei und öffnen Sie sie direkt im Browser zum Anzeigen, ohne Serverunterstützung. Dies ist die Grundlage für eine vollständige und effektive HTML5 -Seite.

Wie erstelle ich einen Farbwähler in einem HTML5 -Formular? Aug 08, 2025 am 03:48 AM

Verwenden Sie type = "color", um einen HTML5 -Farbauswahlschalter zu erstellen. 1. Verwenden Sie Farbeingang hinzufügen. 2. Sie können den Standard-Farbwert über das Wertattribut festlegen (muss sich in einem Hexadezimalformat mit 7-Charakter wie #ffffff befinden). 3. Alle modernen Browser unterstützen es, und ältere Browser fallen auf die Texteingabe zurück. V. 5. Etiketten -Tags sollten hinzugefügt werden, um die Barrierefreiheit zu verbessern, und die JavaScript -Bibliothek kann verwendet werden, um bei Bedarf eine Downgrade -Unterstützung bereitzustellen. Diese Methode ist einfach, effektiv und weit verbreitet.

Was ist das Readonly -Attribut in HTML5? Aug 08, 2025 am 11:55 AM

ThereadOnlyAttributEinHtml5MakesFormInputsnon-editableWilestillaLaLaSubermingAndusSerInteraction; 1.itappliestoandELements; 2.ISABOOLEANATTRIBUTE, bald "readonly" NeedStobePresent;

Was ist das draggable Attribut in HTML5 Aug 12, 2025 am 09:50 AM

ThedRaggableatTributEinHtml5spezifiziert, wenn AnlementCanDragged, withvalues "true", "false", oraneMptyString (Sameas "true")

Wie verwenden Sie SVG in HTML5? Aug 11, 2025 pm 01:30 PM

UseInLinesVgforfullControloverStylingAndInteractivityWithcsSandjavaScript, idealForsMalliconSordynamicgraphics.2.usethetagtoembedexternalsVgFileswhentheimageIsStaticandInteractivityisnotneed, ausschließt, die Betterhtmlcleaness und die Erschöpfung der und der Erschöpfung der und der Erschwerung und der Erscheinung der und der Erscheinung und Erschwere und Erschwere, und der Bemühungen und Erschweren und Erschweren, die und deren, die und

See all articles