列表、表格、表单

定义列表

格式：

• dl
  • dt
  • dd
  • dd

代码如下：

代码展示效果：

注意：

一个dt中可以包含一个dd，也可以包含多个dd

表格

表格中的标签都有：

• table 表格的包裹标签
• caption 表格标题
• thead 表头
• tboody 表格主体
• tfooot 表尾
• tr 行
• th 表头单元格
• td普通单元格

代码主要格式：

=注意：=

<table border="1" width="600" cellspacing="0" cellpadding="10">

<!-- 
            border 表格边框，值为数字表示边框粗细（当直接写border时，该值默认为1）
            width 表格总宽
            height 表格主体高度（是主体tbody的高度，不包含表头thead的高度）
            cellspacing 单元格之间的间距
            cellpadding 单元格内补白，内容与边框间距
         -->

</table>

例如：

（没加table的修饰之前）

（添加table的修饰之后）

<table>
	<thead align="right" valign="top">
		<!-- 
                align 水平对齐方式
                	值：left,right,center
                valign 垂直对齐方式
                	值：top,bottom,middle
                可以设置的元素：thead,tbody,tfoot,td/th
                (注意：1.当给table设置的时候是表格针对于整个页面居				中、居左、居右
                2.当表格没有设置高度的时候，单元格的高度为【内容高度					+内间距】，此时设置valign的值没有变化
         -->
	</thead>
</table>

<!-- 
        rowspan 跨行
        colspan 跨列
-->
    <table border="1" width="400">
        <thead>
            <tr>
                <th>时间</th>
                <th colspan="2">上午</th>
                <th colspan="2">下午</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">星期一</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

表单

标签名	语义和功能	属性	单标签和双标签
form	表单	action: 提交到后台的链接地址 target：设置打开窗口	双标签
input	多种类型的表单控件	type：类型 value： disabled：禁用，失效 maxlength: 最大长度 checked：设置默认选中	单标签
button	按钮	type： disabled：	双标签
textarea	文本域	rows：行数 cols：列数 disabled：	双标签
select	下拉选项框	disabled：	双标签
option	下拉选项的选项	value: selected：默认选中的下拉选项 disabled：	双标签
label	关联表单控件	for：设置关联的元素	双标签

1. input 标签的 type 属性的值有 text、password、radio、checkbox、submit、reset、button，默认值是 text
2. button 标签的 type 属性的值有 submit、reset、button，默认值是 submit

<h3>单选按钮</h3>
         <input type="radio" name="gander" value="man">男
         <input type="radio" name="gander" value="woman">女
         <input type="radio" name="gander" value="else" checked>保密
         <!-- 单选按钮中的name必须相同 -->
         
<h3>复选框</h3>
         <input type="checkbox" name="" value="love">看书
         <input type="checkbox" name="" value="love">跑步
         <input type="checkbox" name="" value="love" checked>敲代码

<h3>普通按钮</h3>
         <button>点火发射</button>
         <input type="button" name="" id="" value="点击添加">

<h3>文本域</h3>
         <textarea name="" id="" cols="30" rows="10"></textarea>
         
<h3>下拉选项框</h3>
         <select name="" id="">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">广东</option>
         </select>
         
<h3>disable属性</h3>
        <input type="password" value="123456" maxlength="6" disabled>
        
<h3>lable 关联表单控件 和 for 设置关联的元素</h3>
		<!-- 方法一 -->
        <label for="mima">请输入密码</label>
        <input type="password"  maxlength="6" id="mima">
        <br>
        <!-- 方法二 -->
        <label >
            <input type="radio" name="gander" value="man">男
            <!-- 注意：这种方法关联的时候不要添加for，就算不写for的值也不能添加，不然无效 -->
        </label>
        <label >
            <input type="radio" name="gander" value="woman">女
        </label>
        <label >
            <input type="radio" name="gander" value="else" checked>保密
        </label>