HTMLタグの分類
タグの分類について話すとき、初心者として、初めてタグを使用するとき、幅、高さ、水平方向の中央揃えなど、一部の属性が一部のタグで機能しないことに気づくでしょう。実際、この属性の使用は、ブロックレベルのタグで使用された場合にのみ機能します。個人的に初心者が見落としやすい点だと思うので書いてみました！
まず、HTMLタグは、表示に応じてブロックレベルタグ、インラインタグ、インラインブロックタグに分けて紹介します。
ブロックレベルタグ
特徴：は専用の行を占有し、高さ、幅、行の高さ、上下の余白を設定できる属性値幅が指定されていない場合は、ブロック レベルの要素がデフォルトでブラウザの幅 (100%) に設定されます。一般的なブロック レベルのタグは次のとおりです:
、h シリーズ、
、
インラインラベル
特徴: 複数のラベルが存在可能インライン ラベルの高さ、幅、行を直接設定することはできません。高さと上下の余白は、幅と高さをサポートするコンテンツに完全に依存します。 典型的なインライン タグは次のとおりです: 、、、、、、、
インラインブロックタグ:
特徴: インラインレベルとブロックレベルの利点を組み合わせることで、幅と高さの属性値に影響を与えるだけでなく、複数のラベルを 1 行に表示することもできます。 典型的なインラインタグには以下が含まれます: 
、
1. ブロックレベルのラベルをインラインラベルに変換します: 2.ブロックレベルのタグ：display:block;
3. インラインブロックタグに変換：display:inline-block; 対応するタグのdisplay属性を使用し、対応する値を取得する限り、次のように表示できます。モードを相互に変換します。以下の例を参照してください:
1: インラインタグをブロックレベルのタグに変換します
<!DOCTYPE html>
<html>
<head>
<title>行内标签转块级标签</title>
<style type="text/css">
a{
width: 200px;
height: 200px;
background-color: red;
display: block;
}
</style>
</head>
<body> <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
<a href="https://www.baidu.com">百度</a>
</body> <!--而当你用display: block;代表行内标签转为块级标签-->
</html> 実行結果は次のとおりです。赤い部分をクリックすると Baidu にジャンプします。リンク範囲の拡大を実現できます。
2:
インラインタグをインラインブロックタグに変換します
インラインブロックレベルタグとブロックレベルタグの違いは上で述べましたが、もう一度強調します: ブロックレベルタグインライン ブロック レベル タグ 長さと幅は設定できますが、ブロック レベル タグを設定すると、自動的に折り返されます。この行には他に何も配置できません。インライン ブロック レベル タグは複数配置できます。同じ行のインラインタグについて、具体的に説明します。
<html>
<head>
<title>块级和行内块级</title>
<style type="text/css">
a{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
p{
width:100px;
height:100px;
background-color: red;
margin-top:10px; /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a> <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
<a href="https://www.baidu.com">百度一下</a>
<p>我是p1</p> <!--这个是一般的块级标签，会上下分行-->
<p>我是p2</p>
</body>
</html>実行結果:
3. ブロックレベルのタグをインラインタグに変換します
1 nbsp;html> 2 3 4 <title>块级标签转行内标签</title> 5 <style> 6 p{ 7 width: 100px; 8 height: 100px; 9 background-color: red;10 display: inline;11 }12 </style>13 14 15 <p>谷歌</p> <!--按道理p是块级可以设置长和宽当通过display: inline;它已经是行内标签了，所以长和宽失效-->16 <p>http://www.php.cn</p>17 18
最初に、ブロックレベルのタグ、インラインタグ、インラインブロックレベルのタグについて書きます。読んだ後、皆さんにさらにアドバイスをいただければ幸いです。
CSS ブロック レベル タグ、インライン タグ、およびインライン ブロック タグ変換 (2) の詳細については、PHP 中国語 Web サイトの関連記事に注目してください。
「ダイナミックヒットエリア」のメニューApr 19, 2025 am 11:37 AMフライアウトメニュー！ Hoverイベントを使用してメニュー項目をより多く表示するメニューを実装する必要がある2番目の場合は、トリッキーな領域にあります。 1つは、そうすべきです
毎週のプラットフォームニュース：CSS ::マーカー擬似エレメント、事前レンダリングWebコンポーネント、サイトへのウェブメントの追加Apr 19, 2025 am 11:25 AM今週、＃039;のラウンドアップ：DatePickersはキーボードユーザーのHeadachesを提供しています。これは、Foucとの戦いに役立つ新しいWebコンポーネントコンパイラであり、最終的にスタイリングリストのアイテムマーカーと、サイトでWebメントを取得するための4つのステップを手に入れます。
毎週のプラットフォームニュース：検索コンソールでのHTML検査、スクリプトのグローバル範囲、Babel Envがデフォルトクエリを追加するApr 19, 2025 am 11:18 AM今週のWebプラットフォームニュースの世界を見回すと、Google Searchコンソールによりクロールされたマークアップの表示が簡単になります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
Dreamweaver Mac版
ビジュアル Web 開発ツール
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
