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

前の言葉

HTML5が登場する前は、一般に要素をブロックレベル、インライン、インラインに分けていました。この記事では、HTML のブロックレベルの要素を詳しく紹介します

h

見出し要素には 6 つのレベルがあり、<h1></h1> が最も高度で、<h6> です。 ;</h6> が最も低く、4a249f0d628e2318394fd9b75b4636b1 から 4e9ee319e0fa4abc21ff286eeb145ecc まで、そのセクションのトピックを簡単に説明できます。タイトル要素を使用する場合は、次の点に注意してください: 1. タイトルのフォント サイズを小さくするために下位レベルのタイトルを使用せず、CSS のフォント サイズ スタイルを使用します。 2. 特定のレベルの見出しをスキップしないようにします。常に 4a249f0d628e2318394fd9b75b4636b1 で始まり、次に c1a436a314ed609750bd7c7d319db4da などを使用します4a249f0d628e2318394fd9b75b4636b1是最高级的，而4e9ee319e0fa4abc21ff286eeb145ecc则是最低的。一个标题元素能简要描述该节的主题

  从4a249f0d628e2318394fd9b75b4636b1到4e9ee319e0fa4abc21ff286eeb145ecc，重要性逐渐减小，字体大小也逐渐减小。在使用标题元素时，要注意以下几点

  1、不要为了减小标题的字体而使用低级别的标题，而是使用CSS的font-size样式

  2、避免跳过某级标题：始终要从4a249f0d628e2318394fd9b75b4636b1开始，接下来使用c1a436a314ed609750bd7c7d319db4da 等等

  3、使用2f8332c8dcfd5c7dec030a070bf652c3 元素时，为了方便起见，避免重复在一个页面上使用4a249f0d628e2318394fd9b75b4636b1，4a249f0d628e2318394fd9b75b4636b1应该用来表示页面的标题，其他的标题当从c1a436a314ed609750bd7c7d319db4da开始。使用2f8332c8dcfd5c7dec030a070bf652c3时，应当每个 section都使用一个c1a436a314ed609750bd7c7d319db4da

【默认样式】

//从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;

  HTML5新增了d8eccd9ed644b68a6460a2bb84548c82标签，它表示标题组，用于组合标题，只在区块需要有多个级别的标题时使用　

<hgroup>
    <h1>水果</h1>
    <h2>苹果</h2>
</hgroup>

p

  e388a4556c0f65e1904146cc1a846bee元素(paragraph)表示文本的一个段落，该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进

【默认样式】

margin: 16px 0;
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

p

e388a4556c0f65e1904146cc1a846bee元素(pide)(或HTML文档分区元素)是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求(使用class或id特性)或者对具有相同特性的一组元素进行分组(比如lang)，它应该在没有任何其它语义元素可用时才使用(比如23c3de37f2f9ebcb477c4a90aac6fffd或c787b9a589a3ece771e842a6176cf8e9)

hr

  f32b48428a809b51f04d3228cdf461fa元素表示段落级元素之间的主题转换(例如，一个故事中的场景的改变，或一个章节的主题的改变)。在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上

  f32b48428a809b51f04d3228cdf461fa用于段落级元素之间的分割，区块之间不需要使用f32b48428a809b51f04d3228cdf461fa进行分割

<p>段落1</p>
<hr>
<p>段落2</p>

【默认样式】

margin: 8px 0;
border-style: inset;
border-width: 1px;

pre

  e03b848252eb9375d56be284e690e873元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符(比如空格和换行符)都会显示出来，通常表示已排版的内容，如代码块和字符画等

<pre class="brush:php;toolbar:false">
body {
  color:red;
}

【默认样式】

margin: 1em 0;
white-space: pre;

blockquote

  b8a712a75cab9a5aded02f74998372b4元素(或者HTML块级引用元素)，代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处URL地址设置到cite特性上，若要以文本的形式告知读者引文的出处时，可以通过f3a85e1241a187c5ac462d886e9a968b元素

  [注意]引用的署名必须在引用外部定义

<blockquote cite="http://baike.baidu.com/view/921793.htm">
<p>横眉冷对千夫指,俯首甘为孺子牛</p>
</blockquote>    
<p>鲁迅</p>

【默认样式】

margin: 1em  40px;

