htmlタグの分類は何ですか?

html タグ要素は次のとおりです: 1. タグは 1 行を占め、幅と高さはブロック タグとして指定できます; 2. タグは 1 行で、幅と高さはcontent. コンテンツがHTMLの幅を超える場合のみ、改行に折り返せるインラインタグ; 3. インライン要素とブロック要素の両方の性質を持つインラインブロックタグ。

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

HTML タグの種類は、ブロックレベル タグ、インライン タグ、インライン ブロック タグの 3 種類に分類できます。

ブロックレベルラベル:

ブロックレベルラベル: ラベルは 1 行を占め、幅と高さを指定できます。

機能:

• 幅と高さを識別できます

• 上下左右のマージンとパディングは、すべて有効です

• 行を自動的に折り返すことができます

• #複数のブロック要素タグは一緒に記述され、デフォルトの配置は上から下です

• margin:0 auto を使用して配置を中央に配置できます。

一般的に使用されるブロック要素は次のとおりです。

、

、

...

、

、
、

、、

、

、< form>

inline タグ:

インライン (行レベル) タグ: タグは行内にあります。幅と高さは内容によって決まります。内容が幅を超える場合のみです。 HTML では折り返されます。

機能:

• 幅と高さを設定できません

• 余白は上下に影響せず、左右にのみ影響します。 、パディングには効果があり、スペースが拡張されます; box-sizing:border-box; この属性はボックス モデル用であるため無効です。

• 自動的に折り返されません

一般的に使用されるインライン要素は次のとおりです:

、、 、、、、、、、

インライン ブロック タグ:

インライン ブロック要素 (inline-block) は、インライン要素とブロック要素の両方の特性を備えており、display:inline-block というコードによってインライン ブロック要素として設定されます。 (css2.1 の新機能)、 および タグは、このようなインライン ブロック タグです。

機能:

• 自動的に折り返されません

• 幅と高さを設定できます

• デフォルトの配置は左から右です

• text-align:centerを使用すると、imgタグなどの親ボックスに対してコンテンツを水平方向および中央に配置できます。 text-align:center を使用できます。親ボックスに対して中央に配置され、margin: 0 auto valid

• 水平方向に配置されますが、すべての要素には 1 スペースのギャップが生じます。デフォルトでは、HTML 改行の要素間にキャリッジ リターンが記述されているため、ブラウザの解析ではスペースに解析されます。

一般的に使用されるインライン ブロック要素は次のとおりです:

、

HTML タグ タイプは変換できます:

#display:inline;インライン要素に変換
display:linline-block;インライン ブロック要素に変換
display:block;ブロックレベルの要素に変換
推奨される学習:

html ビデオ チュートリアル

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

関連ラベル：

html タイプ

ソース：php.cn

前の記事：HTMLのインラインブロック要素とは何ですか? 次の記事：htmlでrunatは何を意味しますか

このウェブサイトの声明

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

著者別の最新記事

• VueUse の便利な 5 つの機能を共有して、一緒に使いましょう!
  2021-08-13 18:04:58
• CSSで指定したグリッドのサイズと位置を設定する方法
  2021-08-13 17:36:16
• CSSでグリッド線のサイズを定義する方法
  2021-08-13 16:16:35
• CSS背景画像のサイズを調整する裏ワザを教えます
  2021-08-13 15:33:28
• CSSを使って背景画像を繰り返すかどうかを設定する方法
  2021-08-13 14:30:39
• CSS 配置要素の背景画像を修正するための 1 つのトリック
  2021-08-13 11:57:56
• CSS相対原点位置の背景画像を修正するための1つのトリック
  2021-08-13 11:32:54
• css要素の背景画像を設定する方法
  2021-08-13 10:45:02
• MySQLで現在の時刻とタイムスタンプを取得する方法
  2021-08-24 10:52:19
• php7でcurlファイルのアップロードでエラーが発生した場合はどうすればよいですか?
  2023-02-18 07:56:01

最新の問題

PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...

から 2024-04-16 09:34:16

0

0

4687

ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

から 2024-04-06 21:58:04

0

1

800

CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...

から 2024-04-06 20:22:15

0

1

454

livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...

から 2024-04-06 20:02:10

0

2

543

文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...

から 2024-04-06 17:40:41

0

2

410

関連トピック

詳細>

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

人気のおすすめ

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

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  HTML5 Canvasアニメーション実践チュートリアル

  57708
• 
  HTML 日常の知識 (シーズン 2)

  87356
• 
  HTML+CSS Web ページの基本

  51040

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

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

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

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

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

  888902 回の学習

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

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

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

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

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

  24438 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

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

• [フォームボタン] 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