Html要素の基本要素の説明-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

Html要素の基本要素の説明

巴扎黑

Jul 19, 2017 pm 04:45 PM

elementhtml基本

この記事は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 までご連絡ください。

HTMLを超えて：Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

See all articles