Web前端网页制作初级教程 11.body标签中常用的标签之文本及文本格式标签 学习猿地原创

好，我们继续来上课，那下节课呢，我们看完我们had的标签中常用的标签，那么这节课呢，我们再来看包的标签中常用的标签，那首先呢，我们先来看文本与文本格式标签啊，那么第一个叫什么呢？叫做P标签，P标签什么意思呢？叫做段落标签对吧？那好，我们来看一下在这里面。我们新建一个pap的，不对，是文件对吧，然后叫做零四文本。及文本格式表现。好了，那么在这里边我们要认识的第一个标签，诶，这里面的头还是什么，还是四个头是吧，我们给它换一下啊，在这里面点击。重复啊，就这图。删除完以后我重新创建。H文件这个我给选择HT5的啊，然后再来这个词叫做文本。及文本格式表现。好了。标题我们可以直接设置对吧，叫做文本及文本格式标签。

那么第一个标签叫做什么叫做段落标签啊？杠杠杠杠，来个。啊，叫做段落。表现啊，那咱们就要回想一下段落是什么样子，是不是你上行文本和下行文本都是间隔一行，然后开头空两格，这是因为我们在平时所学习当中的段落对吧？那比如说在这里边我们一样给了一个P标签。这里面说一句话，比如说80岁。老太太为何意外？怀孕啊，200头。母猪为何败叶？惨叫。女生宿舍为何频频被盗？好，再来。这是。人性的。扭曲还是？道德的沦丧，请看下集见魁。

不归。好，那咱们来看啊，我在这里边写了这么一段内容，对吧，那么接下来我们来看这个段落的效果。有什么效果吗？虽然没看出来啊，对不对，那怎么样，我们把这些内容啊，多复制两个啊来CTRLCCTRLVVV，好，这个时候我们再来刷新。有这么一段对吧，那么咱说了它叫段落，什么叫段落呢？你看好了，如果说在这里面，我把这个P标签再复制一下CTRLC。本周微。再来刷新，你看它以上行这个文本是不是中间是间隔口对吧，这里面是不是间隔一行，其实这块也是间隔一行的，对吧，只是怎么样，只是它由于是最底我们看不出来而已，对吧？或者是没注意到而已，实际上那也就是说当我们设置这么一个段落以后啊，在这里面我们设置一个段落以后，它只会有一个效果，什么效果啊，就是以上行文本加本跟间隔一行，你看这是不是间隔一行。

对吧，同样我上面再写任何的，它也是间隔一行的效果，你看你在这个P后边啊，我们直接给叫做。我是段落之外的内容，那你看那这个内容与上面的内容是不是中间也是有这一条间隔对不对？哎，这就是咱们的段落标签，那有人会问，那不对啊，跟我们之前学的段落不一样，我们之前学的段落是不是开头的空两格，而这个段落并没有了？啊，大家记住，在我们去学习HTM过程中，所有的标签都叫做语义化标签啊，都叫语义化标签，这个语义化标签它不是给我们来用，给谁来用的，它是给浏览器来用的，当浏览器执行到这个P标签以后，那么浏览器可以识别到这个P是一个段落。明白吧，要么你想想，我要在这个浏览器里面，我在这个包里面，我写这么多内容，对吧，比如说不不加标签对吧，我就写这么多内容，那么浏览器他哪知道我写的是什么东西，对不对，所以他能够在这上展示了，所以我想让浏览器知道我在这块写的是什么东西，对吧？那怎么办？我可以对对应的这个P标签来给它包含，当我用P标签给包含以后，那么就代表了什么意思啊，就代表了我这块写的是一个什么，是一个段落。

啊，我这边写的是一个段落，浏览器能识别到，所以大家记住我们在写这些标签，不是给我们用的，给谁用的，是给浏览器用的，是为了让浏览器跟识别的，这个是咱们的第一个标签，P标签，一个段落标签，好，那么段落标签完事以后咱们再来看啊。这个段落标签我们刚才也看到了，如果说这里面的内容，你看这里面内容其实并没有占满这一行，对不对，但是呢，只要是加上段落以后，它是不是都会隔行啊。我说吧，哎，那咱们来看，那我再用别的标签啊，做了标签它会读在一行，你看好了，比如说在这里边啊来我把它都删掉，都删掉是不是只留这一句了，对吧，只留这一句你看再刷新。

