5-HTML列表，< table>表格标签及其属性

作者: 饥人谷_刘冲 | 来源:发表于2016-12-24 09:23 被阅读114次

5-HTML列表，< table>表格标签及其属性
HTML学习心得（二）
## HTML基础-列表标签/表格标签
html列表，标签
HTML <table> 标签
HTML 4.01版
Day21HTML
CSS 表格属性
html基础
前段学习笔记三

一.有序列表 (ordered list)

格式：

<ol>
 <li>有序列表</li>
 <li>有序列表</li>
 <li>有序列表</li>
</ol>

语义及运用：
给一堆数据添加列表语义，数据有先后之分。常运用于歌单，排行榜等需要列出先后顺序的列表。
注意点：
1.<ol> <li>标签是一个组合，一般情况下一起使用。
2.<ol>标签中一般只有<li>标签，不可能有其它标签。
3.若在开发中列表包含的信息很多需要添加其它语义，则可在<li>标签中嵌套其它标签。

二.无序列表 (unordered list)

格式：

<ul>
<li>无序列表</li> 
<li>无序列表</li> 
<li>无序列表</li>
</ul>

语义及运用：
给一堆数据添加列表语义，数据无先后之分。此种列表运用的最多。常运用于新闻条，商品列表等无需列出先后顺序的列表。
注意点：
1.<ul> <li>标签是一个组合，一般情况下一起使用。
2.<ul>标签中一般只有<li>标签，不可能有其它标签。
3.若在开发中列表包含的信息很多需要添加其它语义，则可在<li>标签中嵌套其它标签。

三.定义列表 (definition list)

格式：

<dl> 
<dt>列表头</dt> 
<dd>列表类容</dd> 
<dt>列表头</dt> 
<dd>列表内容</dd>
</dl>

语义及运用：
定义列表用dt定义标题，dd定义标题的描述。常运用于网站尾部相关信息，图文混排等。
注意点：
1.<dl> <dt> <dd>标签是一个组合，一般情况下一起使用。
2.<dt>标签中一般只对应一个<dd>标签，虽然它可以对应多个<dd>标签。
3.若在开发中列表包含的信息很多需要添加其它语义，则可在 <dt> <dd>标签中嵌套其它标签。

四.列表的嵌套

列表内嵌套其它标签
有时列表内包含的信息需要添加其它标签
格式：

  <ul>
        <li>
            <h2>这是一个标题</h2>
            <p>这是一个段落</p>
        </li>
        <li>
            <h2>这是一个标题</h2>
            <p>这是一个段落</p>
        </li>
    </ul>

列表内部嵌套列表
列表内部可以嵌套子列表
格式：

  <ul>
        <li>
            <ul>
                <li>这是子列表1</li>
                <li>这是子列表1</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>这是子列表2</li>
                <li>这是子列表2</li>
            </ul>
        </li>
    </ul>

各种类型列表相互嵌套
各种列表可以按需求搭配嵌套
格式：

  <ul>
        <li>无序列表</li>
        <li>
            <ol>
                <li>有序列表</li>
                <li>
                    <dl>
                        <dt>定义列表头</dt>
                        <dd>定义列表内容</dd>
                        <dd>定义列表内容</dd>
                    </dl>
                </li>
            </ol>
        </li>
    </ul>

注意点：
1.一般无序列表使用的最多，有序列表使用的最少。
2.若要去除列表前面的小圆点或数字可以使用CSS样式去除。
格式：

<style> ol, ul { list-style: none; }</style>

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

格式：

  <table border="1px">
    <tr>
        <th>这是单元格1-1</td>
            <th>这是单元格1-2</td>
    </tr>
    <tr>
        <td>这是单元格2-1</td>
        <td>这是单元格2-2</td>
    </tr>
    <tr>
        <td>这是单元格3-1</td>
        <td>这是单元格3-2</td>
    </tr>
    </table>

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

< table>属性	作用
border	边框
cellpadding	td的内边距
cellspacing	td的外边距
width	table宽度

< td>属性	作用
align	水平对齐方式
valign	垂直对齐方式
width	宽度，默认自动分布

注意点：
1.< table> <tr> <td>是一个组合，<tr> 元素定义表格行， <th>元素定义表头，<td>元素定义表格单元。简单的 HTML 表格由< table> 元素以及一个或多个 <tr> 、<th>或 <td>元素组成。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
2.表格中的border属性决定边框的宽度，平常默认宽度为0，也就是看不见表格。
3.width/height属性决定表格的宽度和高度。平常默认宽高是根据内容的宽高来展现的。若只设置<td>的宽高则只改变当前单元格的宽高，表格整体宽高不受影响。
4.在<tr> <td>中都设置了align属性的话，系统优先采用<td>。
5.表格中的内容一般默认为垂直居中的，所以只需设置水平居中便可，一般使用CSS样式来进行此项操作，不推荐使用align属性。CSS格式：text-align:centertext-align:center.
6.若想合并全部单元格，清除单元格的外边距。可使用样式border-collapse: collapse;。

六.< table>表格的其他标签

为表格设置标题：使用<capition>标签
设置单元格标题：使用<th>标签替换<td>标签

格式：

<table border="1">
  <caption>表格标题</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>