Html要素の基本要素の説明

Jul 19, 2017 pm 04:45 PM
element html 基本

この記事はITカルティベーションパークで一定期間勉強し、それを振り返って書きました。基礎知識的な内容ではありますが、皆様のお役に立てれば幸いです。

まず、HTML の定義とは何なのかを理解する必要があります。

HTML DOM ノード

HTML DOM (ドキュメント オブジェクト モデル) では、すべての部分がノードです:

ドキュメント自体がドキュメント ノードです

​​

すべての HTML 要素が要素ノードです

​​

すべての HTML 属性が属性ノードです

HTML 要素内のテキストはテキスト ノードです。

注釈は注釈ノードです。

Element オブジェクト

HTML DOM では、Element オブジェクトは HTML 要素を表します。

Element オブジェクトは、タイプ要素ノード、テキスト ノード、およびコメント ノードの子ノードを持つことができます。

NodeList オブジェクトは、HTML 要素の子ノードのコレクションなどのノードのリストを表します。

要素は属性を持つこともできます。プロパティは属性ノードです。

[html: ハイパーテキスト タグ 言語、テキスト: txt 形式のファイル、タグ: セマンティクス をテキストに添付するには、 タグ ペア を使用します]

上記を通じて HTML をすでに理解している場合は、その 3 つの要素に取り組み始めます。

ブロックレベル要素、インライン要素、およびインラインブロック要素

いくつかの一般的な科学の背景: HTML レイアウト: ドキュメント フロー、フロート、位置の配置と表示: フレックス弾性レイアウト。

最初に登場したドキュメント フローに基づいて、いくつかの要素にも元のセマンティクスが与えられます。

Block: ブロックレベル要素 は 1 行のみを占め、幅と高さを設定できます 幅が指定されていない場合、ブロックレベル要素はデフォルトでブラウザの幅になります。は 100% 幅です。

インライン要素: 1 行に複数のラベルが存在できます ただし、幅と高さの属性値は完全に影響しません。コンテンツ

Inline-block: インラインブロック要素: インラインレベルとブロックレベルの要点を組み合わせると、 幅と高さを設定できるだけでなく 1 行に複数のラベルを表示することもできます ; (div, p, ul, li) コンテナ: ブロックレベル要素

デフォルトの属性は、前後に
改行を追加します。


(Span, img, input, a) テキスト: インライン要素 タグにはセマンティクスがありません、機能: 属性は個別に設定できます


はマスターするいくつかの主要な要素を提供します。同時に、視聴者にとっても理解しやすく、記憶に残りやすい内容になっていると思います。まだ頭の中でその姿を形作っていないのなら。 Word 文書を参照して、デフォルトでテキストの段落が 1 行ずつ左から右、上から下に配置されているかどうかを確認できます。表に 1 行と 2 列を追加する場合でも、1 行と複数列を追加する場合でも、デフォルトでは A4 用紙全体がカバーされます。この時点で、誰もがそれらを思い出すことができるはずです。 概念と表現について言及しましたが、それらの意味論を理解するだけでなく、現実的な方法でそれらを使用する必要があります。

まず

inline

について話しましょう。テキストと画像は右に配置され、中央に配置される必要があります。これは Word エディターの 6 つの位置とまったく同じです。 Webページの設定では

Text-align: centerがよく使われます。

一つ一つ説明はしませんが、内部の経典は次のとおりです

Text-align

: ボックス内のインライン要素を指定するために

親ボックスタグ

に設定されます( テキストまたはimgラベル)が中央に表示されます。 Line-height: テキストの行ボックスの高さ (行の高さ) を指します。 (上部、下部の間隔、テキストの高さ) で構成されます

は、コンテナの高さ = 行ボックスの高さという垂直方向の原則を実装します。デフォルトのテキストの高さは 16px です。コンテナの height=line-height=200px に設定すると、上下の間隔は自動的に 184px に分割されます。

Margin

:

0 auto: ボックスラベルで中央揃えに設定されています。通常、ボックスの幅も設定する必要があります。 vertical-align:middle: 2つのinline要素タグ

に、2つのinline要素

と最後のinline要素の前のinline要素が縦に揃うように設定されています。 Tex-align と line-height は、テキスト行を垂直方向に中央揃えするためによく一緒に使用されます。

Vertical-align:middle は、テキストと画像の垂直方向の配置によく使用されます。

Vertical-align この属性を注意深く研究したい場合は、実際に多くの新しいコンテンツを組み込む必要があります。実際、私たちは彼のベースライン、ミッドライン、トップラインを理解する必要はなく、それらの使い方を知る必要があるだけです。

もう 1 つ言っておかなければならないことがあります。

vertical-align は inline-block に依存する要素です。 inline-block 要素でない場合は無視されます。一部の要素はデフォルトでサポートしています:

画像、ボタン、単一のチェックボックス、単一/複数行のテキストボックス、その他の HTML コントロール

以上がHtml要素の基本要素の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

PHPでHTML/XMLを解析および処理するにはどうすればよいですか? PHPでHTML/XMLを解析および処理するにはどうすればよいですか? Feb 07, 2025 am 11:57 AM

このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML(拡張可能なマークアップ言語)は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles