HTML标签的分类

最新推荐文章于 2022-12-26 20:24:08 发布

lhrdlp

最新推荐文章于 2022-12-26 20:24:08 发布

阅读量793

点赞数 5

分类专栏： HTML

本文链接：https://blog.csdn.net/lhrdlp/article/details/100714342

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML的标签

一、分类
1、排版标签
2、标题标签
3、段落标签
4、水平线标签
5、换行标签
6、文本格式标签
7、标签属性
8、图像标签
二、应用
1、排版标签
与css搭配使用，显示网页结构的标签，是网页布局中的常用标签。
2、标题标签
为了使网页具有语义化，在网页中经常会使用到标题标签，在html中提供了6个等级的标题标签。（标题标签具有自动加粗功能）

 标题标签的基本语法格式：<hn>标题标签</hn>
    <h1>、<h2>、<h3>、<h4>、<h5>、<h6>

在sublime中写一段代码展示每种标题标签：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>教师节</title>
</head>
<body>
	<h1>追忆似水年华</h1>
	<h2>追忆似水年华</h2>
	<h3>追忆似水年华</h3>
	<h4>追忆似水年华</h4>
	<h5>追忆似水年华</h5>
	<h6>追忆似水年华</h6>
</body>
</html>

在网页中打开结果如下：
在这里插入图片描述
3、段落标签
在段落中将文章有条理的表现出来。

     标题标签的基本语法格式： <p>标题标签</p>

注：在默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
在sublime中写一段代码来展示段落标签的作用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>教师节</title>
</head>
<body>
	<p>金子美玲是水，天真淳朴地映着任何东西的影子。而她自己的影子，
		始终是小小的。在她眼里，所有事物都是美的，善良的，平等的，
	值得尊重的。她爱它们，爱它们的欢乐，也为它们的痛苦难过。</p>
    <p>真善美，是金子美铃在学校里学到的吗？</p>
    <p>1926年，金子美玲结婚，生下一个女儿。不幸的是，丈夫放荡不羁，
    又不理解她的创作，禁止她写童谣，也禁止她和童谣创作者通信。金子美铃离了婚，
    却被迫离开女儿。她最后以死抗争。在留给前夫的遗书上，她写道：“你能给女儿的只
    有金钱，而我想把她培养成一个心灵丰富的人。”</p>
</body>
</html>

在网页中打开结果如下所示：
在这里插入图片描述

4、水平线标签
在网页中经常有用水平线将段落隔开，文档的
使文档的结构更加清晰。

水平线标签的基本语法格式：<hr />

在sublime中写一段代码展示水平线标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>教师节</title>
</head>
<body>
	<h1>追忆似水年华</h1>
	<hr />
	<h2>追忆似水年华</h2>
</body>
</html>

在网页中打开结果如下所示：
在这里插入图片描述

例题：将如下内容在网页中显示，title为《教师节》，一级标题标签为：为你读诗。内容如下图所示：
在这里插入图片描述
在HTML中的代码如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>教师节</title>
</head>
<body>
	<h1>为你读诗</h1>
	<hr />
	<p>金子美玲是水，天真淳朴地映着任何东西的影子。而她自己的影子，
		始终是小小的。在她眼里，所有事物都是美的，善良的，平等的，
	值得尊重的。她爱它们，爱它们的欢乐，也为它们的痛苦难过。</p>
    <p>真善美，是金子美铃在学校里学到的吗？</p>
    <p>1926年，金子美玲结婚，生下一个女儿。不幸的是，丈夫放荡不羁，
    又不理解她的创作，禁止她写童谣，也禁止她和童谣创作者通信。金子美铃离了婚，
    却被迫离开女儿。她最后以死抗争。在留给前夫的遗书上，她写道：“你能给女儿的只
    有金钱，而我想把她培养成一个心灵丰富的人。”</p>
    <p>培养心灵丰富的人，这大概也是无数老师一生追求的事业吧。</p>
    <p>老师，是一种职业，也是一种使命。它承载快乐、荣誉，也承载很多压力和苦痛。</p>
</body>
</html>

在网页中打开的结果如下图所示：
在这里插入图片描述
5、换行标签
尽管在HTML中一个段落中的文字会从左到右依次排列，直至浏览器窗口的右端，如浏览器窗口大小发生变化，文本内容会进行自动换行。如果希望文本强制进行换行，则就需要换行标签：
换行标签的基本语法格式"<br />
6、文本格式化标签
在网页中为文本设置粗体、斜体、加下划线、加删除线的效果就需要用到文本格式化标签，使文字以特殊化的方法显示：

在这里插入图片描述
在sublime中写一段代码来实现这四个功能;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h2>===== 人生四大喜 ======</h2>
	<strong >1、金榜题名时   <br /></strong >
	<em>2、他乡遇故知   <br /></em>
	<ins>3、久旱逢甘霖   <br /></ins>
	<del>4、洞房花烛夜   <br /></del>
</body>
</html>

处理结果如下所示：
在这里插入图片描述

lhrdlp

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML标签的分类

HTML的标签一、分类1、排版标签2、标题标签3、段落标签4、水平线标签二、应用1、排版标签与css搭配使用，显示网页结构的标签，是网页布局中的常用标签。2、标题标签为了使网页具有语义化，在网页中经常会使用到标题标签，在html中提供了6个等级的标题标签。（标题标签具有自动加粗功能）标题标签的基本语法格式：<hn>标题标签</hn> <...
复制链接

扫一扫