html5 タグの 3 つのカテゴリとは何ですか?

html5 タグには 3 つのタイプがあります: 1. 表示値が「block」であるブロック レベル要素は、幅、高さ、マージン、および自動行折り返しを設定できることを特徴とします。2. インライン表示値が「inline」である要素は自動的に折り返されず、幅と高さを設定できません。 3. インラインブロック要素は自動的に折り返されず、幅と高さを設定できます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

html5 タグの分類

タグは要素とも呼ばれます

• タグに基づいて指定できます特性 ブロック タグ、インライン (インライン) タグ、インライン ブロック タグに分割されます。

• ラベル終了ルールに従って、次のように分割できます。 単一ラベル (空のラベル、自己終了) label)、double label

一般的に使用されるブロック要素:

....

一般的に使用されるインライン要素:
<var></p> <p>一般的に使用されるインライン ブロック要素: <img> <input></p> <p style="text-align:left;"><span style="font-size: 16px;"><strong> ブロックレベル要素の機能: <strong><code class="marker">display:<strong><code class="marker">block;

1. 各ブロックレベルの要素は新しい行で始まり、後続の要素も新しい行で始まります。

2. 要素の高さ、幅、行の高さ、上下左右のマージンとパディングの値を設定できます。

3. 要素の幅が設定されていない場合、幅が設定されていない限り、その幅は親コンテナの 100% (親要素の幅と同じ) になります。

# インライン要素の特性: display:inline#; 1. 他の要素と同じ行に;

2. 要素の

height

、

width、および上下のマージン は許可されません 設定 (左右のマージンとパディングのみをサポート); 3. 要素の幅は、要素に含まれるテキストまたは画像の幅であり、変更できません。

インライン ブロック要素の特性:

display:inline-block;1、その他の要素は On 1 行;

2 要素と

要素の高さ、幅、行の高さ、上下の余白を設定できます。

(上下左右のマージンとパディング値をサポート) 3. マージン: 0 auto は無効です

4. 水平に配置しますが、すべての要素にはデフォルトでは 1 スペース。HTML の要素間にはキャリッジ リターンとライン フィードがあり、ブラウザはそれをスペースに解析するためです。

タグの種類の変換

タグの種類を変換できます:

設定

display:inline
• インライン要素に変換
  設定
display:linline-block
• インライン ブロック要素に変換
  設定
display:block
• ブロックレベルの要素に変換
  (学習ビデオ共有:
htmlビデオチュートリアル

、

webフロントエンド ＃＃＃）＃＃＃

以上がhtml5 タグの 3 つのカテゴリとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：

html html5

ソース：php.cn

前の記事：Figure は HTML5 の新しいタグですか? 次の記事：jqueryで10進数を2進数に変換する方法

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• Redis のセンチネルを詳しく理解する
  2023-04-26 17:59:18
• 【整理と共有】人気のReact状態管理ツール7選
  2023-04-26 17:47:48
• Vue2 のキーと Vue3 のキーの違いについて説明した記事
  2023-04-26 17:41:42
• Nodeのメモリ制御に関する記事
  2023-04-26 17:37:05
• Excelの実践スキルをシェア：重複値を削除する4つのヒント！
  2023-04-26 17:31:25
• Wordの実践スキルを共有：簡体字→繁体字変換機能はこんな使い方もできる！
  2023-04-26 17:27:32
• クロスドメインの問題を解決するにはどうすればよいですか?一般的なソリューションの簡単な分析
  2023-04-25 19:57:58
• JavaScript のシングルトン パターンを理解するための 1 つの記事
  2023-04-25 19:53:11
• ノードのバッファーについて詳しく見る
  2023-04-25 19:49:11
• Vue3 で単体テストを作成する方法を調べる
  2023-04-25 19:41:54

最新の問題

ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...

から 2024-04-06 15:33:12

0

1

433

PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...

から 2024-04-05 12:57:00

0

1

456

HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...

から 2024-04-02 11:47:56

0

1

275

ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...

から 2024-04-01 20:42:38

0

1

259

関連トピック

詳細>

• html著作権記号
• HTMLオンラインエディター
• HTMLウェブページ制作
• HTMLスペース
• htmlとは何ですか
• HTMLのフォントサイズを設定する方法
• htmlからテキストへ
• HTMLテキストボックスのコードの書き方

人気のおすすめ

• URLアドレスとは何ですか
• ウェブ側ってどういう意味ですか？
• プログラミング言語とは何ですか?
• IT業界とは
• エラーとはどういう意味ですか?

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  Yexiutang HTML5+CSS3 ビデオ チュートリアル

  9103
• 
  HTML5の基礎知識入門ビデオチュートリアル

  67982
• 
  HTML5 チュートリアル: js と文字列の操作に関する 6 時間のビデオ チュートリアル - Qianfeng Education

  64996
• 
  HTML5 の新機能に関する基本的なビデオチュートリアル

  29030
• 
  HTML5 開発実践: Baidu テイクアウト モバイル Web サイトのフロントエンド制作

  64429

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1420004 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2505335 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  505450 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215519 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  884003 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  6990 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  5420 回の学習
• 
  Go言語実践GraphQL

  4581 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  659 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  23147 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート



福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて 免責事項 Sitemap

© php.cn All rights reserved