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>タグの使い方の紹介(使用例付き)

現在、Chrome と Safari 6 のみが

タグをサポートしています。

個人的には、詳細タグは将来的にはより多くのブラウザでサポートされるべきだと思います。なぜなら、その外観は初心者にとって非常に便利なものだからです。今からもっと学ぶことは常に良いことであり、その後は自由に使用できます。この記事は以上です。ご質問がございましたら、以下よりお問い合わせください。

【個人的なおすすめ】

HTML emタグの機能とは何ですか? タグと タグの違い

HTML5 テーブルタグのスタイルの紹介 (HTML5 テーブル CSS センタリングの例を添付)

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

タグの使い方の紹介(使用例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!