htmlのタグの使い方を詳しく解説

TML5 の新しい

タグを使用すると、ユーザーは展開可能および折りたたみ可能な要素を作成でき、テキストまたはタイトルに非表示の情報を含めることができます。

使用方法

通常、詳細は、ページに表示されるコンテンツをさらに詳しく説明するために使用されます。表示される効果は、jQuery アコーディオン プラグインの効果と似ています。

大まかな書き方は次のとおりです:

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

最初は

タグ、続いてタイトル

ここの内容は通常、ページに表示されます。その後、任意のタイプの

HTML 要素 を詳細コンテンツとして追跡できます。これは、

をクリックした場合にのみ表示されます。

上記のコードの効果は次のようになります:

最初は詳細が非表示になっており、クリックすると表示されます。

open

attribute

もちろん、open 属性を

タグに設定して、デフォルトで展開された

state にすることもできます。

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

現時点では詳細はデフォルトで展開されており、タイトルをクリックすると折りたたまれます。

例

例は上記の通りです。オンラインバージョンをプレビューするには、ここをクリックしてください。

ブラウザの互換性

新しい HTML5 タグのため、ブラウザのサポートは理想的ではありません。 caniuse のデータから判断すると、このタグは現在 Chrome、Safari 8 以降、Opera 26 以降でのみサポートされています。

良いニュースは、caniuse の「UC ブラウザからの結果を表示」オプションをオンにすると、国内の UC ブラウザもこのタグをサポートしていることがわかります。

性別:

男性

写真に示すように: このタグを使用すると、茶色の境界線が表示されます (Web の背景)ページは黒、フォントは白です）、この境界線を表示しないようにするにはどうすればよいですか?

border:none; これを設定すると、境界線は表示されません

しかし、タグは html5 です。はは〜〜

以上がhtmlの

タグの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。