address

  208700f394e4cf40a7aa505373e0130b元素可以让作者为它最近的23c3de37f2f9ebcb477c4a90aac6fffd或者6c04bd5ca3fcae76e30b72ad730ca86d祖先元素提供联系信息。在后一种情况下，它应用于整个文档

  当表示一个和联系信息无关的任意的地址时，使用e388a4556c0f65e1904146cc1a846bee元素而不是208700f394e4cf40a7aa505373e0130b元素。这个元素不能包含除了联系信息之外的任何信息，比如出版日期(这应该包含在865ebc4a8f40017839ddd62af936776f元素中)。通常，208700f394e4cf40a7aa505373e0130b元素可以放在当前section的c37f8231a37e88427e62669260f0074d元素中，如果存在的话

【默认样式】

font-style: italic;

其他

除了上面介绍的e388a4556c0f65e1904146cc1a846bee、c8b28895262a62371d18ac056c4442e2、e388a4556c0f65e1904146cc1a846bee、f32b48428a809b51f04d3228cdf461fa、b8a712a75cab9a5aded02f74998372b4、208700f394e4cf40a7aa505373e0130b

3. &lt ;section> 要素を使用します。便宜上、ページ上で 4a249f0d628e2318394fd9b75b4636b1 が繰り返し使用されることを避けるため、4a249f0d628e2318394fd9b75b4636b1 を使用してページのタイトルを表す必要があり、他のタイトルは から始まる必要があります。 c1a436a314ed609750bd7c7d319db4da。2f8332c8dcfd5c7dec030a070bf652c3 を使用する場合は、各セクションに 1 つの c1a436a314ed609750bd7c7d319db4da を使用する必要があります。【デフォルトのスタイル】 🎜rrreee🎜 HTML5 では、ブロックに複数レベルのタイトルが必要な場合にのみ、タイトル グループを表す d8eccd9ed644b68a6460a2bb84548c82 タグが追加されました。 🎜rrreee🎜p🎜 を使用します。テキストの段落を表す 🎜 e388a4556c0f65e1904146cc1a846bee 要素 (段落) この要素は通常、隣接するテキストから分離されたテキストのブロック全体として表示されるか、垂直方向の空白で区切られるか、最初のテキストでインデントされます。 line🎜🎜[デフォルトスタイル]🎜rrreee🎜p🎜🎜e388a4556c0f65e1904146cc1a846bee 要素 (pide) (または HTML ドキュメントパーティション要素) は、意味的には汎用のフローコンテンツコンテナーを表しません。これは、他の要素をグループ化するために使用できます。一般に、関連するニーズ (class または id 属性を使用) をスタイリングするため、または同じ特性 (lang など) を持つ要素のセットをグループ化するために使用できます。この場合にのみ使用する必要があります。他のセマンティック要素は使用できません (23c3de37f2f9ebcb477c4a90aac6fffd や c787b9a589a3ece771e842a6176cf8e9 など)🎜🎜hr🎜🎜 &lt The ;hr>要素は、段落レベルの要素間のテーマの移行を表します (たとえば、ストーリー内のシーンの変更、または章のテーマの変更)。 HTML の初期のバージョンでは、それは水平線でした。ビジュアルブラウザでは依然として水平線として表示されますが、現在はプレゼンテーションではなくセマンティックとして定義されており、ブロックを区切るために f32b48428a809b51f04d3228cdf461fa を使用する必要はありません🎜rrreee🎜【デフォルトのスタイル】🎜。 rrreee🎜pre🎜🎜 e03b848252eb9375d56be284e690e873 要素は、事前定義された書式設定されたテキストを表します。この要素のテキストは、通常、元のファイルの形式に従って固定幅フォントで表示されます。テキスト内の空白文字 (スペースや改行など) は、通常、コード ブロックや植字文字などの植字内容を示します。キャラ塗りなど🎜rrreee🎜【デフォルトスタイル】🎜rrreee🎜blockquote🎜🎜 b8a712a75cab9a5aded02f74998372b4要素（またはHTMLブロックレベルquote 🎜 要素)、その中のテキストが引用されたコンテンツであることを意味します。通常、レンダリングすると、この部分の内容はある程度インデントされます。引用がインターネットからの場合、元のコンテンツのソース URL アドレスを cite 属性に設定できます。引用元をテキスト形式で読者に知らせたい場合は、<cite&gt を使用できます。 ; 要素 🎜🎜 [注] 引用の帰属は引用の外側で定義する必要があります 🎜rrreee🎜 [デフォルトのスタイル] 🎜rrreee🎜address🎜🎜 208700f394e4cf40a7aa505373e0130b 要素により、 author は、著者に最新の 23c3de37f2f9ebcb477c4a90aac6fffd を提供します。 または 6c04bd5ca3fcae76e30b72ad730ca86d の祖先要素は、連絡先情報を提供します。後者の場合、文書全体に適用されます🎜🎜 連絡先情報に関係のない任意の住所を表す場合は、<address><p></p></address> 要素を使用します。 /code> 要素。この要素には、出版日などの連絡先情報以外の情報を含めることはできません (これは aec15bad35498df6cdd265aa3519b17e 要素)。通常、208700f394e4cf40a7aa505373e0130b 要素は、現在のセクションの c37f8231a37e88427e62669260f0074d 要素が存在する場合、その中に配置できます🎜🎜[デフォルト スタイル]🎜rrreee🎜その他🎜🎜e388a4556c0f65e1904146cc1a846bee、c8b28895262a62371d18ac056c4442e2、e388a4556c0f65e1904146cc1a846bee、f32b48428a809b51f04d3228cdf461fa を除く上記で紹介した、b8a712a75cab9a5aded02f74998372b4、208700f394e4cf40a7aa505373e0130b タグのほか、以前に導入されたブロックレベルのタグもいくつかあります🎜

