进阶HTML--换行与水平分割线 -----16岁的小前端

今天我们来做个这样的效果

　　原标题：辛识平：创新，点燃中国科幻的“火石”

　　辛识平

　　这个春节，国产科幻电影《流浪地球》如“火石”一般点燃了人们的想象力和激情。这部“硬核”风格的科幻片，不仅迅速成为票房黑马，而且引发了广泛的社会讨论。

　　莎士比亚曾说，一千个观众眼中有一千个哈姆雷特。同一部电影，不同的人会有不同的看法和评价。《流浪地球》并不完美，但从中国科幻电影发展的视角看，它很新很燃很震撼，好比片中的行星发动机一样，在大开“脑洞”的同时，也激荡起强劲的思想冲击波。

　　日月之行，星汉灿烂，我们从何处来，又往哪里去？科学与哲学的沉思，总能在科幻世界展开想象的翅膀。科幻大师艾萨克·阿西莫夫曾将科幻定义为“关注科技进步对人类影响的文学分支”。在西方，科幻作品开始盛行的年代，正是人类最初进入太空的时代，也是人类开始意识到地球面临环境、资源等种种挑战的时代。科幻的世界，无论怎样天马行空、光怪陆离，其实都有着深刻的现实根源。

 

我们现在开始编辑；首先写结构直接把这一大坨文字丢到【body】标签里面；

不放在【head】里面是因为：

【head部分】/【头 部 分 】一般用于设置一些内容，样式；

【body部分】/【身体部分】部分/身体部分一般用于页面的基本结构；

以为就这样结束了吗  Q_Q，打开浏览器看一下；

1. 换行标签

我编辑的时候明明换行了，为什么显示的时候变成一坨了呢？

这也就是说【浏览器的渲染内核】不会识别【enter】/【回车键】的换行；

【浏览器的渲染内核】不支持那么那一群人就规定了一个【换行建】让【渲染内核】去支持；

这个【换行建】就是【   
   】;

我们来使用【br】来替代【回车键】看一下看效果；

果然【   
   】可以替代【回车键】，并能让【浏览器渲染内核】成功解析；

但还是觉得得与开头图片上的有点差别；

          1.  每行的字数不对；     -----那就在应该换行的文字后面添加【   
   】

        2.  每行的间距还得大一些       ---------那就在每个段落的后面再添加一个【   
   】

剩余的一些细节就不再去处理了；

这个案例的目的是学到换行标签的意义；实际上处理段落的时候并会使用这个标签；

2. 水平分割线

水平分割线标签的代码如下

我们来试一下

我将【   

---

   】标签写在了任意的文字中间；打开浏览器看一下效果；

我们会发现两个文字被一条横在页面上的一条线给分割成两行；

这条线称之为【水平分割线】；他可以分割两边的内容起到换行的作用，并会横在分割的位置一条线；

 

 

 

 

                               -----------------------------------16岁的小前端