2.文本标签-HTML基础

一、文本介绍

1.页面组成元素

在 HTML 中，主要学习如何做一个静态页面。

一个静态页面绝大部分由以下4种元素组成：

文字
图片
超链接
音频、视频

所以，想要开发一个页面，就得认真学习用来展示这些内容的标签。

（1）静态页面和动态页面的区别

是否与服务器进行数据交互。

① 不是会动的页面就叫动态页面

出现以下5种情况都不一定是动态页面：

带有 Flash 动画。

带有 CSS 动画。

带有 JavaScript 音效。

带有音频和视频。

此外，即使在页面中使用了 JavaScript ，它也不是动态页面，除非用到了后端技术。

2.HTML文本

本章主要学习以下六个方面的内容：

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

学完之后，最基本的任务是一定要把这个纯文本网页做出来。

二、标题标签

在一个 HTML 页面中，一般都包含着各种级别的标题。

1.标题标签的六个级别

在 HTML 中，共有六个级别的标题标签：h1、h2、h3、h4、h5、h6。

（1）标签重要性

这六个标题标签在页面中的重要性是有区别的，其中 h1 标签的重要性最高，h6 标签的重要性最低。

① h1唯一

一个页面一般只能有一个 h1 标签，而 h2 ~ h6标签可以有多个。其中，h1 表示的是这个页面中的最大标题。这就和我们语文中写作文一样，一篇文章只能有一个题目，而不是两个、三个...，一篇作文中却可以有多个小标题。

② 例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 <title>标题标签</title>
 </head>
 <body>
 <h1>1级标签</h1>
 <h2>2级标签</h2>
 <h3>3级标签</h3>
 <h4>4级标签</h4>
 <h5>5级标签</h5>
 <h6>6级标签</h6>
 </body>
</html>

标题标签.png

（2）标题标签的顺序性

从上图可以看到，标题标签的级别越大，字体也越大。

标题标签 h1~h6 也是有一定顺序的，h1 用于大标题，h2 用于二级标题……依此类推。

这六个标题标签不需要全部用上，根据需要来灵活应用。

（3）标题与搜索引擎优化SEO

标题标签看似简单，但是在搜索引擎优化（SEO）中扮演着非常重要的角色，这块在之后的文章中会介绍。

（4）title标签和h1标签

不要将这俩搞混淆了，title标签用于显示地址栏的标题，而h1标签用于显示文章的标题。

三、段落标签

1.段落标签:

在 HTML 中，可以使用 来显示一段文字。

（1）语法

段落内容

① 例

段落标签.png

段落标签1.png

Ⅰ.段落标签自动换行

段落标签会自动换行，并且段落与段落之间有一定的间距。

2.换行标签:

若想要随意地对文字进行换行处理，就需要换行标签。

并且， 是自闭合标签。

3.换行功能对比

（1）使用p标签换行

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 <title>段落标签</title>
 </head>
 <body>
 <h3>月出</h3>
 <p>
 月出皎兮，佼人僚兮。舒窈纠兮，劳心悄兮。月出皓兮，佼人懰兮。
 </p>
 <p>
 舒懮受兮，劳心慅兮。月出照兮，佼人燎兮。舒夭绍兮，劳心惨兮。
 </p> 
 </body>
</html>

段落标签换行.png

（2）使用br标签换行

br标签换行.png

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 <title>段落标签</title>
 </head>
 <body>
 <h3>月出</h3>
 <p>
 月出皎兮，佼人僚兮。舒窈纠兮，劳心悄兮。月出皓兮，佼人懰兮。
 <br/>
 舒懮受兮，劳心慅兮。月出照兮，佼人燎兮。舒夭绍兮，劳心惨兮。
 </p> 
 </body>
</html>

（3）二者区别

p标签会导致段与段之间有一定的间隙，而使用br标签则不会。

br标签是用来给文字换行的；p标签是用来给文字分段的。（如果内容是两段文字，则不需要使用br标签换行这么麻烦，直接使用两个 p 标签即可）

四、文本标签

1.粗体标签-strong

可使用 strong标签 或 b标签来对文本进行加粗。

（1）示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 <title>粗体标签</title>
 </head>
 <body>
 <p>普通文本</p>
 <strong>粗体文本</strong><br/>
 <b>粗体文本</b>
 </body>
</html>

粗体标签.png

去除 后，两个加粗字体在同一行显示，且之间有一定的间隙。

粗体标签1.png

（2）实际开发

在实际开发中，若要实现对文本的加粗效果，尽量使用 strong 标签，而不要选择 b 标签。

这是因为 strong 标签比 b 标签更具有语义性。

2.斜体标签-em

可使用 em标签 、i 标签或 cite标签来实现文本斜体效果。

（1）示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 <title>粗体标签</title>
 </head>
 <body>
 <i>斜体效果</i><br/>
 <em>斜体效果</em><br/>
 <cite>斜体效果</cite>
 </body>
