HTML表（列表、表格、表单）

HTML表（列表、表格、表单）@[toc]

概要

` 提示：本章主要记录HTML表相关内容及基础属性

一、列表

html支持有序、无序、自定义列表

1.1 有序列表

有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

        type: 1 A a I i
        reversed: 倒序顺序
        start: 设置初始值

 <ol type="1" reversed start="10">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
 </ol>

1.2 无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

        type: disc 实心圆 默认
              circle 空心圆
              square 实心方框

 <ul type="square">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

1.3 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始

<dl >
        <dt>列表标题</dt>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
    </dl>

注意：ul/ol下只用li标签， li可以套任意标签

二、表格

table >  定义表格
tr    >  定义行
th    >  定义标题
td    >  定义列
caption > 定义表格标题

rowspan: 合并行  使用时：值为几，就把对应几行的td删掉
colspan: 合并列  使用时：值为几，就删除本行后的几个td
bgcolor: 背景颜色

给一行中任意一个列加高（height）属性，整行都是一个高，如果有冲突，按最大值撑开；
给一列中任意一个行加宽（width）属性，整列都是一个宽，如果有冲突，按最大值撑开。

    <table border="1" align="center" width="600">
    	<caption>表格标题</caption>
        <tr>
            <th bgcolor="pink" height="30">表格标题</th>
            <th height="60">表格标题</th>
            <th>表格标题</th>
        </tr>
        <tr  align="center" >
            <td rowspan="3">第一行第一列</td>
            <td colspan="2">第一行第二列</td>
            <!-- <td>第一行第三列</td> -->
        </tr>
        <tr  align="center" >
            <!-- <td>第二行第一列</td> -->
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr  align="center" >
            <!-- <td>第三行第一列</td> -->
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>

三、表单

HTML 表单用于收集用户的输入信息。
表单用<form> </form>标签创建。

3.1 文本表单

通过<input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本表单。

<input type="text" id="bbb" name="username" value="大漂亮">

3.2 密码

<input type="password" id="ccc" name="password">

3.3 数字

<input type="number" name="number">

3.4 单选

<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv">女
<input type="radio" name="sex" checked value="qita">其他

name属性 name属性相同时，为同一组单选选项组
checked 默认选中，选多个时，选中最后拥有该属性的那个

3.5 复选

<input type="checkbox" name="a" value="chi">吃
<input type="checkbox" name="a" value="he" checked>喝
<input type="checkbox" name="a" value="shui" checked>睡
<input type="checkbox" name="a" value="wan">玩
<input type="checkbox" name="a" value="xue" checked>学习

name属性 name属性相同时，为同一组复选选项组
checked 默认选中，选多个时，就是多个都选中

name属性：传数据时，让接收方知道我们传的是谁的数据。值是什么。
value属性：值。

3.6 下拉框

<select name="地区" id="">
	<option value="" selected></option>
	<option value="1">北京</option>
	<option value="3">上海</option>
	<option value="2">深圳</option>
	<option value="4">太原</option>
</select>

select - option--选项
- value：选项值

3.7 文本域

<textarea name="备注" id="" cols="80" rows="10"></textarea>

3.8 提交

<input type="submit">