HTML+CSS 簡単に入力できる基本的なHTMLタグ (1)

html

のコメント次に、よく使用されるタグのいくつかについて説明します。

まず第一に、P タグについて話しましょう段落 (p)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
		<p>大家好</p>
</body>
</html>

それからブラウザ上でそれを実行すると、出力は次のようになります: こんにちは皆さん

次のコードを見てください:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
		<p>大家好</p>
		<p>大家好！</p>
</body>
</html>

段落はそれ自体を折り返すので、出力は次のとおりです:

皆さんこんにちは

<meta>----- は head タグ内の補助タグで、通常はエンコードを設定し、プロモーションなどのキーワードを最適化するために使用されます。

<br> ------ -改行

<font>--------テキストの書式設定

<表>------表

<span>---- -- インラインタグ

ヒントとメモ:

ヒント: <span> を使用してインライン要素をグループ化し、スタイルで書式設定します。

注: スパンには固定フォーマット表現がありません。スタイルを適用したときにのみ視覚的に変化します。

<h1> から <h6>-----フォントサイズを制御します

<div>-----ドキュメントを独立した異なる部分に分割します (後で学びます) CSS説明します)

<hr>------水平線で区切られたタイトルと段落

次に、これらの簡単なタグを最初に説明します

次のコード:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
		<p>大家好<span>123456</span></p>
		<p>大家好</p>
		
		111111111111111<br>1111111111111111 <!--换行-->

		<hr>  <!--用来和以上隔开，有一条黑色的直线-->

		<font size='18' color="red">我们都一样</font>   <!--font设置字体大小，颜色-->

		<hr>

		<h1>中国</h1>
		<h2>中国</h2>
		<h3>中国</h3>
		<h4>中国</h4>
		<h5>中国</h5>
		<h6>中国</h6>

</body>	
</html>

みんなでコードをコピーしてください自分のコンピュータで、拡張子 .html が付いたファイルを作成し、ダブルクリックして

テーブルをプレビューします

次のコードを見てください:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
		<table>
			<tr>
				<th>美国</th>
				<th>日本</th>
				<th>中国</th>
			</tr>

			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
			</tr>

			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
			</tr>
		</table>
</body>
</html>

テーブルは行と行で構成されています。正確には、列と呼ぶことはできず、セルと呼ぶことしかできません

上記のコードの <tr> はセルを表します。プレビューでは表の形式なので、3 行 3 列と呼ばれます

< ;th> 通常、タイトルに使用されるヘッダーセルを定義します。たとえば、月曜日から日曜日までの週間スケジュールを作成する場合、これらの単語が表示されます。太字にする必要があるなど。

上記のコードの実行結果:

United States Japan China

123 456 789

このような表を見ることに慣れていないので、枠線を追加しましょう上記のコードのテーブル

。 table タグに border='1' を追加し、幅と高さをテーブルに追加します width="300" height="200"

具体的なコードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
		<table border="1" width="300" height="200">
			<tr>
				<th>美国</th>
				<th>日本</th>
				<th>中国</th>
			</tr>

			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
			</tr>

			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
			</tr>
		</table>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" width="300" height="200"> <tr> <th>美国</th> <th>日本</th> <th>中国</th> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> </table> </body> </html>

提出するリセットコード

自動運転