是不是也是一行的看到吧，我第二行内容并没有上来，看到了吗？也就是说只要是被这个段落标签所包含的这个内容，就哪怕你不不到一行，它也不干嘛，是不是独在一行对吧？所以这种标签它还有个名称叫什么呢？叫做块状标签啊，叫做块状标签，那什么叫块状标签在这里边。嗯。我再给他记一下。错了标签。为什么呀，会独占。一行对吧，并且与开头，并且与上行文本。文本和下行文本。间隔。一行对吧，就是段落啊，那么段落标签咱们说了，如果内容如果段落中。

的内容不足一行也会占为一行对吧，也就该标签会占为一行啊，所以该标签被称为什么呀。块状标签啊，所以该标签也叫。负二做标签。也叫。块状。标签啊，那换句话来说，我们块状标签的特点啊，不光注意块状标签，不光是div啊，什么叫叫做块状标签啊，独占一行的标签。就是。块状标签，哎，你先这么记啊，等我讲csi的时候，我还会再来强调这个东西啊，还会再强调块状标签，有块状标签有什么，有行内标签啊，行内元素，那咱们来看什么叫行内标签呢？比如在这里边啊。在他的后边，我继续写，写一个什么呢？我先给个HR啊，HR标签是一线，也就是我拉了一对吧平标签。这里面这个叫做水平线的标签。

条线啊好了，然后接下来我在这里面写叫什么呢？叫做这个在工作中学习。在。学习中。工作好，那么现在咱们看啊，我这里面只写了这么一段内容，对吧，那么好了，在这一段内容当中，我给他最外层套了一个什么一个B标签，结束的B标签，好了，现在各位你来看，当我掏了B标签以后，它是什么效果的啊，来开始。你看整个这个内容是不是比其他的要粗啊，这个B报销干嘛呢，就是加粗啊。多加粗就是加粗意没有任何意义，明白吧，加粗B就代表什么呀，代表的是Bo加粗。那么另外还有一种加粗的叫什么呢？叫做状标签。你再来看SSPG，是说结束了SSPG对吧，比如说在这里面我再写一个叫做成就自己的持虚。

一套精品，好，那么现在咱们来看再来刷新，诶，你看两个字不都加出的效果对不对，而且大家注意了啊，他们两个有独占一行吗？没有吧，无论是B标签还是只做标签，是不是它们两个都在一行了？哎，所以这种标签啊，它叫什么呢？它就叫做行列元素。行内元素啊什么的，行内元素不会独占一行对吧？哎，很简单，不会独占一行呢，它就会称为什么称为行内元素啊，所以后期我们还会遇到这样的标签啊，而且会遇到很多这样的标签，所以在这里跟大家先提，先给大家提一下啊，先要来清楚来知道就可以了啊。好了，那咱们来看，那这个B跟矢状都是扎出的效果，对不对，那他们两个到底有什么区别呢？实际上有区别啊，这个B它属于什么呢？它属于无比标记。

物理标记。啊，就是代表了出的意思啊。而这个死状呢，他。是什么逻辑标记？叫逻辑标记啊，它是强调的意思，强调强调某段文本。段文效果是什么样？效果是加粗。加粗效果加粗，所以比如说在这里边对吧，在这里边比如说我说八岁了，他为何意外怀孕对吧？这个意外怀孕我给他干嘛呢？我给他强调一下，让他变成什么，变成加粗的对吧？所以在这里边我给他SSPR时状，然后在这里面结束的时状对吧？强调某到文本，那这个时候你看来整理。100块钱是加数了，对不对？哎，这个时候我们一般用什么？用strong比较多，但是对于现在来说，你无论用strong也行，还是在这里边我用B对吧，就是单纯的给它加粗是不是也是强道对吧，这样也可以。

