1.2.HTML之文本内容笔记

最新推荐文章于 2024-10-01 23:23:32 发布

卿音

最新推荐文章于 2024-10-01 23:23:32 发布

阅读量899

点赞数 2

分类专栏： HTML 文章标签： web html5 前端

本文链接：https://blog.csdn.net/weixin_45204443/article/details/124184593

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的文本元素，包括标题标签（h1到h6）、段落标签（p）、换行标签（br）以及各种文本修饰标签，如粗体（strong/b）、斜体（i/em/cite）、上标（sup）、下标（sub）、下划线（u）、中划线（s）、大字号（big）和小字号（small）。通过实例展示了这些标签的使用方法及其效果，帮助读者理解和掌握HTML文本格式化的基础技巧。

摘要由CSDN通过智能技术生成

大多数的静态网页的由四种元素组成：文字，图片，超链接，音频和视频。

HTML文本网页，纯文本网页，分析一下这个网页，谈谈“文本”这一节究竟学什么内容

（1）标题标签

在HTML中，共有6个级别的标题标签：h1 h2 h3 h4 h5 h6,下面演示一下6中标题的效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>这是一级标签</h1>
		<h2>这是二级标签</h2>
		<h3>这是三级标签</h3>
		<h4>这是四级标签</h4>
		<h5>这是五级标签</h5>
		<h6>这是六级标签</h6>
	</body>
</html>

运行结果：

所以，从这里我们可以看出，标签级别越大，字越大，标签级别越小，字越小。

（2）段落标签<p></p>

举例：<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
   </head>
   <body>
       <h3>核舟记</h3>
       <p>明有奇巧人曰王叔远，能以径寸之木，为宫室、器皿、人物，以至鸟兽、木石，
       罔不因势象形，各具情态。尝贻余核舟一，盖大苏泛赤壁云。 </p>
       <p>舟首尾长约八分有奇，高可二黍许中轩敞者，为舱，篛篷覆之。
       旁开小窗，左右各四，共八扇。启窗而观，雕栏相望焉。
       闭之，则右刻“山高月小，水落石出”，左刻“清风徐来，水波不兴”，石青糁之。 </p>
   </body>
</html>

运行结果:

从上面预览效果可以看出，段落标签会自动换行，并且段落与段落之间有一定的间距。

（3）换行标签<br/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>	
	<h1>静夜思</h1>         <!-- 标题标签 -->
	<p>床头明月光，疑是地上霜。<br/> 举头望明月，低头思故乡</p>           <!-- 文本标签 -->
	</body>
</html>

运行结果：

从两个例子可以看出，使用p标签会导致段落与段落之间有一定的间距，而使用br标签则不会。

br标签是用来给文字换行的，而p标签是用来给文字分段的。

（4）文本标签

我们可以使用“文本标签”对文字进行修饰，如粗体、斜体、上标、下标等。常用的文本标签有以下8种。

标签	表示符
粗体	strong、b
斜体	i、em、cite
上标	sup
下标	sub
下划线	u
中划线	s
大字号	big
小字号	small

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<p>普通文本</p>
		<strong>粗体文本</strong>   <!-- 在网页开发中尽量使用strong标签，不使用b标签，因为strong更具有语义性 -->
		<b>粗体文本</b>
		<hr>      <!-- 水平线标签，是horizon的缩写，实现水平线效果 -->
		<i>斜体标签</i>
		<em>斜体标签</em>          <!-- 在实际开发中，尽量使用em标签，这也是因为em比其他两个标签更具有语义性 -->
		<cite>斜体标签</cite>        
		<hr>
		<p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ad</p>         <!-- sup实现文本上标效果 -->
		<hr>
		<p>H<sub>2</sub>SO<sub>4</sub>是硫酸分子</p>              <!-- 实现文本下标效果 -->
		<hr>
		<p>新鲜的奇异果</p>
		<p><s>原价：￥5.0/kg</s></p>           <!-- s标签中划线效果一般用于显示那些不正确或者不相关的内容，常用于商品促销的标价中 -->
		<p><strong>现价：￥4.0/kg</strong></p>
		<hr>
		<p>今天是一个<u>晴朗的</u>日子</p>             <!--u标签 实现一个下划线的效果 -->
		<hr>
		<p>普通文本字体</p>
		<big>大号文本字体</big>                     <!-- 大号字体 -->
		<small>小号文本字体</small>                  <!-- 小号字体 -->
	</body>                                <!-- 注意，这些标签没有分段效果，除了p标签 -->
</html>

运行结果如图