您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

HTML的列表、表格与表单标签的使用

列表、表格和表单标签的常用属性归纳,如下图所示:

一、列表标签举例

列表标签的应用,源代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签</title>
</head>
<body>
    <h1>搜索引擎排名</h1>
    <ol>
        <li>Google</li>
        <li>Baidu</li>
        <li>Bing</li>
        <li>Sogou</li>
    </ol>
    <h1>软件编程语言</h1>
    <ul>
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
        <li>JavaScript</li>
    </ul>
    <h1>健康食品</h1>
    <dl>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dt>蔬菜</dt>
        <dd>西兰花</dd>
        <dd>菠菜</dd>
    </dl>
</body>
</html>

运行结果如下图所示:

二、表格和表单标签

表格标签和表单标签举例,如制作个人简历,源代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
</head>
<style>
    h2{
        text-align: center;
    }
    input{
        width: 100%;
        height: 100%;
        border:0px;
    }
    td{
        width: 95px;
        height: 30px;
        overflow: hidden;
    }
    table{
        text-align: center;
        margin: auto;
    }
</style>
<body>
    <form>
        <h2>个人简历</h2>
        <table border="1" >
            <tr>
                <td>姓名</td>
                <td><input type="text"></td>
                <td>性别</td>
                <td><input type="text"></td>
                <td>出生年月</td>
                <td><input type="text"></td>
                <td rowspan="4"><input type="file"></td>
            </tr>

            <tr>
                <td>民族</td>
                <td><input type="text"></td>
                <td>政治面貌</td>
                <td><input type="text"></td>
                <td>身高</td>
                <td><input type="text"></td>
            </tr>

            <tr>
                <td>学制</td>
                <td><input type="text"></td>
                <td>学历</td>
                <td><input type="text"></td>
                <td>户籍</td>
                <td><input type="text"></td>
            </tr>

            <tr>
                <td>专业</td>
                <td><input type="text"></td>
                <td colspan="2">毕业学校</td>
                <td colspan="2"><input type="text"></td>
            </tr>

            <tr>
                <td colspan="7">技能、特长或爱好</td>
            </tr>

            <tr>
                <td>外语等级</td>
                <td colspan="2"><input type="text"></td>
                <td>计算机</td>
                <td colspan="3"><input type="text"></td>
            </tr>

            <tr>
                <td colspan="7">个人履历</td>
            </tr>

            <tr>
                <td>时间</td>
                <td colspan="2">单位</td>
                <td colspan="4">经历</td>
            </tr>

            <tr>
                <td><input type="text"></td>
                <td colspan="2"><input type="text"></td>
                <td colspan="4"><input type="text"></td>
            </tr>

            <tr>
                <td><input type="text"></td>
                <td colspan="2"><input type="text"></td>
                <td colspan="4"><input type="text"></td>
            </tr>

            <tr>
                <td><input type="text"></td>
                <td colspan="2"><input type="text"></td>
                <td colspan="4"><input type="text"></td>
            </tr>

            <tr>
                <td colspan="7">联系方式</td>
            </tr>

            <tr>
                <td>通讯地址</td>
                <td colspan="2"><input type="text"></td>
                <td>联系电话</td>
                <td colspan="3"><input type="text"></td>
            </tr>

            <tr>
                <td>E-mail</td>
                <td colspan="2"><input type="text"></td>
                <td>邮编</td>
                <td colspan="3"><input type="text"></td>
            </tr>

            <tr>
                <td colspan="7">自我评价</td>
            </tr>

            <tr>
                <td colspan="7"><input type="text"></td>
            </tr>
        </table>
    </form>
</body>
</html>

程序运行结果如下图所示:

这次就分享这么多,如有不足,欢迎大家留言讨论。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进