使用列表
列表是一种非常有用的数据排列形式，它是以列表的形式来显示数据。
在HTML中共有3中列表，分别是无序列表、有序列表和定义列表。
无序列表的所有列表项目之间没有先后顺序之分。
有序列表的列表项目是有先后顺序之分的。
定义列表是一组带有特殊含义的列表， 一个列表项目里包含条件和说明两部分。有序列表
有序列表在列表中将每个元素按数字或字母顺序标号。
创建一个有序列表时，以打开和关闭< ol>为开始，然后在每个列表元素前用标记< li>标识，标识的结束标记为< /li>。
（一）有序列表ol
有序列表中各个列表项使用编号排列， 列表中的项目有先后顺序， 一般采用数字或字母作为顺序号。
语法格式：
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
......
</ol>< ol>和< /ol>标记标志着有序列表的开始和结束,而< li>和< /li>标记表示这是一个列表项。
例如星期的代码示例：
<ol>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期日</li>
</ol>（二）有序列表的序号类型type
默认情况下， 有序列表的序号是数字的， 通过type属性可以改变序号的类型，包括大小写字母、 阿拉伯数字和大小写罗马数字。
语法格式：
<ol type="序号类型">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
......
</ol>常见的序号类型有五种：
type------列表项目的序号类型
1----------数字
a----------小写字母
A----------大写字母
i----------小写罗马数字
I----------大写罗马数字有序列表的起始数值start
默认情况下，有序列表的编号是从1开始的，通过start属性可以调整编号的起始值。
语法格式：
<ol start="起始数值">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
......
</ol>无序列表
无序列表除了不使用数字或字母以外，其他的和有序列表类似。 无序列表并不依赖顺序来表示重要的程度。
无序列表标记<ul>
无序列表的项目排列是没有顺序的，只以符号作为分项标识。
语法格式：
<ul >
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
......
</ul>注意：
不能将数字列表作为一个无序列表的一部分或附属列表，却能够使用嵌套列表项产生于数字列表项的下一层中。
无序列表的类型type
默认情况下， 无序列表的项目符号是，而通过type参数可以调整无序列表的项目符号，避免列表符号的单调。
语法格式：
<ul type="序号类型">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
......
</ul>
注意：无序列表其他的属性不变，type属性则决定了列表项开始的符号。目前无序列表的序号类型可以设置的值有三种：
type--------------
Disc--------------默认值，黑色实心圆点项目符号“”
circle------------空心圆环项目符号
square------------正方形的项目符号目录列表标记<dir>
目录列表一般用来创建多列的目录列表，它在浏览器中的显示效果与无序列表相同，因为它的功能也可以通过无序列表来实现。
语法功能：
<dir>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
......
</dir>定义列表标记<dl>
定义列表由两部分组成：定义条件和定义描述。定义列表的英文全称是definition list。
<dt>用来指定需要解释的名词，英文全称为definition term；
<dd>是具体的解释， 英文全称为definition description。
语法功能：
<dl>
<dt>定义条件</dt>
<dd>定义描述</dd>
......
</dl>
<dt>后面添加要解释的名词,在<dd>后面则添加该名词的具体解释。代码示例：
<dl>
<dt>HTML5</dt>
<dd>万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改</dd>
......
</dl>菜单列表标记<menu>
菜单列表主要用于设计单列的菜单列表。菜单列表在浏览器中的显示效果和无序列表是相同的,因为它的功能也可以通过无序列表来实现。
语法格式：
<menu>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
......
</menu>表格使用问题
表格在网页中可以清晰的排列数据，在大多数情况下。表格更多地是应用在网页布局定位上。
（一）表格的基本构成table、tr、td
表格由行、 列和单元格3部分组成，一般通过3个标记来创建，分别是表格标记table、行标记tr和单元格标记td。表格的各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效。
行： 表格中的水平间隔。
列： 表格中的垂直间隔。
单元格： 表格中行与列相交所产生的区域。语法格式：
<table>
<tr>
<td>单元格内文字</td>
<td>单元格内文字</td>
</tr>
语法意义：<tr>和<tr>则分别表示行的开始和结束，在表格中包含几组<tr>…<td>就表示该表格为几行；<td>和</td>表示单元格的起始和结束。（二）设置表格的标题caption
使用<caption>来设置标题单元格，表格的标题一般位于整个表格的第1行。一个<table>表格只能含有一个表格标题。
语法格式：
<caption>表格的标题<caption>代码示例：
<caption>考试成绩表<caption>
<tr>
<td width="44">Jax</td>
<td width="36">95</td>
<td width="35">76</td>
<td width="38">80</td>
</tr>
注意：使用<caption>标记创建表格标题的好处是标题定义包含在表格内。如果表格移动或在HTML文件中重定位，标题会随着表格相应地移动。（三）表头th
表格的表头<th>是<td>单元格的一种变体，实质上仍是一种单元格。它一般位于第一行和第一列，用来表明这一行或列的内容类别。在一般情况下，浏览器会以粗体和居中的样式显示<th>元素中的内容。
语法格式：
<table>
<tr>
<th>80</th>
......
</tr>
<tr>
<td>单元格的内容</td>
<td>单元格的内容</td>
</tr>
</table>
注意：<th>元素的起始标记必须有， 但是结尾标记是可选的。（四）表格基本属性
1.表格宽度width
表格的width属性来设置表格的宽度。如果不指定表格宽度，浏览器就会根据表格内容的多少自动调整宽度。
语法格式：
<table width="表格宽度">
表格宽度的值可以是像素值，也可以是百分比。2.表格高度height
表格的属性height可以设置表格的高度。
语法格式：
<table height="表格的高度">
表格高度的值可以是像素值，也可以是百分比。3.表格对齐方式align
表格的对齐格式可以使用align属性来设置。
语法格式：
<table align="对齐方式">
对齐方式有三种方式：left（左对齐）、center（居中对齐）、right（右对齐）
整个表格在浏览器页面范围内居中对齐，但是表格里单元格的对齐方式并不会因此而改变。如果要改变单元格的对齐方式，就需要在行、列或单元格内另行定义。（五）表格的边框
1.表格边框宽度border
默认情况下，如果不指定border属性，则浏览器将不显示表格边框。
语法格式：
<table border="边框宽度">
注意：只有设置border值不为0， 在网页中才能显示出表格的边框。
border属性设置的表格边框只能影响表格四周的边框宽度，而并不能影响单元格之间边框尺寸。 2.表格边框颜色bordercolor
默认情况下边框的颜色是灰色的，可以使用bordercolor设置边框颜色。但是设置边框颜色的前提是边框的宽度不能为0，否则无法显示出边框的颜色。
语法格式：
<table border="边框宽度" bordercolor="边框颜色">
注意：边框的宽度不能为0， 边框颜色为16进制的颜色值。3.内框宽度cellspacing
表格的内框宽度属性cellspacing用于设置表格内部每个单元格之间的间距。
语法格式：
<table cellspacing="内框宽度值">
注意：内框宽度的单位是像素。4.表格内文字与边框间距cellpadding
在默认情况下，单元格里的内容会紧贴着表格的边框，这样看上去非常拥挤。可以使用cellpadding来设置单元格边框与单元格里的内容之间的距离。
语法格式：
<table cellpadding="文字与边框距离值">
注意：单元格里的内容与边框的距离以像素为单位，一般可以根据需要设置，但是不能过大。（六）表格的背景
1.表格背景颜色bgcolor
表格的背景颜色属性bgcolor是针对整个表格而言，bgcolor定义的颜色可以被行、列或者单元格定义的背景颜色所覆盖。
语法格式：
<table bgcolor="背景颜色">2.表格背景图像
除了表格可以设置背景颜色之外，表格也可以像网页背景那样设置图像作为背景。
语法格式：
<table background="背景图像地址">
注意：背景图像的地址可以相对地址，也可以是绝对地址。（七）表格的行属性
1.高度控制height
使用height可以设置行的高度。
语法格式：
<tr height="行的高度">2.边框颜色bgcolor
可以使用bordercolor属性设置为行的边框颜色。
语法格式：
<tr bordercolor="边框的颜色">3.行背景bgcolor、background
行的bgcolor或background属性仅作用于当前行。设置的bgcolor颜色可以覆盖<table>的bgcolor或background属性，不过会被单元格定义的背景颜色所覆盖。
语法格式：
<tr bgcolor="行的背景色">
注意：默认设置为透明色，即和文档背景颜色相同。bgcolor颜色值可以为颜色名或16进制等命名方法。background可以选择图像的相对地址，也可以选择绝对地址。4.行文字的水平对齐方式align
<tr>的align属性用来控制表格当前行的水平对齐方式。它不受表格整体对齐方式的影响，却能够被单元格的对齐方式定义所覆盖。
语法格式：
<tr align="水平对齐方式">5.行文字的垂直对齐方式valign
<tr>的valign属性用来控制表格当前行的垂直对齐方式。 垂直对齐方式有3种，分别是top、 middle和bottom。
语法格式：
<tr calign="垂直对齐方式">（八）单元格属性
单元格是表格中最基本的单位。<td>单元格全部包含在行<tr>中，一个行里面可以有任意多个单元格。可以自定义设置单元格的各项属性，此类样式将覆盖<table>和<tr>已经定义的样式。
1.单元格大小width、height
默认情况下，单元格的宽度和高度会根据内容自动调整，我们也可以通过width、height来设置单元格的宽度和高度。
语法格式：
<td width="单元格宽度" height="单元格高度">
注意：单元格高度和宽度的单位都是像素。2.水平跨度colspan
在Excel里面大家也见过，就是把两个单元格合并。在网页中也是可以实现。有时我们需要将两个或者是多个表格组合成一个单元格。
语法格式：
<td colspan="跨度的列数">代码示例：
<table>
<tr>
<td colspan="2" align="center">世界著名科技公司</td>
</tr>
<tr>
<td>Google</td>
<td>Microsoft</td>
</tr>
<tr>
<td>Facebook</td>
<td>Apple</td>
</tr>
</table>3.垂直跨度rowspan
单元格除了可以在水平方向跨列，在吹制方向上也是可以跨行。
语法格式：
<td rowspan="跨度的行数">
注意：与水平跨度相对应，rowspan设置的是单元格在垂直方向上跨行的个数。4.对齐方式align、valign
单元格的对齐方式设置于行的对齐方式设置方法都是相似的。
语法格式：
<td align="水平方式对齐" valign="垂直方式对齐">
注意：水平对齐方式的取值可以是left、center或right，垂直对齐方式的取值可以是top、middle或bottom。5.单元格的背景色
语法格式：
<td bgcolor="背景颜色">
注意：<td>标记中的背景颜色只是针对单元格而言，该属性用来指定单元格的背景颜色。6.单元格的边框颜色bordercolor
单元格的边框颜色可以通过bordercolor来设置。
语法格式：
<td bordercolor="边框颜色">
注意：颜色的设置为16进制的数值。7.单元格的亮边框bordercolorlight
单元格的亮边框就是单元格边框向光的部分。通过bordercolorlight可以设置单元格亮边框的颜色。
语法格式：
<td bordercolorlight="亮边框的颜色">
注意：颜色的设置为16进制的数值。8.单元格的暗边框bordercolordark
单元格的暗边框就是单元格边框背光的部分。通过bordercolordark可以设置单元格暗边框的颜色。
语法格式：
<td bordercolordark="暗边框的颜色">
注意：颜色设置为16进制的数值。9.单元格的背景图像background
单元格也可以有背景图像，可以通过background来设置单元格的背景图像。
语法格式：
<td background="背景图像的地址">
注意：背景图像的地址可以是绝对的地址，也可以是相对地址。（九）表格的结构
1.表格的表首标记<thead>
用于定义表格最上端表首的样式,可以设置背景颜色、文字对齐方式、文字的垂直对齐方式等。
语法格式：
<thead bgcolor="背景颜色" align="对齐方式">
......
</thead>
注意：bgcolor、 align、 valign的取值范围与单元格中的设置方法相同。在<thead>标记内还可以包含<td>、<th>和<tr>标记，而一个表元素中只能有一个<thead>标记。2.表格的表主题标记<tbody>
语法格式：
<tbody bgcolor="背景颜色" align="对齐方式">
......
</tbody>
注意：bgcolor、align、valign的取值范围与<thead>标记中的相同。一个表元素中只能有一个<tbody>标记。3.表格的表尾标记<tfoot>
<tfoot>标记用于定义表尾样式。
语法格式：
<tfoot bgcolor="背景颜色" align="对齐方式">
......
</tfoot>
注意：bgcolor、align、valign的取值范围与<thead>标记中的相同。一个表元素中只能有一个<tfoot>标记。
随时随地看视频
