HTML-day02-列表标签，表格标签，form表单

一.列表标签

h5常见的列表标签就三种：无序列表(ul>li)，有序列表(ol>li)以及自定义列表(dl>dd/dt)，他们一般都是用作信息展示的。下面就是他们的基础用法：

    <ul type="circle">
        <li>苹果</li>
        <li>榴莲</li>
        <li>香蕉</li>
    </ul>


    <ol type="">    
        <li>螺蛳粉</li>
        <li>老友粉</li>
        <li>桂林米粉</li>
    </ol>


    <dl>
        <dt>钓鱼岛</dt>
        <dd>是中国领土</dd>
        <dt>螺蛳粉</dt>
        <dd>是柳州特产</dd>
    </dl>

 

 在无需列表（ul>li）中，还可以选择它的type值来改变它的标志项，分别是disc（默认 实心圆），circle（空心圆），square（实心方块）。

有序列表（ol>li）中，也可以通过设置type值选择想要数字还是字母排序，数字，大写字符，小写字符，大写罗马符号，小写罗马符号都可以设置。

到了自定义的列表，则有些不同，dt的含义就是定义标题，而dd则是对标题的描述，这个一般用的不多。

二.表格标签

table是表格标签，我们常用来作数据展示，给一堆数据添加表格语义，当数据足够庞大时，这是一种最为直观的表现方法

格式如下：

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>身高</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>19</td>
    <td>1.78</td>
  </tr>
</table>

在这里，table标签就是一个表格，tr标签就相当于表格的一行，td标签就相当于一列或者单元格，此外，我们有时候还会用到td标签，这个是表头标签，与td标签是同级的，区别是th标签是默认居中加粗效果，td标签通常是左对齐的普通文本

表格的对齐方式(就近原则：谁离得近谁生效)

1.水平对齐

水平对齐可以给table，tr，td设置，方式：align："left/center/right"

2.垂直对齐

垂直对齐只能给tr，td设置，不能给table设置，方式：valign："top/mid/bottom"

单元格合并问题

列合并  colspan='3' 合并三列

行合并  rowspan='2' 合并两行、

注意，当合并之后，需要将其他合并的单元格删除掉，只保留有colspan或rowspan的单元格

    <table border="1" align="center">
        <tr>
            <td colspan="3">11</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
        </tr>
        <tr>
            <td>21</td>
            <td rowspan="2">22</td>
            <td>23</td>
            <td colspan="3" rowspan="2">24</td>
            <!-- <td>25</td> -->
            <!-- <td>26</td> -->
        </tr>
        <tr>
            <td>31</td>
            <!-- <td>32</td> -->
            <td>33</td>
            <!-- <td>34</td> -->
            <!-- <td>35</td> -->
            <!-- <td>36</td> -->
        </tr>
    </table>

表格的边框合并问题

当两个td相邻时，他们中间还有一条间隙，不美观，调整浏览器的缩放就可以看出：

 若是在日常代码练习中，这个无伤大雅，但是我们在开发过程中，如果客户有特殊要求，我们也只能照办，去除间隙的办法也有两种，这个涉及到表格的特有属性cellspacing（单元格之间的外边距），cellpadding（单元格与文字之间的内边距）

方法一：将表格之间的外边距设为0

即cellspacing="0"

方法二：通过css样式设置

border-collapse：collapse

通过这两种方法，可以将表格之间的间隙去除，但是放大来看，这其实是边框紧紧贴在了一起，而不是只有一条线，我们还可以设置细线表格，这样，单元格与单元格之间就是一条细线

    <table bgcolor="black" cellspacing="1px">
        <tr bgcolor="white">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr bgcolor="white">
            <th>张三</th>
            <th>19</th>
            <th>男</th>
        </tr>
    </table>

 

完整的表格结构：

    <table border="1">
        <!-- 标题 默认居中-->
        <caption align="left">个人信息</caption>

        <!-- 表头 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>

        <!-- 表体 如果没写 浏览器会自动补全-->
        <tbody>
            <tr>
                <td>张三</td>
                <td>50</td>
                <td>男</td>
            </tr>
        </tbody>

        <!-- 表脚 -->
        <tfoot></tfoot>
    </table>

