HTML学习笔记【3】
前集回顾：《HTML学习笔记【1】》
前集回顾：《HTML学习笔记【2】》
3 HTML标签
3.15 无语义的块标签&行内标签
div【无语义的块标签】
span【无语义的行内标签】
3.16 表格
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
- table 【表格标签】：声明表格
- border 【边框粗细】：默认值是0，即未设置时看不见边框；在不为0时，可以让单元格也有边框，但是这个值本身并不能改变单元格边框的粗细（单元格只有0到1的变化）
- bordercolor 【边框颜色】：包括最外框和内框
- align【对齐】：指的是表格整体在页面中的位置
- width/height【表格宽/高】：在未设置宽高时，没有内容的单元格会压缩成一条线，但设置了宽高之后，就会保证最低有宽高值；
- cellpadding【内容边距】：设置单元格内容与单元格边框之间的距离，默认值是0（默认到左部边的距离是0）
- cellspacing【单元格边距】：单元格之间的间距，默认值是2，但最常用的值是0，单元格与边框叠加，转化成了日常生活中常用的表格
- caption【标题】：必须紧贴table标签上方
- th 【表头】：替换td【单元格】位置
- tr 【表格行】
- bgcolor【背景颜色】：局部优先，默认继承父级（table标签）
- align【水平对齐方式】：left/center/right
- valign【垂直对齐方式】：top/middle/bottom
- td 【表格列】
- bgcolor【背景颜色】：局部优先，默认继承父级（tr标签）
- width/height【单元格宽/高】
- 优先满足此格设置的宽高，水平方向：其余的格子平分剩余的距离尺寸；竖直方向：随此单元格设置的高度变化
- 如果在单个tr内的单元格设置总和超过了表格大小，则不会溢出表格；如果在两个及以上的tr中设置的宽高，则自动扩充表格
- 行高默认看行内最高单元格的高度，但如果经过了设置，就随设置的值
- align【水平对齐方式】：left/center/right
- valign【垂直对齐方式】：top/middle/bottom
- rowspan【合并行】
- colspan【合并列】
【实例】
<html>
<body>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
3.17 列表
3.17.1 无序列表
- 无序列表是一个项目的列表，此列项目默认使用粗体圆点disk（典型的小黑圆圈）进行标记。
- 除了disk之外，还有circle/square 空心圆/小方块
- 然而最重要的是把前面的标记删除，用type="none"
- 无序列表始于
<ul>标签。每个列表项始于<li>。
【实例】
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下：
- Coffee
- Milk
（列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。）
3.17.2 有序列表
- 同样，有序列表也是一列项目，列表项目使用数字进行标记。
- 有序列表始于
- 标签。每个列表项始于
- 标签。
- 标记同样可改：1,2,3.. or a,b,c.. or A,B,C..
- type="1"可以【改标记样式】，这里用1 2 3计数
- start【开始位置】：用2表示从2开始，字母按照数字顺延，即要从c开始，start="3"
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
浏览器显示如下：
1. Coffee
2. Milk
- 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
3.17.3 定义列表
- 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
- 自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
浏览器显示如下：
Coffee
Black hot drink
Milk
White cold drink
- 定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
