-
- 网站信息页面显示案例：
【HTML的概述】
- 什么是HTML
HTML：Hyper Text Markup Language 超文本标记语言
- 超文本：比文本功能更加强大
- 标记语言：通过一组标签对内容进行描述的一门语言
- 为什么学习HTML
HTML是设计页面基础
- 在哪些地方可以使用HTML
设计页面的时候都可以使用HTML
- 如何使用HTML
HTML的语法和规范
- HTML文件的扩展名是.html或者是.htm
- HTML文件是由头和体组成
- HTML这组标签是不区分大小写
- HTML的标记通常是由开始标签和结束标签组成：<b>内容</b> <br/>
【HTML的字体标签】
<font>标签
<font 属性名=”属性值”>文字</font>
- size:控制字体大小.最小1 最大7
- color：控制字体颜色. 使用英文设置 ，使用16进制数设置
- face：控制字体.
【HTML的排版标签】
<hn>标题标签
<h1>b标题</h1>
<p>段落标签
<p>一段文字</p>
<br/>换行标签
<br/>代表换行
<hr/>水平线标签
<hr/>水平线标签
<b>字体加粗
<b>文字</b>
<i>斜体标签
<i>斜体</i>
-
- 步骤分析
- 步骤一：创建一个html文件
- 步骤二：创建标题标签
- 步骤三：标题下面会有一个水平线
- 步骤四：创建段落标签创建四个段落
- 步骤五：将某些文字设置为红色
-
- 代码实现
-
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<!-- 创建标题标签 -->
<h2>公司简介</h2>
<hr />
<!--
作者：offline
时间：2016-01-21
描述：创建段落标签
-->
<p>
<font color="#FF0000"><b>“程序员训练营”</b></font>是由<b>我们</b>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
</body>
</html>
-
- 网站的图片页面显示
-
-
- 分析：
- 技术分析：
- 分析：
-
【HTML的图片标记】
<img />
- src：图片的路径
- width：图片宽度
- height：图片的高度
- alt：图片提示
图片路径：
- 分成相对路径和绝对路径
- 相对路径:
- ./ :代表当前路径
- ../ :代表上一级路径
-
- 步骤分析：
-
- 创建一个img标签引入logo图片
- 创建一个img标签引入header图片
-
- 代码实现
-
<html>
<head>
<meta charset="utf-8">
<title>网站图片页面</title>
</head>
<body>
<img src="../img/logo2.png"/><img src="../img/header.png" />
</body>
</html>-
- 网站的列表显示页面
- 需求分析：
- 网站的列表显示页面
在页面中列表显示友情链接：
【HTML的列表标签】
无序列表
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>
有序列表
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>
-
-
-
- 步骤实现
-
-
- 创建一个无序列表显示友情链接
-
- 代码实现
-
<ul>
<li>百度</li>
<li>百合网</li>
<li>世纪佳缘</li>
</ul>
-
-
- 总结：
-
【超链接标签】
<a>超链接</a>
- href：超链接跳转的路径
- target：打开方式
- _self：在自身页面打开
- _blank：打开一个新窗口
-
- 网站的首页显示
- 需求分析：
- 网站的首页显示
-
-
- 分析：
- 技术分析
- 分析：
-
【HTML的表格标签】
表格标签：
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格的属性：
- border ：表格边框
- width ：表格宽度
- height ：表格高度
- align ：水平方向对齐方式 left center right
- bgcolor ：背景色
-
-
- 步骤分析：
-
-
- 步骤一：创建8行表格
- 步骤二：实现第一行，嵌套一个一行三列表格。
- 步骤三：实现第二行，实现导航，设置背景色。
- 步骤四：放置一张图片
- 步骤五：显示热门商品，创建一个三行七列的表格。对表格进行跨行，跨列的操作。
- 步骤六：引入一张广告图片。
- 步骤七：显示最新商品，创建一个三行七列的表格。对表格进行跨行，跨列的操作。
- 步骤八：广告信息
- 步骤九：链接版权信息。
-
- 代码实现
-
<!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>
<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="../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>
-
- 网站的注册页面案例：
- 需求分析：
- 网站的注册页面案例：
-
-
- 分析：
- 技术分析：
- 分析：
-
【HTML的表单标签】
表单标签：
- 需要提交的表单需要使用<form></form>括起来
- action：提交路径
- method：提交方式
- 文本框:
- <input type=”text”/>
- name
- value
- size
- maxlength
- readonly
- <input type=”text”/>
- 密码框：
- <input type=”password”/>
- 单选按钮：
- <input type=”radio”/>
- Checked：默认选中
- <input type=”radio”/>
- 复选框
- <input type=”checkbox”/>
- Checked：默认选中
- <input type=”checkbox”/>
- 下拉列表框
- <select><option></option></select>
- 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 ：
- 提交的数据不会再地址栏中进行显示
- 提交的数据没有大小限制
-
- 步骤分析：
-
- 步骤一：创建一个5行表格
- 步骤二：完成每行显示
- 步骤三：中间行设置一个背景图片，嵌套一个表格居中显示。在表格中显示表单的内容
-
- 代码实现：
-
<!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>
<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">
<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>-
- 网站后台页面显示
- 需求分析：
- 网站后台页面显示
在浏览器中显示网站的后台页面，效果如下图：
-
-
- 分析：
- 技术分析：
- 分析：
-
【HTML的框架标记】
<frameset>
</frameset>
* 使用了frameset标签，不需要使用body.
* 属性：
* rows：横向切分页面
* cols：纵向切分页面
<frame>标签代表切分每个部分的页面
* src：引入页面的路径
-
-
-
- 步骤分析：
-
-
- 步骤一：先将页面切分成上下两个部分。
- 步骤二：将下部分切分成左右两个部分。
- 步骤三：分别引入不同的页面。
-
- 代码实现：
-
<!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>-
-
- 扩展需求：
-
点击分类管理，将数据放入到表格中显示到右侧区域中！
在frame上添加一个属性name，在超链接的target属性上设置这个名称。点击超链接的时候，跳转到指定的位置。
<h3><a href="data.html" target="right">分类管理</a></h3>
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
