本节重点
- 列表标签
- div和span标签
- table标签
学完本节，我们可以在网页中展示一些信息列表及表格数据，使网页中的信息更加丰富
1.使用ul，添加新闻信息列表
在浏览网页中，比如打开百度新闻首页，你会发现网页中很多新闻信息的列表，如新闻网站中的新闻列表，图片列表。
那么这些列表我们可以用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
代码如下：
<ul>
<li>多地提高城乡居民基础养老金 这两类人涨得更多</li>
<li>10天第2名中石油系统官员落马</li>
<li>春节假期接近尾声 道路交通迎来返程高峰</li>
</ul>
大家会发现，ul-li默认的样式一般为：每项li前都有一个圆点。
2.使用ol，添加热门点击排行榜
如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，百度新闻网的热门点击排行榜，那么我们就可以使用ol-li标签来制作有序列表 举例：
下面是一个前端学习技术栈下载排行榜
<ol>
<li>vue全家桶</li>
<li>react全家桶</li>
<li>Nodejs精讲</li>
<li>es6深入挖掘</li>
</ol>
<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始.
3.认识div在排版中的作用（放在后面）
在网页制作中，我们可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个<div>标签的作用就相当于一个容器。把我们想要的内容给装起来。
div的意思是division “分割”的意思，span的意思是“范围、跨度”。
首先，在使用div标签的使用，我们要确定哪儿是逻辑部分？
它是页面上相互关联的一组元素。如网页中农的独立的栏目板块，就是一个典型的逻辑部分。如图所示：图中用红线框出的部分就是一个逻辑部分，那么我们就可以使用<div>标签作为容器。
举个栗子
<div>
<div>
<h2>热门学科</h2>
<ul>
<li>python</li>
<li>web前端</li>
<li>linux</li>
<li>go</li>
</ul>
</div>
<div>
<h2>学科排名</h2>
<ol>
<li>web前端</li>
<li>python</li>
<li>go</li>
<li>linux</li>
</ol>
</div>
</div>
会发现，现在编写代码呈现出来的效果与之前的效果没有太大的区别。那么下节课，我们可以给<div>来命名，将我们展现的独立的逻辑部分表示出来，使我们的网页更加有清晰感和层次感。
4.给div命名，使我们的逻辑更加清晰
在上小节中，我们把一些标签放进<div>中，划分出一个个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就好比是我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一。
语法：
<div id='板块名字'>.....</div>
修改上节课代码：
<div id='courses'>
<div id='hot_course'>
<h2>热门学科</h2>
<ul>
<li>python</li>
<li>web前端</li>
<li>linux</li>
<li>go</li>
</ul>
</div>
<div id='sort_course'>
<h2>学科排名</h2>
<ol>
<li>web前端</li>
<li>python</li>
<li>go</li>
<li>linux</li>
</ol>
</div>
</div>
上述代码可以很明显的看出，热门学科和学科排名都属于courses的。并且热门学科和学科排名分别用id属性值hot_course和sort_course来表现各自独立的逻辑部分，使得逻辑部分更加有层次感。
5.学习table标签，认识网页中的表格
在网页中，有时候我们需要再网页上展示一些数据，比如某公司想在网页上展示公司的库存清单。如下表
| 产品名称 | 品牌 | 总量 | 入库时间 |
|---|---|---|---|
| 电视机 | 小米 | 100 | 2018-09 |
| 音响 | 小米 | 200 | 2018-08 |
| 电冰箱 | 海尔 | 189 | 2018-12 |
首先我们观察一下上述表格，我们会发现表格是由行组成，行的出现，才使得列有了存在。此是4行4列的表格
代码如下：
<table>
<tr>
<th>产品名称</th>
<th>品牌</th>
<th>总量</th>
<th>入库时间</th>
</tr>
<tr>
<td>电视机</td>
<td>小米</td>
<td>100</td>
<td>2018-09</td>
</tr>
<tr>
<td>音响</td>
<td>小米</td>
<td>200</td>
<td>2018-08</td>
</tr>
<tr>
<td>电冰箱</td>
<td>海尔</td>s
<td>189</td>
<td>2018-12</td>
</tr>
</table>
创建表格的四个元素：
table、tr、th、td
<tabel>...</table>:整个表格以<table>标记开始、</table>标记结束。<tr>...</tr>：表格的一行，那么以为着有几个tr，表格就有几行。<td>...</td>:表格的一个单元格，一行中包含几对<td></td>,说明一行中就有几列。<th></th>:表格的头部的一个单元格，表格表头。- 表格中列的个数，取决于一行中数据单元格的个数
效果展示：
总结：
- table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
- 表头，也就是th标签中的文本默认为粗体并且居中显示
6.给<table>添加border属性，为表格添加边框
table表格在没有添加css样式之前，是没有边框的。我们可以给<table>添加一个border属性，并且设置该值为1.
语法：
<table border='1'>....</table>
效果展示：
如果想实现很细的表格边线，
<table cellspacing='0' border='1'>......</table>
7.caption标签，为表格添加标题
上述的表格我们还需要添加一些标签进行优化，可以添加标题。
代码如下：
<table border="1" cellspacing='0'>
<caption>商品清单</caption>
<tr>
<th>产品名称</th>
<th>品牌</th>
<th>总量</th>
<th>入库时间</th>
</tr>
<tr>
<td>电视机</td>
<td>小米</td>
<td>100</td>
<td>2018-09</td>
</tr>
<tr>
<td>音响</td>
<td>小米</td>
<td>200</td>
<td>2018-08</td>
</tr>
<tr>
<td>电冰箱</td>
<td>海尔</td>
<td>189</td>
<td>2018-12</td>
</tr>
</table>
标题
用来描述表格内容，标题的显示位置：表格的上方。
语法
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
8.横向合并、纵向合并单元格
我们上节课的表格，只是我们普通的表格，那么如果我们要想让单元格和单元格发生点什么？比如横向合并或者纵向合并，那么就得借助colspan和rowspan两个属性。
先看横向合并
比如：
那么有此图可以看出。原来表格中第一行中姓名、年龄这两个单元格，我们要对他们横向合并成一个单元格，才能实现我们的效果。
代码如下：
<table border="1" cellspacing="0">
<caption>横向合并单元格</caption>
<!--colspan中必须指定要合并的列数目，是两列还是三列等等-->
<tr>
<th colspan="2">姓名和年龄</th>
<th>电话</th>
</tr>
<tr>
<td>Jack</td>
<td>24</td>
<td>1351234567</td>
</tr>
<tr>
<td>Tom</td>
<td>22</td>
<td>1351234567</td>
</tr>
<tr>
<td>Rose</td>
<td>22</td>
<td>1351234567</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>1351234567</td>
</tr>
</table>
同理，纵向合并是一个原理的。
比如：
代码如下：
<table border="1" cellspacing="0">
<caption>纵向合并单元格</caption>
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
</tr>
<tr>
<td rowspan="2">601班</td>
<td>Jack</td>
<td>24</td>
<td>1351234567</td>
</tr>
<tr>
<td>Tom</td>
<td>22</td>
<td>1351234567</td>
</tr>
<!--rowspan中必须指定要合并的列数目，是两行还是三行等等-->
<tr>
<td rowspan="3">602班</td>
<td>Rose</td>
<td>22</td>
<td>1351234567</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>1351234567</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>1351234567</td>
</tr>
</table>
