HTML基础（二）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本章主要讲解列表、表格、表单

---

一、列表

列表分为：
有序列表、
无序列表、
自定义列表

1、有序列表

属性有：
type : 有序序列
reversed ： 倒序排列
start : 初始值

代码示例：

    <ol type="I" reversed start="2">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

效果展示：

2、无序列表

属性：
type：设置无序序列形状 值：disc(默认,实心圆) circle(空心圆) square(实心方框)
代码示例：

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

效果展示：

3、自定义列表

自定义列表中有
dt(标题标签)
dd(内容标签)
代码示例：

<!-- 自定义列表  -->
<dl>
    <dt>自定义列表标题</dt>
    <dd>自定义列表内容</dd>
</dl>

效果展示：

二、表格

属性：
border : 表格边框，值为宽度(只加粗最外层边框)
align ： 位置, 值为center(居中)时居中 放在table中会使整个表格位置发生变化，放在单行或单列会使内容居中
width : 宽
height : 高 -----宽高都可以给到子标签中，给单格设置高/宽时，会自动撑开所在行/列
bgcolor ： 背景颜色

合并单元格属性 ：
rowspan ：合并行，值为合并后单元格高度，因为不会合并另一行，所以使用时，值为多少，就把要合并的那一行的本列删掉
colspan ：合并列，值为合并后单元格的宽度，同上，所以使用时，值为多少，就把本行后的几个-1 删掉
代码示例：

 <table border="1" align="center">
        <tr>
            <th>第一行第一列标题标签</th>
            <th>第一行第二列标题标签</th>
            <th>第一行第三列标题标签</th>
            <th>第一行第四列标题标签</th>
        </tr>
        <tr>
            <td rowspan="2">第二行第一列</td>
            <td>第二行第二列</td>
            <td colspan="2">第二行第三列</td>
            <!-- 合并列所以注掉 
            <td>第二行第四列</td> -->
        </tr>
        <tr align="center">
            <!-- 合并行所以要注掉
            <td>第三行第一列</td> -->
            <td>第三行第二列</td>
            <td>第三行第三列</td>
            <td>第三行第四列</td>
        </tr>
    </table>

效果展示：

三、表单

属性:
action：提交地址
共有属性 ：
name：传数据时，让接收方知道我们传的是谁的数据，值是什么
value：值
input控件中type属性不同可以生成不同的框
代码示例：

<form action="">

    <!-- 文本框 ：可以输入任意字符-->
    文本框：<input type="text">

    <!-- 密码框 ： 加密显示，形式为... -->
    密码框：<input type="password">

    <!-- 数字框 ：只能显示数字 -->
    数字框：<input type="number">

    <!-- 单选按钮(选择框为空心圆)  name属性值相同时为一组，每组可以实现单选效果 
            cheked属性 : 默认选中（单选组中使用，因为代码是从上往下执行所以会默认选中最后一个）
    -->
    男<input type="radio" name="sex" checked>
    女<input type="radio" name="sex">
    其他<input type="radio" name="sex">

    <!-- 多选按钮(选择框为方框)  属性值和单选按钮相同但是多选默认可以多选-->
    吃<input type="checkbox" name="a">
    喝<input type="checkbox" name="a">
    玩<input type="checkbox" name="a">

    <!-- 提交按钮 -->
    <input type="submit">

    <!-- 下拉框 
            option ：选项
                value属性：选项值(写什么给后台传什么)
                selected属性；默认选中(如果想要空的可以给一个空的选项(option)设为默认值)
    -->
    <select name="" id="">
        <option value="" selected></option>
        <option value="太原">太原</option>
        <option value="忻州">忻州</option>
    </select>

    <!-- 文本域 
            属性：cols : 默认大小
                  rows : 行数
    -->
    <textarea name="" id="" cols="30" rows="10"></textarea>

</form>

---

效果展示：