HTML5 タグのネスト ルールの詳細な紹介

以下は HTML5 タグのネスト ルールについて詳しく説明したもので、概要が非常に優れているため、合わせて参照する価値があります。

[1] カテゴリ [2] サブ要素 [3] 概要

前の単語
HTML5 では、 要素のサブ要素は、以前はブロックレベルの要素である可能性があります。ルール。この記事では、html5のタグの入れ子のルールを詳しく紹介します

分類
html5が登場する前は、要素はblock、inline、inline-blockで区別されることが多かったです。 HTML5 では、要素は displayattributes ではなく、コンテンツ model によって区別されます。コンテンツは、メタデータ コンテンツ、セクション化コンテンツ、見出しコンテンツに分割されます)、ドキュメント フロー コンテンツ (フロー コンテンツ)、ステートメント タイプ (フレージング)コンテンツ）、埋め込みコンテンツ（埋め込みコンテンツ）、およびインタラクティブ コンテンツ（インタラクティブ コンテンツ）です。どのカテゴリにも属さない要素は浸透していると言われ、複数のカテゴリに属する​​可能性のある要素は混合されていると言われます。

メタデータ コンテンツは、他のコンテンツのパフォーマンスや動作を説明したり、現在のドキュメントと他のドキュメントの間の接続を確立したりするために使用できる要素です

ベース リンク メタノスクリプト スクリプト スタイル テンプレート タイトル
フロー要素 (フロー コンテンツ) は、アプリケーションとドキュメントの本体で使用されるほとんどの要素です

a 略語アドレス領域 (マップ要素の子の場合) 記事は別として オーディオ b bdi bdo blockquote br ボタン canvas cite code data datalist del dfn p dl em 埋め込みフィールドセット Figure フッター フォーム h1 h2 h3 h4 h5 h6 ヘッダー hr i iframe img input ins kbd keygen ラベル メイン マップ マーク 数学メーター nav noscript object ol 出力 p pre progress q Ruby s samp スクリプト セクション select small span Strong sub sup svg table template textarea time u ul var video wbr text
セクションコンテンツは、タイトルとフッターの範囲を定義するために使用される要素です

article according to navセクション
Heading content ブロック/チャプターのタイトルを定義します

h1 h2 h3 h4 h5 h6
フレージングコンテンツは段落レベルのテキストをマークするために使用される要素です

a abbr area (map要素の子の場合) audio b bdi bdo br button Canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object Output progress q Ruby s samp script select Small Span Strong Sub sup svg template textarea time u var video wbr text
埋め込みコンテンツは を参照 する要素、または挿入される要素ですドキュメント内の他のリソースに埋め込みます

オーディオ キャンバス iframe img 数学オブジェクト SVG ビデオを埋め込みます
インタラクティブ コンテンツは、ユーザーと対話するために特に使用される要素です

オーディオ (controls 属性が設定されている場合) ボタン iframe img を埋め込みます (コントロール属性が設定されている場合) usemap属性が設定されている場合） input（type属性がhiddenでない場合） keygen label object（usemap属性が設定されている場合） select textarea video（controls属性が設定されている場合）

子要素
【1】子要素はflow要素

、

、

、

、

、

、

、

、
【1.1 】子要素は、

要素を除くフロー要素です

、

【1.2】子要素は、要素を除くフロー要素です

[1.6] 子要素はフロー要素ですが、

、

、

、セクションコンテンツ、見出しコンテンツは含まれません

[1.7] ] 子要素は

要素で、その後に flow 要素

が続きます。【1.8】子要素は

要素で、その後に flow 要素

が続きます。

【2】子要素はstatement要素です

、

、

、

、

、

、

、

