杨老师课堂之网页制作HTML的学习入门-含有案例
网页制作入门 - Html的学习
本篇所授任务
- 网站信息页面案例
- 网站图片信息页面案例
- 网站友情链接页面案例
- 网站首页案例
- 网站注册页面案例
- 网站后台页面案例
教学导航
教学目标 | 了解什么是标记语言 |
|---|---|
教学目标 | 了解HTML主要特性,主要变化及发展趋势 |
教学目标 | 了解HTML的结构标签 |
教学目标 | 掌握HTML的主要标签(字体,图片,列表,链接,表单等标签 |
教学方法 | 案例驱动法 |
1.1 网站信息页面显示案例：
1.1.1 需求分析：
在网页中显示一个文字信息页面，显示效果如下：
这里写图片描述
1.1.2 分析：
1.1.2.1 技术分析
【HTML的概述】
- 什么是HTML
HTML：Hyper Text Markup Language 超文本标记语言
l 超文本：比文本功能更加强大
l 标记语言：通过一组标签对内容进行描述的一门语言
- 为什么学习HTML
HTML是设计页面基础，是一个网页最起码的骨架内容
- 在哪些地方可以使用HTML
设计页面的时候都可以使用HTML，可以是网站，可以是淘宝店铺的装修…
- 如何使用HTML
HTML的语法和规范
l HTML文件的扩展名是.html或者是.htm
l HTML文件是由头和体组成
l HTML这组标签是不区分大小写
l HTML的标记通常是由开始标签和结束标签组成：<b>内容</b> <br/>
【HTML的字体标签】
<font>标签
<font 属性名=”属性值”>文字</font>l size:控制字体大小.最小1 最大7
l color：控制字体颜色. 使用英文设置 ，使用16进制数设置
l face：控制字体.
【HTML的排版标签】
<hn>标题标签
<h1>b标题</h1>
<p>段落标签
<p>一段文字</p>
<br/>换行标签
<br/>代表换行
<hr/>水平线标签
<hr/>水平线标签
<b>字体加粗
<b>文字</b>
<i>斜体标签
<i>斜体</i>1.1.2.2 步骤分析
- 步骤一：创建一个html文件
- 步骤二：创建标题标签
- 步骤三：标题下面会有一个水平线
- 步骤四：创建段落标签创建四个段落
- 步骤五：将某些文字设置为红色
1.1.3 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<!-- 创建标题标签 -->
<h2>公司简介</h2>
<!--
作者：Mr.yang
时间：2018-09-01
描述：水平线
-->
<hr />
<!--
作者：Mr.yang
时间：2018-09-01
描述：创建段落标签
-->
<p>
<font color="#FF0000"><b>“杨老师课堂”</b></font>是由Java讲师<b>杨校</b>个人进行开设的公开性学习平台、并且在CSDN的博客进行了发表每个技术的基础知识点，并且在CSDN及网易云上进行了诸多实战技术的视频讲解，致力于辅助更多年轻人学习，更快的适应企业级大开发。极大的方面解决了企业招不到优秀人才的困扰。
</p>
<p>
杨老师课堂的读者多为在线大学生，一群有理想、有梦想，想从事IT行业，而因为外在环境和个人机遇问题无法改变自己命运的年轻人。
在杨老师的博客中经常会有自己对该行业的个人见解和对未来发展趋势的预想，可以让更多的年轻人有所了解，更快的确立的职业生涯发展目标。
而且杨老师还会发表一些在面试前夕的话术剖析。
</p>
<p>
铭扬教育-杨老师课堂不仅着重培养学生的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保更多的学生进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，杨老师都是以技术视角去关注IT产业的发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
</body>
</html>1.2 网站的图片页面显示
1.2.1 需求分析：
在网页中显示带有图片的页面效果如下：
这里写图片描述
1.2.2 分析：
以上图片为两个图片显示，只不过是处于一行中
1.2.2.1 技术分析：
【HTML的图片标记】
<img />其中的可以选择的属性有
l— src：图片的路径
l— width：图片宽度
l— height：图片的高度
l— alt：图片提示
图片路径：
l— 分成相对路径和绝对路径
l— 相对路径:
|— ./ :代表当前路径
|— ../ :代表上一级路径
1.2.2.2 步骤分析：
- 创建一个img标签引入logo图片
- 创建一个img标签引入header图片
1.2.3 代码实现
<html>
<head>
<meta charset="utf-8">
<title>网站图片页面</title>
</head>
<body>
<img src="img/logo.png"/><img src="img/header.png" />
</body>
</html>1.3 网站的列表显示页面
1.3.1 需求分析：
在页面中列表显示友情链接：
1.3.2 分析：
1.3.2.1 技术分析
【HTML的列表标签】
无序列表
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>有序列表
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>1.3.2.2 步骤实现
- 创建一个无序列表显示友情链接
- 但是并没有实现点击后有连接跳转到的效果(原因是缺少a标签)
1.3.3 代码实现
```- 百度
- 安博
- 百合网
- 世纪佳缘
```1.3.4 总结：
【超链接标签】
<a>超链接</a>其中可以选择的属性有：
l href：超链接跳转的路径
l target：打开方式
n _self：在自身页面打开
n _blank：打开一个新窗口
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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018年09月02日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读