html5の詳細タグの役割は何ですか? <details>タグの使い方の紹介（使用例付き）-H5 チュートリアル-php.cn

html5の詳細タグの役割は何ですか?

タグの使い方の紹介（使用例付き）

寻∝梦

リリース： 2018-08-22 13:58:57

オリジナル

9210 人が閲覧しました

HTML5 の詳細タグの機能と

タグの使用方法は何ですか?詳しい内容については、この記事で紹介したhtml 詳細タグの定義と使い方、そして html5 詳細タグの具体的な使い方を見ていきましょう

html5

タグの定義と使用方法:

HTML5 の新しい

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

タグは、文書または文書の特定の部分の詳細を説明するために使用されます。

タグは、表示または非表示にするユーザーの要件の追加の詳細を指定します。

タグは、ユーザーが対話型コントロールを開いたり閉じたりするために使用されます。任意の形式のコンテンツを

タグ内に配置できます。

要素の内容は、open 属性が設定されていない限り、ユーザーには表示されません。

html5

タグの使用方法:

通常、詳細はページに表示されるコンテンツをさらに説明するために使用されます。表示される効果は、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 要素を詳細コンテンツとして追跡できます。詳細コンテンツは、

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

details は、h5 の新しいインタラクティブな要素です。詳細は、概要タグと組み合わせて使用して、詳細のタイトルを定義できます。デフォルトでは、詳細タグのコンテンツは表示されません。タイトルをクリックすると詳細が表示されます。

details タグの登場により、ユーザーエクスペリエンスが向上しました。この縮小および拡張効果を実現するために JS を記述する必要はありません。

details には新しく追加されたサブタグである summary タグ内のコンテンツテキストをクリックすると、詳細タグ内の他のすべての要素が拡大または縮小されます。

html5 詳細タグ例 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>

ログイン後にコピー

詳細に概要タグがない場合はどうなりますか? 実際、詳細要素に概要タグがない場合、ブラウザは解析時に次のようなデフォルトのテキストを提供します。「「詳細を表示」などのローカライズされたテキストの場合、ブラウザーには上下矢印などのアイコンも表示されます。たとえば、次のケース 2 は、summary サブタグが存在しない例です。

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

ログイン後にコピー

場合によっては、detalis のコンテンツをデフォルトで展開する必要がある場合はどうすればよいでしょうか。

実際、HTML5 はすでに考えられており、必要な場合は、ケース 3 などの属性を追加するだけです。

HTML5 詳細タグの役割と Open 属性の使用法:

ケース 1 のコードを次のように変更します:

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

ログイン後にコピー

HTML5 が実際に多くのことをもたらしたことがわかります。便利です。

html5 詳細タグの役割と詳細タグの共通属性の使用法:

open: 値はオープンであり、機能は詳細を表示するかどうかを定義することです。

subject: 値は sub_id で、その機能は要素に対応するプロジェクトの ID 番号を設定することです。

draggable: 値は true または false で、要素をドラッグできるかどうかを設定します。デフォルト値は false です。

簡単な詳細の例:

html5の詳細タグの役割は何ですか? <details>タグの使い方の紹介（使用例付き）