5-HTML列表，< table>表格标签及其属性
2016-12-24 本文已影响114人
饥人谷_刘冲
一.有序列表 (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>
-
作用
表格标题会自动跟随表格，会在表格中的最上面水平居中，而不是在页面中水平居中。
单元格标题会自动在单元格中居中，并且文字会加粗。 -
注意点：
<capition>标签必须写在< table>标签里面，并且紧跟< table>标签。
七.表格单元格的合并
-
水平方向的单元格合并
方法：
在需要合并的单元格中加入colspan属性，要合并几个单元格属性的取值就为几。
格式：
<td colspan="3">
表示这个单元格在水平方向上相当于三个单元格。
-
垂直方向的单元格合并
方法：
在需要合并的单元格中加入rowspan属性，要合并几个单元格属性的取值就为几。
格式：
<td rowspan="3">
表示这个单元格在垂直方向上相当于三个单元格。
-
注意点：
1.单元格的合并只能是从左至右和由上到下。
2.合并单元格之后要删掉多出来的单元格。例如colspan``rowspan的取值为3的话，就相当于这个单元格在水平方向或垂直方向相当于3个单元格。那么我们就要删除这个单元格的右边2个单元格或者下边两个单元格。