你看是不是也没问题，对不对，哎，所以它不管你怎么用，你用哪个都可以，这个B咱说了物理标记对吧，它属于属于HTML的语法啊，而这个矢状呢，实际上它属于什么呢？属于叉HTM2的语法啊，叉语法，但是我们已经说了，我们现在干嘛呀，叉HMR是不是已经死掉了，对不对，哎，所以我们不需要去理会它啊，但是呢，都有这样的标签啊，也会有人去用，那我们就需要什么，需要知道啊，需要知道，那么跟它对应的还有一对标签叫什么呢？叫做。鞋底。鞋底标的。啊，那这里面我来一个II标签代表的是什么？代表的是我们的斜体对吧，那I就是什么物理标记。物理教育itic it。At斜体的意思，比如说我是斜体，好了，那现在咱们来看。

周。你看是不是斜了对吧，那同样跟它对应的也有一个什么，也有一个逻辑标记。逻辑标记。叫做什么em？结束的em叫卧室斜体，那你再来看。中。你看是不是也一样的啊，所以这个em它也属于什么，它也属于叉HTML的语法，HT的语法啊好，这就是咱们的这个，呃，加粗标记和什么和咱们的斜体标记啊，那么另外咱们来看，无论是加粗还斜体，它们是不是都不不在一行对吧？所以他们都属于行内元素，那么我要想给它换行怎么办呢？我需要在这两个标签中间去加，比如说加一个BR标签，BR标签代表什么呢？代表的就是我们的换行标签。好。现在我们再来看周。看是不是换到上一行来了对吧？哎，把这两个，把这个一对对吧？I em换到下一行对吧？同样在这里边我也可以进行签到，比如说在这块这个200头母猪为何半夜惨叫对吧？这个半夜惨叫我给你加什么，加一个，比如这里边我加I啊，加一个I。

再来一个结束的，哎，对吧，但是这个哎，再说了，不是为合着啊，是在半夜惨叫着对吧，那同样这个半夜惨叫，我给加一个什么，加个E。结束了，眼看在这里边，我再来刷新。来，你看半叶材料是不是变斜体了，这个半叶材料是不是变斜体了，哎，但是我再来说一遍，现在不管你用哪一个，对吧，你是在这里面用B也好，用I也好，对吧，或者是用strong也好，或用em都行啊都行啊都行好了，这就是咱们的这个。鞋底标记，那么鞋底标记完事以后，我们还有什么呢？还有下划线标签。有下划线。

啊，有下划线也有什么呢，还有三足线。三出线啊，三出线里边有两个，也有两个标签啊，一个叫什么呢？一个叫做S，一个叫做DL，两个都可以啊，来比如说在这里面我们一个演示啊，来比如说U标签，结束的U标签叫做我是下划线。标签对吧，然后呢，在这块我们来。你看是不是在这下面有下线了，对吧，那一般我们用它干嘛呢？比如说我们在这里边，我们给它一个P标签对吧，叫做请您输入。内容对吧，输入什么内容呢？输入一个。一个U。结束的U对吧？这里面来个按NBP一个空格A单位CTRLCCTRLVVV好了，比如我给他四个空格啊，那现在来整理，你看请您输入内容后面是不是给让你输内容地方啊对吧？当然现在我们输入不了内容啊，因为什么？因为我们现在还不会什么，不会往这个标签里面写东西对吧？那么想输入内容后期需要通过什么，通过GS才能实现啊，那么或者是通过我们的这个放表单，那通过放表单来实现不是这样的效果了，对吧？如果想实现这样效果，你一点击这就可以在这后面输入内容，那就需要通过来实现了啊好了，这就是咱们这个下划线标签，那他说有下划线，有删除线标签对吧？那这里边一样DL。

结束，DR叫做我是删除线标签。那这里面再来个S我。也是。好了，再来看走。你看我是三主线标签，我也是是不是都可以删除的对吧？啊也一样，这两个你用哪个都可以啊，然后呢，这里面三除线一般我们用的，你比如说对于商品价格而言啊，来个批标签。一个段落对吧，比如说商品名称啊某某。

复刻版。出口版对吧，然后呢，商品价格对吧，比如商品的原价。原价原价多少原价了。998。九。九八对吧，但是呢，原价一般都是什么，都是什么删除的对吧，比如说我就用S了啊，来一个再来一个结束的。S对吧，然后呢，限价。会员价格诶。给周总给他一个，比如说这里面同样我再来一个呃B吧，我们现在没学过颜色标签对吧，不会给颜色啊，因为这个我们还没学CSS对吧，那咱就来个B啊B标签，然后B标签这里边我们直接来一个什么呢？来一个DOLLAR98。好了，然后这里边我可以干嘛，我还可以嵌套啊，比如说我让他标上下划线对吧，给个U结束的U好了，现在你看是不是我让他加粗再加标上下划线呢？那这个时候我们来看。

