2.文本标签-HTML基础

见贤思齊

发布于 2022-01-11 10:19:18

3.3K0

发布于 2022-01-11 10:19:18

文章被收录于专栏：初见Linux

一、文本介绍

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020.09.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

css

登录后参与评论

0 条评论

热度