HTML结构及文本标签

最新推荐文章于 2024-09-20 01:12:58 发布

SCK-DN

最新推荐文章于 2024-09-20 01:12:58 发布

阅读量906

点赞数 1

分类专栏：前端入门文章标签： html 前端网页设计

本文链接：https://blog.csdn.net/Harrysau/article/details/122691120

版权

前端入门专栏收录该内容

6 篇文章 7 订阅

订阅专栏

HTML文本标签

一、HTML固定结构
二、HTML基础标签

一、HTML固定结构

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
		<body>
			网页内容
		</body>
</html>

HTML决定网页的结构，所有HTML文件都是基于此结构完成的。此外还可以观察到，HTML是一种标签语言，其对网页结构的设置是通过标签实现的。

二、HTML基础标签

1.添加内容

网页的内容就像一个人的身体，故应在“body”标签内填写内容。标签语言的一大特点是应用起来比较灵活，即在body中可以直接打字输入要添加的内容。在HTML基本结构的基础上，为网页添加内容：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			这里是我们要为网页添加的内容！
		</body>
</html>

用浏览器打开这个html文件后，我们可以在网页中观察到这样一个页面

这里是我们要为网页添加的内容

2.标题

HTML中用“h”标签来表示标题，具体用法为：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<h1>一级标题</h1>
			<h2>二级标题</h2>
			<h3>三级标题</h3>
			<h4>四级标题</h4>
			<h5>五级标题</h5>
			<h6>六级标题</h6>
		</body>
</html>

那么用浏览器打开这个html文件，则会观察到这样一个页面：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

3.段落

符号：p
特点：双标签，使用后自动换行
代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<p>这是第一段内容</p>
			<p>这是第二段内容</p>
			<p>这是第三段内容</p>
		</body>
</html>

效果：

这是第一段内容

这是第二段内容

这是第三段内容

3.换行

符号：br
特点：单标签
代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<p>为使页面中的文字结构更加美观，<br>我们合理使用换行符对文字的结构进行调整</p>
		</body>
</html>

效果：

为使页面中的文字结构更加美观，
我们合理使用换行符对文字的结构进行调整

4.加粗

符号：strong
特点：双标签
说明：可替换成b，多数使用还是strong
代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
		<p>为使页面中的文字结构更加美观，<br>我们合理使用<strong>换行符</strong>对文字的结构进行调整</p>
		</body>
</html>

效果：

为使页面中的文字结构更加美观，
我们合理使用换行符对文字的结构进行调整

5.水平分割线

符号：hr
特点：单标签
代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<h1>标题一</h1>
			<hr>
			<p>用<strong>水平分割线</strong>将标题一与正文分开</p>
		</body>
</html>

效果：

标题一

用水平分割线将标题一与正文分开

6.下划线

符号：ins
特点：双标签
说明：也用符号u，多数使用ins
代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<h1>标题一</h1>
			<hr>
			<p>用<strong>水平分割线</strong>将标题一与正文分开</p>
			<p>重点部分用<ins>下划线</ins>标出</p>
		</body>
</html>

效果：

标题一

用水平分割线将标题一与正文分开

重点部分用下划线标出

7.倾斜

符号：em
特点：双标签
说明：也用符号i，多数用em
代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<h1>倾斜</h1>
			<hr>
			<p>倾斜部分需<em>重点标出</em>！！！</p>
		</body>
</html>

效果：

倾斜

倾斜部分需重点标出！！！

8.删除线

符号：del
特点：双标签
说明：也用s，多数用del
代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
		<body>
			<h1>大减价</h1>
			<hr>
			<p>价格优惠，史上最低！！</p>
			<p>只需：<del>1314</del> 520元！</p>
		</body>
</html>