HTML 初体验

最新推荐文章于 2025-08-15 07:27:47 发布

原创最新推荐文章于 2025-08-15 07:27:47 发布 · 285 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

HTML（超文本标记语言）全称：HyperText Markup Language。

超文本是什么？

答：超文本就是网页中的链接。

标记是什么？

答：标记也叫标签，是带尖括号的文本。

需求1：将“我爱中国”显示在网页上。

代码1：

//需求1：将“我爱中国”显示在网页上。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		我爱中国
	</body>
</html>

网页结果1：

需求2：将“我爱中国”加粗显示在网页上。

代码2：

//需求2：将“我爱中国”加粗显示在网页上。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<strong>我爱中国</strong>
	</body>
</html>

网页结果2：

其中""叫做开始标签，""叫做结束标签。

双标签概念：成对出现的标签，例如上面提及的""标签。

单标签概念：只有开始标签，没有结束标签，例如：" "换行标签；"<hr>"水平线标签。

需求3：将“我爱中国”加粗显示在网页上，将“国家富强，民族复兴”不加粗显示在网页上。

代码3：

//需求3：将“我爱中国”加粗显示在网页上，将“国家富强，民族复兴”不加粗显示在网页上。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<strong>我爱中国</strong>
		国家富强，民族复兴
	</body>
</html>

网页结果3：

需求4：将“我爱中国”加粗显示在网页上，将“国家富强，民族复兴”不加粗换行显示在网页上。

代码4：

//需求4：将“我爱中国”加粗显示在网页上，将“国家富强，民族复兴”不加粗换行显示在网页上。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<strong>我爱中国</strong>
		<br>国家富强，民族复兴
	</body>
</html>

网页结果4：

需求5：将“我爱中国”显示在网页上，在下一行显示一条水平线。

代码5：

//需求5：将“我爱中国”显示在网页上，在下一行显示一条水平线。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<strong>我爱中国</strong>
		<hr>
	</body>
</html>

网页结果5：