周你，诶，它都在一行了，不好看对吧，怎么办？我可以给它加一个BR，什么都换行了，BR在这块也来一个BR好了，给两个就行了，最后尾这一行我就不需要了，对不对？那这个时候我们再来看这题。商品名称是不什么复合板商品原价998，是不是来拉个红线啊。三值了对吧，然后会员价格。是98，而且加穷对吧，包括也有小划线对吧？哎，这就是我们常用的这几个标签啊，那么三除间呢，或者消划线，那么当然后期我们也可以通过进那个CSS来设置这些下划线三组线的样式啊。好，那这些标签完事以后，我们再来看什么呢？比如说我想在浏览器里面去写，写什么呢？写一个十的二次方，十的二次方是什么样的。是不是这样的？是不是这样的对吧？哎，那么这个时候咱们来看啊，我能直接十十。算了，来个P标签啊，在P标签里面来个12行吗？

整理这个时候咱们看是不是102对不对，所以在这里边怎么办，我要对这个二进行一个处理，对吧，我要干嘛变成上标，是不是向上标注啊，所以这里边我给他套一个标签叫做up。然后结束了up，好，那现在你看我再写的内容是不是十的二次方看到了吧，哎，这回这个二是不是上来了。对不对，哎，这是什么，这是标注上标文本。标注上标。不对，那同样我能写十到20吗？那我能不能写这个水分子呢？就是H2O。对吧，Gogo。标注。夏彪。文本对吧，咱们要写这个化学化学分子的话，那H。2OO是不是在下面啊，对不对，哎，所以在这里面，如果我直接H2O的话，那现在你来看啊。

刷新你看H20对吧，当然我这里面给的是零嘛，来给个O诶H2刷新。你看HRO对吧，但是呢，这个O其实看不出来下标，因为下标它需要往下来一点，对不对，所以这个时候我给他再干嘛呢，做一个下标叫做sub。杰出的sub。这个时候我们再来调试，你看这个时候这个O是不是下来了。对吧，在2O就有了。这就什么，这就是咱们的这个。下标文本啊，当然我这个应该标注谁，我是不是应该标注二啊。来O给它大写啊。找你好了，H2O，这就对了吧，啊，这是咱们的下标文本啊，那么这两个大家在记的时候容易记混，那么怎么样去区分呢，你看。

无论是这个P还是这个B，是不是都有这么一个圈对吧？那么OK，圈在上就是上标，圈在下就是下标啊，你这么去记就会更轻松一些啊好，这就是咱们的这个上标杆下标文本啊，那么这两个看完以后，我们再往下来还有什么标签呢？比如说我想在页面里面写一个表达式啊。写一个数学公式，比如说十。什么东西啊，十。加20。等于。30。30好了啊，我就想要这么样的一个效果，但是这么样去写，无论我套到哪个里边啊，比如说我就套到P标签里面，咱们来看啊，我还是一样给它看作是一个段落，那么这个时候来刷新。它会是一个段落吗？对吧，因为什么浏览器会干嘛，把它都解析成一行没错吧，所以我要想让这样的原格式给它输出的话，怎么办？我需要在这里边继续嵌套一个标签叫什么呢？叫做pre标签，它是一个原格式标签啊，这里边还少一个什么结束的P吧。

结束的P。束的P啊P好了，然后我们看上面这个该。包给给我删掉了啊，因为刚才他。这个是咱编辑器的问题啊，刚才它编辑器默认给我选中了，OK，这到点没问题了啊，现在咱们来看开始的P，结束的P里面套下的P对吧？那这个时候我们再来刷新，你看是不是就原格子冒出去了，懂了吧？哎，十加20等于30没错吧？哎，所以大家看好了，如果我们看到的这个编辑器里的效果，想要这个在编辑器里的效果能在页面中原样的输出，我们需要干嘛配合这个pre啊。叫做原样。

