HTML——＞文本

最新推荐文章于 2024-07-30 20:45:39 发布

省级干饭王

最新推荐文章于 2024-07-30 20:45:39 发布

阅读量885

点赞数

分类专栏：笔记 html

本文链接：https://blog.csdn.net/qq_55016379/article/details/116301272

版权

笔记同时被 2 个专栏收录

94 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

文本

在HTML中，我们主要学习怎么来做一个静态页面

静态页面的四种元素：文字，图片，超链接

HTML文本

html烦人六种标签：

标题标签
段落标签
换行标签
文本标签
水平线标签
特殊符号

标题标签

对于一个HTML页面来说，一般都会有各级别的标题

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

标题标签

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

段落标签

段落标签

语法结构：段落内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落内容</title>
	</head>
	<body>
		<h3>《临江仙》</h3>
		<p>滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。
　　白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。</p>
	</body>
</html>

段落内容

《临江仙》

滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。　　白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。

可以看出，段落标签会自动换行

HTML用于控制页面的结构，CSS用于控制网页的外观

换行标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>换行标签</title>
	</head>
	<body>
		<h3>静夜思</h3>
		<p>窗前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
		<hr/>
		<h3>静夜思</h3>
		<p>窗前明月光，疑是地上霜。</p>
		<p>举头望明月，低头思故乡。</p>
		<hr/>
		<h3>静夜思</h3>
		<p>窗前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>
	</body>
</html>

换行标签

静夜思

窗前明月光，疑是地上霜。举头望明月，低头思故乡。

静夜思

窗前明月光，疑是地上霜。

举头望明月，低头思故乡。

静夜思

窗前明月光，疑是地上霜。
举头望明月，低头思故乡。

我们可以看到，p标签会导致段落与段落之间有一定的间隙，而使用br标签则不会

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

文本标签

文本标签一共有八种

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

粗体标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本标签</title>
	</head>
	<body>
		<p>这是普通文本</p>
		<strong>这是加粗文本</strong><br/>
		<b>这是加粗文本</b>
	</body>
</html>

文本标签

这是普通文本

这是加粗文本
这是加粗文本

尽量使用strong标签作为自己的粗体标签

斜体标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>斜体文本</title>
	</head>
	<body>
		<p>这是普通文本</p>
		<i>斜体文本</i><br/>
		<em>斜体文本</em><br/>
		<cite>斜体文本</cite>
	</body>
</html>

斜体文本

这是普通文本

斜体文本
斜体文本
斜体文本

尽量使用em作为自己的斜体标签

上标标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>上标标签</title>
	</head>
	<body>
		<p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
	</body>
</html>

上标标签

(a+b)²=a²+b²+2ab

如果想让某个数字或字符变成上标，只需要把这个数字或字符放在标签中即可

下标标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下标标签</title>
	</head>
	<body>
		<p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
	</body>
</html>

下标标签

H₂SO₄指的是硫酸分子

同上标标签，如果想要把某个数字或字符变成下标，只需要把这个数字或字符放在标签中间即可

中划线标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>中划线标签</title>
	</head>
	<body>
		<p>新鲜的新西兰奇异果</p>
		<p><s>原件：￥6.50/kg</s></p>
		<p><strong>现价：￥4.00kg</p>
	</body>
</html>

中划线标签

新鲜的新西兰奇异果

~~原件：￥6.50/kg~~

现价：￥4.00kg

下划线标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下划线标签</title>
	</head>
	<body>
		<p><u>绿叶网</u>是一个不错的学习web前端开发的网站</p>
	</body>
</html>

下划线标签

绿叶网是一个不错的学习web前端开发的网站

大字号标签和小字号标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>big标签和small标签</title>
	</head>
	<body>
		<p>普通字体文本</p>
		<big>大字号文本</big><br/>
		<small>小字号文本</small><br/>
	</body>
</html>

big标签和small标签

普通字体文本

大字号文本
小字号文本

水平线标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平线标签</title>
	</head>
	<body>
		<h3>静夜思</h3>
		<p>窗前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>
		<hr/>
		<h3>春晓</h3>
		<p>春眠不觉晓，处处闻啼鸟。<br/>夜来风雨声，花落知多少。</p>
		
	</body>
</html>

水平线标签

静夜思

窗前明月光，疑是地上霜。
举头望明月，低头思故乡。

春晓

春眠不觉晓，处处闻啼鸟。
夜来风雨声，花落知多少。

