版权声明:王迪 https://blog.csdn.net/dnruanjian/article/details/83903940
知识点:html文档基本结构、table标签布局、在单元格中插入文字、图片、链接、表单。
网页效果图:
制作思路:将整个网页当做一个table表格
1、制作一个6行1列的表格
2、在单元格中插入相关内容
3、在第4行的单元格里插入一个form表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table标签制作的百度首页-王迪</title>
</head>
<body>
<table width="90%" border="0" cellspacing="0">
<tr>
<td>武汉:<img src="shine.jpg" width="20px" height="20px" />23-37度|空气质量<font color="#FF0000">良好</font></td>
</tr>
<tr>
<td align="center"><img src="baidu_logo.png"/></td>
</tr>
<tr>
<td align="center"><a href="#">新闻</a> <a href="#">网页</a> <a href="#">贴吧</a> <a href="#">知道</a> <a href="#">音乐</a> <a href="#">图片</a> <a href="#">视频</a> <a href="#">地图</a> <a href="#">百科</a> <a href="#">文库</a> <a href="#">更多>></a></td>
</tr>
<tr>
<td align="center" height="80px">
<form action="http://www.baidu.com/baidu" target="_blank">
<input type="text" name="word" size="60px"/>
<input type="submit" value="百度搜索"/>
</form>
</td>
</tr>
<tr>
<td align="center"><a href="#">把百度设为主页</a> <a href="#">关于百度</a> <a href="#">About baidu</a> </td>
</tr>
<tr>
<td align="center">©2015 Baidu 使用百度前必读 意见反馈 </td>
</tr>
</table>
</body>
</html>