表格table和列表ol、ul和结构标记

表格：按照一定的格式摆放数据，表格是又一些被称为“单元格”的矩形框按照从上到下、从左到右的顺序排列到一起而组成的

语法：

表格<table></table>

常用属性

width：宽度

Height：高度

align：设置表格的对齐方式(left，center，right)

border：边宽宽度，px作为单位，可以省略

cellpadding：单元格内边距(单元格边框与内容之间的距离)

cellspacing：单元格外边距(单元格与单元格之间的距离,设置边框时这个属性一般设置成0)

bgcolor：背景颜色

特有属性

1、边框合并，

属性：border-collapse

取值： 1、separate，默认值，分离边框

2、collapse，合并边框

2.边框边距

属性：border-spacing

作用：控制相邻单元格之间的距离

取值：1个值：水平和垂直间距相同

2个值：第1个值表示水平间距，第2个值表示垂直间距。两个值之间用隔开

注意：border-collpase的值必须为 separate时才能设置边框边距

3.显示规则

作用：如何去布局一个表格,指定了表格显示单元格，行的算法规则, 又称为布局

属性：table-layout

取值：1、auto ：自动，自动表格布局(默认值)列宽度是由内容来决定的

2、fixed ：固定，固定表格布局列宽度有表格以及单元格所设定好的数据

auto与fixed的区别：

1、自动表格布局

1、单元格大小会适应内容

2、表格复杂时会比较慢

3、适用于不确定每列大小时使用

4、自定布局算法较慢，但是能反映传统的HTML表格

2、固定表格布局

1、列宽度取决于表格的宽度，列的宽度

2、会加速显示表格

3、固定表格布局算法比较快，但不够灵活

表行<tr></tr>

属性：align：设置该行的水平对齐方式（left，center，right）

valign：设置该行的垂直对齐方式（top，middle，bottom）

bgcolor：该行的背景颜色

列(单元格)<td></td>

属性：width，height，align，valign

colspan：设置单元格跨列

rowspan：设置单元格跨行

表格标题<caption></caption>

默认在表格上方居中显示，<caption></caption>必须紧跟<table>之后

每个表格只能有一个标题<caption>

属性：caption-side，取值：

1.top ：默认值，

2、bottom : 标题位于表格之下

行分组：html中允许将表格内容划分为3个部分

1. 表头行分组<thead></thead>

2. 表主体行分组<tbody></tbody>

3. 表尾行分组<tfoot></tfoot>

注意：每个行分组都允许包含一对或多对<tr></tr>

不规则表格：通过td 的 colspan和rowspan 属性来设置

colspan：跨列，从指定单元格位置处开始，水平向右合并几列，被合并掉的

单元格一定要删除

rowspan：跨行，从指定单元格位置处开始，纵向向下合并几个单元格,被合

并掉的单元格一定要删除

表格嵌套：一个表格中又出现一个表格，表格中的所有内容，只能出现在td中

列表：按照一定的格式显示数据的元素，默认显示方式是从上到下

组成：都由“列表类型”和“列表项”组成

列表类型：有序列表<ol></ol>和无序列表<ul></ul>

列表项：具体显示在列表里的内容<li></li>

有序列表：

标记：<ol></ol>

属性：type，作用：列表项前的标识，取值：

“1”表示数字，默认值，

“a”表示小写字母

“A”表示大写字母，

“i”表示小写罗马数字，

“I”表示大写罗马数字

start：指定列表项从第几个字符开始显示

列表项：<li></li>

无序列表：

标记：<ul></ul>

属性：type，指定列表类型，取值：

“disc”表示实心圆(默认值)，

“circle”表示空心圆

“square”表示实心矩形，

“none”表示没有

列表项：<li></li>

定义列表：

作用：用于给一类食物的定义与解释

语法：<dl></dl>：定义一个定义列表

<dt></dt>：定义列表中要解释的名词或术语

<dd></dd>：定义列表中对名词或术语的解释

列表的嵌套：通过列表嵌套，实现多层列表，被嵌套的内容，必须放在li中

列表项

1、列表项标识

属性：list-style-type

取值： 1、none ，无标记

2、disc ，实心圆

3、circle，空心圆

4、square，实心方块

2、列表项图像，

属性：list-style-image，

取值:url()

3、列表项位置，

属性：list-style-position

取值：1、outside : 默认值，标识位于列表项区域之外

2、inside : 标记放在列表项区域之内

4、列表项复合属性，

属性：list-style，

取值：type url position，

常用方式：list-style:none;

结构标记：用于表示页面的布局，目的是为了提升标记的语义化

<header></header>定义文档的页眉，取代<div id=’header’></header>

<nav></nav>：用于表示页面中的导航部分

<section></section>：用于表示页面中的主体部分

<article></article>：用于表示独立于文档的其他部分的内容，比如：论坛中的帖子，新闻类网站中的具体一条新闻，博客或微博的条目，音视频等

<aside></aside>：表示网页内容中的边栏信息

<footer></footer>：表示网页底部信息