HTML ブロックレベル要素の詳細な説明

<h2>前の言葉</h2> <p> <a href="http://www.php.cn/wiki/1118.html" target="_blank">HTML5</a>が登場する前は、要素をブロックレベル要素、インライン要素、インラインブロック要素に分けるのが一般的でした。この記事では、HTML のブロックレベル要素を詳しく紹介します</p> <p></p> <h3>h</h3> <p> title (<a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">Head</a>ing) 要素には 6 つの異なるレベルがあり、<code>4a249f0d628e2318394fd9b75b4636b1</code> が最も高度で、 <code> 4e9ee319e0fa4abc21ff286eeb145ecc</code> が最低です。 title 要素は、セクションのトピックを簡単に説明できます。<code>4a249f0d628e2318394fd9b75b4636b1</code> から <code>4e9ee319e0fa4abc21ff286eeb145ecc</code> まで、重要度は徐々に低下し、フォント サイズは徐々に小さくなります。タイトル要素を使用する場合は、次の点に注意してください。 1. タイトルのフォント サイズを小さくするために、低レベルのタイトルを使用しないでください。代わりに、CSS <a href="http://www.php.cn" target="_blank">font-size<code>4a249f0d628e2318394fd9b75b4636b1</code>是最高级的，而<code>4e9ee319e0fa4abc21ff286eeb145ecc</code>则是最低的。一个标题元素能简要描述该节的主题</a></p> <p>  从<code>4a249f0d628e2318394fd9b75b4636b1</code>到<code>4e9ee319e0fa4abc21ff286eeb145ecc</code>，重要性逐渐减小，字体大小也逐渐减小。在使用标题元素时，要注意以下几点</p> <p>  1、不要为了减小标题的字体而使用低级别的标题，而是使用CSS的<a href="http://www.php.cn/wiki/807.html" target="_blank">font-size</a>样式</p> <p>  2、避免跳过某级标题：始终要从<code>4a249f0d628e2318394fd9b75b4636b1</code>开始，接下来使用<code>c1a436a314ed609750bd7c7d319db4da</code> 等等</p> <p>  3、使用<code>2f8332c8dcfd5c7dec030a070bf652c3</code> 元素时，为了方便起见，避免重复在一个页面上使用<code>4a249f0d628e2318394fd9b75b4636b1</code>，<code>4a249f0d628e2318394fd9b75b4636b1</code>应该用来表示页面的标题，其他的标题当从<code>c1a436a314ed609750bd7c7d319db4da</code>开始。使用<code>2f8332c8dcfd5c7dec030a070bf652c3</code>时，应当每个 section都使用一个<code>c1a436a314ed609750bd7c7d319db4da</code></p> <p>【默认样式】</p> <pre class="brush:php;toolbar:false">//从h1到h6 margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0; font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em; font-weight: bold;</pre> <p>  HTML5<a href="http://www.php.cn/php/php-tp-append.html" target="_blank">新增</a>了<code>d8eccd9ed644b68a6460a2bb84548c82</code>标签，它表示标题组，用于组合标题，只在区块需要有多个级别的标题时使用　</p><pre class="brush:html;toolbar:false;"><hgroup> <h1>水果</h1> <h2>苹果</h2> </hgroup></pre><p> </p> <h3>p</h3> <p>  <code>e388a4556c0f65e1904146cc1a846bee</code>元素(paragraph)表示文本的一个段落，该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进</p> <p>【默认样式】</p><pre class="brush:html;toolbar:false;">margin: 16px 0; <p>段落1</p> <p>段落2</p> <p>段落3</p></pre><p> </p> <h3>p</h3> <p>  <code>e388a4556c0f65e1904146cc1a846bee</code>元素(pide)(或<a href="http://www.php.cn/code/5010.html" target="_blank">HTML文档</a>分区元素)是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对<a href="http://www.php.cn/java/java-alibaba-qita.html" target="_blank">其它</a>元素进行<a href="http://www.php.cn/code/10425.html" target="_blank">分组</a>，一般用于样式化相关的需求(使用<a href="http://www.php.cn/wiki/164.html" target="_blank">class</a>或id特性)或者对具有相同特性的一组元素进行分组(比如<a href="http://www.php.cn/java/java-ymp-Lang.html" target="_blank">lang</a>)，它应该在没有任何其它语义元素可用时才使用(比如<code>23c3de37f2f9ebcb477c4a90aac6fffd</code>或<code>c787b9a589a3ece771e842a6176cf8e9</code>)</p> <p> </p> <h3>hr</h3> <p>  <code>f32b48428a809b51f04d3228cdf461fa</code>元素表示段落级元素之间的主题转换(例如，一个故事中的场景的改变，或一个章节的主题的改变)。在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上</p> <p>  <code>f32b48428a809b51f04d3228cdf461fa</code>用于段落级元素之间的分割，区块之间不需要使用<code>f32b48428a809b51f04d3228cdf461fa</code>进行分割</p><pre class="brush:html;toolbar:false;"><p>段落1</p> <hr> <p>段落2</p></pre><p>【默认样式】</p><pre class="brush:html;toolbar:false;">margin: 8px 0; border-style: inset; border-width: 1px;</pre><p> </p> <h3>pre</h3> <p>  <code>e03b848252eb9375d56be284e690e873</code>元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符(比如空格和换行符)都会显示出来，通常表示已排版的内容，如代码块和字符画等</p><pre class="brush:html;toolbar:false;"><pre class="brush:php;toolbar:false"> body { color:red; } </pre></pre><p>【默认样式】</p><pre class="brush:html;toolbar:false;">margin: 1em 0; white-space: pre;</pre><p> </p> <h3>blockquote</h3> <p>  <code>b8a712a75cab9a5aded02f74998372b4</code>元素(或者HTML块级<a href="http://www.php.cn/wiki/231.html" target="_blank">引用</a>元素)，代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处URL地址设置到cite特性上，若要以文本的形式告知读者引文的出处时，可以通过<code>f3a85e1241a187c5ac462d886e9a968b</code>元素</p> <p>  [注意]引用的署名必须在引用外部定义</p><pre class="brush:html;toolbar:false;"><blockquote cite="http://baike.baidu.com/view/921793.htm"> 　　<p>横眉冷对千夫指,俯首甘为孺子牛</p> </blockquote> <p>鲁迅</p></pre><p>【默认样式】</p><pre class="brush:html;toolbar:false;">margin: 1em 40px;</pre><p> </p> <h3>address</h3> <p>  <code>208700f394e4cf40a7aa505373e0130b</code>元素可以让作者为它最近的<code>23c3de37f2f9ebcb477c4a90aac6fffd</code>或者<code>6c04bd5ca3fcae76e30b72ad730ca86d</code>style</p>🎜 2. 特定のレベルの見出しをスキップしないようにします。常に <code>4a249f0d628e2318394fd9b75b4636b1</code> で始めてから、<code> を使用します。 &lt ;h2></code> など🎜🎜 3. <code>2f8332c8dcfd5c7dec030a070bf652c3</code> 要素を使用する場合、便宜上、<code>4a249f0d628e2318394fd9b75b4636b1</code> の使用は避けてください。 1 つのページ上で繰り返し、 <code>4a249f0d628e2318394fd9b75b4636b1</code> を使用してページのタイトルを表し、他のタイトルは <code>c1a436a314ed609750bd7c7d319db4da</code> から始まる必要があります。 <code>2f8332c8dcfd5c7dec030a070bf652c3</code> を使用する場合、各セクションは 1 つの <code>c1a436a314ed609750bd7c7d319db4da</code> を使用する必要があります🎜🎜【デフォルトのスタイル】🎜<pre class="brush:html;toolbar:false;">font-style: italic;</pre>🎜 HTML5<a href="http://www%20.php.cn/php/php-tp-append.html" target="_blank">新しく追加された <code>d8eccd9ed644b68a6460a2bb84548c82</code> タグ。タイトル グループを表し、タイトルを結合するために使用されます。使用のみブロックに複数レベルの見出しが必要な場合🎜rrreee🎜🎜🎜p🎜🎜 <code>e388a4556c0f65e1904146cc1a846bee</code> 要素 (段落) はテキストの段落を表し、通常はブロック全体として表示されます。隣接するテキスト。垂直方向の空白で区切るか、最初の行でインデントされます🎜🎜【デフォルトのスタイル】🎜rrreee🎜 🎜🎜p🎜🎜 <code>e388a4556c0f65e1904146cc1a846bee</code>要素 (pide)( または </a><a href="http://www.php.cn/code/5010.html" target="_blank">HTML ドキュメント 🎜 パーティション要素) は、一般的なフロー コンテンツ コンテナであり、意味的には何も表しません。 </a><a href="http://www.php.cn/java/java-alibaba-qita.html" target="_blank">他の 🎜 要素 "http://www.php.cn/code" をターゲットにするために使用されます。 /10425.html" target="_blank">グループ🎜。通常、スタイル関連のニーズに使用されます (</a><a href="http://www.php.cn%20/wiki/164.html" target="_blank"> を使用してください) class🎜 または id 属性)、または同じ特性を持つ要素のセットをグループ化する (</a><a href="http://www.php.cn/java/java%20-ymp-Lang.html" target="_blank"> など) lang🎜)、他のセマンティック要素が利用できない場合に使用する必要があります (<code>23c3de37f2f9ebcb477c4a90aac6fffd</code> や <code>c787b9a589a3ece771e842a6176cf8e9 </code> など)🎜🎜🎜🎜hr🎜🎜 f32b48428a809b51f04d3228cdf461fa 要素は、段落レベルの要素間のテーマの移行を表します (たとえば、ストーリー内のシーンの変更、または章の変更内のテーマの変更)。 HTML の初期のバージョンでは、それは水平線でした。ビジュアルブラウザでは依然として水平線として表示されますが、現在はプレゼンテーションではなくセマンティックとして定義されており、ブロックを区切るために <code>f32b48428a809b51f04d3228cdf461fa</code> を使用する必要はありません🎜rrreee🎜【デフォルトのスタイル】🎜。 rrreee🎜 🎜🎜pre🎜🎜 <code>e03b848252eb9375d56be284e690e873</code> 要素は、事前定義されたフォーマット テキストを表します。この要素のテキストは、通常、元のファイルの形式に従って固定幅フォントで表示されます。テキスト内の空白文字 (スペースや改行など) は、通常、コード ブロックや植字文字などの植字内容を示します。キャラクターペイント等🎜rrreee🎜【デフォルトスタイル】🎜rrreee🎜 🎜🎜blockquote🎜🎜 <code>b8a712a75cab9a5aded02f74998372b4</code>要素（またはHTMLブロックレベル</a><a href="http://www.php.%20cn/%20wiki/231.html" target="_blank">Quote 🎜 要素)、その中のテキストが引用されたコンテンツであることを意味します。通常、レンダリング時に、この部分のコンテンツには特定のインデントが付けられます。引用がインターネットからのものである場合、元のコンテンツのソース URL アドレスを cite 属性に設定できます。引用元をテキスト形式で読者に知らせたい場合は、<code>&lt を使用できます。 ;cite></code> 要素 🎜🎜 [注] 引用の帰属は引用の外側で定義する必要があります 🎜rrreee🎜 [デフォルトのスタイル] 🎜rrreee🎜 🎜🎜address🎜🎜 <code>208700f394e4cf40a7aa505373e0130b</code> 要素を使用すると、作成者は最も近い <code><</code> または <code>6c04bd5ca3fcae76e30b72ad730ca86d</code> の祖先要素の名前を設定でき、連絡先情報が提供されます。後者の場合、ドキュメント全体に適用されます 🎜<p>  当表示一个和联系信息无关的任意的地址时，使用<code>e388a4556c0f65e1904146cc1a846bee</code>元素而不是<code>208700f394e4cf40a7aa505373e0130b</code>元素。这个元素不能包含除了联系信息之外的任何信息，比如出版日期(这应该包含在<code>865ebc4a8f40017839ddd62af936776f</code>元素中)。通常，<code>208700f394e4cf40a7aa505373e0130b</code>元素可以放在当前section的<code>c37f8231a37e88427e62669260f0074d</code>元素中，如果存在的话</p> <p>【默认样式】</p><pre class="brush:html;toolbar:false;">font-style: italic;</pre><p> </p> <h3>其他</h3> <p>  除了上面介绍的<code>e388a4556c0f65e1904146cc1a846bee</code>、<code>c8b28895262a62371d18ac056c4442e2</code>、<code>e388a4556c0f65e1904146cc1a846bee</code>、<code>f32b48428a809b51f04d3228cdf461fa</code>、<code>b8a712a75cab9a5aded02f74998372b4</code>、<code>208700f394e4cf40a7aa505373e0130b</code>标签外，还有一些前面已经介绍过的标签属于块级标签</p> <p>  包括骨架类标签(<code>100db36a723c770d327fc0aef2ce13b1</code>、<code>6c04bd5ca3fcae76e30b72ad730ca86d</code>)，列表类标签(<code>ff6d136ddc5fdfeffaf53ff6ee95f185</code>、<code>c34106e0b4e09414b63b2ea253ff83d6</code>、<code>def3eed00a09ea710a4bfa4b7fe74771</code>、<code>67bc4f89d416b0b8236eaa5f43dee742</code>、<code>73de882deff7a050a357292d0a1fca94</code>)，表单类标签(<code><a href="http://www.php.cn/wiki/125.html" target="_blank">for</a>m</code>、<code>2b5469ab79cf842344327415c3b3bb95</code>、<code>be6d67dae90cc1ad6469079e163d0939</code>、<code>e911751791aa3ba95dc724e2fb905976</code>、<code>5b7a15bed8615d1b843806256bebea72</code>、<code>5a07473c87748fb1bf73f23d45547ab8</code>)，HTML5新增的结构标签(<code>23c3de37f2f9ebcb477c4a90aac6fffd</code>、<code>15221ee8cba27fc1d7a26c47a001eb9b</code>、<code>1aa9e5d373740b65a0cc8f0a02150c53</code>、<code>c37f8231a37e88427e62669260f0074d</code>、<code>c787b9a589a3ece771e842a6176cf8e9</code>、<code>2f8332c8dcfd5c7dec030a070bf652c3</code>)，HTML5新增的<a href="http://www.php.cn/code/9304.html" target="_blank">多媒体</a>标签(<code>24203f2f45e6606542ba09fd2181843a</code>、<code>614eb9dc63b3fb809437a716aa228d24</code>)，HTML5新增的功能性标签(<code>631fb227578dfffda61e1fa4d04b7d25</code>、<code>a5e9d42b316b6d06c62de0deffc36939</code>)</p> <p> </p> <h2>最后</h2> <p>  可能有人会觉得<code>0c6dc11e160d3b678d68754cc175188a</code>标签应该是一个块级元素，因为它有换行，与块级元素的特征很相似。但它实际上是一个<a href="http://www.php.cn/code/6472.html" target="_blank">内联元素</a>，它的用途是在文本中产生一个换行</p> <div></div> <div></div></a>

以上がHTML ブロックレベル要素の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。