HTML基础(二)

提示：以下是本篇文章正文内容，下面案例可供参考

一、列表

1.有序列表 --> OL

    <!-- 有序列表
        ol -> li
        属性值：
        type:1,a,A,I,i
        start:排序起始值
        reversed : 倒序排列
    -->
     <ol type="1" reversed start="10">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
        <li>有序列表5</li>
    </ol>

2.无序列表 --> UL

    <!-- 无序列表
        ul -> li
        属性值：
        type:disc实心圆，circle空心圆，square实心方框
    -->
    <ul type="square">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

3.自定义列表

    <!-- 自定义列表 
        dl -> dt -> dd
    -->
    <dl>
        <dt>表头</dt>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>

    </dl>

二、表格

    <!-- table表格
            属性值：
            border：表格外边框粗细
            align="center":使表格居中
            rowspan="x":行合并，使用时值为x就把对应x行td删除
            colspan="x":列合并，使用时值为x就把本行x个td删除
            bgcolor:背景颜色
        -->
    <table border="1" align="center">
        <tr>
            <th>表头部分</th>
            <th>表头部分</th>
            <th>表头部分</th>
        </tr>
        <tr>
            <td>1行1列</td>
            <td>1行2列</td>
            <td>1行3列</td>
        </tr>
        <tr>
            <td>2行1列</td>
            <td>2行2列</td>
            <td>2行3列</td>
        </tr>
        <tr>
            <td>3行1列</td>
            <td>3行2列</td>
            <td>3行3列</td>
        </tr>
    </table>

（1）合并表格单元格练习

    <table border="1" width="500" height="500" align="center">
        <tr align="center">
            <td colspan="2" bgcolor="#CCFFCC"></td>
            <td rowspan="2" bgcolor="#FFFFCC"></td>
            <!-- <td>3</td> -->
        </tr>
        <tr align="center">
            <td rowspan="2" bgcolor="#FFFFCC"></td>
            <td bgcolor="#99CCCC"></td>
            <!-- <td>6</td> -->
        </tr>
        <tr align="center">
            <!-- <td>7</td> -->
            <td colspan="2" bgcolor="#CCFFCC"></td>
            <!-- <td>9</td> -->
        </tr>
    </table>

效果图

三、表单

    <!-- 表单 -->
    <!-- input输入框
            type属性：
                text:任意字符串文本框(默认)
                password:密码输入框，显示为·····
                number:数字输入框，只能输入数字
    -->
    <form action="Table.html">
        <label for="name">姓名<input type="text" name="username" id="name"></label><br>
        <label for="pwd">密码<input type="password" name="password" id="pwd"></label><br>
        <label for="num">电话<input type="number" name="number" id="num"></label><br>
        <label for="">男<input type="radio" name="sex" id="sex" checked></label>
        <label for="">女<input type="radio" name="sex" id="sex"></label>
        <label for="">其他<input type="radio" name="sex" id="sex"></label><br>
        <label for="">爱好：</label>
        <input type="checkbox" name="like" id="" value="eat" checked>吃
        <input type="checkbox" name="like" id="" value="drink">喝
        <input type="checkbox" name="like" id="" value="play">玩
        <input type="checkbox" name="like" id="" value="happy">乐<br>
        <label for="">籍贯
            <select name="add" id="address">
                <option value="shanxi">山西</option>
                <option value="shandong">山东</option>
                <option value="henan">河南</option>
                <option value="hebei">河北</option>
            </select>
        </label>
        <label for="">
            <input type="submit" name="" id="">
        </label>
    </form><br>
    <!-- 扩展标签 -->
        <!-- 内联框架
            属性值：
            width:宽
            height:高
            src:引入地址
            frameborder：边框显示，1显示 0隐藏
        
        -->
    <iframe src="Table.html" frameborder="1" width="500" height="200"></iframe><br>

    <!-- 滚动标签
        属性值：
        direction:方向(right,left)
        behavior:滚动方式(scoll->结束后重新开始,slide->结束后停止,alternate->结束后逆向返回)
        crollamount:速度，值为正，默认6
        scrolldelay:时间，值为正，默认0，单位毫秒
        οnmοuseοver="stop()" 鼠标悬浮停止移动
        οnmοuseοut="start()" 鼠标离开时开始移动
    -->
    <marquee behavior="scoll" direction="right" onmouseover="stop()">🐦</marquee>

---

总结

列表，表格，表单是 HTML 基础中重要一环，实用范围很广，需熟练掌握