零基础小白前端学习之HTML（五）

前端开发小马哥
691 阅读6分钟

大家好，我是你们的小马哥，每天更新一篇文章，坚持就是胜利，希望你们也再接再厉。 动动你的小手，欢迎你的关注和点赞。

本节重点

  • body中的相关标签
学完这一章节将对标签使用有了初步的认识，可以使用标签制作出一篇简单的文章网页，

body中的相关标签，主要展现在页面的内容区域。

1.学习<hx>标签，为你的网页添加标题

比如打开一个百度新闻的网站，baijiahao.baidu.com/s?id=162521…

如下图所示

描述文章的信息，本文章的名称用又黑又粗的字体来突出中心内容。那么h1定义最大的标题，h6定义最小的标题。

2.学习<p>标签，为你的文章添加段落

p标签，全称paragraph，译：段落

如果想在网页中显示文章，那么文章的段落和段落之间留有一定的空隙，会让用户体验更好，那么就需要p标签了。

比如给你一段文字，让你在网页中显示对应的段落的内容，打开sublime，将代码复制写入，发现文章的内容，很乱，没有一定的层次结构。

很多情侣或夫妻之所以很难走到最后，有时候是因为他们不懂得好好说话。换句话说，一段感情要想长久地维持下去，需要双方懂得用心交流和沟通。
尤其是当你们生活在同一个屋檐下，低头不见抬头见，你们更要懂得好好说话。你不要小瞧语言的魅力和说话的力量。
有时候，你可能只是随口一说，但是说者无心，听者有意，伴侣听了之后，可能会产生各种各样的联想。

修改代码：

<body>
    <p>很多情侣或夫妻之所以很难走到最后，有时候是因为他们不懂得好好说话。换句话说，一段感情要想长久地维持下去，需要双方懂得用心交流和沟通。</p>
    <p>尤其是当你们生活在同一个屋檐下，低头不见抬头见，你们更要懂得好好说话。你不要小瞧语言的魅力和说话的力量。</p>
    <p>有时候，你可能只是随口一说，但是说者无心，听者有意，伴侣听了之后，可能会产生各种各样的联想。</p>
</body>

效果展示：

注意：<p>标签的默认样式，可以在上图看出来，段前段后都会有空白。

3.加入强调语气，使用<strong>和<em>标签

上述文章，我们已经有个标题和段落了，现在如果在一段话中之前强调某几个文字，这个时候可以用<em>或<strong>标签

但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。

如,网上购物商城中，某产品的价格是强调的。如下图。

再比如修改我们上述代码，将我们制作的网页进行修改，如果对阐述的内容进行分类，我们需要对01和02进行强调，并且我们额外修改点信息，对标题的喜欢你呈现斜体的样式。

<h2>女人越这样和男人说话，他就越<em>喜欢你</em></h2>
<strong>01</strong>
<p>很多情侣或夫妻之所以很难走到最后，有时候是因为他们不懂得好好说话。换句话说，一段感情要想长久地维持下去，需要双方懂得用心交流和沟通。</p>
<p>尤其是当你们生活在同一个屋檐下，低头不见抬头见，你们更要懂得好好说话。你不要小瞧语言的魅力和说话的力量。</p>
<p>有时候，你可能只是随口一说，但是说者无心，听者有意，伴侣听了之后，可能会产生各种各样的联想。</p>
<strong>02</strong>

效果：

4.使用<br>标签分行显示文本

如果我们想在网页中显示一首白居易的诗，那么为了让它美观点，我们想呈现出此效果

怎么才能让每一句诗词后面加入一个折行呢？那么我们可以在每一句的诗词后面加<br />标签，br标签作用相当于word文档中的回车键

代码如下：

<h2>《琵琶行》</h2>
<p>
    一道残阳铺水中，<br>
    半江瑟瑟半江红。<br>
    可怜九月初三夜，<br>
    露似珍珠月似弓。<br>
</p>

<br>标签与我们刚学过的标签不一样，<br/>标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br/>、<hr/>、<img />。

讲到这里，大家是不是有疑问呢？想折行还不简单呢，就像在word文档或记事本中，在想要折行的前面输入回车不就行了吗？尝试一下效果之后，抱歉，在html中是忽略回车和空格的，你输入的再多的回车和空格也是显示不出来的。

总结：空白折叠现象

​

5.为你的网页添加一些空格

在上一节的例子中，我们已经讲解过html代码中输入回车、空格都是没有作用的，会被折叠成一个空格，这叫"空白折叠现象"。那么如果我们非得在网页中输入空格，必须写入&nbsp;

例子：我们让白居易的诗词的名字前后有空格

代码如下

<h2>《&nbsp;琵琶行&nbsp;》</h2>
<p>
    一道残阳铺水中，<br>
    半江瑟瑟半江红。<br>
    可怜九月初三夜，<br>
    露似珍珠月似弓。<br>
</p>

效果如下：

6.认识<hr>标签，添加水平横线

在信息展示的时候，有时候需要加一下用于分割的横线，这样会使文章看起来整齐些。如下图所示

代码如下

<p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p>
<hr>

<p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p>
<hr>

注意：

  1. <hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

  2. <hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。

avatar
文章
阅读
粉丝