引入表格
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>