在HTML中,文本是HTML中最基本的内容之一,为此HTML提供了诸多元素让本文更加清晰有条理,并且拥有更多的功能。
1.HTML文档的头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
在上一篇文章提到过,我们的一个HTML标准文档如上。
在HTML文档的头部(<head>元素)中,除了一些基本的元素外,还有更多为文本添加功能的元素。
比如,上述中的<title>元素,用于定义当前文档的标题,告诉用户你的这个页面的主要标题以及作用,这个元素内的文本通常会显示在浏览器窗口的标题栏或者标签页上面。
现在如果你在<title>元素中输出“Hello !”,像这样:
<title>Hello!</title>
当你回到浏览器,进行刷新时,你会发现你这个页面的标签处就变成了“Hello !”
2.HTML的文本排版
我们写的每一个页面,就像一张张报纸一样,分为了不同的区块,有者各自的标题、内容、图片等等,但如果我们再写页面的时候只是将大段的文字插入进去,整个页面会看上去非常糟糕!
这只是一小段文字,当更多的文字被输入进去,我们就没有去阅读这个页面的欲望,所以为了让这些文本变得更加清晰易读,我们会列举几个简单的元素
(1)<p>:p元素可以插入一些文本段落,可以用于文章的主要内容。
(2)<h1>-<h6>:这些标签可以用于给文本添加标题而<h1>就是一级标题,也就是做高级别的主标题,<h2>则是二级标题,剩下的以此类推即可。
<h1>
我是一级标题
<h2>
我是二级标题
<h3>
我是三级标题
</h3>
</h2>
</h1>
这样我们就能得到下面的效果:
标题元素虽然一直到六级,但是一个页面的标题在2~3级即可,过多会使得文本让人看得眼花缭乱。
(3)<span>:这个标签虽然没有特殊的语义,但是他可以通过CSS对内部的内容进行样式化。
我们可以通过CSS调整内部的文本字体大小,颜色的变化,也可以起到标题的效果。
<span style="
font-size: 50px;
color: aqua;
">
我是一句话。
</span>
<!-- 对比一下普通的span元素 -->
<span>
我是一句话。
</span>
我们在浏览器的页面上很容易就可以看到更改后的<span>元素的变化
(4)列表:列表又分为有序列表和无序列表,在这里我们会介绍三种元素
①<li>:这是列表中的一个子元素,有序和无序列表中均可使用
②<ol>:有序列表
③<ul>:无序列表
一个列表的创建只需要将<li>元素嵌套在②或③之间下面我们通过举例来看看这两种列表有什么区别。
我们先创建一个有序列表的:
<ol>
<li>小猫</li>
<li>小狗</li>
<li>小猴</li>
<li>小鱼</li>
</ol>
这样我们就能在浏览器上看到:
下面我们在写一个无序列表的:
<ul>
<li>小猫</li>
<li>小狗</li>
<li>小猴</li>
<li>小鱼</li>
</ul>
这样我们会发现前面的数字变成了一个个点:
这就是有序列表和无序列表的区别,非常容易理解对吧(得意龙图.jpg)
当然!很多人对于无序列表的小黑点很不满意,他们更希望把这个黑点去掉,那么该怎么做呢?
<ul>
<li style="list-style-type: none;">小猫</li>
<li>小狗</li>
<li>小猴</li>
<li>小鱼</li>
</ul>
我们只要给其中一个<li>元素添加上面的一段代码即可,这样我们会发现“小猫”那一行的黑点消失了:
当然如果你想一下子把所有的黑点全部消去的话我们还有很多种方法:
<ul style="list-style-type: none;">
<li >小猫</li>
<li>小狗</li>
<li>小猴</li>
<li>小鱼</li>
</ul>
把刚刚那行代码嵌入到<ul>这个大的元素内,则整个列表的<li>元素的黑点都会全部消失。
(5)<br>:用于文本的换行,这个元素不是一个闭合的元素,当你想要在文本之中换行时,我们只需要添加这个标签即可。
这时可能有人会有疑问,我们为什么不能在文本直接回车换行?就像这样子:
<p>
从前有座山
山里有座庙
庙里有个人正在打开CSDN
</p>
但是当我们打开浏览器的时候,会发现文本的布局并非是我们想象的那样:
这是因为在HTML中,无论我们输入多少个空格,编辑器都会把他识别成一个空格~
所以此时此刻我们就需要用到<br>元素
我们试着在每一行后面加一个元素:
<p>
从前有座山<br>
山里有座庙<br>
庙里有个人正在打开CSDN<br>
</p>
这次再打开显示器我们就能得到我们想要的画面:
(6)<hr>:这个元素的目的是添加一条横线,可以用来给一段文本进行简单的分区。
3.强调文本
当我们去看很长一段话时,我们难以在短时间内找到重点信息,这时我们便可以用一些有强调效果的元素。
(1)<strong>:在上一篇文章中我们见到,这个标签可以让字体加粗,起到强调效果。
<p>乐高集团是一家总部位于<strong>丹麦</strong>的国际玩具制造商</p>
我们可以看到,被<strong>元素裹起来的文本字体变粗了,和周围的文字比起来有强调效果。
(2)<em>:使文本变成斜体
<p>乐高集团是一家总部位于<em>丹麦</em>的国际玩具制造商</p>
(3)使用CSS对文字进行样式化:CSS(层叠样式表),后面会详细讲到,我们可以通过CSS对字体进行颜色,大小的改变,同样可以起到强调的效果。
4.特殊元素
在HTML中,我们有时候会遇到一些特殊的符号,下面有一个表格可供参考:
特殊字符 | 对应元素 |
上角标 | <sup> |
下角标 | <sub> |
以上就是文本的处理的相关内容:)
标签:标题,元素,列表,文本处理,HTML,文本,我们 From: https://blog.csdn.net/2401_84944910/article/details/143449719