Web前端H5之HTML标签总结（二）

1、基本的标签二;
    * meta标签的用法;
        <meta charset="UTF-8">:防止页面乱码
        <meta name="keywords" content="女装、男装">：设置网页关键字，不是给用户用的，对搜索引擎提供帮助
        <meta name="discription" content="设置网页描述信息">：设置网页描述信息，不是给用户看的，是给搜索引擎看的
        <!-- 网页重定向 -->
        <meta http-equiv="refresh" content="3;https://www.baidu.com/">:三秒后重新定位新的域名

    * link用法：
        <link rel="icon" href="favicon.ico">:设置网页图标
            注意;最好将图标放到网页的跟目录下，IE浏览器不支持这种方式，若果把网页放在服务器上，IE浏览器就支持这种方式

    * 列表标签
        ** 无序列表
            <ul type="circle">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            注意：* 无序列表中的列表项(li)可以包含任何标签
                  * 使用场景

        ** 有序列表
            <ol type="I">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>

        ** 自定义列表
            <dl>
                <dt>标题</dt>
                <dd>列表项</dd>
                <dd>列表项</dd>
            </dl>
            注意：* 在dt列表中只能包含行内元素（span,a）
                  * 在dd列表中可以包含任何元素、标签 
    * 表格
        行：<tr></tr>
        列：<td></td>
        表格：<table></table>
        表格的作用：显示数据、网页布局
        属性;
            border:设置边框,默认为0,无边框
            cellspacing="0"：设置td与td之间的距离，默认值为2
            width="400"
            cellpadding="10"：设置内容与td左侧之间的距离
            align="center":移动标签的位置，默认值left，设置对齐方式,如果给table设置align属性，智能让整个标签居中，内容不会居中，如果给tr或者td设置align属性，可以使内容居中
            bgcolor="red"：设置背景颜色
            <table border="1" width="400" height="50" cellpadding="10" cellspacing="0" align="center">
                <caption><strong>人员信息表</strong></caption>
                <tr align="center" bgcolor="red">
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>体重</th>
                    <th>职业</th>
                    <th>性别</th>

                </tr>
                <tr align="center" bgcolor="green">
                    <td>赵健</td>
                    <td>23</td>
                    <td>56kg</td>
                    <td>bigdata</td>
                    <td>male</td>

                </tr>
                <tr align="center" bgcolor="green">
                    <td>李四</td>
                    <td>21</td>
                    <td>56kg</td>
                    <td>deeplearning</td>
                    <td>female</td>

                </tr>
            </table>
        表格中的标签：
            表头标签：<th></th>，用法与<td></td>相同
            标题标签：<caption>标题</caption>
            表格结构：
                table[border="1" width="400"cellspacing="0"]>tr*4>td*4直接按tab键，产生表格
                <table>
                    <thead></thead>
                    <tbody></tbody>
                    <tfoot></tfoot>
                </table>
                注意：表格一般就是这种结构，但是一般现在不采用这个了，浏览器可以自动产生<tbody></tbody>结构
            合并单元格：
                横向合并：<td colspan="2"></td>
                纵向合并：<td rowspan="2"></td>
                注意：会自动寻找下一行进行合并，所以必须要把相关的<td></td>标签删掉
            细线表格的绘画：
                <table align="left" cellspacing="1" cellpadding="10" width="400" bgcolor="green">
                    <tr bgcolor="white">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr bgcolor="white">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr bgcolor="white">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr bgcolor="white">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
    * 表单：收集用户的信息
        表单组成：
            提示信息
            表单控件(重点)
            表单域
        表单域：
            <form action="" method=""></form>
            action:设置后台处理数据的后台程序
            method：提交数据给后台程序的方式
                get提交数据:将数据显示在地址栏中，具有数据大小的限制
                post提交数据:会通过后台异步提交数据，安全性好
        表单控件：
            文本输入框：<input type="text" name="" maxlength="6" readonly="readonly" value="">
                maxlength：设置最大程度
                readonly="readonly":设置控件为只读模式
                disabled="disabled":禁止用户输入
                value="":设置默认值
                name="":控件名称，后台程序通过这个属性获取对应的数据
                id="":设置ID编号，也可以通过这个获取
            密码输入框：<input type="password" name="pwd">
                该控件的属性和文本输入框相同
            单选输入按钮：<input type="radio" name="" checked="checked">
                name=""：备选值的name属性要设置一致
                checked="checked":设置默认选中项
            下拉列表：
                <select multiple="">
                    <option value="hb">河北</option>
                    <option>河南</option>
                    <option>山东</option>
                    <option selected="selected">山西</option>
                  </select>
                  属性：
                    selected="selected"：设置默认选中项
                    multiple="":实现多选效果
            其他写法：
                <select>
                    <optgroup label="河北省">
                        <option>张家口</option>
                        <option>石家庄</option>
                        <option>邯郸</option>
                        <option>张北</option>
                    </optgroup>
                </select>

            多选控件：<input type="checkbox" checked="checked" name="">
                checked="checked":默认选中项
            上传资源控件：<input type="file" name="">
            文本域：<textarea></textarea><br>
            隐藏控件：<input type="hidden" name="" value="123">
            按钮：
                提交按钮：<input type="submit" name="submit">
                普通按钮：<input type="button" name="" value="取消">：不能提交表单数据
                重置按钮：<input type="reset" name="" value="重置">
            分组控件和标题：<fieldset><legend></legend></fieldset>