适合0基础的web开发系列教程-换行和水平线

 

最近忙于期末考试命题,很久没有更新随笔了。

今天给大家总结的是换行和水平线

<br/> 可插入一个简单的换行符。

<hr/> 水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。

 br和hr都双是单标签,不是成对出现的。

 

 

于是我们写下了这样的网页代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		夜雨寄北
		作者:李商隐
		君问归期未有期,巴山夜雨涨秋池。
		何当共剪西窗烛,却话巴山夜雨时。
	</body>
</html>

显示效果却是这样:

 

全部排在了一行。

所以我们就需要对网页内容进行换行。我们使用的标签是<br/>

于是我们代码写成了这样:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		夜雨寄北<br/>
		作者:李商隐<br/>
		君问归期未有期,巴山夜雨涨秋池。<br/>
		何当共剪西窗烛,却话巴山夜雨时。<br/>
	</body>
</html>

显示效果如下:

 

 

我们在发布文章的时候,需要在视觉上将文章分成几个模块。例如我们要实现下面的效果:

 

 

我们就可以在代码中加入hr标签:

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        夜鹰教程网JavaScript视频教程录制完毕
        <hr/>
        夜鹰教程网 来源:www.yyjcw.com 日期:2018/1/13 12:52:30<br/>
        JavaScript是世界上最流行的脚本语言。在Web世界里,只有JavaScript能跨平台、跨浏览器驱动网页,与用户交互。
        如果你打算做web开发,不管是前端还是后端,javascript都是你必须掌握的技术。
        本套教程主要讲解了javascript语法基础(变量、数据类型、运算符、流程控制、数组、函数等),javascript 
        BOM和Dom操作、网页中常见的javascript特效案例(下拉菜单、页签、倒计时、loding、随机验证码、数学函数、
        定时器、延迟执行、表单验证、拖拽原理、对联广告、网页换肤、表格隔行换色、高亮显示、腾讯新闻、发票打印等)。
        我们精心设计加入的案例功能丰富,内容循序渐进。由于本套教程内容较多、专门为初学者打造,语法部分比较枯燥,如果部分
        知识你已经会了,我们也建议你全部看完。如果学习过程中遇到问题或者部分功能需要定做,也可以加我们技术
        QQ:1416 7596 61
    </body>
</html>

 

posted @ 2018-12-25 11:40  夜鹰教程网  阅读(283)  评论(0编辑  收藏  举报

夜鹰教程网承接网站开发\各类业务系统开发
微信小程序开发\WEBAPP开发\安卓和IOS原生开发等