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:
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!
