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

html

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

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

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

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

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

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

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

皆さんこんにちは

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

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

<font>--------テキストの書式設(shè)定

<表>------表

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

ヒントとメモ:

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

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

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

<div>-----ドキュメントを獨(dú)立した異なる部分に分割します (後で學(xué)びます) CSS説明します)

<hr>------水平線で區(qū)切られたタイトルと段落

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

次のコード:

<!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設(shè)置字體大小，顏色-->

		<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>

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

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

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

上記のコードの実行結(jié)果:

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>

學(xué)び続ける

新しいファイル

<!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>

提出するリセットコード

自動(dòng)運(yùn)転