这系列的文章让你的HTML入门更容易【二】

使用列表

列表是一种非常有用的数据排列形式，它是以列表的形式来显示数据。

在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>标记。

文章都是以前的笔记内容，如果写的不好的地方，希望大家指出。谢谢~~~~