适合0基础的web开发系列教程-文本格式标签汇总

Posted yyjcw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了适合0基础的web开发系列教程-文本格式标签汇总相关的知识,希望对你有一定的参考价值。

html标签主要是起结构的作用,布局的效果主要靠css完成,比如颜色、背景、字体大小、对齐等。

不过html标签中也有一些常用的文本格式化标签,能对文本内容进行简单的格式设置。

比如加粗文字、定义斜体、定义小号字、下划线、删除线、上标和下标等。

技术分享图片

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>夜鹰教程网</title>
	</head>
	<body>
		<i>斜体www.yyjcw.com</i><br>
		<em>斜体www.yyjcw.com</em><br>
		<strong>加粗www.yyjcw.com</strong><br>
		<b>加粗www.yyjcw.com</b><br>
		<ins>下划线www.yyjcw.com</ins><br>
		<del>删除线培训机构</del><br>
		<small>小号字www.yyjcw.com</small><br>
		<p>X<sup>2</sup>+Y<sup>2</sup>=Z<sup>2</sup></p>
	</body>
</html>

 效果如下:

技术分享图片

 

另外,有时候需要在网页里面显示html代码,而不是把代码解析成效果。

我们可以使用pre标签或者xmp标签:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>夜鹰教程网</title>
	</head>
	<body>
		<xmp>
			<i>斜体www.yyjcw.com</i><br>
			<em>斜体www.yyjcw.com</em><br>
			<strong>加粗www.yyjcw.com</strong><br>
			<b>加粗www.yyjcw.com</b><br>
			<ins>下划线www.yyjcw.com</ins><br>
			<del>删除线培训机构</del><br>
			<small>小号字www.yyjcw.com</small><br>
			<p>X<sup>2</sup>+Y<sup>2</sup>=Z<sup>2</sup></p>
		</xmp>
	</body>
</html>

  

显示效果

 

技术分享图片

 

使用pre的时候要注意,html中的< 和 >符号要用:

 

以上是关于适合0基础的web开发系列教程-文本格式标签汇总的主要内容,如果未能解决你的问题,请参考以下文章

适合0基础的web开发系列教程-列表制作

适合0基础的web开发系列教程-教程概述

Qt入门系列开发教程基础控件篇QLabel文本标签

零基础入门前端系列—超链接和文本格式化标签

前后端分离的Web系统开发 Springboot Vue系列教程- Springboot项目的创建

Web开发——JavaScript基础(JSON教程)