输出标签啊，原源输出标签啊，好了，那OK，那这个我们知道了以后，我们再来看我们这个，呃，文本经过本格式标签里面最后一个标签就我们的就是我们的这个标题标签啊，标题标签，那么标题标签它在这里边，咱们来看好了啊。有一堆标题标签，比如说第一个叫做一，叫做我是。一号标题啊，我是一号标题好了，然后我们看什么效果啊来。你看好了一号标题是不是。很大了，而且还能加粗的对吧，那再来他他有一号标题，那肯定有什么，有二号标题，叫HR叫我是二号标题，那再来看二号标题的效果。那你看二号标题是不是比一号标题小一倍对吧？哎，但也一样也是加粗啊，那么有二号标题有什么三号标题，那就是H。

叫做我是三号。标题好了再来看。三号标题比二号标题是不是还小一倍啊对吧，那么也就是说以此类推，我再往下的，比如说有H4 H4叫做我是四号标题，是不是更小对吧？然后呢，再来H5，就说我是五号标题对吧，然后H。H6。叫做我是六号。标题。然后再来一个H。七啊，我是。七。好，标题好了，写完了，写完以后现在我们来看啊。

来算题，你看H4是不是比H3还小对吧，然后H5比H4还小，H6比H5还小对吧，但是注意H7呢，H7是不是比H6大了，H7你看好了，跟这些是不是一样了。哎，所以标题标签只有什么，只有H1到H6，有H7吗？没有啊没有，那OK，大家注意一下，这里边我们要注意的是什么呀。叫做标题。标签只有一。呃，到H6对吧，没有H7。标签啊，而且大家再注意，我们用标题标签没问题，你除了H1以外，H23456都可以在一个页面中重复用啊，但h he尽量不要重复用，为什么呢？因为你任何一个页面它都只有一个大标题对吧？就是最大的标题，所以对于一而言，我们在使用H1标题的话，那么在一个页面中也就一个HMR里边我们一般只用一次啊，当然我用多次行不行？你看好了，这里面我再来个一。

一我是。这个H1标题啊，这我写的不是一号啊，我写的是H1，你看行不行。你看是不是也行对吧？哎，这里边我们所说的不要大家重复用，不是指的是不能用啊，能用，但是咱说了我们所用的这些标签，他怎么知道是标题。对吧，他不是给我们看给谁看，给浏览器看的，当浏览器来识别的时候，知道啊，这是一号标题，那也一样，他对一号标题的收入会更高，对吧，紧接他会找二号标题，找三号标题，找四号标题对白吧，所以你一旦有个重复的一号标题，他就不知道收录谁了，对不对，哎，所以对于这样的话，我们尽量是我们尽量不让什么，不让这个爬虫去什么去选择啊，不让浏览器去为难，所以我们尽量给他用，用一个啊，用一个就可以了，一般一个页面我们也就一个标题，对不对，如果再再出现标题的话，那都是什么，都是这个副标题子标题了，是不是这个意思，哎，所以这一块大家要注意啊，在我们用的时候，大家要注意就可以了。

好了，这就是在我们第一个阶段中，我们需要去了解的标签啊，那么会了，这些标签在我们后期布局页面中就已经足够了啊，就已经足够了啊好了，那么我们这节课就上到这里，这就是我们的文本及文本格式标签啊，那一样笔记这里边我给大家也记录了，咱们来看P标签多了标签B标签加粗，这是强调模的文轮对吧？Em也是强调，然后I呢是斜体，B是换行HR水平线，U是什么？下划线DL是三足线，那同样还有个三足线是什么呀？是我们的S。结束的S对吧，然后HN是H族的标签，H组标签只有一到多少啊H6吧，哎，然后再加上就是up和up上下文的，然后还有一个什么pre的pre。

结束的P叫做原格式输出。好啊，这就是我们第一个阶段需要了解的HTML标签内容啊，那么当然这些标签讲完了吗？并没有啊，我们还有很多标签对吧？包括我们到第二个阶段还会讲H85的标签。啊，所以在这里边，在这个阶段我们只需要去记这么多标签就足够了，啊好，那这节课我们到这里，下节课我们再来看一下我们的语义化标签。