Heim >
Artikel > Web-Frontend > Welche Rolle spielt das HTML5-Details-Tag? Einführung in die Verwendung des
Welche Rolle spielt das HTML5-Details-Tag? Einführung in die Verwendung des -Tags (mit Anwendungsbeispielen)
- 寻∝梦Original
- 2018-08-22 13:58:579201Durchsuche
Welche Funktionen hat das HTML5-Details-Tag und wie wird das
html5
Das neue
html5
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>
Zunächst steht der Tag auf der Seite angezeigt. Anschließend können Sie jede Art von HTML-Element als detaillierten Inhalt verfolgen, der nur angezeigt wird, wenn auf
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>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>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>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