一.列表
列表标签是一个块元素,他可以使信息结构化和条理化,并以条列的样式显示出来。
列表标签分三类:
1.有序列表是由<ol>和<li>标签组成,语法如下:
<ol>
<li>早饭</li>
<li>晚饭</li>
<li>中饭</li>
<li>夜宵</li>
</ol>
效果如图,会出现序列号1 2 3 4 他不是只有这一种表示方法
<ol type="A" start="3">
<li>早饭</li>
<li>晚饭</li>
<li>中饭</li>
<li>夜宵</li>
</ol>
C.早饭
D.晚饭
E.中饭
F.夜宵
type属性是可以改变序列符号 属性值有:1 A a I
start属性是可以改变序列开始的符号 start值为3时 是从26字母的第三个C开始
2.无序列表
无序列表是一个项目列表,其中的项目使用粗体圆点进行标记。无序列表由<ul>和<li>标签组成。
<ul>
<li>早饭</li>
<li>晚饭</li>
<li>中饭</li>
<li>夜宵</li>
</ul>
<ul type='square'>
<li>早饭</li>
<li>晚饭</li>
<li>中饭</li>
<li>夜宵</li>
</ul>
type属性是可以改变序列前面的符号 square值时黑色方块
3.定义列表
定义列表是一种特殊的列表形式,他不仅仅是一列项目,而是项目及其注释的组合。他是用<dl>,<dt>和<dd>组成
<dl>
<dt>不常见的水果</dt>
<dd>蛇果</dd>
<dd>莲雾</dd>
<dd>人参果</dd>
</dl>
<dl>
<dt>不常见的食物</dt>
<dd>蚕蛹</dd>
<dd>茼蒿</dd>
<dd>香椿</dd>
<dd>知了壳炒鸡蛋</dd>
</dl>
二.表格
table是表格标签,tr是行,td是列
<table border="1" width="500" height="300" bgcolor="#eee">
<tr height="50">
<td align="center" bgcolor="#EAA331">1-1</td>
<td align="right">1-2</td>
<td width="50">1-3</td>
</tr>
<tr bgcolor="#999">
<td valign="top">2-1</td>
<td>2-2</td>
<td valign="bottom">2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td></td>
</tr>
子标签会继承父级标签的属性值
tr可以设置高度 不能设置宽度
td可以设置宽度 不能设置高度
align代表水平方向 left center right
valign代表垂直方向 top middle bottom
bgcolor设置背景色
2.合并表格
<table border="1" width="400" height="300" align="center">
<thead>
<tr>
th是表头标签 字体加粗 居中显示
colspan是水平方向单元格的合并
3代表合并3个单元格
<th colspan="3">学生成绩</th>
</tr>
</thead>
<tbody>
rowspan是上线方向单元格的合并
2代表合并2个单元格
<tr>
<td rowspan="2" align="center">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td>李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>李四</td>
<td>数学</td>
<td>91</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">表格底部</td>
</tr>
</tfoot>
</table>
如上图所示 每个表格之间有空隙 不美观 所以为了解决这个问题下方有几种解决方法
细线表格方法1
cellspacing是单元格之间的间距
<table border="0"width="800" height="500"align="center" cellspacing="1" bgcolor="green">
细线表格方法2
border-collapse:collapse 将边框会合并为一个单一的边框
<table border="1" width="500" height="300" align="center" style="border-collapse: collapse;" bordercolor="green">
细线表格方法3
<table border="0" width="160px" hieght="40px" bgcolor="red">
border设置为0 表格就不会有边框出现 背景设置颜色 这里的颜色就是你要设置边框的颜色
<tr bgcolor="#fff">
<td>000000000</td>
<td>0000000000</td>
<td>0000000000</td>
这里要把每行都设置一个颜色
</tr>
<tr bgcolor="#fff">
<td>0000000000</td>
<td>0000000000</td>
<td>0000000000</td>
</tr>
<tr bgcolor="#fff">
<td>0000000000</td>
<td>0000000000</td>
<td>0000000000</td>
</tr>
<tr bgcolor="#fff">
<td>0000000000</td>
<td>0000000000</td>
<td>0000000000</td>
</tr>