Ausführliche Erklärung zur Verwendung des HTML-Tags

黄舟

Freigeben： 2017-06-21 10:34:42

Original

9592 Leute haben es durchsucht

Mit dem neuen

TML5 können Benutzer ein erweiterbares und faltbares Element erstellen, sodass ein Textabschnitt oder Titel versteckte Informationen enthalten kann.

Verwendung

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 grob 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

Zuerst ist das Tag

, gefolgt vom Titel

. Der Inhalt ist hier im Allgemeinen kurz und zusammenfassend wird 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.

Der durch den obigen Code dargestellte Effekt ist wie folgt:

Ausführliche Erklärung zur Verwendung des HTML-Tags <details>

Die Details sind zunächst ausgeblendet und werden beim Klicken angezeigt.

offenes Attribut

Natürlich können Sie das offene Attribut auch auf das

-Tag setzen, sodass es standardmäßig auf den erweiterten -Zustand <🎜 gesetzt wird >.

<details open>
    <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

Die Details werden standardmäßig erweitert und nach dem Klicken auf den Titel reduziert.

Beispiel

Um eine Vorschau der Online-Version anzuzeigen, klicken Sie hier.

Browserkompatibilität

Aufgrund des neuen HTML5-Tags ist die Browserunterstützung nicht ideal. Den Daten von caniuse zufolge wird dieses Tag derzeit nur von Chrome, Safari 8+ und Opera 26+ unterstützt.

Die gute Nachricht ist: Wenn Sie in caniuse die Option „Ergebnisse vom UC-Browser anzeigen“ aktivieren, werden Sie feststellen, dass der inländische UC-Browser dieses Tag ebenfalls unterstützt.

Ausführliche Erklärung zur Verwendung des HTML-Tags <details>

Geschlecht:

Männlich

Wie gezeigt: Ich verwende dieses Tag, wenn erscheint ein brauner Rand (der Hintergrund meiner Webseite ist schwarz und die Schriftart ist weiß). Wie kann ich diesen Rand nicht anzeigen?

Ausführliche Erklärung zur Verwendung des HTML-Tags <details>