div标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平线标签</title>
	</head>
	<body>
		<!--这是第一首诗-->
		<div>
			<h3>静夜思</h3>
			<p>窗前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>
		</div>
		<hr/>
		<!--这是第二首诗-->
		<div>
			<h3>春晓</h3>
			<p>春眠不觉晓，处处闻啼鸟。<br/>夜来风雨声，花落知多少。</p>
		</div>
	</body>
</html>

水平线标签

静夜思

窗前明月光，疑是地上霜。
举头望明月，低头思故乡。

春晓

春眠不觉晓，处处闻啼鸟。
夜来风雨声，花落知多少。

div标签的作用是划分区域

自闭合标签

html中的标签可以大致分为两种：一般标签和自闭合标签

特点：

一般标签：由于由开始符号和结束符号，因此可以在内部插入其他标签或文字
自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符来关闭，它却自己关闭了

常见的自闭合标签

标签	说明
< meta />	定义网页的信息
< link/ >	引入“外部CSS文件”
< br/ >	换行标签
< hr/ >	水平线标签
< img/ >	图片标签
< input/ >	表单标签

块元素和行内元素

在浏览器效果时，我们可以发现有些元素时独占一行的，有些却能和其他的元素一同出现

用过上述ed不同，我们把HTML中的标签（元素）分为两种：块元素，行内元素

块元素

块元素在浏览器显示状态下将占据整一行并且排斥其他元素与其位于同一行。

一般情况下，块元素可以容纳其他块元素或行内元素

html中常见的块元素

块元素	说明
h1~h6	标题元素
p	段落元素
div	div元素
hr	水平线
ol	有序列表
ul	无序列表

代码实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>块元素与行内元素</title>
	</head>
	<body>
		<div>
			<h3>绿叶学习网</h3>
			<p>“绿叶，给你初恋般的感觉”</p>
			<strong>绿叶学习网</strong>
			<em>“绿叶，给你初恋般的感觉”</em>
		</div>
		
	</body>
</html>

块元素与行内元素

绿叶学习网

“绿叶，给你初恋般的感觉”

绿叶学习网 “绿叶，给你初恋般的感觉”

</body>

通过上述，我们可以得到块元素的两大特点：

块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行
块元素内能够包容其他块元素或行内元素

行内元素

行内元素内部只可以容纳其他行内元素，不能容纳哦块元素

HTML中几种常见的行内元素

行内元素	说明
strong	粗体元素
em	斜体元素
a	超链接
span	常用行内元素，结合CSS定义样式

行内元素的特点：

行内元素与其他行内元素位于同一行
行内元素可以容纳其他行内元素，但不可以容纳块元素

特殊符号

网页中的空格

在网页排版时，空格不能通过在文本中按下“space键”来实现，在html中，需要通过&nbsp；代码来实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页中的“空格”</title>
	</head>
	<body>
		<div>
			<h3>《临江仙》</h3>
			<p>
	滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。
　　白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。
			</p>
		</div>
		<div>
			<h3>《临江仙》</h3>
			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。
　　白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。</p>
		</div>
		
	</body>
</html>

网页中的“空格”

《临江仙》

**要点**：

一个汉字相当于3个&nbsp；因此，想要往标签中加上两个空格，需要打三个&nbsp；

网页中的特殊符号

网页中的特殊符号有些可以直接打入，有些需要通过代码实现

网页中的特殊符号格式都是以**&开始以；**结束的

网页中的特殊符号大致分为两类：

容易从输入法中输入的，不必通过代码实现
难以从输入法中输入的，必须通过代码实现

HTML特殊字符（易输入）

特殊符号	说明	代码
"	双引号（英文）	&quot；
’	左单引号	&lsquo；
’	右单引号	&rsquo；
x	乘号	&times；
÷	除号	&divide；
>	大于号	&gt；
<	小于号	&lt；
&	“与”字符	&amp；
—	长破折号	&mdash；

特殊符号	说明	代码
\|	竖线	&#124；

HTML特殊字符（难书入）

特殊符号	说明	代码
§	分节符	&sect；
©	版权符	&copy；
®	注册商标	&reg；
™	商标	&trade；
€	欧元	&euro；
£	英镑	&pound；
¥	日元	&yen；
°	度	&deg；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>特殊符号</title>
	</head>
	<body>
		<p>欧元符号：&euro;</p>
		<p>英镑符号:&pound;</p>
	</body>
</html>

特殊符号

欧元符号：€

英镑符号:£