一.有序列表 (ordered list)

格式：

1. 有序列表
2. 有序列表
3. 有序列表

语义及运用：

给一堆数据添加列表语义，数据有先后之分。常运用于歌单，排行榜等需要列出先后顺序的列表。

注意点：

1.

1. 标签是一个组合，一般情况下一起使用。

   2.

   1. 标签中一般只有
   2. 标签，不可能有其它标签。

      3.若在开发中列表包含的信息很多需要添加其它语义，则可在

   3. 标签中嵌套其它标签。

      二.无序列表 (unordered list)

      格式：

      • 无序列表
      • 无序列表
      • 无序列表

      语义及运用：

      给一堆数据添加列表语义，数据无先后之分。此种列表运用的最多。常运用于新闻条，商品列表等无需列出先后顺序的列表。

      注意点：

      1.

      • 标签是一个组合，一般情况下一起使用。

        2.

        • 标签中一般只有
        • 标签，不可能有其它标签。

          3.若在开发中列表包含的信息很多需要添加其它语义，则可在

        • 标签中嵌套其它标签。

          三.定义列表 (definition list)

          格式：

          列表头

          列表类容

          列表头

          列表内容

          语义及运用：

          定义列表用dt定义标题，dd定义标题的描述。常运用于网站尾部相关信息，图文混排等。

          注意点：

          1.

          标签是一个组合，一般情况下一起使用。

          2.

          标签中一般只对应一个

          标签，虽然它可以对应多个

          标签。

          3.若在开发中列表包含的信息很多需要添加其它语义，则可在

          标签中嵌套其它标签。

          四.列表的嵌套

          列表内嵌套其它标签

          有时列表内包含的信息需要添加其它标签

          格式：

          • 这是一个标题

            这是一个段落

          • 这是一个标题

            这是一个段落

          列表内部嵌套列表

          列表内部可以嵌套子列表

          格式：

          • • 这是子列表1
            • 这是子列表1
          • • 这是子列表2
            • 这是子列表2

          各种类型列表相互嵌套

          各种列表可以按需求搭配嵌套

          格式：

          • 无序列表
          • 1. 有序列表

            2. 定义列表头

               定义列表内容

               定义列表内容

          注意点：

          1.一般无序列表使用的最多，有序列表使用的最少。

          2.若要去除列表前面的小圆点或数字可以使用CSS样式去除。

          格式：

          五.< table>表格标签及其属性

          格式：

          这是单元格1-1	这是单元格1-2
          这是单元格2-1	这是单元格2-2
          这是单元格3-1	这是单元格3-2

          作用：

          用来给一堆表格标签添加语义。表格是数据展现的一种形式，当数据非常大的时候，使用表格额可以清晰的展现。

          < table>表格标签常用属性：< table>属性

          作用border

          边框

          cellpadding

          td的内边距

          cellspacing

          td的外边距

          width

          table宽度< 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个单元格或者下边两个单元格。*** 此文章著作权由饥人谷_刘冲和饥人谷(QQ 群: 222459918) 所有。转载须说明来源。***