HTML与CSS基础（三）——功能元素（标签）的使用

四、功能元素（标签）的使用

4.1 列表标签

4.1.1 无序列表ul(unordered list)

一个无序的元素列表集合，也就是不区分先后顺序，有type属性，属性值包括实心圆disc（默认值），空心圆circle，实心方块square。常用于新闻列表、商品列表、导航栏等。

类似之前的，这里如果想创建一个包含三个列表项的无需列表，我们可以输入“ul>li*3”完成代码快速编写。同时，在生成对应代码块后，三对li(list item)标签中间都会有小竖线，我们可以使用Tab完成快速换行。

    <!-- 无序列表 -->
    <ul>
        <li type="disc">人</li>
        <li type="circle">猫</li>
        <li type="square">狗</li>
    </ul>

4.1.2 有序列表ol(ordered list)

相较无序列表而言，区分先后顺序，也有type属性，属性值包括数字1（默认）、大A小a写字母、大I小i写罗马数字。在代码编写时，与无序列表相似，此处用ol>li*3为例。

    <!-- 有序列表 -->
    <ol type="I">
        <li>苹果</li>
        <li>香蕉</li>
        <li>李子</li>
    </ol>

4.1.3 定义列表dl(definition list)

简单来说就是把列表项分组。其中包括列表标题dt(definition title)和对应标题的描述信息dd(definition discription)。

    <!-- 定义列表 -->
    <dl>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dd>李子</dd>
        <dt>动物</dt>
        <dd>猫</dd>
        <dd>狗</dd>
        <dd>羊</dd>
    </dl>

注：以上三种列表标签都是成套使用的，一般不在列表中夹杂使用其他标签。

4.2 表格table

顾名思义，就是用表格的方式来展示数据，但现在不常用该传统方式来编写表格。在表格中，行为tr，列为td，一般第一行的各列用th，即加粗显示表头。

边框border的默认值为0，其边框是老旧的笼子样式，我们不常使用。在添加宽高属性时，不能在tr标签上添加，若在table中设置一个宽度，在一个单元格设置一个宽度，未设置宽度的单元格会自动平分剩余宽度。控制表格的水平对齐方式align、垂直对齐方式valign时，若加在table标签为整个表格的位置改变，若加在tr或td标签为单元格文字居中。

我们这里采用两行三列的表格为例，可以快捷输入“table>tr*2>td*3”。

    <!-- table标签 -->
    <table border="5px" width="200px" height="100px">
        <!-- 第一行 -->
        <tr align="center">
            <!-- 表头-列 -->
            <th width="100px">姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <!-- 第二行 -->
        <tr valign="top">
            <!-- 表项-列 -->
            <td>赵鸣翔</td>
            <td align="center">20</td>
            <td>男</td>
        </tr>
    </table>

在合并单元格时，colspan用于同一行的列合并，rowspan用于同一列的行合并，都是向左、向下合并。

    <table border="2px">
        <tr align="center">
            <td colspan="3">合并单元格练习</td>
        </tr>
        <tr align="center">
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

我们再介绍两个属性，单元格外边距cellspacing和单元格内边距cellpadding。从上面的两个例子，我们可以看到，每个单元格之间的边框与边框之间是有空隙的，这就是单元格外边距，默认情况下，外边距距离为2px。单元格边框与文字之间的间隙为单元格内边距，默认为1px。通过设置单元格外边距为0使两条细线靠拢为一条看着会很别扭，那么我们该如何制作一个细线表格呢？

我们可以给整个表格table的bgcolor设置为黑色black、cellspacing设置为1px，给每行tr的bgcolor设置为白色，这样从单元格外边距留的1px的缝隙中透过的黑色即为细线边框。

    <table bgcolor="black" cellspacing="1px">
        <tr bgcolor="white" align="center">
            <td colspan="3">合并单元格练习</td>
        </tr>
        <tr bgcolor="white" align="center">
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
        </tr>
        <tr bgcolor="white" align="center">
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

表格的完整性表示如下：

    <table>
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>表头</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>内容</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>附加信息</td>
            </tr>
        </tfoot>
    </table>

4.3 表单form

form表单中有一个属性action，用于绑定提交的服务器接口。在本部分案例中，使用了fieldset和legend标签用于美化表单样式，对表单进行了分组。

4.3.1 input标签

input输入框标签有一个属性type，通过不同的属性值来控制输入框的类型，如：明文输入框text、暗文输入框password、单选框radio、多选框checkbox、提交按钮submit、附件上传file、普通按钮button、图片按钮image、重置按钮reset、隐藏域hidden等。可以通过“input:type属性值”来快速完成编码。

