目录
(一) 用table写简介
1 table 代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table style="width:850px" border="1" align="center">
<!--表头开始-->
<tr>
<th colspan="5"><h2>我的简历</h2></th>
</tr>
<tr>
<th>
<table border="1"><!--姓名到培训经历-->
<tr><!--姓名一行-->
<th style="background-color:#e6e6e6" width="130px" height="35px">姓名</th>
<th width="200px">
<form><input type="text" style="width: 200px;height: 35px" name="名字" value="填写名字"/></form>
</th>
<th style="background-color:#e6e6e6" width="130px" >性别</th>
<th width="200px">
<form>
<select style="width: 200px;height: 35px">
<option value="男">男</option>
<option value="女">女</option>
</select>
</form>
</th>
<th style="background-color:#e6e6e6" width="150px" rowspan="5" >
<form><input type="file" style="width: 170px;height: 50px" name="图片" ></form>
</th>
</tr>
<tr><!--籍贯一行-->
<th style="background-color:#e6e6e6" width="130px" height="35px">籍贯</th>
<th >
<form><input type="text" style="width: 200px;height: 35px" name="名字" value="填写籍贯"/></form>
</th>
<th style="background-color:#e6e6e6" width="130px">民族</th>
<th>
<form><input type="text" style="width: 200px;height: 35px" name="民族" value="填写民族"/></form>
</th>
</tr>
<tr><!--出生一行-->
<th style="background-color:#e6e6e6" width="130px" height="35px">出生年月</th>
<th width="200px">
<form><input type="text" style="width: 200px;height: 35px" name="年月" value="填写日期"/></form>
</th>
<th style="background-color:#e6e6e6" width="130px" >政治面貌</th>
<th width="200px">
<form><input type="text" style="width: 200px;height: 35px" name="年月" value="填写身份"/></form>
</th>
</tr>
<tr><!--学校一行-->
<th style="background-color:#e6e6e6" width="130px" height="35px">毕业学校</th>
<th >
<form><input type="text" style="width: 200px;height: 35px" name="名字" value="填写校名"/></form>
</th>
<th style="background-color:#e6e6e6" width="130px">专业</th>
<th>
<form><input type="text" style="width: 200px;height: 35px" name="民族" value="填写专业"/></form>
</th>
</tr>
<tr><!--学历一行-->
<th style="background-color:#e6e6e6" width="130px" height="35px">最高学历</th>
<th >
<form><input type="text" style="width: 200px;height: 35px" name="名字" value="填写学历"/></form>
</th>
<th style="background-color:#e6e6e6" width="130px">身高</th>
<th>
<form><input type="text" style="width: 200px;height: 35px" name="民族" value="填写身高"/></form>
</th>
</tr>
<tr><!--培训经历一行-->
<th style="background-color:#e6e6e6" width="130px" height="35px">培训经历</th>
<th >
<form><input type="text" style="width: 200px;height: 35px" name="名字" value="填写学历"/></form>
</th>
<th style="background-color:#e6e6e6" width="130px">联系地址</th>
<th colspan="2">
<form><input type="text" style="width: 370px;height: 35px" name="民族" value="填写地址"/></form>
</th>
</tr>
</table>
<table border="1"><!--联系方式-->
<tr><!--联系一行-->
<th style="background-color:#e6e6e6" width="125px" height="35px" rowspan="2">联系方式</th>
<th style="background-color:#e6e6e6" width="200px" height="35px" >Tel</th>
<th style="background-color:#e6e6e6" width="200px" height="35px" >QQ</th>
<th style="background-color:#e6e6e6" width="200px" height="35px" >Email</th>
</tr>
<tr><!--联系一行-->
<th >
<form><input type="text" style="width: 200px;height: 35px" name="电话号码" value="填写号码"/></form>
</th>
<th >
<form><input type="text" style="width: 200px;height: 35px" name="QQ号码" value="填写号码"/></form>
</th>
<th >
<form><input type="text" style="width: 295px;height: 35px" name="邮件号码" value="填写号码"/></form>
</th>
</tr>
</table>
<table border="1"><!--课程到求职意向-->
<tr>
<th style="background-color:#e6e6e6" width="125px" height="105px" >主修课程</th>
<th ><form><input type="text" style="width: 710px;height: 105px" name="课程" value="填写信息"/></form></th>
</tr>
<tr>
<th style="background-color:#e6e6e6" width="125px" height="70px" >获得的证书及荣誉</th>
<th ><form><input type="text" style="width: 710px;height: 70px" name="证书" value="填写信息"/></form></th>
</tr>
<tr>
<th style="background-color:#e6e6e6" width="125px" height="105px" >社会实践</th>
<th ><form><input type="text" style="width: 710px;height: 105px" name="实践" value="填写信息"/></form></th>
</tr>
<tr>
<th style="background-color:#e6e6e6" width="125px" height="35px" >个人评价</th>
<th ><form><input type="text" style="width: 710px;height: 35px" name="实践" value="填写信息"/></form></th>
</tr>
<tr>
<th style="background-color:#e6e6e6" width="125px" height="35px" >在校担任职位</th>
<th ><form><input type="text" style="width: 710px;height: 35px" name="实践" value="填写信息"/></form></th>
</tr>
<tr>
<th style="background-color:#e6e6e6" width="125px" height="35px" >爱好</th>
<th ><form><input type="text" style="width: 710px;height: 35px" name="实践" value="填写信息"/></form></th>
</tr>
<tr>
<th style="background-color:#e6e6e6" width="125px" height="35px" >求职意向</th>
<th ><form><input type="text" style="width: 710px;height: 35px" name="实践" value="求职意向"/></form></th>
</tr>
</table>
</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
2 截图
(二) 用frame写文章
1 目录代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>全球九座唯美餐厅</h1>
<ul>
<li><a href="内容.html#_p1" target="跳转">1、西班牙餐厅 El Celler de Can Roca</a></li>
<li><a href="内容.html#_p2" target="跳转">2、意大利餐厅 Osteria Francescana</a></li>
<li><a href="内容.html#_p3" target="跳转">3、巴西餐厅 D.O.M.</a></li>
<li><a href="内容.html#_p4" target="跳转">4、秘鲁餐厅 Central Restaurante</a></li>
<li><a href="内容.html#_p5" target="跳转">5、日本餐厅 Narisawa</a></li>
<li><a href="内容.html#_p6" target="跳转">6、英国餐厅 Dinner by Heston Blumenthal</a></li>
<li><a href="内容.html#_p7" target="跳转">7、美国餐厅 Eleven Madison Park</a></li>
<li><a href="内容.html#_p8" target="跳转">8、丹麦餐厅 Noma</a></li>
<li><a href="内容.html#_p9" target="跳转">9、泰国餐厅 Gaggan</a></li>
</ul>
</body>
</html>
2 frame代码
<!DOCTYPE html>
<html>
<frameset cols="25%,75%">
<frame src="index.html">
<frame src="内容.html" name="跳转">
</frameset>
</html>
3 文章内容部分代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a name="_p0"><h1>全球九座唯美餐厅</h1>
<a name="_p1"><h2>1、西班牙餐厅 El Celler de Can Roca</h2>
<p>
El Celler de Can Roca餐厅的菜肴被米其林指南誉为“融合了超现实主义的传统菜肴”。这家餐厅由Roca兄弟三人共同经营，三兄弟赋予西加泰罗尼亚菜肴全新的色彩组合和创意搭配，成为餐厅最大的亮点。<br>
<p align="center">
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180621/02b20ce36227495ea1505d0f148ab212.jpeg" ><br>
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180621/d35f95eedea04a98a21f5ef0c89c6602.jpeg" ><br>
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180621/ca86a077271644dca4fe8abca8ed4eb5.jpeg" >
</p>
</p>
<a name="_p2"><h2>2、意大利餐厅 Osteria Francescana</h2>
<p>
Osteria Francescana餐厅的主厨Massimo Bottura被喻为美食界的艺术家，将传统的意大利菜与现代元素结合，最懂得“透过食物表达自己的想法”。他将盘子比作自己的画布，将诸多食材点缀其上，最终呈现出一幅艺术菜肴。<br>
<p align="center">
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180621/8f1ffeb5e4e243269d87596ed7cf2acf.jpeg" ><br>
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180621/f9d3ff6c52494fa8bbe1d960872c74d7.jpeg" ><br>
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180621/4507b597475d466aac1dc15fcc15b841.jpeg" >
</p>
</p>
<a name="_p3"><h2>3、巴西餐厅 D.O.M.</h2>
<p>
D.O.M.餐厅一直坚持使用巴西本地的天然原料而在世界餐饮界无人不晓。曾经带着叛逆的情绪做过朋克歌手和DJ的主厨Alex Atala，如今被誉为“带领巴西美食走向世界的第一人”，而这家餐厅被评为“南美洲最好的餐厅”。<br>
<p align="center">
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180621/7e9e678c868f4d258746261ca065224f.jpeg" >
</p>
</p>
4 截图
（三）回答问题
1 Table页面布局和Div布局的区别和为什么要使用Div布局？
Table布局:
早期布局均是用table(表格)布局，该布局的好处是浏览器兼容性较强，且上手快
由于html文件中的table标签的浏览器速度较慢，所以，使用嵌套表格的方法来布局网页框架会使网页浏览器的速度变慢,因为table中的内容是自适应的，为了自适应，它要计算嵌套最深的节点以满足自适应，所有可能会有一段时间出现空白才会显示。
Div布局:
是较流行的布局方式代码清晰，结构和样式分离，可维护性更强。页面加载速度更快
用DIV的方法布局网页框架的优点：
可以通过css样式给框架进行功能强大的属性设置以及给网页的局部进行任意的定位，制作出来的页面浏览速度较快，同时页面的风格可以通过修改单独的css文件进行随意的修改和更新.
2 表单标签中name属性和value属性各代表的含义
| 属性 | 含义 |
|---|---|
| name | 规定表单的名称 |
| value | 初始值 |
（四）今日总结
编程挺好玩的
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
