第1章 WEB01-HTML篇【课件+代码】

今日任务

  • 网站信息页面案例
  • 网站图片信息页面案例
  • 网站友情链接页面案例
  • 网站首页案例
  • 网站注册页面案例
  • 网站后台页面案例

教学导航

教学目标了解什么是标记语言了解HTML主要特性,主要变化及发展趋势了解HTML的结构标签掌握HTML的主要标签(字体,图片,列表,链接,表单等标签)
教学方法案例驱动法

1.1 网站信息页面显示案例:

1.1.1 需求分析

在网页中显示一个文字信息页面,显示效果如下:

第1章 WEB01-HTML篇【课件+代码】

1.1.2 分析

1.1.2.1 技术分析

【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>

1.1.2.2 步骤分析

  • 步骤一:创建一个html文件
  • 步骤二:创建标题标签
  • 步骤三:标题下面会有一个水平线
  • 步骤四:创建段落标签创建四个段落
  • 步骤五:将某些文字设置为红色

1.1.3 代码实现

<html>
	<head>
		<meta charset="utf-8">
		<title>页面标题</title>
	</head>
	<body>
		<!-- 创建标题标签 -->
		<h2>公司简介</h2>
		<!--
        	作者:offline
        	时间:2016-01-21
        	描述:水平线
        -->
        <hr />
        <!--
        	作者:offline
        	时间:2016-01-21
        	描述:创建段落标签
        -->
		<p>
			<font color="#FF0000"><b>“中关村黑马程序员训练营”</b></font>是由<b>传智播客</b>联合中关村软件园、CSDN,并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展,而企业招不到优秀人才的困扰。 目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地,并被评为中关村软件园重点扶持人才企业。
		</p>
		
		<p>
			黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”,必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量,并降低企业的用人风险。
		</p>
		
		<p>
			中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新,不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。
		</p>
		
		<p>
			一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。
		</p>
	</body>
</html>

1.2 网站的图片页面显示

1.2.1 需求分析

在网页中显示带有图片的页面效果如下:

第1章 WEB01-HTML篇【课件+代码】

1.2.2 分析:

1.2.2.1 技术分析

【HTML的图片标记】

<img />

  • src:图片的路径
  • width:图片宽度
  • height:图片的高度
  • alt:图片提示

图片路径:

  • 分成相对路径和绝对路径
  • 相对路径:
    • ./ :代表当前路径
    • ../ :代表上一级路径

1.2.2.2 步骤分析

  • 创建一个img标签引入logo图片
  • 创建一个img标签引入header图片

1.2.3 代码实现

<html>
	<head>
		<meta charset="utf-8">
		<title>网站图片页面</title>
	</head>
	<body>
		<img src="../img/logo2.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 步骤实现

  • 创建一个无序列表显示友情链接

1.3.3 代码实现

		<ul>
			<li>百度</li>
			<li>传智播客</li>
			<li>百合网</li>
			<li>世纪佳缘</li>
		</ul>

1.3.4 总结

【超链接标签】

<a>超链接</a>

  • href:超链接跳转的路径
  • target:打开方式
    • _self:在自身页面打开
    • _blank:打开一个新窗口

1.4 网站的首页显示

1.4.1 需求分析

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

第1章 WEB01-HTML篇【课件+代码】

1.4.2 分析

1.4.2.1 技术分析

【HTML的表格标签】

表格标签:
	<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 代码实现

<!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章 WEB01-HTML篇【课件+代码】

1.5.2 分析

1.5.2.1 技术分析

【HTML的表单标签】

表单标签:

  • 需要提交的表单需要使用<form></form>括起来
    • action:提交路径
    • method:提交方式
  • 文本框:
    • <input type=”text”/>
      • name
      • value
      • size
      • maxlength
      • readonly
  • 密码框:
    • <input type=”password”/>
  • 单选按钮:
    • <input type=”radio”/>
      • Checked:默认选中
  • 复选框
    • <input type=”checkbox”/>
      • Checked:默认选中
  • 下拉列表框
    • <select><option></option></select>
      • Selected:默认选中
      • Multiple:全部显示
  • 文件上传项
    • <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 代码实现

<!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章 WEB01-HTML篇【课件+代码】

1.6.2 分析:

1.6.2.1 技术分析:

【HTML的框架标记】

<frameset>
</frameset>
* 使用了frameset标签,不需要使用body.
    * 属性:
        * rows:横向切分页面
        * cols:纵向切分页面
<frame>标签代表切分每个部分的页面
    * src:引入页面的路径

1.6.2.2 步骤分析:

  • 步骤一:先将页面切分成上下两个部分。
  • 步骤二:将下部分切分成左右两个部分。
  • 步骤三:分别引入不同的页面。

1.6.3 代码实现:

<!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扩展的表单标签及属性:

<input type=”email”>
<input type=”date”>
<input type=”number”>
* placeholder:
第1章 WEB01-HTML篇【课件+代码】

课程配套代码

已付费?登录刷新

原创文章,作者:小助手,如若转载,请注明出处:https://www.javahelp.com.cn/606.html

(0)
上一篇 2022年8月28日 下午9:05
下一篇 2022年8月29日 下午9:14

相关推荐

发表回复

登录后才能评论