HTMLタグの要素にはどのような種類があるのでしょうか？ HTML の一般的なタグ要素の紹介-htmlチュートリアル-php.cn

标题元素，占据一行

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLタグの要素にはどのような種類があるのでしょうか？ HTML の一般的なタグ要素の紹介

青灯夜游

Oct 23, 2018 pm 02:33 PM

html ブロック要素インライン要素

この記事の内容は、HTML でよく使われるタグ要素とは何なのかを誰でも理解できるように、HTML タグ要素の種類を紹介することです。困っている友人は参考にしていただければ幸いです。

まず、html タグの要素はどのような種類に分類できるのかを理解しましょう。

HTML のタグ要素は、通常、ブロック要素、インライン要素、インラインブロック要素の 3 つの異なるタイプに分類されます。

この3種類の要素の特徴と使い方を詳しく紹介し、よく使われるブロック要素とインライン要素を皆さんに知ってもらいましょう。

ブロック要素

特徴:

1. 各ブロックは 1 行を占めます。新しい行から再度開始し、上から下に配置します。

2. ボックスモデルの幅、高さ、および関連する CSS プロパティ (要素の高さ、幅、行の高さ、上下の余白) を直接制御できます。すべて設定可能）

3. 幅が設定されていない場合、ブロックレベル要素の幅は親要素のコンテンツの幅になります。

4. 高さが設定されている場合、ブロックレベル要素の幅は親要素のコンテンツの幅になります。設定されていない場合、ブロックレベルの要素の幅はその親要素のコンテンツの幅になります。上位レベルの要素の高さは、その独自の特性により、通常はブロック要素を使用します。大規模なレイアウト (大規模な構造) を構築します。

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

1. 通常の要素

div (一般的に使用されるブロックコンテナーと CSS レイアウトの主要なタグ)、p (段落)、hr (水平区切り文字)、table (表)、form (対話型フォーム)

2、title 要素:

h1 (見出し)、h2 (サブタイトル)、h3 (第 3 行)レベル見出し)、h4 (第 4 レベル見出し)、h5 (第 5 レベル見出し)、h6 (第 6 レベル見出し)

3、リスト要素

menu (メニューリスト)、ol ( 順序付きリスト)、ul (順序なしリスト)、li (リスト項目)、dl (リストの定義)、dt (用語の定義)、dd (説明の定義)

簡単なコードでこれらのブロックを見てみましょう形状要素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>块状元素</title>
		<style>
			div{
				background-color: palegoldenrod;
			}
			p{
				background-color:paleturquoise ;
			}
			h4{
				background-color:papayawhip;
			}
			ul{
				background-color: peru;
			}
		</style>
	</head>
	<body>
		<div>div标签元素，占据一行</div>
		<p>p标签元素，占据一行</p>
		<h4 id="标题元素-占据一行">标题元素，占据一行</h4>
		<ul>
			<li>ul1 li 标签 元素</li>
			<li>ul1 li 标签 元素</li>
		</ul>
		<ul>
			<li>ul2 li 标签 元素</li>
			<li>ul2 li 标签 元素</li>
		</ul>
	</body>
</html>

ログイン後にコピー

レンダリング:

HTMLタグの要素にはどのような種類があるのでしょうか？ HTML の一般的なタグ要素の紹介

##インライン要素

機能:

1. 他のインライン要素とともに左から右に 1 行で表示されます。

2. ボックスモデルの幅、高さ、および関連する CSS 属性は直接制御できません。ただし、内マージンと外マージンの左右の値を直接設定することは可能です。

3. インライン要素の幅と高さは、それ自体のコンテンツ (テキスト、写真など)

4. インライン要素テキストまたはその他のインライン要素のみを収容できます (ここで注意してください、インライン要素内にブロックレベルの要素を入れ子にしないでください)

特徴として、通常はテキストを運ぶためにインライン要素を使用します。小さなアイコンの構築 (小さな構造)。

一般的に使用されるインライン要素:

1. 共通要素タグ

span (一般的に使用されるインラインコンテナ、テキスト内ブロックの定義)、(アンカーポイント、リンク）、img（画像の紹介）、br（強制改行）、sub（下付き文字）、sup（上付き文字）

2. テキスト修飾タグ

b (太字を追加) )、strong (太字強調)、i (斜体)、em (斜体強調)、big (大きいフォントテキスト)、small (小さいフォントテキスト)、s (下線 (推奨されません))、strike ( (下線)、del (文書内で削除されたテキスト)、u (下線)

3. 形式

textarea (複数行のテキスト入力ボックス)、input (入力ボックス) で使用されるラベル要素。選択(ドロップダウンリスト)、ラベル入力(要素定義ラベル(マーク))

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内元素</title>
		<style>
			span{
				background-color: palegoldenrod;
			}
			p{
				background-color:paleturquoise ;
			}
		</style>
	</head>
	<body>
		<span>span标签元素1</span>
		<span>span标签元素2</span>
		<img  src="/static/imghw/default1.png"  data-src="1.png"  class="lazy"      style="max-width:90%" / alt="HTMLタグの要素にはどのような種類があるのでしょうか？ HTML の一般的なタグ要素の紹介" >
		<img  src="/static/imghw/default1.png"  data-src="1.png"  class="lazy"      style="max-width:90%" / alt="HTMLタグの要素にはどのような種類があるのでしょうか？ HTML の一般的なタグ要素の紹介" >
		<p>换一行看看文字效果，我是一段测试代码，<b>被b标签加粗</b>。我是一段测试代码，<i>被i标签变成斜体</i>。</p>
</html>

ログイン後にコピー

レンダリング:

HTMLタグの要素にはどのような種類があるのでしょうか？ HTML の一般的なタグ要素の紹介

インラインブロック要素

特徴:

1. 他の要素と同じ行にあり、デフォルトの配置は左から右です。

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

インラインブロック要素は、インライン要素とブロック要素の特性を組み合わせたものですが、それぞれに独自のトレードオフがあります。そのため、インラインブロック要素はその特性上、日常的に使用される機会が多くなり、様々な面で役に立ちます。

概要: 上記は、この記事で紹介する 3 種類の HTML タグ要素、つまりブロック要素、インライン要素、インラインブロック要素、およびよく使用されるブロック要素とインライン要素の紹介です。タグの種類ごとに特徴があるので、実際に使ってみて理解を深め、必要に応じてタグを使い分けてみましょう。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、 HTML ビデオチュートリアル、Html5 ビデオチュートリアル、bootstrap ビデオチュートリアルをご覧ください。

以上がHTMLタグの要素にはどのような種類があるのでしょうか？ HTML の一般的なタグ要素の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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