7.HTML文本格式化

最新推荐文章于 2021-11-18 21:17:00 发布

P7Coder

最新推荐文章于 2021-11-18 21:17:00 发布

阅读量209

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/architect_chaser/article/details/104169955

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML文本格式化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面标题</title>
	</head>
	<body>
		<div><b>加粗文本</b></div>
		<div><i>斜体文本</i></div>
		<p>
			这是<sup>上标</sup>和<sub>下标</sub>
		</p>
		<code>
		电脑自动输出
		</code>
	</body>
</html>

其中，使用<b>来表示粗体，<i>来表示斜体，还可以似乎用<strong>和<em>来替代他们，不过<strong>和<em>语气更加强烈，说明你这个元素内容是很重要的

下面是格式化文本的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是标题</title>
	</head>
	<body>
		<big>放大字体</big>
		<br/>
		<small>缩小字体</small>
		<br/>
		<b>粗体</b>
		<br/>
		<strong>粗体（重要文本）</strong>
		<br/>
		<i>斜体</i>
		<br/>
		<em>斜体（重要文本）</em>
		<br/>
		<div>我是<sub>下标</sub></div>
		<br/>
		<div>我是<sup>上标</sup></div>
	</body>
</html>

注意了，每一个格式控制符都不是块级元素

使用`<pre>`标签保留格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是标题</title>
	</head>
	<body>
		<pre>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
		</pre>
	</body>
</html>

在这里插入图片描述

输出双引号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是标题</title>
	</head>
	<body>
		<div>
			<q>春眠不觉晓，</q><br/>
			处处闻啼鸟。<br/>
			夜来风雨声，<br/>
			花落知多少。<br/>
		</div>
	</body>
</html>

在这里插入图片描述

删除线和下划线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是标题</title>
	</head>
	<body>
		<div>
			Lenovo miix510<br/>
			<del>原价:8999</del><br/>
			<ins>现价：5599</ins>
		</div>
	</body>
</html>

在这里插入图片描述

文本格式化标签总结

在这里插入图片描述

P7Coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.HTML文本格式化

HTML文本格式化<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>页面标题</title> </head> <body> <div><b>加粗文本</b></div&gt...
复制链接

扫一扫