四、文本

最新推荐文章于 2024-02-21 12:30:00 发布

m0_47589828

最新推荐文章于 2024-02-21 12:30:00 发布

阅读量164

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/m0_47589828/article/details/112052662

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

4.1文本简介

一、页面组成元素

静态页面都是由以下4种元素组成的。
（1）文本
（2）图片
（3）超链接
（4）音频和视频
静态页面和动态页面的区别在于：是否与服务器进行数据交互。

二、HTML文本

（1）标题标签
（2）段落标签
（3）换行标签
（4）文本标签
（5）水平线标签
（6）特殊符号
网页样例

4.2 标题标签

在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。其中h是header的缩写。6个标题标签在页面中的重要性是有区别的，其中h1标签的重要性最高，h6标签的重要性最低。

这里要注意一下，一个页面一般只能有一个h1标签，而h2到h6标签可以有多个。其中，h1表示的是这个页面的大标题。

<!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>

浏览器预览效果
h1~h6标题标签看起来很简单，但是在搜索引擎优化中却扮演着非常重要的角色。

4.3 段落标签

一、段落标签`<p></p>`

使用“p标签”来显示一段文字。

<p>段落内容</p>

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

二、换行标签`<br/>`

如果想对文字进行换行，有两种方法：要么使用两个p标签；要么使用br标签。
在HTML中，可以使用br标签来给文字换行。其中<br/>是自闭合标签，br是break（换行）的缩写。
使用p标签会导致段落与段落之间有一定的间隙，而使用br标签则不会。

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

4.4 文本标签

在HTML中，我们可以使用“文本标签”来对文字进行修饰，例如粗体、斜体、上标、下标等。常用的有8种文本标签。
（1）粗体标签：strong、b
（2）斜体标签：i、em、cite
（3）上标标签：sup
（4）下标标签：sub
（5）中划线标签：s
（6）下划线标签：u
（7）大字号标签：big
（8）小字号标签：small

一、粗体标签

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

在这里插入图片描述
分析：
从预览图可以看出，strong标签和b标签的加粗效果是一样的。不过在实际开发中，如果想要对文本实现加粗效果，尽量使用strong标签，而不要使用b标签。这是因为strong标签比b标签更具有语义性。

二、斜体标签

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>斜体标签</title>
</head>
<body>
    <i>斜体文本</i><br/>
    <em>斜体文本</em><br/>
    <cite>斜体文本</cite>
</body>
</html>

在这里插入图片描述
分析：
在实际开发中，如果想要实现文本的斜体效果，尽量使用em标签，而不是i标签或cite标签。这也是因为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>

在这里插入图片描述

四、下标标签

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

在这里插入图片描述

五、中划线标签

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

在这里插入图片描述
等学了CSS之后，对于删除线效果，一般用CSS来实现，几乎不会用s标签来实现。

六、下划线标签

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>下划线标签</title>
</head>
<body>
    <p><u>绿叶学习网</u>是互联网最精品的Web技术学习网站。</p>
</body>
</html>

在这里插入图片描述
等学了CSS之后，对于下划线效果，一般用CSS来实现，几乎不会用u标签来实现。

七、大字号标签和小字号标签

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

在这里插入图片描述
在实际开发中，对于字体大小的改变，我们几乎不会用big标签和small标签来实现，而是使用CSS来实现。

表1 重要的文本标签

4.5 水平线标签

在HTML中，我们可以使用“hr标签”来实现一条水平线。hr，是horizon（水平线）的缩写。

<hr/>

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

在这里插入图片描述

4.6 div标签

在HTML中，可以使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。
使用水平线标签代码样例（4.5）代码结构比较混乱，可以使用“div标签”来划分一下区域。

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

预览效果一样，但实际代码却不一样。

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

4.7 自闭合标签

在HTML中，标签分为两种：一般标签和自闭合标签。
（1）一般标签：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。
（2）自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。
在HTML中，常见的自闭合标签如下表所示。

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

4.8 块元素和行内元素

在浏览器预览效果，有些元素是独占一行的，其他元素不能跟这个元素位于同一行，如p、div、hr等。而有些元素不是独占一行的，其他元素可以跟这个元素位于同一行，如strong、em等。特别注意一下，这里所谓的“独占一行”，并不是在HTML代码里独占一行，而是在浏览器显示效果中独占一行。
在HTML中，根据元素（即标签）的表现形式，一般可以分为两类（暂时不考虑inline-block）。
（1）块元素（block）
（2）行内元素（inline）

一、块元素

在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。

表1 HTML常见块元素

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

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

二、行内元素

在HTML中，行内元素跟块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。

表2 HTML常见行内元素

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

（1）行内元素可以与其他行内元素位于同一行。
（2）行内元素内部可以容纳其他行内元素，但不可以容纳块元素。

4.9 特殊符号

一、网页中的“空格”

在网页排版中，为了让段落美观一些，我们都会让每一个段落首行缩进两个字的空格。不过在默认情况下，p标签的段落文字“首行”是不会缩进的。

空格的代码是：

&nbsp;

1 个汉字约等于 6 个  。因此如果想要往 p 标签内加入 2 个空格，那么我们需要往 p 标签内加入 6 个 。

二、网页中的“特殊符号”

在HTML中，如果想要显示一个特殊符号，也是需要通过代码形式来实现的。这些特殊符号对应的代码，都是以“&”开头、并且以“;”（英文分号）结尾的。这些特殊符号，可以分为两类。
在这里插入图片描述

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

以上学习参考绿叶学习网

m0_47589828

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
四、文本

4.1文本简介一、页面组成元素静态页面都是由以下4种元素组成的。（1）文本（2）图片（3）超链接（4）音频和视频静态页面和动态页面的区别在于：是否与服务器进行数据交互。二、HTML文本（1）标题标签（2）段落标签（3）换行标签（4）文本标签（5）水平线标签（6）特殊符号4.2 标题标签在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。其中h是header的缩写。6个标题标签在页面中的重要性是有区别的，其中h1标签的重要性最高，h6标签的重要性最低。
复制链接

扫一扫