HTML ブロックレベル要素の詳細な説明-htmlチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-15 12:48:54

オリジナル

1707 人が閲覧しました

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

<p>

h

<p> title (Heading) 要素には 6 つの異なるレベルがあり、<h1> が最も高度で、 <h6> が最低です。 title 要素は、セクションのトピックを簡単に説明できます。<h1> から <h6> まで、重要度は徐々に低下し、フォントサイズは徐々に小さくなります。タイトル要素を使用する場合は、次の点に注意してください。 1. タイトルのフォントサイズを小さくするために、低レベルのタイトルを使用しないでください。代わりに、CSS font-size<h1>是最高级的，而<h6>则是最低的。一个标题元素能简要描述该节的主题

<p> 从<h1>到<h6>，重要性逐渐减小，字体大小也逐渐减小。在使用标题元素时，要注意以下几点

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

<p> 2、避免跳过某级标题：始终要从<h1>开始，接下来使用<h2> 等等

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

<p>【默认样式】

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

ログイン後にコピー

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

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

ログイン後にコピー

<p>

p

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

<p>【默认样式】

margin: 16px 0;

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

ログイン後にコピー

<p>

p

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

<p>

hr

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

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

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

ログイン後にコピー

<p>【默认样式】

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

ログイン後にコピー

<p>

pre

<p>

</code>元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符(比如空格和换行符)都会显示出来，通常表示已排版的内容，如代码块和字符画等</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><pre class="brush:php;toolbar:false">
body {
  color:red;
}
ログイン後にコピー

</code> 要素は、事前定義されたフォーマットテキストを表します。この要素のテキストは、通常、元のファイルの形式に従って固定幅フォントで表示されます。テキスト内の空白文字 (スペースや改行など) は、通常、コードブロックや植字文字などの植字内容を示します。キャラクターペイント等🎜rrreee🎜【デフォルトスタイル】🎜rrreee🎜 🎜🎜blockquote🎜🎜 <code><blockquote></code>要素（またはHTMLブロックレベル<a href="http://www.php. cn/ wiki/231.html" target="_blank">Quote 🎜 要素)、その中のテキストが引用されたコンテンツであることを意味します。通常、レンダリング時に、この部分のコンテンツには特定のインデントが付けられます。引用がインターネットからのものである場合、元のコンテンツのソース URL アドレスを cite 属性に設定できます。引用元をテキスト形式で読者に知らせたい場合は、<code>&lt を使用できます。 ;cite></code> 要素 🎜🎜 [注] 引用の帰属は引用の外側で定義する必要があります 🎜rrreee🎜 [デフォルトのスタイル] 🎜rrreee🎜 🎜🎜address🎜🎜 <code><address></code > 要素を使用すると、作成者は最も近い <code><</code> または <code><body></code> の祖先要素の名前を設定でき、連絡先情報が提供されます。後者の場合、ドキュメント全体に適用されます 🎜<p> 当表示一个和联系信息无关的任意的地址时，使用<code><p></code>元素而不是<code><address></code>元素。这个元素不能包含除了联系信息之外的任何信息，比如出版日期(这应该包含在<code><<a href="http://www.php.cn/wiki/1268.html" target="_blank">time</a>></code>元素中)。通常，<code><address></code>元素可以放在当前section的<code><footer></code>元素中，如果存在的话</p><p>【默认样式】</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">font-style: italic;