スケルトン タグ (100db36a723c770d327fc0aef2ce13b1、6c04bd5ca3fcae76e30b72ad730ca86d)、リスト タグ (ff6d136ddc5fdfeffaf53ff6ee95f185、 09471ad0eb7abf3904b81228b087d334、5c69336ffbc20d23018e48b396cdd57a、67bc4f89d416b0b8236eaa5f43dee742、73de882deff7a050a357292d0a1fca94)、フォームタグ (フォーム、<fieldset></fieldset>、<output></output>、<legend></legend>、<optgroup>、<code>5a07473c87748fb1bf73f23d45547ab8)、HTML5 の新しい構造タグ (23c3de37f2f9ebcb477c4a90aac6fffd、15221ee8cba27fc1d7a26c47a001eb9b、) 1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、c787b9a589a3ece771e842a6176cf8e9、2f8332c8dcfd5c7dec030a070bf652c3)、HTML5 の新しいマルチメディア タグ(24203f2f45e6606542ba09fd2181843a、614eb9dc63b3fb809437a716aa228d24)、HTML5 の新しい機能タグ (631fb227578dfffda61e1fa4d04b7d25 >、<details&gt) ;)100db36a723c770d327fc0aef2ce13b1、6c04bd5ca3fcae76e30b72ad730ca86d)，列表类标签(ff6d136ddc5fdfeffaf53ff6ee95f185、c34106e0b4e09414b63b2ea253ff83d6、5c69336ffbc20d23018e48b396cdd57a、67bc4f89d416b0b8236eaa5f43dee742、73de882deff7a050a357292d0a1fca94)，表单类标签(form、2b5469ab79cf842344327415c3b3bb95、be6d67dae90cc1ad6469079e163d0939、e911751791aa3ba95dc724e2fb905976、5b7a15bed8615d1b843806256bebea72、5a07473c87748fb1bf73f23d45547ab8)，HTML5新增的结构标签(23c3de37f2f9ebcb477c4a90aac6fffd、15221ee8cba27fc1d7a26c47a001eb9b、1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、c787b9a589a3ece771e842a6176cf8e9、2f8332c8dcfd5c7dec030a070bf652c3)，HTML5新增的多媒体标签(24203f2f45e6606542ba09fd2181843a、614eb9dc63b3fb809437a716aa228d24)，HTML5新增的功能性标签(631fb227578dfffda61e1fa4d04b7d25、a5e9d42b316b6d06c62de0deffc36939)

最后

  可能有人会觉得0c6dc11e160d3b678d68754cc175188a

最後に

改行があるため、0c6dc11e160d3b678d68754cc175188a タグはブロックレベルの要素であるべきだと考える人もいるかもしれません。ブロックレベル要素の特性。しかし、これは実際には インライン要素 であり、その目的はテキスト内に改行を生成することです

🎜

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