【HTML】HTML5的效果和列表标签
紧接着之前的语义化标签，我们今天来看看HTML5的效果标签和列表标签。
使用< br />标签实现换行效果
假如我们想在自己的网页中显示诗句，为了使整首诗显示得美观，我们可以更改一下我们诗句的排版，在每一句诗句结束后进行换行操作，这样下来看着就比较舒适。
那我们怎么可以让每一句诗词后面进行换行操作呢？
这个时候< br />标签就派上用场了，我们在需要加回车换行的地方加入< br />标签，< br />标签作用相当于 word 文档中的回车操作。
换行标签的语法如下：< br />
在这里大家要注意，< br />标签与我们之前学过的标签不一样，< br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有< br />、< hr />和< img />，这些标签我们后文会涉及到。
可能小伙伴们会有个疑问，想换行还不容易，就像在 word 文档中一样，在想要换行的语句前面输入回车不就行了吗？遗憾的是，在 HTML中是忽略回车和空格的，不管输入再多回车和空格都是不会显示滴。
我们不妨做个测试，对照使用了 < br />标签和直接回车换行的：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>换行测试</title>
</head>
<body>
<h1>过松源晨炊漆公店</h1>
<p>莫言下岭便无难，
赚得行人错喜欢。
正入万山圈子里，
一山放过一山拦。
</p>
<h1>过松源晨炊漆公店</h1>
<p>莫言下岭便无难，<br />
赚得行人错喜欢。<br />
正入万山圈子里，<br />
一山放过一山拦。<br />
</p>
</body>
</html>在html网页测试的结果如下：
因此，在 HTML代码中输入回车、空格都是不顶用的，在html文本中想要回车换行，就必须输入< br />。
使用字符 实现空格标签
上文中，我们说到了换行操作在HTML中的实现形式，下面我们来瞧一瞧，空格的实现形式。
空格标签的语法如下：  ;
和回车一样，在html代码中输入空格是不起作用的。
不信的话，我们可以比较  ;空格标签和直接输入空格在html上的差异：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>空格测试</title>
</head>
<body>
<h1>过松源晨炊漆公店</h1>
<p>莫言下岭便无难，
赚得行人错喜欢。
正入万山圈子里，
一山放过 一山拦。
</p>
<h1>过松源晨炊漆公店</h1>
<p>莫言下岭便无难，<br />
赚得行人错喜欢。<br />
正入万山圈子里，<br />
一山放过 一山拦。<br />
</p>
</body>
</html>
<!-- 第一处放了六个空格，第二处放了六个 标签 –>在html网页测试的结果如下：
通过测试结果，我们可以看到第一首诗输入的六个空格最后在html上只能显示出一个（似乎好像还是有点用的，上文口误），而使用  ;标签则可以实现六个空格的输出。
使用< hr />标签实现水平线标签
有的时候，为了区分不同内容的信息，我们还可以在HTML中加一些用于分隔的横线，而< hr />标签恰好实现了这个功能，而加上分隔线的好处，就是可以使界面更加有条理，一眼就可以看清楚信息的结构，就可以实现作文分段的那种效果。
水平线标签的语法如下：< hr />
和上文中提到的< br />标签一样，< hr />标签也是一个空标签，所以只有一个开始标签，没有结束标签。
我们试着把上文中的两首诗画个分隔线：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>分隔线测试</title>
</head>
<body>
<h1>过松源晨炊漆公店</h1>
<p>莫言下岭便无难，
赚得行人错喜欢。
正入万山圈子里，
一山放过一山拦。
</p>
<hr />
<h1>过松源晨炊漆公店</h1>
<p>莫言下岭便无难，<br />
赚得行人错喜欢。<br />
正入万山圈子里，<br />
一山放过一山拦。<br />
</p>
</body>
</html>在html中的测试结果：
不过< hr />标签在html中显示的线条粗细和颜色都是固定的，如果想要对分隔线进行个性化样式的设计，我们就可以使用css对其进行样式的修改。
使用< ul >< li >标签实现无序列表
我们在浏览网页时，常常会发现网页上有很多信息的列表，就如下图中我们的首页界面。
上图中的列表就可以使用ul-li标签来完成，ul-li是没有前后顺序的信息列表。
< ul >< li >标签的语法如下：
< ul >
< li >信息< /li >
< li >信息< /li >
…
< /ul >
ul-li标签在html中显示的默认样式一般为：每项< li >…< /li >前都自带一个圆点。
倘若我们把上文中的两首诗加上< ul >< li >标签：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>分隔线测试</title>
</head>
<body>
<ul>
<li>
<h1>过松源晨炊漆公店</h1>
<p>莫言下岭便无难，
赚得行人错喜欢。
正入万山圈子里，
一山放过一山拦。
</p></li>
<hr />
<li>
<h1>过松源晨炊漆公店</h1>
<p>莫言下岭便无难，<br />
赚得行人错喜欢。<br />
正入万山圈子里，<br />
一山放过一山拦。<br />
</p></li>
</ul>
</body>
</html>在html页面测试结果如下：
使用< ol >< li >标签实现有序列表
上文中我们提到的< ul >< li >标签是实现无序列表功能的，但是如果我们想在网页中展示有前后顺序的信息列表，应该怎么办呢，比如说排行榜类有明确前后顺序的列表。
其实这类有明确顺序的信息展示可以使用< ol >< li >标签来制作。
< ol >< li >标签语法如下：
< ol >
< li >信息< /li >
< li >信息< /li >
…
< /ol >
< ol >< li >标签在网页中显示的默认样式一般为：每项< li >…< /li >前都自带一个序号，序号默认从1开始。
我们以豆瓣高分电影的排序为例，来看看这个< ol >< li >标签：
豆瓣电影高分排行榜：
脚本代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>有序列表</title>
</head>
<body>
<ol>
<li>肖申克的救赎</li>
<li>霸王别姬</li>
<li>阿甘正传</li>
<li>这个杀手不太冷</li>
<li>千与千寻</li>
<li>盗梦空间</li>
<li>三傻大闹宝莱坞</li>
<li>我不是药神</li>
</ol>
</body>
</html>在html测试结果：
今日份HTML学习就到这里！
