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

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

寻∝梦

Aug 22, 2018 pm 01:58 PM

html5

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

H5コード：クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AM

クリーンで効率的なHTML5コードを書き込む方法は？答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5：ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1）マルチメディアサポート：H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2）オフラインストレージ：WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3）パフォーマンスの最適化：ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

H5コードの分解：タグ、要素、属性Apr 18, 2025 am 12:06 AM

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。