118 HTML基础2

https://www.cnblogs.com/linhaifeng/articles/8982967.html#_label8

列表(ul,ol,dl)和表格(table)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<body>
<!--无需列表-->
<ul>
    <li>哈哈哈哈哈</li>
    <li>哈哈哈哈哈</li>
    <li>哈哈哈哈哈</li>
    <li>哈哈哈哈哈</li>
    <li>哈哈哈哈哈</li>
</ul>
<hr>
<!--有序列表-->
<ol>
    <li>排名</li>
    <li>排名</li>
    <li>排名</li>
    <li>排名</li>
    <li>排名</li>
</ol>
<hr>
<!--自定义列表-->
<dl>
    <dt>自定义标题</dt>
    <dd>描述1</dd>
    <dd>描述1</dd>
    <dd>描述1</dd>
    <dd>描述1</dd>
    <dt>自定义标题</dt>
    <dd>描述1</dd>
    <dd>描述1</dd>
    <dd>描述1</dd>
    <dd>描述1</dd>

</dl>
<!--表格-->
<table bgcolor="#ffd700" border="1px" width="300px" height="200px" cellspacing="" cellpadding="10">
<!--    字居中,靠上-->
    <caption>老爷们的信息</caption>
    <thead>
        <th>name</th>
        <th>age</th>
        <th>gender</th>
    </thead>
    <tr bgcolor="#adff2f" align="center" valign="top">
        <td width="120">名字</td>
        <td align="left">年龄</td>
        <td>性别</td>
    </tr>
    <tr bgcolor="#7fffd4" align="right" valign="bottom">
        <td>Tom</td>
        <td>18</td>
        <td>male</td>
    </tr>
    <tr bgcolor="#7fffd4">
        <td>Rookie</td>
        <td>23</td>
        <td>male</td>
    </tr>
    <tr bgcolor="#7fffd4">
        <td>MLXG</td>
        <td>22</td>
        <td>male</td>
    </tr>
    <tfoot>
        <td>统计</td>
        <td>共计</td>
        <td>总额</td>
    </tfoot>


</table>


</body>
</html>

表单form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="http://127.0.0.1:8080" method="post">
    <p>
        用户名:
        <input type="text" name="username" placeholder="输入用户名哦">
    </p>
    <p>
        密码:
        <input type="password" name="password" placeholder="输入密码哦">
    </p>
<!--    单选-->
    <p>
        性别:
        <input type="radio" name="gender" value="male"><!--        默认选项-->
        <input type="radio" name="gender" value="female" checked><input type="radio" name="gender" value="null">保密
    </p>
<!--    多选-->
    <p>
        爱好:
        <input type="checkbox" name="hobby" value="basketball">篮球
        <input type="checkbox" name="hobby" value="football">足球
        <input type="checkbox" name="hobby" value="snowball">雪球
    </p>

<!--    上传文件用post方法 并且用这个编码格式:enctype="multipart/form-data"-->
    <p>
        上传文件
        <input type="file" name="file" >
    </p>


    <p>
        <textarea name="comment" id="" cols="30" rows="10" style="resize: none">
        这里是标题(可删除)
        </textarea>
    </p>
    <p>
        <input type="text" disabled name="k" value="不能输入">

    </p>

<!--    下拉列表-->
    <p>
        <select name="籍贯" >
            <optgroup label="一线">
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="daqing">大庆</option>
                <option value="shenzhen">深圳</option>
            </optgroup>

            <optgroup label="二线">
                <option value="heze">菏泽</option>
                <option value="jiamusi">佳木斯</option>
                <option value="yichun">伊春</option>
                <option value="zhoukou">周口</option>
            </optgroup>

        </select>
    </p>


    <p>
        <input type="submit" name="sub">
    </p>


</form>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_40808228/article/details/108626137
118