HTML ブロックレベル要素の詳細な説明
HTML ブロックレベルの要素
前の言葉
<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;
ログイン後にコピー
<hgroup>标签，它表示标题组，用于组合标题，只在区块需要有多个级别的标题时使用 <hgroup>
<h1>水果</h1>
<h2>苹果</h2>
</hgroup>ログイン後にコピー
p
<p><p>元素(paragraph)表示文本的一个段落，该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进<p>【默认样式】margin: 16px 0; <p>段落1</p> <p>段落2</p> <p>段落3</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>
ログイン後にコピー
margin: 8px 0; border-style: inset; border-width: 1px;
ログイン後にコピー
pre
<p></code>元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符(比如空格和换行符)都会显示出来，通常表示已排版的内容，如代码块和字符画等</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><pre class="brush:php;toolbar:false">
body {
color:red;
}
ログイン後にコピーmargin: 1em 0; white-space: pre;
ログイン後にコピー
blockquote
<p><blockquote>元素(或者HTML块级引用元素)，代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处URL地址设置到cite特性上，若要以文本的形式告知读者引文的出处时，可以通过<cite>元素<p> [注意]引用的署名必须在引用外部定义<blockquote cite="http://baike.baidu.com/view/921793.htm"> <p>横眉冷对千夫指,俯首甘为孺子牛</p> </blockquote> <p>鲁迅</p>
ログイン後にコピー
margin: 1em 40px;
ログイン後にコピー
address
<p><address>元素可以让作者为它最近的<article>或者<body>style🎜 2. 特定のレベルの見出しをスキップしないようにします。常に <h1> で始めてから、 を使用します。 < ;h2> など🎜🎜 3. <section> 要素を使用する場合、便宜上、<h1> の使用は避けてください。 1 つのページ上で繰り返し、 <h1> を使用してページのタイトルを表し、他のタイトルは <h2> から始まる必要があります。 <section> を使用する場合、各セクションは 1 つの <h2> を使用する必要があります🎜🎜【デフォルトのスタイル】🎜font-style: italic;
ログイン後にコピー
ログイン後にコピー
<hgroup> タグ。タイトル グループを表し、タイトルを結合するために使用されます。使用のみブロックに複数レベルの見出しが必要な場合🎜rrreee🎜🎜🎜p🎜🎜 <p> 要素 (段落) はテキストの段落を表し、通常はブロック全体として表示されます。隣接するテキスト。垂直方向の空白で区切るか、最初の行でインデントされます🎜🎜【デフォルトのスタイル】🎜rrreee🎜 🎜🎜p🎜🎜 <p>要素 (pide)( または HTML ドキュメント 🎜 パーティション要素) は、一般的なフロー コンテンツ コンテナであり、意味的には何も表しません。 他の 🎜 要素 "http://www.php.cn/code" をターゲットにするために使用されます。 /10425.html" target="_blank">グループ🎜。通常、スタイル関連のニーズに使用されます ( を使用してください) class🎜 または id 属性)、または同じ特性を持つ要素のセットをグループ化する ( など) lang🎜)、他のセマンティック要素が利用できない場合に使用する必要があります (<article> や <nav> など)🎜🎜🎜🎜hr🎜🎜 < code><hr> 要素は、段落レベルの要素間のテーマの移行を表します (たとえば、ストーリー内のシーンの変更、または章の変更内のテーマの変更)。 HTML の初期のバージョンでは、それは水平線でした。ビジュアルブラウザでは依然として水平線として表示されますが、現在はプレゼンテーションではなくセマンティックとして定義されており、ブロックを区切るために <hr> を使用する必要はありません🎜rrreee🎜【デフォルトのスタイル】🎜。 rrreee🎜 🎜🎜pre🎜🎜 </code> 要素は、事前定義されたフォーマット テキストを表します。この要素のテキストは、通常、元のファイルの形式に従って固定幅フォントで表示されます。テキスト内の空白文字 (スペースや改行など) は、通常、コード ブロックや植字文字などの植字内容を示します。キャラクターペイント等🎜rrreee🎜【デフォルトスタイル】🎜rrreee🎜 🎜🎜blockquote🎜🎜 <code><blockquote></code>要素（またはHTMLブロックレベル<a href="http://www.php. cn/ wiki/231.html" target="_blank">Quote 🎜 要素)、その中のテキストが引用されたコンテンツであることを意味します。通常、レンダリング時に、この部分のコンテンツには特定のインデントが付けられます。引用がインターネットからのものである場合、元のコンテンツのソース URL アドレスを cite 属性に設定できます。引用元をテキスト形式で読者に知らせたい場合は、<code>< を使用できます。 ;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:php;toolbar:false;'>font-style: italic;
ログイン後にコピーログイン後にコピー
其他
<p> 除了上面介绍的<p>、<h>、<p>、<hr>、<blockquote>、<address>标签外，还有一些前面已经介绍过的标签属于块级标签
<p> 包括骨架类标签(<html>、<body>)，列表类标签(<ul>、<ol>、<<a href="http://www.php.cn/wiki/596.html" target="_blank">dl</a>>、<dd>、<dt>)，表单类标签(<a href="http://www.php.cn/wiki/125.html" target="_blank">for</a>m、<fieldset>、<output>、<legend>、<optgroup>、<option>)，HTML5新增的结构标签(<article>、<aside>、<header>、<footer>、<nav>、<section>)，HTML5新增的多媒体标签(<figure>、<figcaption>)，HTML5新增的功能性标签(<summary>、<details>)
<p>
最后
<p> 可能有人会觉得<br>标签应该是一个块级元素，因为它有换行，与块级元素的特征很相似。但它实际上是一个内联元素，它的用途是在文本中产生一个换行
以上がHTML ブロックレベル要素の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前
By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前
By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前
By DDD
<🎜>：Dead Rails-すべての課題を完了する方法
4週間前
By DDD
Atomfall Guide：アイテムの場所、クエストガイド、およびヒント
4週間前
By DDD
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7655
15
7655
15
CakePHP チュートリアル
1393
52
1393
52
Steamのアカウント名の形式は何ですか
91
11
91
11
NYTミニクロスワードの回答
37
110
37
110
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
WebアノテーションにY軸位置の適応レイアウトを実装する方法は？
Apr 04, 2025 pm 11:30 PM
Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？
Apr 05, 2025 am 06:15 AM
画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...
