前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >第1章 WEB01-HTML篇-视频教程-第二部分

第1章 WEB01-HTML篇-视频教程-第二部分

作者头像
Java帮帮
发布于 2022-11-25 17:35:03
3900
发布于 2022-11-25 17:35:03
举报

1.4 网站的首页显示

1.4.1 需求分析：

在浏览器中显示网站的首页效果如下：

1.4.2 分析：

1.4.2.1 技术分析

【HTML的表格标签】

代码语言：javascript
复制
表格标签：
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>表格的属性：border	：表格边框
width	：表格宽度
height	：表格高度
align	：水平方向对齐方式 left center right
bgcolor	：背景色
1.4.2.2 步骤分析：
  • 步骤一：创建8行表格
  • 步骤二：实现第一行，嵌套一个一行三列表格。
  • 步骤三：实现第二行，实现导航，设置背景色。
  • 步骤四：放置一张图片
  • 步骤五：显示热门商品，创建一个三行七列的表格。对表格进行跨行，跨列的操作。
  • 步骤六：引入一张广告图片。
  • 步骤七：显示最新商品，创建一个三行七列的表格。对表格进行跨行，跨列的操作。
  • 步骤八：广告信息
  • 步骤九：链接版权信息。

1.4.3 代码实现

代码语言：javascript
复制
<!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/logo2.png"/>
</td>
<td>
<img src="../img/header.png"/>
</td>
<td>
<a href="#">登录</a>
<a href="../案例五：网站注册页面显示/网站的注册页面.html">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<tr height="30" bgcolor="black">
<td>
<!--导航部分-->
<a href="#"><font color="white">首页</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>
<td>
<img src="../img/1.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/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" width="600" height="250">
<img src="../products/hao/middle01.jpg" width="100%" height="250"/>
</td>
<td width="200" align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200"  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200"  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
<tr>
<td  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><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/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" width="600" height="250">
<img src="../products/hao/middle01.jpg" width="100%" height="250"/>
</td>
<td width="200" align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200"  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200"  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
<tr>
<td  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><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="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>
<a href="">联系我们</a>
<a href="">招贤纳士</a>
<a href="">法律声明</a>
<a href="../案例三：网站列表页面显示/网站列表页面显示.html">友情链接</a>
<a href="">支付方式</a>
<a href="">配送方式</a>
<a href="">服务声明</a>
<a href="">广告声明</a>
<br/>
Copyright © 2005-2016 传智商城 版权所有
</td>
</tr>
</table>
</body>
</html>

1.5 网站的注册页面案例：

1.5.1 需求分析：

在浏览器中显示如下的效果：

1.5.2 分析：

1.5.2.1 技术分析：

【HTML的表单标签】

表单标签：

  • 需要提交的表单需要使用<form></form>括起来
    • method：提交方式
    • action：提交路径
  • 文本框:
    • name
    • value
    • size
    • maxlength
    • readonly
    • <input type=”text”/>
  • 密码框：
    • <input type=”password”/>
  • 单选按钮：
    • Checked：默认选中
    • <input type=”radio”/>
  • 复选框
    • Checked：默认选中
    • <input type=”checkbox”/>
  • 下拉列表框
    • Selected：默认选中
    • Multiple：全部显示
    • <select><option></option></select>
  • 文件上传项
    • <input type=”file” name=”file”/>
  • 文本区
    • <textarea name=”” cols=”” rows=””></textarea>
  • 提交按钮
    • <input type=”submit” value=”注册”>
  • 重置按钮
    • <input type=”reset” value=”重置”>
  • 普通按钮
    • <input type=”button” value=”普通按钮”>
  • 隐藏字段
    • <input type=”hidden” name=”id”/>

提交方式：

  • GET ：默认值
    • 提交的数据的时候是有大小的限制
    • 提交的数据都会在地址栏中进行显示
  • POST ：
    • 提交的数据没有大小限制
    • 提交的数据不会再地址栏中进行显示
