html+css初识（第三节）
本小节主要介绍列表标签，<div>标签，以及<table>标签的使用。下面还是通过一段代码详细了解各个标签的作用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签运用</title>
<style type="text/css">
table tr td,th{border:1px solid #000;} <!-- 给表格的每个单元格加边框 -->
</style>
</head>
<body>
<div id="mm">
<h2>热门课程排行榜</h2>
<ul>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>javascript全攻略</li>
</ul>
</div>
<div id="nn">
<h2>最新课程排行</h2>
<ol>
<li>版本管理工具介绍—Git篇 </li>
<li>Canvas绘图详解</li>
<li>QQ5.0侧滑菜单</li>
</ol>
</div>
<div id="tt">
<table summary="各班学生成绩信息表">
<tbody>
<caption>学生成绩表</caption>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
example3.png
①信息列表标签，分为两种<ul>-<li>无序列表，<ol>-<li>有序列表,<ul>-<li>无序列表在在显示时前面默认有一个小圆点，如上例一的显示效果，而<ol>-<li>有序列表在显示时前面默认排序，序号默认从1开始，效果见上图。
②<div>标签，在网页排版中，<div>标签相当于一个容器，可以化分出一个个独立板块，确定逻辑部分，上文运用了三次<div>标签将文段分为了三个模块
③给<div>标签设置id，命名。这样能够使逻辑更加清晰，便于后期对每个模块的操作，每一个id都是唯一的。
④<table>表格标签，有时候我们想在网页中显示一些清单数据时，可以使用<table>标签来显示，更加清晰。
<table>规则：以<table>标记开始，</table>标记结束。
<tbody>标签是负责优先显示性的，作为了解吧。
<th>...</th>标签：表格头部的一个单元格，表格表头。
<tr>...</tr>标签：表格的一行，有几对就表示表格有几行。
<td>...</td>标签：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
以上就是表格的基本元素，其中表头中的文本在网页中默认粗体，居中显示。
⑤给表格加css样式，这里我们为了简单了解在<style>标签中简单设置了表格的边框，后面再做详细认识，效果见上图。
⑥<caption>标签：给表格添加标题和摘要。标题位置显示在表格的正上方。摘要：语法：<table summary="表格简介文本"> 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)。
本小节到此结束。
