这次讲一下html中的列表和比较重要的表格
列表分为有序和无序,有序列表与无序列表都是块状元素
<ul>(父标签)
定义无序列表。复合标签(由父标签和子标签组成),不单独出现,用<li></li>(子标签)表示每一行
<ol>
有序列表,子标签同<ul>
Exp:
<ul>
<li>这是列表项</li>
</ul>
<ol>
<li>这是有序列表项</li>
</ol>
<ol>样式属性
css语言,可以有两个值
(样式的名称) (样式的值)
<ol style="list-style-type:序号的样式的数值">
样式属性级别比<ol>高,可以将其定义为无序
两个属性之间用;和一个空格分开
<ul>的type属性
disc | 默认值。实心圆。 |
circle | 空心圆。 |
square | 实心方块。 |
reversed | reversed | 规定列表顺序为降序。(9,8,7...) |
type |
| 规定在列表中使用的标记类型。 |
通过css能控制列表的3个属性:
List-style-type : 列表项的显示标志
值 | 描述 |
none | 无标记。 |
disc | 默认。标记是实心圆。 |
circle | 标记是空心圆。 |
square | 标记是实心方块。 |
decimal | 标记是数字。 |
decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) |
lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) |
hebrew | 传统的希伯来编号方式 |
armenian | 传统的亚美尼亚编号方式 |
georgian | 传统的乔治亚编号方式(an, ban, gan, 等。) |
cjk-ideographic | 简单的表意数字 |
hiragana | 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名) |
katakana | 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名) |
hiragana-iroha | 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名) |
katakana-iroha | 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名) |
List-style-image: 用于替换显示标志的图片.
exp:
表格
使用tr来表示“一行”,用th或td表示一个具体的单元格,通常th作为thead的tr当中的子元素,td作为tbody或tfoot的tr当中的子元素。
表格标签名:table tr th(表头,默认居中加粗) td thead tbody caption
table属性
border(边框)="粗细" 只是外面加粗
table样式属性
Border-collapse: 边框是否融合.
可选值: separate(表格与表格相互独立的边框,默认值)
Collapse,(表格之间的边框共用).
Border-spacing: 边框间距
用法: border-spacing: xpx ypx (给两个像素值,分别代表单元格在x,y轴的距离)
Cellpadding(边距)内容与框的距离
Cellspacing(间距)两个单元格距离
Align (对齐方式)=“center居中”
<center>居中标签</center>
tr属性
Height
Align-text
td属性
Width
Align
Valign垂直对齐方式
合并单元格
<td colspa="向右合并几个单元格包括它本身”>
竖向合并单元格
<td rowspan"向下合并几个单元格包括它本身”>
*注意:合并单元格只是将其他的单元格挤原本位置,并没有减少单元格数量,在设置合并时,为“需合并单元格”的左上方第一个单元格设置rowspan或colspan属
性,而其他行或列则直接删除掉多余的td或th元素。
Exp:
第一行表格只有三项,其中“收入” “支出”合并了两个单元格。
如有Thead和tbody为table的下一级
<caption>与<tr>或thead和tbody同级,为table直接子标签。
表格的嵌套规则
table元素下只能直接包含caption、thead、tbody、tfoot、col、colgroup元素;thead、
tbody、tfoot下可直接包含tr,tr下可包含th或td。通常th出现在thead的tr标签中。