Welche Rolle spielt das HTML5-Details-Tag? Einführung in die Verwendung des -Tags (mit Anwendungsbeispielen)-H5-Tutorial-php.cn

Heim

Web-Frontend

H5-Tutorial

Welche Rolle spielt das HTML5-Details-Tag? Einführung in die Verwendung des -Tags (mit Anwendungsbeispielen)

寻∝梦

Aug 22, 2018 pm 01:58 PM

html5

Welche Funktionen hat das HTML5-Details-Tag und wie wird das

verwendet? Für detaillierte Inhalte werfen wir einen Blick auf die Definition und Verwendungsanweisungen des in diesem Artikel vorgestellten HTML-Details-Tags sowie auf die spezifische Verwendung des HTML5-Details-Tags

html5

Tag-Definition und Verwendungsanweisungen:

Das neue

-Tag in HTML5 ermöglicht es Benutzern, ein erweiterbares und faltbares Element zu erstellen, sodass ein Text oder Titel versteckte Informationen enthalten kann. Das Tag

wird verwendet, um Details eines Dokuments oder eines bestimmten Teils eines Dokuments zu beschreiben. Das Tag

gibt zusätzliche Details der Anforderung an, die für den Benutzer sichtbar oder verborgen sind.

-Tag wird für Benutzer zum Öffnen und Schließen interaktiver Steuerelemente verwendet. Innerhalb des

-Tags kann jede Art von Inhalt platziert werden. Der Inhalt des Elements

ist für den Benutzer nicht sichtbar, es sei denn, das Attribut open ist festgelegt.

html5

So verwenden Sie das Tag:

Im Allgemeinen werden Details verwendet, um den auf der Seite angezeigten Inhalt näher zu erläutern. Der angezeigte Effekt ähnelt dem des jQuery-Akkordeon-Plug-Ins.

Es ist ungefähr wie folgt geschrieben:

<details>
<summary>Google Nexus 6</summary>
<p>商品详情：</p>
<dl>
<dt>屏幕</dt>
<dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
<dt>电池</dt>
<dd>3220 mAh</dd>
<dt>相机</dt>
<dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
<dt>处理器</dt>
<dd>Qualcomm? Snapdragon? 805 processor</dd>
</dl>
</details>

Nach dem Login kopieren

Zunächst steht der Tag

, gefolgt vom Titel

auf der Seite angezeigt. Anschließend können Sie jede Art von HTML-Element als detaillierten Inhalt verfolgen, der nur angezeigt wird, wenn auf geklickt wird.

Details ist ein neues interaktives Element in h5. Details können in Verbindung mit dem Zusammenfassungs-Tag verwendet werden, um einen Titel für Details zu definieren. Standardmäßig wird der Inhalt im Detail-Tag nicht angezeigt. Wenn der Benutzer auf den Titel klickt, werden Details angezeigt. Das Aufkommen des

details-Tags hat uns ein besseres Benutzererlebnis beschert. Wir müssen kein JS schreiben, um diesen Schrumpfungs- und Erweiterungseffekt zu erzielen.

Details hat ein neu hinzugefügtes Unter-Tag – Zusammenfassung. Wenn die Maus auf den Inhaltstext im Zusammenfassungs-Tag klickt, werden alle anderen Elemente im Detail-Tag erweitert oder verkleinert.

HTML5-Detailis-TagBeispiel 1:

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一练之details标签的应用</title> 
    </head>     
    <body> 
        <details> 
                <summary>HTML5|CSS3|PHP | PHP中文网(php.cn)!</summary> 
                <p>PHP中文网,WEB前端开发论坛,教程资源完全免费PHP网站，打造最好的编程网站</p> 
        </detalis> 
    </body> 
</html>

Nach dem Login kopieren

Was passiert, wenn im Detailelement kein Zusammenfassungs-Tag vorhanden ist? Der Browser Beim Parsen wird ein Standardtext bereitgestellt, z. B. „Details anzeigen“ und anderer lokalisierter Text. Außerdem stellt der Browser ein Symbol wie Auf- und Abwärtspfeile bereit. Der folgende Fall 2 ist beispielsweise ein Beispiel, bei dem der Zusammenfassungs-Subtag nicht vorhanden ist:

Beispiel 2:

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一练之details展开收缩标签的应用</title> 
    </head> 
    <body> 
        <details> 
                <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛</p> 
        </details> 
    </body> 
</html>

Nach dem Login kopieren

Was sollten wir manchmal tun, wenn der Inhalt im Detail erweitert werden muss? standardmäßig?

Tatsächlich wurde HTML5 bereits für uns in Betracht gezogen. Wenn Bedarf besteht, müssen wir nur ein Attribut hinzufügen, z. B. Fall 3.

Die Rolle des HTML5-Details-Tags und die Verwendung des Open-Attributs:

Ändern Sie den Code von Fall 1 wie folgt:

Beispiel 3 :

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一练之details展开收缩标签的应用</title> 
    </head> 
    <body> 
        <details open> 
                <summary>HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!</summary> 
                <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛</p> 
        </details> 
    </body> 
</html>

Nach dem Login kopieren

Man sieht, dass HTML5 uns tatsächlich großen Komfort gebracht hat.

Die Rolle des HTML5-Details-Tags und die Verwendung gemeinsamer Attribute des Details-Tags:

open: Der Wert ist öffnen und die Funktion ist definiert. Ob Details sichtbar sind.

Betreff: Der Wert ist sub_id und seine Funktion besteht darin, die ID-Nummer des Projekts festzulegen, das dem Element entspricht.

dragable: Der Wert ist true oder false. Die Funktion besteht darin, festzulegen, ob das Element gezogen werden kann. Der Standardwert ist false.

Einfaches Detailbeispiel:

Welche Rolle spielt das HTML5-Details-Tag? Einführung in die Verwendung des <details>-Tags (mit Anwendungsbeispielen)

Derzeit unterstützen nur Chrome und Safari 6 das

Ich persönlich denke, dass das Details-Tag in Zukunft von mehr Browsern unterstützt werden sollte, da es durch sein Aussehen für Anfänger viel praktischer ist. Es ist immer gut, jetzt mehr zu lernen, und Sie können es gerne tun Tun Sie dies, nachdem es beworben wurde. Dieser Artikel endet hier. Wenn Sie Fragen haben, können Sie diese unten stellen.

[Persönliche Empfehlungen]

Was ist die Funktion des HTML-EM-Tags? Der Unterschied zwischen den Tags

Das obige ist der detaillierte Inhalt vonWelche Rolle spielt das HTML5-Details-Tag? Einführung in die Verwendung des -Tags (mit Anwendungsbeispielen). 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

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

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

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

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

Wo ist der Login-Zugang für Gmail-E-Mail?

7461

CakePHP-Tutorial

1376

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles