HTML笔记(三) 表格和列表

本篇记录表格 (table) 和有序列表 (ordered list) \ 无序列表 (unordered list) 的部分用法

1.表格table

表格标签

使用 <table> 定义

表格的行

使用 <tr> 定义, 行内可以包含 <th> 和 <td>

表头和表单元

表头用 <th> 定义, 表单元用 <td> 定义

大多时候 <th> 和 <td> 长的差不多, 唯一区别可能在于有的浏览器会将 <th> 内的字加粗

因此有时候可以使用 <td> 加样式来替代 <th>

示例:

2.有序列表ordered list

列表标签

使用 <ol> 进行标记

列表项目

使用 <li> 进行标记

注意

有序列表会自动将列表内容进行分行排序展示, 如1.xxx 2.xxx

常用的两个属性:

type属性:

该属性定义的是排序的标签样式, 有 5 种样式, 分别为

1 / a / A / i / I

例如, 当 type = "A" 时, 排序变为 A.xxx B.xxx

reversed属性: 

倒序排列, 属性中加入 reversed=""; 即可

示例:

3.无序列表unordered list

列表标签

使用 <ul> 进行标记

列表项目

使用 <li> 进行标记

注:

1. 无序列表前面的点要用样式来去掉, 在style中定义 list-style:none; 即可

2. 若有一个功能由很多功能子项组成, 每个功能子项又十分类似,

　则可以使用无序列表进行展示, 如菜单项, 导航栏等.

示例:

鼠标移到绿色方块前:

鼠标移到绿色方块后:

这个下拉列表是用html和css做的, 不需要用到js, 下拉列表的展示不会影响原有格式, 不会在列表取消隐藏时把下面的标签顶下去

• 下拉菜单需边的子菜单隐藏（使用display:none;将元素隐藏）
• 鼠标悬浮样式（div:hover）
• 父元素相对定位（position:relative;）
• 子元素绝对定位（position:absolute;）