一.有序列表 (ordered list)格式:
- 有序列表
- 有序列表
- 有序列表
给一堆数据添加列表语义,数据有先后之分。常运用于歌单,排行榜等需要列出先后顺序的列表。
注意点:
1.
- 标签是一个组合,一般情况下一起使用。
2.
- 标签中一般只有
- 标签,不可能有其它标签。
3.若在开发中列表包含的信息很多需要添加其它语义,则可在
- 标签中嵌套其它标签。
二.无序列表 (unordered list)格式:
- 无序列表
- 无序列表
- 无序列表
给一堆数据添加列表语义,数据无先后之分。此种列表运用的最多。常运用于新闻条,商品列表等无需列出先后顺序的列表。
注意点:
1.
- 标签是一个组合,一般情况下一起使用。
2.
- 标签中一般只有
- 标签,不可能有其它标签。
3.若在开发中列表包含的信息很多需要添加其它语义,则可在
- 标签中嵌套其它标签。
三.定义列表 (definition list)格式:
-
列表头
- 列表类容 列表头
- 列表内容
定义列表用dt定义标题,dd定义标题的描述。常运用于网站尾部相关信息,图文混排等。
注意点:
1.
-
标签是一个组合,一般情况下一起使用。
2.
标签中一般只对应一个
- 标签,虽然它可以对应多个
-
标签。
3.若在开发中列表包含的信息很多需要添加其它语义,则可在
-
标签中嵌套其它标签。
四.列表的嵌套列表内嵌套其它标签
有时列表内包含的信息需要添加其它标签
格式:
这是一个标题
这是一个段落
这是一个标题
这是一个段落
列表内部可以嵌套子列表
格式:
-
- 这是子列表1
- 这是子列表1
-
- 这是子列表2
- 这是子列表2
各种列表可以按需求搭配嵌套
格式:
- 无序列表
-
- 有序列表
-
-
定义列表头
- 定义列表内容
- 定义列表内容
1.一般无序列表使用的最多,有序列表使用的最少。
2.若要去除列表前面的小圆点或数字可以使用CSS样式去除。
格式:
五.< table>表格标签及其属性格式:
作用:这是单元格1-1 这是单元格1-2 这是单元格2-1 这是单元格2-2 这是单元格3-1 这是单元格3-2 用来给一堆表格标签添加语义。表格是数据展现的一种形式,当数据非常大的时候,使用表格额可以清晰的展现。
< table>表格标签常用属性:< table>属性作用border边框
cellpaddingtd的内边距
cellspacingtd的外边距
widthtable宽度< td>属性作用align水平对齐方式
valign垂直对齐方式
width宽度,默认自动分布注意点:
1.< table>
是一个组合, 元素定义表格行, 元素定义表头,元素定义表格单元。简单的 HTML 表格由< table> 元素以及一个或多个 、或 元素组成。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。2.表格中的border属性决定边框的宽度,平常默认宽度为0,也就是看不见表格。
3.width/height属性决定表格的宽度和高度。平常默认宽高是根据内容的宽高来展现的。若只设置
的宽高则只改变当前单元格的宽高,表格整体宽高不受影响。4.在
中都设置了align属性的话,系统优先采用。5.表格中的内容一般默认为垂直居中的,所以只需设置水平居中便可,一般使用CSS样式来进行此项操作,不推荐使用align属性。CSS格式:text-align:centertext-align:center.
6.若想合并全部单元格,清除单元格的外边距。可使用样式border-collapse: collapse;。
六.< table>表格的其他标签
为表格设置标题:使用标签
设置单元格标题:使用
标签替换标签格式:
作用表格标题 Month Savings January $100 表格标题会自动跟随表格,会在表格中的最上面水平居中,而不是在页面中水平居中。
单元格标题会自动在单元格中居中,并且文字会加粗。
注意点:
标签必须写在< table>标签里面,并且紧跟< table>标签。
七.表格单元格的合并水平方向的单元格合并
方法:
在需要合并的单元格中加入colspan属性,要合并几个单元格属性的取值就为几。
格式:
表示这个单元格在水平方向上相当于三个单元格。垂直方向的单元格合并
方法:
在需要合并的单元格中加入rowspan属性,要合并几个单元格属性的取值就为几。
格式:
表示这个单元格在垂直方向上相当于三个单元格。注意点:
1.单元格的合并只能是从左至右和由上到下。
2.合并单元格之后要删掉多出来的单元格。例如colspan``rowspan的取值为3的话,就相当于这个单元格在水平方向或垂直方向相当于3个单元格。那么我们就要删除这个单元格的右边2个单元格或者下边两个单元格。
作者:饥人谷_刘冲
链接:https://www.jianshu.com/p/392fb67e7d27