html列表标签

无序列表

<ul type="disc"></ul>
disc    默认值 实心圆
circle  空心圆
square  实心方块

有序列表

<ol type="A"></ol>
1   默认值。数字有序列表。（1、2、3、4）
a   按字母顺序排列的有序列表，小写。（a、b、c、d）
A   按字母顺序排列的有序列表，大写。（A、B、C、D）
i   罗马字母，小写。（i, ii, iii, iv）
I   罗马字母，大写。（I, II, III, IV）

定义列表

<!-- 定义列表 dl dt dd 块级元素-->
    <dl>
        <!-- 列表标题 -->
        <dt>北京</dt>
        <!-- 列表标题的描述 -->
        <dd>北京是中国的首都</dd>
    </dl>

表格

<!-- 对齐 table tr td设置水平对齐 align:left center right-->
    <!-- table 标签就是一个表格 -->
    <!-- cellspacing 单元格和单元格外边距 2px cellpadding 单元格和文字内边距
    表格特有的属性
    -->
    <!-- 边框合并  cellspacing="0" 利用css 边框合并 border-cllapse:collapse-->
    <table border="1" width="300px" height="400px" align="center" cellspacing="0" cellpadding="3">
        <!-- 一个tr代表一行 -->
        <!-- 一个th代表一个单元格或者一列  ctrl+d-->
        <tr>
            <!-- th是表头标题标签 默认居中 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <!-- <tr align="center"> -->
        <tr>

            <!-- valign是垂直对齐 top bottom mid -->
            <td valign="top">张三</td>
            <td>15</td>
            <td>男</td>
        </tr>

    </table>

细线表格

 <table bgcolor="black" cellspacing="1">
        <tr bgcolor="white">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>

        <tr bgcolor="white">
            <td>李四</td>
            <td>15</td>
            <td>男</td>
        </tr>
    </table>

单元格合并

 <table border="1" align="center">
        <tr>
            <!-- 列合并 colspan='3' 合并三列 -->
            <!-- 行合并 rowspan='3' 合并三行 -->
            <td colspan="3">11</td>
            <!-- <td>12</td>
            <td>13</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>

结果

11			14	15	16
21	22	23	24
31		33

表单元素

<!-- 表单元素 -->
    <!-- action提交表单的服务器 -->
    <form action="">
        <!-- 单选框 单选按钮 复选框 -->
        <!-- 明文输入框  value默认值-->
        <!-- readonly 只读 disbaled 禁用 -->
        账号：<input type="text" readonly name="account" value="admin"><br>
        <!-- 暗文输入框 -->
        密码：<input type="password" name="pwd" id=""><br>
        角色：
        <br>
        管理员： <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">
        <input type="file" name="file">
        <!-- 普通按钮 配合js做一些动作-->
        <input type="button" value="我是一个按钮">
        <!-- 图片按钮 -->
        <input type="image" src="../../音视频/2.jpg" alt="">

        <!-- 隐藏域 如果你希望悄悄地往服务器提交一些数据 -->
        <input type="hidden" name="token" value="xfsdsfiggfdasgre">
        <!-- 重置按钮 将用户在表单中所选重置 -->
        <input type="reset" value="重置">
        <br>
        <input type="submit" value="提交">
    </form>

其它表单元素

 <!-- lable作用：使文字和输入框关联 聚焦输入框 -->
    <form action="xxx">
        <label for="one">用户名：</label>
        <input type="text" name="username" id="one">
        <br>
        <!-- 下拉框 -->
        <select name="city">
            <optgroup label="一线城市" disabled>
                <option value="shnghai">上海</option>
                <option value="beij">北京</option>
                <!-- selected默认选中 -->
                <option value="zhejiang" selected>浙江</option>
            </optgroup>
        </select>
        <br>
        <!-- 多行文本框 -->
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <!-- filedset类似于div加边框 -->
        <fieldset>
            <legend>请登录</legend>
            账号: <input type="text">
            <br>
            密码: <input type="password">
            <input type="submit" value="提交">
        </fieldset>
    </form>

h5新增表单元素

 <!-- datalist给输入框绑定一个待选项 
    list属性设置给input输入框
    给datalist标签设置id属性=list属性值
    -->
    <form action="xxx">
        <input type="text" list="input_ref">
        <datalist id="input_ref">
            <option>周一</option>
            <option>周三</option>
            <option>周六</option>
        </datalist>
        <!-- 进度条 -->
        <progress value="70" max="100"></progress>
        <!-- 滑块 -->
        <input type="range" step="20" max="100" min="0" value="60">
        <!-- 邮箱 -->
        <input type="email">
        <!-- 电话 利用正则表达式 pattern-->
        <input type="tel" pattern="1[0-9]{10}">
        <!-- 域名 -->
        <input type="url">
        <!-- 时间日期 -->
        <input type="datetime-local">
        <!-- 日期 -->
        <input type="data">
        <!-- 颜色 -->
        <input type="color">
        <!-- 数字 -->
        <input type="number">


        <!-- 其它h5新特性 -->
        <mark>高亮效果</mark>
        <cite>倾斜效果</cite>
        <pre>
            <code>var a=1;</code>
        </pre>
        <strike>删除线</strike>
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>

结果