六、HTML的标签（二）

1 使用ul，添加新闻信息列表

在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，这些列表就可以使用ul-li标签来完成。

ul-li是没有前后顺序的信息列表。

语法：

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

举例：

<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>

ul-li在网页中显示的默认样式一般为：

• 精彩少年
• 美丽突然出现
• 触动心灵的旋律

快捷键：

①  ul>li，按tab键
    <ul>
        <li></li>
    </ul>

②  ul>li*5，按tab键
    <ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

③ （ul>li*2）*3，按tab键
    <ul>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
	</ul>

Li标签是一个容器，可以嵌套其他标签:

<ul>
	<li>
		<h2>饮食</h2>
		<ul>
			<li>荤</li>
			<li>素</li>
		</ul>
	</li>
	<li>
		<h2>服装</h2>
		<ul>
			<li>男装</li>
			<li>女装</li>
			<li>童装</li>
		</ul>
	</li>
</ul>

2 使用ol，添加图书销售排行榜

如果想在网页中展示有前后顺序的信息列表，这类信息展示就可以使用<ol>标签来制作有序列表来展示。

语法：

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

举例：

下面是一个热点课程下载排行榜：

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

页面展示为：

1. 前端开发面试心法
2. 零基础学习html
3. JavaScript全攻略

<ol>在网页中显示的默认样式一般为：

每项<li>前都自带一个序号，序号默认从1开始

快捷键同ul

Li标签内容同ul

3 定义列表 dl dt dd

定义列表有三个标签：dl dt dd

<dl>
	<dt>胡歌</dt>
	<dd>代表作：琅琊榜、神话、仙剑奇侠传</dd>
</dl>

<dl>
	<dt>杨洋</dt>
	<dd>代表作：红楼梦、盗墓笔记</dd>
</dl>

快捷键可用：

dt+dd和（dt+dd）*3，然后按tab键

dl 定义列表
dt  定义标题
dd  定义说明、解释
dl>dt+dd
每一个dt后可以加一个或多个dd

4 认识div在排版中的作用

Div division 范围、区域、分割。并没有什么特殊的语义，经常用来布局。

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

div是大的范围

span是小的跨度

语法：

<div>…</div>

确定逻辑部分：

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。此时就可以使用<div>标签作为容器。

5 给div命名，使逻辑更加清晰

为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。

语法：

<div  id="版块名称">…</div>

6 table标签，认识网页上的表格

有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。可以使用以下代码：

table、thead、tbody、tr、th、td
table  表格
tr table rows
th table head  表头单元格

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数。

总结：

1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示

7 用css样式，为表格加入边框

Table 表格在没有添加 css 样式之前，是没有边框的。我们为表格添加一些样式，为它添加边框。

<style type="text/css">
    table tr td,th{
        border:1px solid #000;
    }
</style>

上述代码是用 css 样式代码，为th，td单元格添加粗细为一个像素的黑色边框。

也可以用<table border="1">来添加像素为1px的边框

8 合并单元格

单元格标签： th td

Rowspan 合并行单元格

Colspan 合并列单元格

属性值：是一些数字，是几表示合并几个单元格

案例：

上边线在第几行就是第几行的单元格

方法：先将所有tr写完，再对每一个tr内部的td单独书写：

<table border="1">
		<tbody>
			<tr>
				<th>1</th>
				<th>2</th>
				<th>3</th>
				<th>4</th>
				<th>5</th>
			</tr>
			<tr>
				<td rowspan="2">6</td>
				<td colspan="2">7</td>
				<td colspan="2">8</td>
			</tr>
			<tr>
				<td>9</td>
				<td>10</td>
				<td rowspan="2">11</td>
				<td>12</td>
			</tr>
			<tr>
				<td colspan="2">13</td>
				<td>14</td>
				<td>15</td>
			</tr>
		</tbody>
	</table>

1	2	3	4	5
6	7		8
	9	10	11	12
13		14		15

9 caption标签，为表格添加标题和摘要

表格还是需要添加一些标签进行优化，可以添加标题和摘要。

语法：

<table summary="表格简介文本">

标题:

用以描述表格内容，标题的显示位置：表格上方。

语法：

<table border="1">
    <caption>标题</caption>      标题
    <thead>                   表头
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
        </tr>
    </thead>
    <tbody>                    主体
        <tr>
            <td rowspan="2">6</td>
            <td colspan="2">7</td>
            <td colspan="2">8</td>
        </tr>
        <tr>
            <td>9</td>
            <td>10</td>
            <td rowspan="2">11</td>
            <td>12</td>
        </tr>
        <tr>
            <td colspan="2">13</td>
            <td>14</td>
            <td>15</td>
        </tr>
    </tbody>
</table>




<table>
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
    </tr>
</table>

标题

1	2	3	4	5
6	7		8
	9	10	11	12
13		14		15

标题文本

…

…