Gausst松鼠会

这个屌丝很懒，什么也没留下！

热门标签

HTML文本、段落标记_html #

作者：Gausst松鼠会 | 2024-02-16 11:35:27

踩

html #

HTML文本、段落标记

一、文字内容：
文字是网页的基础部分，可以通过一些HTML标记实现对文字的格式化。在需要输入文字的地方输入即可，需要添加在<body>....</body>之间
（1）标题字
在HTML中定义了六级标题，从一级到六级，每级标题字的字体大小依次递减。
基本语法：<h# align = “left | center | right | justify”>标题文字</h#>
语法说明：
1.标题标记本身具有换行的作用，标题总是从新的一行开始；
2.#用来指定标题文字的大小，#取1~6的整数值，取一时文字最大；取六时文字最小。
3.align设置标题字的对齐属性，例如left靠左，center居中

网页添加标题实例：

<!--程序20200813-01-->
<html>
<head>
	<title>网页设计与开发</title>
</head>
<body>
	<h1 align = "center">第三章 文字与段落</h1>
	<h2>3.1 文字内容</h2>
	<h3>3.1.1 添加文字</h3>
	<h4 align = left > 1)基本语法</h4>
	<h5 align = left > 2)语法说明</h5>
	<h6 align =right >返回</h6>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

浏览器查看效果：
在这里插入图片描述

（2）添加空格
通常，HTML会自动删除文字内容中多余的空格，不管文字中有多少个空格，都会被视为一个空格。为了在网页中增加空格，可以明确使用“ ”表示空格。
基本语法：
“ ”
语法说明：
输入一个空格使用一个“ ”表示，输入多少个空格就添加多少个“ ”

网页中添加空格实例：

<!--程序20200813-02-->
<html>
<head>
	<title>在网页中添加空格</title>
</head>
<body>
	这是一篇&nbsp;&nbsp;介绍HTML,CSS,JavaScript&nbsp;&nbsp;的博客
</body>
</html>
1
2
3
4
5
6
7
8
9

浏览器效果：
在这里插入图片描述

（3）文字样式
在网页中添加文字，可以利用标记及其属性对网页文字的字体、字号、颜色进行定义。
基本语法：

<font face = “” size = “”color = “”>...</font>
1

语法说明：
1.font标记的face属性用来定义字体，任何安装在操作系统中的字体都可以显示在浏览器中。可以为face属性一次定义多个字体，字体之间用“，”分隔开。
2.size属性用来定义字号，取值范围从+1~+7，-1~-7.
3.color属性用来定义颜色，其值为该颜色的英文单词或十六进制数值。

文字样式设置实例

<!--程序20200813-03-->
<html>
<head>
	<title>设置文字的字体、字号、颜色</title>
</head>
<body>
	<center>
	<font face = "黑体" size = 6 color = "red">
		我们是一个团体，不会丢下谁，不会落下谁，共同奋进！！
	</font>
	</center>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

浏览器效果：
在这里插入图片描述

（4）文字修饰
粗体、斜体、下划线
基本语法：

<b>...</b>
<i>...</i>
<u>...</u>
1
2
3

语法说明：
标记实现加粗文字显示
标记实现斜体文字显示
标记实现给文字添加下划线

文字修饰实例：

<!--程序20200813-04-->
<html>
<head>
	<title>文字的加粗、斜体和下划线</title>
</head>
<body>
	<center>
	<font color = "#FF0000" size = 3><b>这些文字是粗体的</b></font><br>
	<i>这些文字是斜体的</i><br>
	<u>这些文字带有下划线</u><br>	
	</center>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

浏览器效果：
在这里插入图片描述

（5）删除线
基本语法:

<del>...</del>
1

语法说明：
将文字放在<del>与</del>之间就可以为文字添加删除线了

（6）上标和下标
基本语法：

<sup>...</sup>
<sub>...</sub>
1
2

语法说明：
1.将文字放在...之间就可以实现上标
2.将文字放在...之间就可以实现下标

上标和下标实现实例：

<!--程序20200813-05-->
<html>
<head>
	<title>上标、下标的实现</title>
</head>
<body>
	<h2>解下列方程式</h2>
	x<sup>2</sup>-3x+2=0<br>
	解：x<sub>1</sub>=2;x<sub>2</sub>=1<br>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

浏览器效果：
在这里插入图片描述

（7）其他文字设置
1.文字标注：
基本语法：

<ruby>
被说明文字
<rt>文字的标注</rt>
<ruby>
1
2
3
4

语法说明：
将需要加标注说明的文字放在<ruby>与</ruby>之间，标注添加在<rt>...</rt>之间

2.地址文字：
基本语法：

<address>...</address>
1

语法说明：
将内容放在<address>...</address>之间，内容通常为斜体。大多数浏览器会在address元素的前后添加一个换行符。

3.等宽文字：
基本语法：

<tt>...</tt>
1

语法说明：
将文字放在<tt>...</tt>之间，可以实现打字机风格的效果。

（8）段落标记
在文本编辑器中输入的回车和额外空格将被HTML忽略，所以要在网页中开始一个段落需要通过使用标记

来实现，由

标记所标识的文字代表同一个段落的文字。
基本语法：

<p>...</p>
1

语法说明：
是段落标记，可以对文字进行段落定义，它可以单独使用，也可以成对使用。

段落实例：

<!--程序20200813-06-->
<html>
<head>
	<title>段落</title>
</head>
<body>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;五十个不同的分子，在不同的状态下进入了同一个容器，
这就组成了我们的家——多媒体专业。在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，
活力与情绪。</p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;在不停地碰撞和摩擦中，分子也不断的变化，成长着，
最终可走出这个容器，勇敢地面对、挑战外面的世界。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

浏览器效果：
在这里插入图片描述

（9）预格式化标记
要想保留原来的文字排版格式，可以通过<pre>标记来实现。
基本语法：

<pre>...</pre>
1

语法说明：
把制作好的文字排版内容前后加上预格式化标记，可以实现预格式化效果。

预格式化实例：

<!--程序20200813-07-->
<html>
<head>
	<title>原样显示文字标记</title>
</head>
<body>
	<pre>
	请记住我们是一个团体，
			不会丢下谁，
				不会落下谁，
					共同奋进！！
	</pre>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

浏览器效果
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/92774