前端学习基础第二天

其他 2019-07-07 15:01:19 阅读次数: 0

引入表格

web前端页面的有很多模块可以使用表格来实现。比如:
在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度登录练习</title>
    <link rel="stylesheet" href="../css/02_baidu_login.css">
</head>
<body>

<form action="#" method="post">
    <table border="0" cellspacing="20" cellpadding="0" width="600" align="center">
        <tbody>
        <tr>
            <td height="150">
                [外链图片转存失败(img-Z3W1G7eg-1562034140314)(https://mp.csdn.net/img/logo_baidu.jpg)]
            </td>
            <td></td>
        </tr>
        <tr class="normal">
            <td>
                <b>添加注册信息</b>
            </td>
            <td></td>
        </tr>
        <tr class="normal">
            <td class="right">
                邮箱:
            </td>
            <td><input type="text" >
            </td>
        </tr>
        <tr class="normal">
            <td class="right">
                密码:
            </td>
            <td>
                <input type="password" name="" id="">
            </td>
        </tr>
        <tr class="normal">
            <td class="right">
                确认密码:
            </td>
            <td>
                <input type="password" name="" id="">
            </td>
        </tr>
        <tr class="normalplus">
            <td class="right">
                验证码:
            </td>
            <td>
                <table border="0" cellspacing="0">
                    <tbody>
                    <tr>
                        <td>
                            <input type="text" name="" id="">
                        </td>
                        <td >
                            <input type="image" src="../img/yz.jpg" alt="error">
                        </td>
                        <td>
                            <a href="#">
                                <ins>注册用户</ins>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr class="normal">
            <td></td>
            <td>
                <input type="checkbox" name="" id="">我已阅读并接受
                <a href="#"><ins>《百度用户协议》</ins></a>
            </td>
        </tr>
        <tr class="normalplus">
            <td></td>
            <td>
                <table width="80%">
                    <tbody>
                    <tr>
                        <td>
                            <input type="image" src="../img/button.jpg" alt="error">
                        </td>
                        <td style="text-align: center;">
                            <input type="reset" value="重新填写" >
                        </td>
                    </tr>
                </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
</form>
</body>
</html>

表格标签：<table>
表格标题标签:<caption> 这个标签要紧跟<table>标签的后面
行标签:<tr>
单元格:<td>
表头标签：<thead> <th>
主体:<tbody>
练习一：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/02_Today_novel.css">
    <title>前端基础第二天</title>
</head>
<body>
<table width="500"  height="200" border="0"  align="center" cellpadding="0" cellspacing="0">
    <caption><h3>小说排行榜</h3></caption>
    <thead>
<!--    表头信息-->
    <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜说</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    </thead>
    <tbody>
<!--    表主体-->
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td>[外链图片转存失败(img-hGzNkN5r-1562034140319)(https://mp.csdn.net/img/up.jpg)]</td>
        <td>345</td>
        <td>123</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>盗墓笔记</td>
        <td>[外链图片转存失败(img-kQY9C3YF-1562034140322)(https://mp.csdn.net/img/up.jpg)]</td>
        <td>124</td>
        <td>675432</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>西游记</td>
        <td>[外链图片转存失败(img-EmcDU433-1562034140323)(https://mp.csdn.net/img/up.jpg)]</td>
        <td>212</td>
        <td>7645</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr>
        <td>4</td>
        <td>东游记</td>
        <td>[外链图片转存失败(img-2Sgetfus-1562034140324)(https://mp.csdn.net/img/up.jpg)]</td>
        <td>23</td>
        <td>75645</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr>
        <td>5</td>
        <td>甄嬛传</td>
        <td>[外链图片转存失败(img-h1xBHu9F-1562034140326)(https://mp.csdn.net/img/down.jpg)]</td>
        <td>121</td>
        <td>7676</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr>
        <td>6</td>
        <td>水浒传</td>
        <td>[外链图片转存失败(img-YSpuoGwo-1562034140328)(https://mp.csdn.net/img/up.jpg)]</td>
        <td>576576</td>
        <td>1231421</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr>
        <td>7</td>
        <td>三国演义</td>
        <td>[外链图片转存失败(img-XVa02nBj-1562034140330)(https://mp.csdn.net/img/down.jpg)]</td>
        <td>234</td>
        <td>7686</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

form表单域, input表单

前端页面往往需要往后端程序提交数据，常用的场景就是使用form表单进行提交。
示例:

    <form action="http://www.baidu.com" method="post">
        用户名: <input type="text"> <br /> <br />
        密  码: <input type="password" name="" id=""> <br /><br/>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>

<input>标签使用最为频繁,具有多种类型。常用的类型如下：
type：text[文本],password[密码],radio[单选],checkbox[多选],image[提交块可以带有背景图片],button[普通按钮],file[上传],submit[提交],reset[重置].

其他标签补充

<label for=“class”> 点击label标签上的字体会跳至class=“class” 的标签内
<select > 下拉菜单标签
<option>菜单中的一个选项
<colspan>跨列合并单元格 合并的顺序从左到右
<rowspan> 跨行合并单元格 合并的顺序从上到下
练习二：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>世纪佳缘登录界面</title>
    <link rel="stylesheet" href="../css/02_login.css">
</head>
<body>

<table width="400" align="center" border="0" cellpadding="0" cellspacing="0">
<!--    <caption><h4>会员登录</h4></caption>-->
    <thead>
        <th colspan="2" >会员登录</th>
    </thead>
    <tbody>
    <tr>
        <td>登录账号</td>
        <td>
            <input type="text" class="darkinput" value="邮箱/ID/手机号">

        </td>
    </tr>
    <tr>
        <td>密码</td>
        <td>
            <input type="password" class="darkinput ">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="checkbox" name="" id="default_login" checked="checked">
            <span class="darkinput ">两周内自动登录</span>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="image" src="../img/login.png" alt="以外出错了" title="登录">
            <a href="#"><ins>忘记密码</ins></a>
        </td>
    </tr>
    <tr>
        <td>其他账号登录</td>
        <td>
            <input type="image" src="../img/ico1.png" alt="以外出错了" title="qq"><span>QQ账号</span>
            <input type="image" src="../img/ico2.png" alt="以外出错了" title="新浪微博"><span>新浪微博</span>
            <input type="image" src="../img/ico3.png" alt="以外出错了" title="百度账号"><span>百度账号</span>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <a href="#"><ins>还不是会员?立即注册</ins></a>
<!--            <label>ttt<input type="text"></label>-->
        </td>
    </tr>
    </tbody>
</table>

</body>
</html>

练习三:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        tr{
            height: 30px;
            text-align: center;
        }

    </style>
    <title>Document</title>
</head>
<body>
<table width="500" cellspacing="0" cellpadding="0" border="0" align="center">
    <caption><h3 style="color: deeppink;font-size: 30px;">青春不常在,抓紧谈恋爱</h3></caption>
    <tr>
        <td>用户名</td>
        <td>
            <label >用户名: <input type="text"></label>
            
        </td>
    </tr>
    <tr>
        <td>密码</td>

        <td>
            <label for="pwd">mima</label>
            <input type="password"  id="pwd" maxlength="20"/>
        </td>
    </tr>
    <tr>
        <td>性别</td>
        <td>
            <input type="radio" name="sex" checked="checked">男
            <input type="radio" name="sex" >女
        </td>
    </tr>
    <tr>
        <td>生日</td>
        <td>
            /* 下拉菜单 */
            <select name="" id="">
                <option value="">选择年份</option>
                <option value="">1990</option>
                <option value="">1991</option>
                <option value="">1992</option>
                <option value="">1993</option>
                <option value=""selected="selected">1994</option>
                <option value="">1995</option>
                <option value="">1996</option>
                <option value="">1997</option>
            </select>
            <select name="" id="">
                <option value="">选择月份</option>
                <option value="" selected="selected">01</option>
                <option value="">02</option>
                <option value="">03</option>
                <option value="">04</option>
                <option value="">05</option>
                <option value="">06</option>
                <option value="">07</option>
                <option value="">08</option>
                <option value="">09</option>
                <option value="">10</option>
                <option value="">11</option>
                <option value="">12</option>
            </select>
            <select name="" id="">
                <option value="" selected="selected">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
                <option value="">6</option>
                <option value="">7</option>
                <option value="">8</option>
                <option value="">9</option>
                <option value="">10</option>
                <option value="">11</option>
                <option value="">12</option>
                <option value="">13</option>
                <option value="">14</option>
                <option value="">15</option>
                <option value="">16</option>
                <option value="">17</option>
                <option value="">18</option>
                <option value="">19</option>
                <option value="">20</option>
                <option value="">21</option>
                <option value="">22</option>
                <option value="">23</option>
                <option value="">24</option>
                <option value="">25</option>
                <option value="">26</option>
                <option value="">27</option>
                <option value="">28</option>
                <option value="">29</option>
                <option value="">30</option>
                <option value="">31</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            所在地区
        </td>
        <td>
            <input type="text"value="北京" style="color: #cccccc;">
        </td>
    </tr>
    <tr>
        <td>
            婚姻状况
        </td>
        <td>
            <input type="radio" name="marriage" >未婚
            <input type="radio" name="marriage" >离婚
            <input type="radio" name="marriage"  >已婚
        </td>
    </tr>
    <tr>
        <td>学历</td>
        <td>
            <input type="text"  value="高中" style="color: gray;">
        </td>
    </tr>
    <tr>
        <td>月薪</td>
        <td>
            <input type="text" value="5000-10000" style="color:gray">
        </td>
    </tr>
    <tr>
        <td>手机号</td>
        <td>
            <input type="text" maxlength="11" minlength="11">
        </td>
    </tr>
    <tr>
        <td>昵称</td>
        <td>
            <input type="text">
        </td>
    </tr>
    <tr>
        <td>喜欢的类型</td>
        <td>
            <input type="checkbox" name="lovetype" >妩媚
            <input type="checkbox" name="lovetype" >柔美
            <input type="checkbox"   name="lovetype" >可爱
            <input  type="checkbox" name="lovetype"  >小鲜肉
            <input type="checkbox" name="lovetype"  >型男
            <input type="checkbox" name="lovetype"   >气质
        </td>
    </tr>
    <tr>
        <td>
            自我介绍
        </td>
        <td>
            <textarea name="text_area" id="txtar" cols="30" rows="10" style="color: #cccccc;">不支持富文本
            </textarea>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="image" src="../img/btn.png" alt="意外出错了">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="checkbox" name="agreement" checked="checked" >我同意注册条款和会员加入标准
        </td>
    </tr>
    <tr>
        <td></td>
        <td><a href="http://localhost:8080/login/to_login"><ins>我是会员,立即登录</ins></a></td>
    </tr>
    <tr >
        <td></td>
        <td>
            <ul><h3>我承诺</h3>
                <li>年满18岁,单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚的寻找另一半</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>
            上传头像
        </td>
        <td>
            <input type="file" name="file_">
        </td>
    </tr>
    <tr>
        <td>注册 提交和重置</td>
        <td>
            <input type="button" value="注册" >
            <input type="button" value="提交">
            <input type="button" value="重置">
        </td>
    </tr>
<!--    form 表单-->
<!--    <form action="" method="post">-->
<!--        用户名: <input type="text"> <br /> <br />-->
<!--        密  码: <input type="password" name="" id=""> <br /><br/>-->
<!--        <input type="submit" value="提交">-->
<!--        <input type="reset" value="重置">-->
<!--        <input type="text">-->
    </form>
</table>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_43629719/article/details/90899242
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022