name通常为调取接口中的数据名称，placeholder为提示信息，value为直接显示的内容，或者是传递给接口的数据内容。对于radio单选框可以通过设置相同的name属性达到互斥效果，而对于checkbox多选框可以通过相同的name进行选项分组，同时可以使用checked选择一些默认值。隐藏域可以配合提交按钮将一些数据悄悄的提交到服务器。

对于submit提交的数据类型enctype有两种，常用的一种是信息的拼接application/x-www-form-urlencoded，另一种为附件上传时的multipart/form-data。信息拼接的样式为浏览器地址栏显示“xxxxxxx? a=a&b=b&c=c”的格式。

    <!-- 表单标签 -->
    <form action="test.php">
        <!-- fieldset -->
        <fieldset style="width: 600px;margin: 0 auto;">
            <legend>注册信息</legend>
            <!-- 用户名-明文输入 -->
            用户名：<input type="text" name="username" placeholder="请输入用户名" id="">
            <br>
            <!-- 密码-暗文输入 -->
            密码：<input type="password" name="psw" placeholder="请输入密码" id="">
            <br>
            <!-- 性别-单选框 -->
            请选择性别：
            <label for="men">
                <input type="radio" name="gender" id="men" value="male">男
            </label>
            <label for="women">
                <input type="radio" name="gender" id="women" value="female">女
            </label>
            <br>
            <!-- 兴趣爱好-多选框 -->
            请选择兴趣爱好：
            <input type="checkbox" name="hobby" id="" value="fb">足球
            <input type="checkbox" name="hobby" id="" value="bb">篮球
            <input type="checkbox" name="hobby" id="" value="tt">乒乓球
            <!-- 用户头像 -->
            <br>
            请选择头像文件：
            <input type="file" name="icon">
            <!-- 隐藏域 -->
            <input type="hidden" name="test" value="test">
            <!-- 提交和重置 -->
            <br>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </fieldset>
    </form>

4.3.2 label标签

label标签可以绑定文字和按钮。在使用时，我们只需保证for的取值和要绑定内容的id值相同即可完成绑定。

            <!-- 性别-单选框 -->
            请选择性别：
            <label for="men">
                <input type="radio" name="gender" id="men" value="male">男
            </label>
            <label for="women">
                <input type="radio" name="gender" id="women" value="female">女
            </label>

4.3.3 select标签

select标签用于定义下拉列表；其中optgroup为选项分组，通过label属性设置组别名称；option为选项，可以通过给option设置selected属性设置默认选中的值。

            <!-- 下拉列表 -->
            <select name="city" id="">
                <optgroup label="山西">
                    <option value="taiyuan">太原</option>
                    <option value="jinzhong">晋中</option>
                    <option value="yuncheng">运城</option>
                </optgroup>
                <optgroup label="江苏">
                    <option value="nanjing">南京</option>
                    <option value="suzhou">苏州</option>
                </optgroup>
            </select>

4.3.4 textarea标签

textarea标签为多行输入框，用户可以通过拉动右下角调整大小，因此我们通过cols和rows设置的宽高只是第一次打开网页的显示效果。

            <!-- 个人简介-多行输入 -->
            <textarea name="men" id="" cols="30" rows="10"></textarea>

4.4 HTML5新增的一些标签

4.4.1 input的type属性扩充

用于简单格式验证，但是验证比较简单，实际开发不常用。

邮箱：type="email"

域名：type="url"

数字：type="number"

时间：type="date"，用日历选择时间。

颜色：type="color"，用取色板选取颜色。

4.4.2 datalist标签

datalist标签可以用于给输入框绑定一些待选项，类似于网页搜索时的自动提示。绑定方式为在input的输入框属性添加一个list属性，给datalist添加一个唯一的id值，使list和id值相同即绑定成功，其中datalist中可以有一些列表项option。

    请输入搜索内容：<input type="text" name="" id="" list="haha">
    <datalist id="haha">
        <option value="">嘻嘻</option>
        <option value="">哈哈</option>
        <option value="">哈哈1</option>
        <option value="">嘻嘻2</option>
        <option value="">耶耶</option>
    </datalist>

4.4.3 progress标签

progress标签可以用于显示一个进度条，其属性中value的值为进度的完成量，max的值为任务的总量，默认值为1。

    <progress value="60" max="100">60%</progress>