1.5.2.2 步骤分析：
  • 步骤一：创建一个5行表格
  • 步骤二：完成每行显示
  • 步骤三：中间行设置一个背景图片，嵌套一个表格居中显示。在表格中显示表单的内容

1.5.3 代码实现：

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
<!-- LOGO部分 -->
<table width="100%">
<tr height="40">
<td>
<img src="../img/logo2.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 bgcolor="black" height="30">
<td>
<a href="#"><font color="white">首页</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr height="600">
<td>
<table width="100%" height="100%" background="../img/regist_bg.jpg">
<tr>
<td align="center">
<table width="60%" height="80%" border="1" 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="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>
<a href="">联系我们</a>
<a href="">招贤纳士</a>
<a href="">法律声明</a>
<a href="../案例三：网站列表页面显示/网站列表页面显示.html">友情链接</a>
<a href="">支付方式</a>
<a href="">配送方式</a>
<a href="">服务声明</a>
<a href="">广告声明</a>
<br/>
Copyright © 2005-2016 传智商城 版权所有
</td>
</tr>
</table>
</body>
</html>

1.6 网站后台页面显示

1.6.1 需求分析：

在浏览器中显示网站的后台页面，效果如下图：

1.6.2 分析：

1.6.2.1 技术分析：

【HTML的框架标记】

代码语言：javascript
复制
<frameset>
</frameset>
* 使用了frameset标签，不需要使用body.
* 属性：* rows：横向切分页面
* cols：纵向切分页面
<frame>标签代表切分每个部分的页面
* src：引入页面的路径
1.6.2.2 步骤分析：
  • 步骤一：先将页面切分成上下两个部分。
  • 步骤二：将下部分切分成左右两个部分。
  • 步骤三：分别引入不同的页面。

1.6.3 代码实现：

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="15%,*">
<frame src="top.html" />
<frameset cols="15%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</frameset>
</html>

1.6.4 扩展需求：

点击分类管理，将数据放入到表格中显示到右侧区域中！

在frame上添加一个属性name，在超链接的target属性上设置这个名称。点击超链接的时候，跳转到指定的位置。

<h3><a href=”data.html” target=”right”>分类管理</a></h3>

1.7 HTML5中的一些扩展表单标签：

1.7.1 HTML5扩展的表单标签及属性：

代码语言：javascript
复制
<input type=”email”>
<input type=”date”>
<input type=”number”>
* placeholder:
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-09-01，如有侵权请联系 cloudcommunity@tencent.com 删除
网站
html
html5

本文分享自 Java帮帮 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

网站
html
html5
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 1.4 网站的首页显示
    • 1.4.1 需求分析：
      • 1.4.2 分析：
        • 1.4.2.1 技术分析
        • 1.4.2.2 步骤分析：
      • 1.4.3 代码实现
      • 1.5 网站的注册页面案例：
        • 1.5.1 需求分析：
          • 1.5.2 分析：
            • 1.5.2.1 技术分析：
            • 1.5.2.2 步骤分析：
          • 1.5.3 代码实现：
          • 1.6 网站后台页面显示
            • 1.6.1 需求分析：
              • 1.6.2 分析：
                • 1.6.2.1 技术分析：
                • 1.6.2.2 步骤分析：
              • 1.6.3 代码实现：
                • 1.6.4 扩展需求：
                • 1.7 HTML5中的一些扩展表单标签：
                  • 1.7.1 HTML5扩展的表单标签及属性：
                  相关产品与服务
                  验证码
                  腾讯云新一代行为验证码（Captcha），基于十道安全栅栏， 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时，提供更精细化的用户体验。
                  免费体验产品介绍产品文档
                  精选特惠 用云无忧
                  领券

                  腾讯云开发者

                  扫码关注腾讯云开发者

                  扫码关注腾讯云开发者

                  领取腾讯云代金券

                  热门产品

                  热门推荐

                  更多推荐

                  Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

                  深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

                  腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

                  Copyright © 2013 - 2024 Tencent Cloud.

                  All Rights Reserved. 腾讯云 版权所有

                  登录 后参与评论