三.form表单

form表单其实就是用来收集用户信息的，在第一次进入各大网站不外乎都需要用户先进行注册，填写注册信息的那个组件，就是form表单

form的基本格式

<form action="">
    <!-- action提交表单的服务器 -->
    <表单元素>
</form>

 什么是表单元素？

表单元素说白了就是一些写在form表单里的一些标签，常见的有input，label，select，textarea，fieldset，datalist，progress，后两个是H5新增的表单元素。

input标签

input标签有一个type属性，我们可以通过type属性取不同的值来决定input标签的功能

        <!-- 明文输入框 value 默认值-->
        <!-- readonly 只读 disabled 禁用 -->
        账号：<input readonly type="text"><br>
        <!-- 暗文输入框 -->
        密码：<input disabled type="password"><br>


        <!-- 单选按钮 name必须一样，只有在一个组里才能达到互斥效果-->
        角色：
        管理员：<input type="radio" name="role" value="admin">
        员工：<input type="radio" name="role" value="customer">
        顾客：<input type="radio" name="role" value="employee">
        <br>

        <!-- 复选框 默认选中checked-->
        爱好：
        唱：<input checked type="checkbox" name="hobbies" value="sing">
        跳：<input type="checkbox" name="hobbies" value="dance">
        rap：<input type="checkbox" name="hobbies" value="rap">
        <br>

        <!-- 附件上传表单元素 -->
        <input type="file" name="file"><br>

        <!-- 普通按钮-->
        <input type="button" value="我是一个按钮"><br>

        <!-- 图片按钮-->
		<input type="image" src="" alt=""><br>

        <!-- 重置按钮 将用户在表单中的所选全部重置-->
        <input type="reset" value="重置"><br>

        <!-- 隐藏域 如果你希望悄悄的往服务器提交一些数据-->
        <input type="hidden" name="token" value="">

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



        H5新增表单元素

        <!-- 滑块 -->
        <input type="range" value="80" step="20" max="100" min="0">
        <br><br>

        <!-- 邮箱 -->
        <input type="email" >
        <input type="submit" value="提交">
        <br><br>

        <!-- 电话 利用正则表达式 pattern-->
        <input type="tel" pattern="1[0-9]{10}">
        <input type="submit" value="提交">
        <br><br>

        <!-- 域名 -->
        <input type="url">
        <input type="submit" value="提交">
        <br><br>

        <!-- 日期 -->
        <input type="date">
        <input type="datetime-local">
        <input type="submit" value="提交">
        <br><br>

        <!-- 颜色 -->
        <input type="color">
        <input type="submit" value="提交">
        <br><br>

        <!-- 数字 -->
        <input type="number">
        <input type="submit" value="提交">
        <br><br>

label标签

作用：文字与输入框相关联，聚焦到输入框

        <label for="one">用户名：</label>
        <input type="text" name="username" id="one">
        <br>

select标签，textarea标签，fieldset标签

select标签是下拉框标签，一般与optgroup标签配合使用

textarea标签就是多行文本框标签

fieldset标签类似于div加边框的样子，但是有些区别，这个我表述可能不清楚，各位实操一下

        <select name="city" id="">
            <optgroup label="一线城市" disabled>
                <option value="shanghai">上海</option>
                <option value="beijing">北京</option>
                <!-- selected 默认选中 -->
                <option value="nanning" selected>南宁</option>
            </optgroup>
        </select>

        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br>

        <fieldset>
            <legend>请登录</legend>
            账号：<input type="text"><br>
            密码：<input type="password"><br>
            <input type="submit" value="提交">
        </fieldset>

datalist标签与progress标签

datalist标签：给输入框绑定待选项，list属性设置给input输入框，给datalist标签设置id属性=list属性值

progress标签就是进度条标签

        <input type="text" list="input-ref">
        <datalist id="input-ref">
            <option value="">帅逼</option>
            <option value="">龙爹</option>
            <option value="">帅比</option>
        </datalist>

        <progress value="70" max="100"></progress>

以上就是所有内容，希望各位耐心阅读，多提宝贵意见，谢谢大家