列表 ，表格和表单

一.列表

列表标签是一个块元素，他可以使信息结构化和条理化，并以条列的样式显示出来。

列表标签分三类：

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>