</html>

斜体标签.png

去除 后，两个斜体字体在同一行显示，且之间有一定的间隙。

斜体标签1.png

（2）实际开发

在实际开发中，若要实现对文本的斜体效果，尽量使用 em 标签，而不要选择 i、cite 标签。

这是因为 em 标签比 i、cite 标签更具有语义性。

3.上标标签

可使用 sup 标签来实现文本的上标效果。

（1）示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 </head>
 <body>
 <p> (a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab </p>
 </body>
</html>

上标标签.png

如果你想要将某个数字或某些文字变成上标效果，只要把这个数字或文字放在标签内就可以。

4.下标标签

可使用 sub 标签来实现文本的下标效果。

（1）示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 </head>
 <body>
 <p> H<sub>2</sub>SO<sub>4</sub> </p>
 </body>
</html>

下标标签.png

如果你想要将某个数字或某些文字变成下标效果，只要把这个数字或文字放在标签内就可以。

5.中划线标签

可使用 s 标签来实现文本的中划线效果。

（1）示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 </head>
 <body>
 <p>
 <s>拒绝一切负能量</s>
 </p>
 </body>
</html>

中划线标签.png

中划线效果一般用于显示那些不正确或不相关的内容，常用于商品促销的标价。

（2）实际开发

学习CSS之后，对于删除线效果，一般用CSS来实现，几乎不会用 s 标签来实现。

6.下划线标签

可使用 u 标签来实现文本的下划线效果。

（1）示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 </head>
 <body>
 <p>
 <u>見贤思齊</u>
 </p>
 </body>
</html>

下划线标签.png

（2）实际开发

当我们学习了CSS之后，对于下划线效果，一般用CSS来实现，几乎不会用 u 标签来实现。

7.大字号标签、小字号标签

在 HTML 中，可使用 big 标签来实现字体的变大，还可使用 small 标签来实现字体的变小。

（1）示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 </head>
 <body>
 <p>
 <big>大字号</big></br>
 <small>小字号</small>
 </p>
 </body>
</html>

大小字号标签.png

（2）实际开发

在实际开发中，对于字体大小的改变，几乎不会用 big 标签和small 标签来实现，而是使用CSS来实现。

8.总结

（1）重要的文本标签

标签	语义	说明
strong	strong（强调）	粗体
em	emphasized（强调）	斜体
sup	superscripted（上标）	上标
sub	subscripted（下标）	下标

五、水平线标签

在 HTML 中，可使用 hr 标签来实现1条水平线。

1.示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 </head>
 <body>
 <p>
 <hr/>
 </p>
 </body>
</html>

六、div标签

在 HTML 中，使用的 div 标签来划分HTML结构，并配合 CSS 来整体控制某一块的样式。

1.划分区域

div，用来划分一个区域。div标签内部可以包容所有其它标签，例如：p标签、strong标签、hr标签等。

使用 div 标签来划分区域，使得代码更具有逻辑性。当然，div 标签最重要的用途是划分区域，然后结合 CSS 针对该区域进行样式控制，这一点之后的 CSS 就会知道。

七、自闭和标签

大部分标签都是成对出现的，这些标签都有一个“ 开始符号 ”和一个“ 结束符合 ”。

但有些标签是没有结束符号的，如： 、< hr/>。

1.一般标签和自闭和标签

（1）一般标签

一般标签，由于有开始符号和结束符号，因此可以在内部插入其它标签或文字。

（2）自闭和标签

自闭合标签，由于只有开始符号儿没有结束符号，因此不可以在内部插入标签或文字。

所谓的“ 自闭和 ”指的是本来要用一个配对的结束符号来关闭，然而它却自己关闭了。

标签	说明
< meta/>	定义网页的信息（供搜索引擎查看）
< link/>	引入外部CSS文件
< br/>	换行标签
< hr/>	水平线标签
< img/>	图片标签
< input/>	表单标签

八、块元素和行内元素

块元素、行内元素，是 HTML 中极其重要的概念，同时也是 CSS 的重要基础。

在浏览器预览效果，有些元素是独占一行，其它元素不能跟这个元素位于同一行，如：p、div、hr等。

而有些元素不是独占一行，其它元素可以跟这个元素位于同一行，如：strong、em等。

特别注意，所谓的“ 独占一行 ”，并不是在 HTML代码里独占一行，而是在浏览器显示效果中独占一行。

标签，也叫元素，例如批：p标签也叫 p元素，叫法不同，意思相同。

在HTML中，根据元素的表现形式，一般可以分为两类：

块元素

行内元素

1.块元素

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

此外，一般情况下，块元素内部可以容纳其它块元素和行内元素。

HTML 常见块元素

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

（1）示例

块元素示例.png

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 </head>
 <body>
 <div>
 <h3>君初见</h3>
 <p>男儿何不带吴钩，收取关山五十州。</p>
 <strong>見贤思齊</strong>
 <em>有志者，事竟成，破釜沉舟，百二秦关终属楚。
 苦心人，天不负，卧薪尝胆，三千越甲可吞吴。
 </em>
 <hr/> 
 </div>
 </body>
</html>

<!--
 ① h3 和 p 是块元素，在浏览器上的显示效果是独占一行的，并且排斥任何元素跟它们位于同一行。
 ② strong 和 em 是行内元素，即使代码不是在同一行，但在浏览器上的显示效果是位于同一行的（显示效果跟代码是否位于同一行没有关系）
 ③ h3、p、strong、em都是在 div 元素内部。也就是说，块元素内部可以容纳其它块元素和行内元素。

-->

（2）块元素特点

块元素独占一行，排斥其它元素（包括块元素、行内元素）与其位于同一行。
块元素内部可以容纳其它块元素、行内元素。

2.行内元素

在 HTML 中，行内元素跟块元素恰恰相反，行内元素是可以与其它行内元素位于同一行的。

此外，行内元素内部（标签内部）只可以容纳其它行内元素，不可以容纳块元素。

HTML 常见行内元素

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

（1）行内元素特点

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

重理解，而不是去记忆块元素有哪些、行内元素有哪些？

块元素、行内元素非常复杂，慢慢来。

九、特殊符号

1.网页中的空格

在网页排版中，为了让段落更为美观，都会让每个段落首行缩进 2 个字符。但是在默认情况下，p标签的段落文字的首行是不会缩进的。

若想要让每一个段落首行都缩进2个字符的距离，我们会下意识的在代码中按下空格以达到目的，但是这种做法是无效的。

在 HTML 中，空格也需要代码来实现，空格代码为   。

（1）示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 </head>
 <body>
 <h3>爱莲说</h3>
 <p>&nbsp;&nbsp;水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。
 予独爱莲之出淤泥而不染，濯清涟而不妖，
 中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
 </p>
 <p>&nbsp;&nbsp;予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。
 噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！
 </p>
 </body>
</html>

网页中的空格.png

2.网页中的特殊符号

（1）以&开头;结尾

在 HTML 中，若想要显示一个特殊符号，同样需要通过输入代码来实现。

这些特殊符号对应的代码，都是以&开头、并以;(英文分号)结尾。

（2）特殊符号分两类

容易通过输入法输入，不必使用代码来实现。
难通过输入法输入，需要使用代码来实现。

① 易输入的HTML特殊符号

特殊符号	说明	代码
"	双引号（英文）	& quot;
‘	左单引号	& lsquo;
’	右单引号	& rsquo;
×	乘号	& times;
÷	除号	& divide;
<	小于号	& lt;
>	大于号	& gt;
&	与	& amp;
—	长破折号	& mdash;
	竖线	& #124;

② 难输入的HTML特殊符号

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

实际上，空格  也是一个特殊符号。

只需要记住空格  这一个特殊符号就可以了，其它的遇到时查一下。

（3）示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
 </head>
 <body>
 <p>注册商标: &reg;</p>
 <p>欧元: &euro;</p>
 <p>英镑: &pound;</p>
 </body>
</html>

网页中的特殊符号.png

2.文本标签-HTML基础

一、文本介绍

1.页面组成元素

（1）静态页面和动态页面的区别

① 不是会动的页面就叫动态页面

2.HTML文本

二、标题标签

1.标题标签的六个级别

（1）标签重要性

① h1唯一

② 例

（2）标题标签的顺序性

（3）标题与搜索引擎优化SEO

（4）title标签和h1标签

三、段落标签

1.段落标签:< p>< /p>

（1）语法

① 例

Ⅰ.段落标签自动换行

2.换行标签:< /br>

3.换行功能对比

（1）使用p标签换行

（2）使用br标签换行

（3）二者区别

四、文本标签

1.粗体标签-strong

（1）示例

（2）实际开发

2.斜体标签-em

（1）示例

（2）实际开发

3.上标标签

（1）示例

4.下标标签

（1）示例

5.中划线标签

（1）示例

（2）实际开发

6.下划线标签

（1）示例

（2）实际开发

7.大字号标签、小字号标签

（1）示例

（2）实际开发

8.总结

（1）重要的文本标签

五、水平线标签

1.示例

六、div标签

1.划分区域

七、自闭和标签

1.一般标签和自闭和标签

（1）一般标签

（2）自闭和标签

八、块元素和行内元素

1.块元素

HTML 常见块元素

（1）示例

（2）块元素特点

2.行内元素

HTML 常见行内元素

（1）行内元素特点

九、特殊符号

1.网页中的空格

（1）示例

2.网页中的特殊符号

（1）以&开头;结尾

（2）特殊符号分两类

① 易输入的HTML特殊符号

② 难输入的HTML特殊符号

（3）示例