web前端学习-day04 html文本格式化标签

最新推荐文章于 2024-09-25 09:53:04 发布

秃头女孩永不认输

最新推荐文章于 2024-09-25 09:53:04 发布

阅读量219

点赞数

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

本文链接：https://blog.csdn.net/starbiu/article/details/122059949

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

网页基础布局

1.b和strong

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化标签</title>
	</head>
<body>
		<!-- 文本格式化标签：通过标签来美化文本外观 -->
		<!-- 1.b和strong：都有加粗作用且都是行级标签（不会自动换行）
		strong还有强调作用（用于SEO时，便于提取关键字 -->
		<b>加粗</b>
		<strong>加粗+强调</strong>
</boby>

运行结果

2.i和em

<!-- 2.i和em：文字倾斜 em具有强调作用 且都是行级标签
		若只是简单倾斜效果用i标签 例如：添加图表等-->
		<!-- i+em Tab -->
		<i>努力学习</i>
		<em>专心搞钱</em>

运行结果

3.pre

<!-- 3.pre：预格式化文本 ，保留换行和空格及宽度  文字的字号会小一号-->
		<pre>预格式化文本 ，
		保留换行和空格及
	宽度</pre>

运行结果

4.big和small

<!-- 4.big和small：文字放大一号，缩小一号 （行级标签，不会独占一行且不识别宽高）
	big在html5中淘汰，但没有删除，在开发中尽量不要使用-->
	<!-- 浏览器支持的最小字号为12px，如果要显示比12px还小的文字效果，需要另外做处理 -->
	<p>我是正常大小的文字</p>
	<big>我大一号</big>
	<small>我小一号</small>

运行结果

5.sub 和sup


	<!-- 5.sub和sup：设置文本为下标，上标 自动调整文字显示的基线，文字会自动小一号-->
	</br>
	X<sub>1</sub>+X<sub>2</sub>=Y<sub>2</sub></br>
	X<sup>1</sup>+X<sup>2</sup>=Y<sup>2</sup>

运行结果

完整的练习代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化标签</title>
	</head>
	<body>
		<!-- 文本格式化标签：通过标签来美化文本外观 -->
		<!-- 1.b和strong：都有加粗作用且都是行级标签（不会自动换行）
		strong还有强调作用（用于SEO时，便于提取关键字 -->
		<b>加粗</b>
		<strong>加粗+强调</strong>
		
		<!-- 2.i和em：文字倾斜 em具有强调作用 且都是行级标签
		若只是简单倾斜效果用i标签 例如：添加图表等-->
		<!-- i+em Tab -->
		<i>努力学习</i>
		<em>专心搞钱</em>
	
		<!-- 3.pre：预格式化文本 ，保留换行和空格及宽度  文字的字号会小一号-->
		<pre>预格式化文本 ，
		保留换行和空格及
	宽度</pre>
	
	<!-- 4.big和small：文字放大一号，缩小一号 （行级标签，不会独占一行且不识别宽高）
	big在html5中淘汰，但没有删除，在开发中尽量不要使用-->
	<!-- 浏览器支持的最小字号为12px，如果要显示比12px还小的文字效果，需要另外做处理 -->
	<p>我是正常大小的文字</p>
	<big>我大一号</big>
	<small>我小一号</small>
	
	<!-- 5.sub和sup：设置文本为下标，上标 自动调整文字显示的基线，文字会自动小一号-->
	</br>
	X<sub>1</sub>+X<sub>2</sub>=Y<sub>2</sub></br>
	X<sup>1</sup>+X<sup>2</sup>=Y<sup>2</sup>
	</body>
</html>