3-1 使用ul, 添加新闻信息列表
在浏览网页时, 你会发现网页上有很多的列表。新闻列表，图片列表等等。
这些列表就可以使用ul-li标签来完成。ui-li是没有前后顺序 的信息列表。
语法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
</head>
<body>
<ul>
<li>我的第一行</li>
<li>我的第二行</li>
<li>我的第三行</li>
</ul>
</body>
</html>
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示：- 我的第一行
- 我的第二行
- 我的第三行
3-2 使用ol, 添加图书销售排行榜
如果想在网页中展示 有前后顺序 的信息列表, 怎么办呢?
语法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
</head>
<body>
<ol>
<li>iOS</li>
<li>Objective-C</li>
</ol>
</body>
</html><ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始，
- iOS
- Objective-C
3-3 认识div在排版中的作用
在网页制作过程中, 可以把一些独立的逻辑部分划分出来，放在一个 <div> 标签中, 这个 <div> 标题的作用就相当于一个容器。
语法：
<div>...</div>
确定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如下图
3-4 给div命名, 使逻辑更加清晰
我们可以用 id属性来为 <div>
提供唯一的名称，这个就像我们每个人都有一个身份证号, 这个身份证号是唯一标识我们身份的, 也是必须唯一的。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>div标签</title>
</head>
<body>
<div id = "hotList">
<h2>热门课程排行榜</h2>
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>javascript全攻略</li>
</ol>
</div>
<div id = "learningInstructed">
<h2>web前端开发导学课程</h2>
<ul>
<li>网页专业名词大扫盲 </li>
<li>网站职位定位指南</li>
<li>为您解密Yahoo网站制作流程</li>
</ul>
</div>
</body>
</html>3-5 table标签，认识网页上的表格
有时候我们需要在网页上展示一些数据, 如某公司向在网页上展示公司的库存清单；如下表
| 产品名称 | 品牌 | 库存(个) | 入库时间 |
| 耳机 | 联想 | 500 | 2013-1-2 |
| U盘 | 金士顿 | 120 | 2013-8-10 |
| U盘 | 爱国者 | 133 | 2013-3-25 |
table, tbody, tr, th,td
- <table>..</table>；整个表格以 <table> 标记开始, </table>标记结束。
- <tbody>..</tbody>；当表格内容非常多时，表格就回下载一点显示一点，但是如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。,
- <tr>..</tr>表格的一行，所以有几对tr 表格就就行。
- <td>..</td>表格的一个单元格，一行中包含几对<td>..</td>,说明一行中就有几列。
- <th>..</th>表格的头部的一个单元格，表格表头
- 表格中列的个数，取决于一行中数据单元格的个数。
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pre标签的使用</title>
</head>
<body>
<table id = "ios第一个表格">
<tr>
<th>产品名称</th>
<th>品牌</th>
<th>库存量(个)</th>
<th>入库时间</th>
</tr>
<tr>
<td>耳机</td>
<td>联想</td>
<td>500</td>
<td>2013-1-8</td>
</tr>
<tr>
<td>产品名称</td>
<td>品牌</td>
<td>库存量(个)</td>
<td>入库时间</td>
</tr>
<tr>
<td>产品名称</td>
<td>品牌</td>
<td>库存量(个)</td>
<td>入库时间</td>
</tr>
</table>
</body>
</html>2>表头，也就是th标签中的文本默认为粗体并且居中显示
3-6 用css样式, 为表格加入边框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为表格添加边框</title>
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
</head>
<body><style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
上述代码是用 css 样式代码, 为
th，td
单元格添加粗细为一个像素的黑色边框。
3-7 caption标签, 为表格加入边框
表格还是需要添加一些标签进行优化, 可以添加 标题和摘要 。代码如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>
</head>
<body>
<table summary = "sss">
<caption>本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量</caption>
<tr>
<th>产品名称 </th>
<th>品牌 </th>
<th>库存量（个） </th>
<th>入库时间 </th>
</tr>
<tr>
<td>耳机 </td>
<td>联想 </td>
<td>500</td>
<td>2013-1-2</td>
</tr>
<tr>
<td>U盘 </td>
<td>金士顿 </td>
<td>120</td>
<td>2013-8-10</td>
</tr>
<tr>
<td>U盘 </td>
<td>爱国者 </td>
<td>133</td>
<td>2013-3-25</td>
</tr>
</table>
</body>
</html>摘要：
摘要内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化), 使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table
summary="表格简介文本">
用以描述表格内容，标题的显示位置; 表格上方。
语法：
<table>
<caption>标题文本</caption>
<tr>
<td>…</td> <td>…</td> … </tr>…</table>