、<em>、<strong> 、<small>、<s>、<cite>、<q>、<abbr>、<data>、<time>、<code>、<var>、<samp> 、<kbd>、<sub>、<sup>、<i>、<b>、<u>、<mark>、<bdi>、<bdo>、<span> , <input>, <output>, <legend>, <label><br> [2.1] サブ要素はステートメント要素ですが、それ自体と同じ要素は含まれません<p><dfn>, &lt ;progress> ,<meter><br> 【2.2】子要素はステートメント要素ですが、インタラクティブなコンテンツは含まれません </p>
<p> <button><br> </p>
<p>【3】子要素は透明です（親要素で許可されているとおり） ) 子要素が優先されます)</p>
<p> <ins>、<del>、<map><br> 【3.1】子要素は透明です(親要素によって許可される子要素に従う)が、インタラクティブ要素(インタラクティブコンテンツ)</p>
<p> <a><br> 【3.2】子要素には、いいえ、<param> 要素を指定することも、透明にすることもできます (親要素によって許可される子要素に従う)</p>
<p> < ;object><br/> </p><p>【4】子要素なし</p><p> <hr>、<br>、<wbr>、<img  alt="HTML5 タグのネスト ルールの詳細な紹介" >、<embed>、<param>、<source>、< ;track>、<area>、<ul><br> 【4.2】子要素はなくてもよく、<dt>、<dd>、<script>、<template>;要素</p>
<p><dl><br> 【4.3】 子要素は存在せず、<option>、<optgroup>、または<script>、<template>要素</p>
<p><の場合があります。 select><br> 【4.4】 子要素はなくてもよいし、<option>、あるいは<script>、<template>要素でもよい </p>
<p><optgroup><br> 【4.5】子要素いいえ、<option> 要素にすることができます </p>
<p><datalist><br> 【4.6】子要素は None にすることも、<track> 要素にすることも、<source> にすることもできます。 element</p>
<p><audio>、<video><br> 【4.7】子要素はなしでもよいし、<col>、<template>要素</p>
<p><colgroup><br> 【4.8】子要素存在する必要はありません。<tr>、または <script>、<template> 要素 </p>
<p><tbody>、<thead>、<tfoot>【4.9】子要素は no、<tr>、<th>、または <script>、<template> 要素にすることができます<br></p><tr><p> <br></p>【5】子要素は次のとおりです。 <caption>、<colgroup>、<thead>、<tfoot>、<tbody>、または <script>、<template> 要素にすることもできます <p><br><table></p> <p></p>【 6 】 子要素はテキストコンテンツです<p><br><textarea></p> 【6.1】子要素はテキストコンテンツなし、またはテキストコンテンツを持つことができます<p></p><option><p><br></p>まとめ<p>各要素の詳細なネストルールについては、上部で説明済みです詳細。このパートは主によく使われるタグのネストルールをまとめています<br></p> 【注意】背景が濃い灰色のテキストにマウスを置くと、タイトルに要素に含まれるタグが表示されます<p><br> [1]<h1>、< ;h2>、<h3>、<h4>、<h5>、<h6>、<p> のサブ要素はステートメント要素です </p>
<p> [2] <header>、<footer> <header>、<footer>はネストできません</p>
<p>【3】<a>の子要素は透明ですが（親要素で許可されている子要素に従います）、インタラクティブな要素（インタラクティブなコンテンツ）は含まれません。 </p>
<p>【 4】<form> はネストできません<form></p>
<p>【5】<button> 子要素はステートメント要素のため、ネストできません</p>
<p>【6】< ;caption> をネストすることはできません<table></p>
<p>【7】<dt>、<th>、<header>、<footer>、セクションコンテンツ、見出しコンテンツにはネストできません </p>
<p>あなたはこれらのケースを読んでいると思います。さらにエキサイティングな方法をマスターしました。情報については、php 中国語 Web サイトの他の関連記事にご注目ください。 </p>
<p>関連書籍: </p>
<p><a href="http://www.php.cn/js-tutorial-381968.html" target="_blank">Js を使用して HTTP Cookie を実装する手順</a><br></p>
<p><a href="http://www.php.cn/div-tutorial-381952.html" target="_blank"> Web ページをレイアウトするときに最初に HTML または CSS を記述します</a><br></p>
<p><a href="http://www.php.cn/css-tutorial-381941.html" target="_blank"> Web ページ制作におけるマージントップのチュートリアルの例</a><br></p></span></bdo></bdi></mark></u></b></i></sup></sub></kbd></samp></var></code></time></data></abbr></q></cite></s></small></strong></em>

以上がHTML5 タグのネスト ルールの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：HTML の FormData オブジェクトの詳細な紹介次の記事：HTML の FormData オブジェクトの詳細な紹介

関連記事

続きを見る

• HTMLの知識のまとめ
• HTMLを早く学ぶ方法
• html xhtml xml の違い
• src 属性と href 属性の違い
• HTML5とCSSの置き換え利用について

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved