任务01-05表格表单的知识点的整理

一、表格的使用

1.表格（table），表头（thead）:行（tr），列（th），有加粗且居中，表身（tody）：行（tr），列（td）。

2.当给table标签设置border标签的时候，会因为table本身有标签以及表格也有标签，会出现多条线，此时需要设置cellspacing="0"。

3.rowapan:合并行，colspan：合并列。

二、表单

1.from表单

1.axtion：后台地址；

2.method：请求方式。post：不会明文，更加安全，传输内容比较大（比如上传文件），get：明文展示在地址栏上，不安全。

3.input：文本输入框，type选择输入的样式，name：给后台传值的描述（key，键），value：设置默认值，placeholder：提示文字。

4.type的详细解读：radio：只读，checkbox：多选框，file：文件上传，reset：重置按钮，button：按钮，submit：提交，

5.下拉选框（select）：<option>里面写内容，，selected：属性值和属性名相等。

6.可输入区域（textarea）：类似留言板。

7.隐藏域：type：hidden。

8.readonly：只读，disabled：不可读也不可写。

二、表单元素样式

在表单样式中一般不直接使用input标签，要用span括起来，可以添加图标等元素。

三、任务

1.代码

html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>CSDN</title><link href="css/index.css" type="text/css" rel="stylesheet" /></head><body><div class="main"><div class="nav"><img src="img/img03.png" /><a href="###">首页</a><a href="###">博客</a><a href="###">专栏课程</a><a href="###">下载</a><a href="###">问答</a><a href="###">社区</a><a href="###">插件</a><a href="###">认证</a><span><input type="text" placeholder="mysql教程" /></span><div class="sreach"><img src="img/搜索.png"/></div><span><a href="###">登录/注册</a><a href="###">会员</a><a href="###">收藏</a><a href="###">消息</a><span class="only"><img src="img/Pens羽毛笔.png" /><a href="###" class="nav_last">创作中心</a></span></span></div><div class="content"><div class="total"><div class="left"><p class="one">机器人Unimate诞生</p><p class="two">"1961年，第一款工业机器人Unimate诞生。工程师恩格尔伯格受阿西莫夫小说《我，机器人》影响,与发明家德沃尔成立了Unimation.1961年,公司的第一台机器人Unimate开始在通用电气新泽西工厂试用，这是一台用于压铸作业的五轴液压驱动机器人。"</p><div class="good"><img src="img/点赞.png" /><span>767</span></div></div><div class="right"><div class="head"><div class="head_1"><a href="###">账号密码登录</a></div><div class="head_2"><a href="###">手机免密登录</a></div></div><div class="top"><input type="text" placeholder="手机号/邮箱/用户名" /></div><div class="bottom"><input type="password" placeholder="密码"/><img src="img/眼睛.png" /></div><p class="password">忘记密码</p><button type="submit" class="submit">登录</button><div class="three"><span style="font-size: 10px; color: rgb(184,221,246);">微信注册登录 CSDN APP扫码登录</span><img src="img/img02.png" /><p style="font-size: 6px;  color: rgb(235,232,239) ;" class="content_last"> 来注册手机验证后自动登录。注册即代表同意《服务条款》</p></div></div></div><div class="footer"><p>美手我们，冠阆的土广告服务︰开发贴手宫40040014%妈西koelu@oa6nret在述富腔，工辉防间830-22100</p><p>必没叠胆号1e6Xe4G的t0aCAy网文(nle riot) 1月司、经值他网达都深达意〈须歪W则述体荆天A维意郸数中。你箭t指斯⑤”中I联月样5作心。歉始益PcaxcsA&7e</p><p>EG0-2T1北京南面系超政晴超水有底沿司贩在当角我声眼后权率区出版便综呵健去色机</p></div></div></body>
</html>

css代码

.main{margin: 0 auto;width: 1200px;
}
.nav{height: 50px;width: 1200px;background-color: white;line-height: 50px;overflow: hidden;position: absolute;
}
.nav img{width: 100px;height: 50px;float: left;
}
.nav a{display: inline-block;text-decoration: none;color: black;/* line-height: 50px; */margin-left: 10px;
}
.nav input{width: 200px;height: 20px;background-color: rgb(246,246,248);border: 1px solid rgb(243,243,245);color:rgb(190,191,193) ;padding-left: 5px;margin-left: 10px;
}
.nav .sreach{display: inline-block;width: 30px;height: 25px;background-color: rgb(255,77,75);border-radius: 5px;margin-left: -4px;vertical-align: middle;}
.nav .sreach img{width: 30px;height: 25px;
}
.nav .only{display: inline-block;width: 100px;height: 30px;background-color: rgb(255,77,75);vertical-align: middle;margin-left: 10px;border-radius: 10px;
}
.nav .only img{width: 20px;height: 30px;margin-left: 5px;
}
.nav .only .nav_last{display: block;margin-top: -10px;color: white;
}
.content{margin-top: 50px;width:1100px;height: 500px;background-image:url(../img/img01.png);background-repeat: no-repeat;position: absolute;
}
.content .total{width: 602px;height: 400px;/* border: 1px solid red; */margin-left: 250px;margin-top: 50px;
}
.content .total .left{width: 250px;height: 400px;/* border: 1px solid black; */float: left;background-color: rgba(0,0,0,0.5);color: white;
}
.content .total .left .one{font-size: 25px;font-weight: bold;
}
.content .total .right{width: 350px;height: 400px;/* border: 1px solid yellow; */float: right;
}
.content .total .good{width: 100px;height: 30px;border: 2px solid rgb(255,77,75);border-radius: 10px;margin-left: 20px;margin-top: 40px;
}
.content .total .good img{width: 30px;height: 30px;margin-left: 2px;
}
.content .total .good span{display: inline-block;height: 10px;width: 50px;margin-left: 10px;
}
.content .total .right{background-color: white;
}
.content .head{width: 350px;height: 30px;margin-top: 50px;
}
.content .head a{text-decoration: none;color: #000000;font-size: 14px;font-weight: bold;
}
.content .head .head_1{float: left;width: 100px;height: 30px;text-align: center;line-height: 30px;color: #000000;border-bottom: 2px solid rgb(255,77,75);margin-left: 60px;
}
.content .head .head_2{float: left;width: 100px;height: 30px;text-align: center;line-height: 30px;color: #000000;border-bottom: 2px solid gainsboro;margin-left: 20px;
}
.content .right .top{margin-left: 55px;margin-top: 30px;
}
.content .right .top input{width: 200px;
}
.content .right .bottom{width: 205px;height: 20px;border: 1px solid rgb(79,79,79);
}
.content .right .bottom input{border: 0;float: left;
}
.content .right .bottom img{width: 20px;height: 20px;float: right;margin-right: 3px;
}
.content .right .bottom{margin-left: 55px;margin-top: 10px;
}
.content .password{float: right;margin-right: 90px;
}
.content .submit{width: 200px;height: 20px;margin-left: 55px;
}
.content .three{margin-top: 80px;
}
.content .three img{width: 150px;height: 30px;float: right;
}
.content .content_last{margin-top: 10px;
}
.footer{width: 1100px;height: 100px;margin-top: 80px;
}
.footer p{text-align: center;font-size: 16px;color: rgb(221,221,221) ;
}

2.实现的图