列表的分类

• 有序列表
• 无序列表

有序列表

说明

有序列表，ol为父元素，li为列表项；适用于强调顺序的情况下使用

语法

html
<ol>
  <li>我第一个列表元素</li>
  ...
  <li>我是第n个列表元素</li>
</ol>  

无序列表

说明

无序列表，ul为父元素，li为列表项，适用于不强调顺序的情况下使用

语法

html
<ul> 
  <li></li>
  ...
</ul>  

相关属性

有序列表正序和倒序排列　　

注意 reversed用于制定有序列表降序排列　　

选择标记

无论是有序列表还是无序列表都可以选择出现在列表项目左侧的标记的类型

参数	说明
disc	圆点
circle	圆圈
square	方块
decimal	数字 ，1、2、3...
upper-alpha	大写字母A、B、C...
lower-alpha	小写字母a、b、c...
upper-roman	大写罗马数字,I、II、III、IV、V、VI、VII、VIII、IX
lower-roman	小写罗马数字，i、ii、iii、iv...

显示无标记列表

css
ol {
    list-style-type: none;
}

使用定制标记　　　　

可以指定列表标记

css
li {background: url(image.png) repeat-type horizontal vertical;}

说明

repeat-type: 图片平铺方式，no-repeat：不平铺、repeat-x：水平平铺、repeat-y：垂直平铺
horizontal: 水平位置
vertical: 竖直位置
此时的URL：因为样式位于CSS中，所以图片URL是相对于CSS的路径

选择有序列表的起始编号

html
<ol start="n">
  <li value="b"></li>
  ...
</ol>  

说明

start="n"：列表起始编号n
value="b": 设置指定列表项目li的编号

注意

1. 当第一个列表项设置value后且设置 start属性时，value属性值会覆盖start属性值
2. 设置value属性后，后续li列表会相应的重新编号
3. 列表可以包含一个以上的带value属性的li

控制标记的位置

默认情况下列表标记位于列表项外侧，而list-style-position值为inside可以使得列表标记位于列表项内测

使用对象

ul或者ol

语法

css
ol {
    //列表标记位于列表项内测
    list-style-position:  inside;
    //列表标记位于列表项外侧（默认）
    //  list-style-position: outside;
}

注意

1. list-style-type
   可移除列表的默认设置
2. 默认情况下列表ul或ol还设置了内边距和外边距，可使用 margin:0 和 padding:0来移除

描述列表[亦称为自定义列表]

作用

HTML提供了专门用于描述成组出现的名称（术语）及其值之间关联的列表类型

语法

html
<dl>
 <dt>术语</dt>
 <dd>解释术语的值</dd> 
</dl> 

说明

1. dt与dd关系可以是一对一、一对多或者多对一，多对多
2. 对于描述值dd通常浏览器会进行缩进，设置其margin-left可以改变缩进量

注意

1. 若dd描述值有多个文本段组成，应该使用多个p元素进行标记

表格

作用

过时、仅了解；用来显示、展示数据，提高数据可读性

语法

html
<table>
   <caption>人员统计</caption>
   <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>22</td>
    </tr>
</table>  

说明

table: 用于定义表格的标签
caption：表格标题必须位于第一行
tr: 用于定义表格中的行，必须在table标签中
th: 表头标签、默认浏览器会加粗居中显示
td：用于定义表格中的单元格，必须嵌套在tr中

表格属性(已弃用，仅做了解)

对齐

algin，取值为center、left、right

html
<table algin="center">
   ...
</table>

边框

border,取值为1或者空值，规定表格是否拥有边框，默认为空值即没有边框

距离

cellpadding: 规定单元格边缘与其内容之间空白距离 cellspacing：规定单元格之间的空白

宽度

width：规定表格的宽度

表格结构标签

为避免表格过长，所以thead标签表示表格头部区域【一般包含第一行表头标签th】、tbody标签表示表格主体区域，可以更好划分表格结构

语法

html
<table align="left">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>22</td>
    </tr>
    </tbody>
</table>

合并单元格

作用

用于将多个单元格合并为一个单元格

分类

• 跨行合并
• 跨列合并

目标单元格

• 跨行合并的目标单元格
  最上侧的单元格为目标单元格，写合并代码

• 跨列合并的目标单元格
  最左侧的单元格为目标单元格，写合并代码

跨行合并

rowspan="合并单元格的个数"

跨列合并

colspan="合并单元格的个数"

合并单元格步骤

1. 确定是跨行还是跨列
2. 确定目标单元格
3. 删除多余单元格