HTML+CSS 쉬운 입력을 위한 기본 HTML 태그 (1)

HTML의 댓글

HTML 태그가 많이 있습니다. 다음으로 우리가 흔히 사용하는 태그에 대해 설명하겠습니다.

먼저 P 태그 단락(p)에 대해 이야기해 보겠습니다.

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

그런 다음 컴퓨터에서 Run을 검색하면 다음과 같이 출력됩니다. Hello everything

다음 코드를 살펴보세요.

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

문단이 자동으로 래핑되므로 출력은 다음과 같습니다.

안녕하세요 여러분

<br> -------줄 바꿈

<font> ---------텍스트 서식 지정

<테이블>------테이블

------인라인 태그

팁 및 참고 사항:

팁: <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> <td>는 셀을 나타내는데, 테이블 형태로 표시되기 때문에 일반적으로 사용되는 헤더 셀을

라고 합니다. 예를 들어, 월요일부터 일요일까지 주간 일정을 만듭니다.

위 코드 실행 결과:

United States Japan China

123 456 789

이런 테이블은 익숙하지 않으니 위 코드에서 테이블

에 테두리를 추가해 보겠습니다. . 테이블 태그에 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>

제출하다 코드 재설정

자동운전