007 简历的制作
代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1px" cellspacing="0"><col width="400px"><col width="400px"><col width="400px"><col width="400px"><col width="400px"><col width="400px"><col width="400px"><tr align="center" heigh="300px"><td colspan="7">个人简历</td></tr> <tr align="center" heigh="300px"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td></tr> <tr align="center" heigh="300px"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td></tr> <tr align="center" heigh="300px"><td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td></tr> <tr align="center" heigh="300px"><td>毕业院校</td><td colspan="5"></td></tr> <tr align="center" heigh="300px"><td>求职意向</td><td colspan="6"></td></tr> </table></body>
</html>
疑问：tr中的 heigh 好像没明显作用
效果图：
关于colgroup标签
关于tbody标签：一般浏览器会自动生成
关于注释
<!-- -->关于标签嵌套
表单：
<input>标签:输入
- type属性值：
- text:文本输入框
- password:密码
- button: 按钮
- radio:单选
- checkbox:复选框
get请求和post请求的区别
从功能上分：
- post ：提交数据
- get:获取数据
css(cascading style sheet)层叠样式表
<tr height="60px"><td colspan="2" align="center"><input type="submit" value="提交" style="width: 80px;height: 60px;background-color:darkseagreen ;"><input type="reset" value="重置" style="width: 80px;height: 60px;background-color:darkseagreen ;"></td>
</tr>效果图：
012:引入span
<p style="text-align: center;background-color: ghostwhite;">从我的全世界路过</p>效果图： 这个块都是backcolor
<p style="text-align: center;"><span style="background-color: gray;color: white;font-size: 24px;">从你的全世界路过</span>
</p>效果图：
div：
如何居中：
text-align:centermargin:auto; 让容器本身水平居中margin 表示边距 ，auto表示自动总结：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div style="color: #555;margin: auto;width:600px"><p style="text-align: center;"><span style="background-color: gray;color: white;font-size: 40px;">从你的全世界路过</span></p><p>一个人的记忆就是座城市，时间腐蚀着一切建筑</p><p><span style="color: blueviolet;">如果你不往前走，就会被沙子掩埋。</span><b>所以我们泪流满面，步步回头，可是只能往前走。</b></p><p><span style="color:greenyellow ;">哪怕往前走，是和你擦肩而过。</span><b>我从你们的世界路过，可你们也只是从对方的世界路过。</b>哪怕寂寞无声，我们也依旧是废话流，说完一切，和沉默做老朋友。</p></div></body>
</html>
效果展示：
013 布局与选择器
div容器的特点：一个空div,默认宽度100%，高度为0
字体默认16px 行高：21px
<!DOCTYPE html>
<html style="background-color:gainsboro;"><head><meta charset="UTF-8"><title></title></head><body style="margin: 0;"><div id="banner"><img src="img/002.png" style="width: 100% ;"></div><div id="navigation" style="height: 80px;line-height:80px ;text-align: center;background-color: white;"><a href="#" style="text-decoration: none;color:black;margin:0 15px;">首页</a><a href="#" style="text-decoration: none;color:black;margin:0 15px;">菜谱</a><a href="#" style="text-decoration: none;color:black;margin:0 15px;">食材</a><a href="#" style="text-decoration: none;color:black;margin:0 15px;">健康</a><a href="#" style="text-decoration: none;color:black;margin:0 15px;">社区</a><a href="#" style="text-decoration: none;color:black;margin:0 15px;">关于我们</a> </div><div id="bottom" style="height: 40px;line-height:40px;text-align: center;font-size: 14px;color:grey;">版权所有：西安财经大学信息学院软件1601班 李婷</div></body>
</html>效果图：
CSS样式：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;}html{background-color:gainsboro;}#navigation{height: 80px;line-height:80px ;text-align: center;background-color: white;}#bottom{height: 40px;line-height:40px;text-align: center;font-size: 14px;color:grey;">}.nav{text-decoration: none;color:black;margin:0 15px;}#banner img{width: 100%;}</style></head><body style="margin: 0;"><div id="banner"><img src="img/002.png" ></div><div id="navigation" ><a href="#"class="nav" >首页</a><a href="#"class="nav" >菜谱</a><a href="#"class="nav" >>食材</a><a href="#"class="nav" >健康</a><a href="#"class="nav" >社区</a><a href="#"class="nav" >关于我们</a> </div><div id="bottom">版权所有：西安财经大学信息学院软件1601班 李婷</div></body>
</html>
总结：
加入边框——>增加边框长度——>只留右边框
在网页中：行内样式表优先级>内部样式
<a href="#" class="item" style="border: none;">秒杀活动</a><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#navigation{text-align: center;}#navigation.last{border: none;}.item{text-decoration: none;color: black;border-right: solid 1px #808080;padding:0 15px ;}</style></head><body><div id="navigation"><a href="#" class="item">首页</a><a href="#" class="item">办公家居</a><a href="#" class="item">数码科技</a><a href="#" class="item">母婴</a><a href="#" class="item">团购</a><a href="#" class="item last">秒杀活动</a></div></body>
</html>效果图：
