杨老师课堂之网页制作HTML的学习入门-含有案例1：https://developer.aliyun.com/article/1542748
1.4 网站的首页显示
1.4.1 需求分析：
在浏览器中显示网站的首页效果如下：
1.4.2 分析：
准备图片素材
链接：https://pan.baidu.com/s/1kvNpaoVvoOSNYlFpcT7EOA 密码：jfbj
1.4.2.1 技术分析
【HTML的表格标签】
表格标签：
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
表格的属性：
l border ：表格边框
l width ：表格宽度
l height ：表格高度
l align ：水平方向对齐方式 left center right
l bgcolor ：背景色
1.4.2.2 步骤分析：
- 步骤一：创建8行表格
- 步骤二：实现第一行，嵌套一个一行三列表格。
- 步骤三：实现第二行，实现导航，设置背景色。
- 步骤四：放置一张图片
- 步骤五：显示热门商品，创建一个三行七列的表格。对表格进行跨行，跨列的操作。
- 步骤六：引入一张广告图片。
- 步骤七：显示最新商品，创建一个三行七列的表格。对表格进行跨行，跨列的操作。
- 步骤八：广告信息
- 步骤九：链接版权信息。
1.4.3 代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站首页</title> </head> <body> <table width="1400" border="0" align="center"> <tr> <td> <!-- LOGO部分 --> <table width="100%"> <tr height="40"> <td> <img src="img/logo.png"/> </td> <td> <img src="img/header.png"/> </td> <td> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </td> </tr> </table> </td> </tr> <!--导航部分--> <tr height="30" bgcolor="#75AA24"> <td> <a href="#"><font color="white">首页</font></a> <a href="#"><font color="white">精品女装</font></a> <a href="#"><font color="white">酷帅男装</font></a> <a href="#"><font color="white">时尚鞋靴</font></a> <a href="#"><font color="white">真皮箱包</font></a> </td> </tr> <!--轮播图--> <tr> <td> <img src="products/1/banner1.jpg" width="100%"/> </td> </tr> <!--最新商品 展示模块--> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="7"><font size="5"><b>最新商品</b></font> <img src="img/title2.jpg"></td> </tr> <tr> <td rowspan="2" width="200" height="500"> <img src="products/hao/big02.jpg" width="100%" height="100%"/> </td> <td colspan="3" width="600" height="250"> <img src="products/hao/middle02.jpg" width="100%" height="250"/> </td> <td width="200" align="center"> <img src="products/1/cs20001.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td width="200" align="center"> <img src="products/1/cs20002.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td width="200" align="center"> <img src="products/1/cs20003.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> </tr> <tr> <td align="center"> <img src="products/1/cs20004.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs20005.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs20006.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs20007.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs20008.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs20009.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> </tr> </table> </td> </tr> <!--广告--> <tr> <td> <a href="#"><img src="products/hao/ad.jpg" width="100%"></a> </td> </tr> <!--掌柜推荐 展示模块--> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="7"><font size="5"><b>掌柜推荐</b></font> <img src="img/title2.jpg"></td> </tr> <tr> <td rowspan="2" width="200" height="500"> <img src="products/hao/big02.jpg" width="100%" height="100%"/> </td> <td colspan="3" width="600" height="250"> <img src="products/hao/middle02.jpg" width="100%" height="250"/> </td> <td width="200" align="center"> <img src="products/1/cs10007.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td width="200" align="center"> <img src="products/1/cs10008.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td width="200" align="center"> <img src="products/1/cs10009.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> </tr> <tr> <td align="center"> <img src="products/1/cs10001.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs10002.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs10003.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs10004.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs10005.jpg" width="130px" height="130px" /><br/> <p><font color="gray">上衣</font></p> <p><font color="red">$499</font></p> </td> <td align="center"> <img src="products/1/cs10006.jpg" width="130px" height="130px" /><br/> <p><font color="gray">大衣</font></p> <p><font color="red">$499</font></p> </td> </tr> </table> </td> </tr> <!--尾部图片展示--> <tr> <td> <img src="img/footer.jpg" width="100%"/> </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> <br/> <p> Copyright © 2016-2019 杨老师课堂 版权所有 </p> </td> </tr> </table> </body> </html> ``` ## 1.5 网站的注册页面案例： ### 1.5.1 需求分析： 在浏览器中显示如下的效果：  ### 1.5.2 分析： #### 1.5.2.1 技术分析： 【HTML的表单标签】 表单标签：
需要提交的表单需要使用括起来
action：提交路径 method：提交方式
文本框:
name value size maxlength readonly
密码框：
单选按钮：
Checked：默认选中
复选框
Checked：默认选中
下拉列表框
Selected：默认选中 Multiple：全部显示
文件上传项
文本域
提交按钮
重置按钮
普通按钮
隐藏字段
提交方式：【二者的提交方式的区别是面试题】 l GET ：默认值 提交的数据都会在地址栏中进行显示 提交的数据的时候是有大小的限制 l POST ：【常用】 提交的数据不会再地址栏中进行显示 提交的数据没有大小限制 #### 1.5.2.2 步骤分析： - 步骤一：创建一个5行表格 - 步骤二：完成每行显示 - 步骤三：中间行设置一个背景图片，嵌套一个表格居中显示。在表格中显示表单的内容 ### 1.5.3 代码实现：
<td> <a href="#"><font color="white">首页</font></a> <a href="#"><font color="white">精品女装</font></a> <a href="#"><font color="white">酷帅男装</font></a> <a href="#"><font color="white">时尚鞋靴</font></a> <a href="#"><font color="white">真皮箱包</font></a> </td> </tr> <tr height="600" background="img/regist_bg.jpg"> <td> <table width="100%" height="100%" > <tr> <td align="center"> <table width="60%" height="80%" border="1" bordercolor="gray" bgcolor="white"> <tr> <td> <form> <table width="100%" height="100%" border="0" align="center" cellspacing="10"> <tr> <td>用户名</td> <td><input type="text" name="username"/></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password"/></td> </tr> <tr> <td>确认密码</td> <td><input type="password" name="repassword"/></td> </tr> <tr> <td>性别</td> <td><input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女</td> </tr> <tr> <td>Email</td> <td><input type="text" name="email"/></td> </tr> <tr> <td>姓名</td> <td><input type="text" name="name"/></td> </tr> <tr> <td>生日</td> <td><input type="text" name="birthday"/></td> </tr> <tr> <td>验证码</td> <td><input type="text" name="checkcode" size="10"/></td> </tr> <tr> <td colspan="2"><input type="submit" value="注册"/></td> </tr> </table> </form> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td> <img src="img/footer.jpg" width="100%"/> </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> <br/> <p> Copyright © 2016-2019 杨老师课堂 版权所有 </p> </td> </tr> </table> </body>
## 1.6 网站后台页面显示 ### 1.6.1 需求分析： 在浏览器中显示网站的后台页面，效果如下图：  ### 1.6.2 分析： #### 1.6.2.1 技术分析： 【HTML的框架标记】
\* 使用了frameset标签，不可以使用body标签.二者不可以调试使用，只能取其一使用 \* 属性： \*` rows`：横向切分页面 \* `cols`：纵向切分页面 `<frame>`标签代表切分每个部分的页面 \*` src`：引入页面的路径 #### 1.6.2.2 步骤分析： - 步骤一：先将页面切分成上下两个部分。 - 步骤二：将下部分切分成左右两个部分。 - 步骤三：分别引入不同的页面。 ### 1.6.3 代码实现：
网站后台页面
<frameset rows="15%,*"> <frame src="top.html" /> <frameset cols="15%,*"> <frame src="left.html" /> <frame src="right.html" /> </frameset> </frameset>
### 1.6.4 扩展需求： 点击分类管理，将数据放入到表格中显示到右侧区域中！ 在frame上添加一个属性name，在超链接的target属性上设置这个名称。点击超链接的时候，跳转到指定的位置。
<h3><a href="data.html" target="right">分类管理</a></h3>
分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。
