a标签、表单、表格练习

摘要：本章内容主要学习了常用的标签及属性：常用的文本标签 这个是加粗的 这个是加粗的 <big>这个是加大的</big> 这个是缩小的 &l

本章内容主要学习了常用的标签及属性：

常用的文本标签

这个是加粗的

这个是加粗的

<big>这个是加大的</big>

这个是缩小的

<del>这个是删除线</del>

<ins>这个是下划线或插入线</ins>

2018年11月11日晚：<q>这个是块引用</q>

<pre >预定义格式化</pre>

a标签

样式style="text-decoration: none" 可以将超链接的下划线给去掉，style="text-decoration: underline" 增加下划线

可以利用a标签跳转实现返回顶部的操作

表单form

methed 的提交方法有get，post，post比较get会更安全和传输数据量更大。

表格table

rowspan 合并行

colspan 和并列

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第二章练习</title>
    <style>
        body {
            font-family: "Microsoft YaHei";
        }

        a {
            text-decoration: none;
        }

        a:hover {
            color: red;
            text-decoration: underline;
        }

        input {
            height: 8px;
            width: 308px;
            border: 1px solid #e8e8e8;
            margin-top: 20px;
            padding: 20px 20px;
            font-size: 14px;
        }

        #sub1 {
            height: 50px;
            width: 350px;
            border: none;
            background-color: #ef5b00;
            color: #FFF;
        }

        #sub1.hover {
            border: none;
        }

        div {
            margin-top: 30px;
        }

        table {
            height: 500px;
            width: 600px;
            border-collapse: collapse;
        }

        table tr td {
            border: 1px solid #e8e8e8;
            text-align: center;
        }

        table tr th {
            border: 1px solid #e8e8e8;
            border-radius: 0;
            text-align: center;
        }
    </style>
</head>
<body>

<!--a标签练习-->
<div id="top">
    <a href="#bottom">返回底部</a>
</div>

<!--html form表单练习-->
<form action="#" method="post" name="form1">
    <input type="text" name="username" placeholder="邮箱/手机号码"><br>
    <input type="text" name="password" placeholder="密码"><br>
    <input type="submit" id="sub1" name="sub" value="登陆"><br>
</form>


<!--表格练习-->
<div id="table_1">
    <table id="tab1">
        <tr>
            <th rowspan="2">联系人</th>
            <th colspan="3">地址</th>
            <th rowspan="2">操作</th>
        </tr>
        <tr>

            <th>市</th>
            <th>区</th>
            <th>市</th>

        </tr>
        <tr>
            <td>小米</td>
            <td>浙江</td>
            <td>杭州</td>
            <td>西湖</td>
            <td>更新</td>
        </tr>
        <tr>
            <td>华为</td>
            <td>广东</td>
            <td>广州</td>
            <td>天河区</td>
            <td>更新</td>
        </tr>
    </table>

</div>
<div id="bottom">
    <a href="#top">返回顶部</a>
</div>
</body>
</html>

批改老师：灭绝师太批改时间：2018-11-05 09:12:09
老师总结：测试的比较全面……继续保持，有问题及时反馈

a标签、表单、表格练习

热门词条