前端HTML01

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

网站后台页面案例

本文内容

  • 了解什么是标记语言
  • 了解HTML主要特性,主要变化以及发展趋势
  • 了解HTML的结构标签
  • 掌握HTML的主要标签(字体,图片,列表,链接,表单等标签)

1.网站信息页面

1.1需求分析:

我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息

1.2技术分析:
HTML概述:

HTML: Hyper Text Markup Language 超文本标记语言

超文本: 比普通文本功能更加强大,可以添加各种样式

标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行

<h1>静夜诗</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>地上鞋两双,</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>
HTML语法规范
<!--
	1. 上面是一个文档声明 
	2. 根标签 html
	3. html文件主要包含两部分. 头部分和体部分
		头部分 : 主要是用来放置一些页面信息
		体部分 : 主要来放置我们的HTML页面内容
	4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成  
	5. 标签不区分大小写, 官方建议使用小写
-->
1.3步骤分析:
  1. 公司简介 需要标题
  2. 水平分割线
  3. 四个段落
  4. 第一个段落字体需要红色
1.4代码实现:
<html>
	<head>
		<meta charset="UTF-8">
		<title>技术学习说明</title>
	</head>
	<body>
		<!--
			1. 公司简介 需要标题
			2. 水平分割线
			3. 四个段落
			4. 第一个段落字体需要红色
		-->
		<h3>公司简介</h3>
		
		<hr />
		<p>
		<font color="red">“中关村黑马程序员训练营”</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN,并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展,而企业招不到优秀人才的困扰。 目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地,并被评为中关村软件园重点扶持人才企业。
		</p>
		<p>
		<strong>自学而非手把手</strong>查阅文档而非死记知识点<em>有理想、有梦想,</em>技术和我们以往所接触的一些知识有很大的不同,比如英文非常强调词汇量,需要你多说多背;数学需要你记住公式,反复练习;在教学的方式上也有很大的不同,以前都是有专门的老师手把手教你,而且还有同学交流。那要学好技术,应该依循什么样的学习方法和教学方法呢?
		</p>
		<p>
		在高中一学期一门课只有很薄的一本书,老师会反复讲解知识点,强化你的记忆,考试也是闭卷;而技术一个很小的分支,内容就有几千页甚至更多,强记知识点显然不合适。学习技术要像查词典一样来查阅技术文档,你只需要掌握基本的语法和用法,在编程的时候随时查阅,就像你不需要背诵上万的单词也能知道它的意思用法一样,所以技术文档是学习技术最为重要的参考资料。
		</p>
		<p>
		一技术是最强调结果的技能,你看了再多书,如果不知道技术成品是怎么写出来的,都是枉然。很多朋友有收集癖,下载了很多电子资源,收藏了很多高赞的技术文章,但是却没有动手去消化去理解,把时间和精力都浪费了。不动手在开发者工具里去写代码,不动手配置开发环境,缺乏实战的经验,都是阻碍你学好技术的坏习惯。
		</p>
	</body>
</html>

1.5 扩展内容

​ b : 加粗

​ i : 斜体

​ strong: 加粗, 带语义标签

em:  斜体, 带语义

2.网站图片信息

2.1需求分析:

在我们的网站中通常需要显示LOGO图片,显示效果如下

2.2技术分析

img 标签:

​ 常用的属性;

​ width : 宽度

​ height: 高度

​ src : 指定文件路径

​ alt: 图片加载失败时的提示内容

2.3步骤分析
2.4代码实现
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			常用属性:
				src : 指定图片路径
				width : 指定图片宽度
				height : 图片高度
				alt : 文件加载失败时的提示信息
		-->
		<img src="../img/美女22.jpg" width="500px" alt="这张图片可能加载问题" />
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--在网页中显示图片-->
		<img src="../img/logo2.png" width="30%"/>
		<img src="../image/header.jpg" width="30%" />
	</body>
</html>
2.5 扩展-文件路径
  • 相对路径
		./		代表的是当前路径
		../ 	代表的上一级路径
		../../	上上一级路径

3.网站友情链接页面

3.1需求分析

在我们的网站中,通常会显示友商公司的网站链接

  • 百度
  • 新浪微博
3.2技术分析

列表标签:

​ 无序列表: ul

​ type: 小圆圈,小圆点, 小方块

​ 有序列表: ol

​ type: 1,a ,A,I,

​ start : 指定是起始索引

3.3步骤分析
3.4代码实现
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
		1.使用无序列表
			百合网
			世纪家园
			珍爱网
			非诚勿扰
	-->
	<body>
		<ul>
			<li><a href="http://www.baihe.com" target="_blank">百合网</a></li>
			<li><a href="http://www.jiayuan.com">世纪家园</a></li>
			<li>珍爱网</li>
			<li>非诚勿扰</li>
		</ul>
	</body>
</html>
3.5 扩展内容

​ 点击链接,跳转去指定网站

​ a 超链接标签

​ 常用的属性:

​ href: 指定要跳转去的链接地址

​ 如果是网络地址需要加上http协议 ,

​ 如果访问的是本网站的html文件,可以直接写文件路径

​ target : 以什么方式打开

​ _self: 默认打开方式,在当前窗口打开

​ _blank: 新起一个标签页打开页面

总结

  • 网站信息案例
    • 字体标签 font
      • color: 颜色
      • size: 大小 1~7
      • face: 改变字体
    • p 段落标签
    • h标题标签 : 1~6
    • br 换行
    • hr 水平线
    • b 加粗
    • i 斜体
    • strong : 加粗 包含语义
    • em : 斜体 包含语义
  • 网站图片案例
    • img标签
      • src : 指定图片的路径
      • width: 宽度
      • height: 高度
      • alt : 图片加载错误时的提示信息
    • 相对路径:
      • ./ 代表的是当前路径
      • …/ 代表的上一级路径
      • …/…/ 代表的上上一级路径
  • 友情链接:
    • ul: 无序列表
      • type :
    • ol: 有序列表
      • type : 样式
      • start : 起始索引
    • li : 列表项
    • a 超链接标签
      • href : 要访问的链接地址
      • target : 打开方式
  • 网站首页
    • table标签
      • border: 指定边框
      • width : 宽度
      • height : 高度
      • bgcolor : 背景颜色
      • align : 对齐方式
    • tr标签
    • td标签
      • colspan: 跨列操作
      • rowspan: 跨行操作
    • 表格单元格的合并
    • 表格的嵌套

4.网站首页

4.1需求分析:

​ 根据产品文档,完成商城首页,显示效果如图:

4.2技术分析:
表格标签table

​ table标签:

​ 常用的属性:

​ bgcolor : 背景色

​ width : 宽度

​ height : 高度

​ align : 对齐方式

​ tr 标签

​ td 标签

合并单元格:

​ colspan : 跨列操作

​ rowspan : 跨行操作

​ 注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉

表格的嵌套:

​ 在td中可以嵌套一个表格

4.3步骤分析
  1. 创建一个8行一列的表格
  2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
  3. 第二部分: 导航栏部分 : 放置5个超链接
  4. 第三部分: 轮播图
  5. 第四部分: 嵌套一个三行7列表格
  6. 第五部分: 直接放一张图片
  7. 第六部分: 抄第四部分的
  8. 第七部分: 放置一张图片
  9. 第八部分: 放一堆超链接
4.4代码实现
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<!--
			1. 创建一个8行一列的表格
			2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
			3. 第二部分: 导航栏部分 : 放置5个超链接
			4. 第三部分: 轮播图 
			5. 第四部分: 嵌套一个三行7列表格
			6. 第五部分: 直接放一张图片
			7. 第六部分: 抄第四部分的
			8. 第七部分: 放置一张图片
			9. 第八部分: 放一堆超链接
		-->
		<table  width="100%" >
			<!--第一部份: LOGO部分: 嵌套一个一行三列的表格-->
			<tr>
				<td>
					<table  width="100%">
						<tr>
							<td>
								<img src="../img/logo2.png" />
							</td>
							<td>
								<img src="../image/header.jpg" />
							</td>
							<td>
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--第二部分: 导航栏部分 : 放置5个超链接-->
			<tr bgcolor="black">
				<td height="50px">
					<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>
			<!--第四部分: 嵌套一个三行7列表格-->
			<tr>
				<td>
					<table  width="100%" height="500px"> 
						<tr>
							<td colspan="7">
								<h3>最新商品<img src="../img/title2.jpg"></h3>
							</td>
						</tr>
						<tr align="center">
							<!--左边大图的-->
							<td rowspan="2" width="206px" height="480px">
								<img src="../products/hao/big01.jpg" />
							</td>
							<td colspan="3" height="240px">
								<img src="../products/hao/middle01.jpg" width="100%" height="100%" />								
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
						</tr>
						<tr align="center">
							
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--第五部分: 直接放一张图片-->
			<tr>
				<td>
					<img src="../products/hao/ad.jpg" width="100%" />
				</td>
			</tr>
			<!--第六部分: 抄第四部分的-->
			<tr>
				<td>
					<table  width="100%" height="500px"> 
						<tr>
							<td colspan="7">
								<h3>热门商品<img src="../img/title2.jpg"></h3>
							</td>
						</tr>
						<tr align="center">
							<!--左边大图的-->
							<td rowspan="2" width="206px" height="480px">
								<img src="../products/hao/big01.jpg" />
							</td>
							<td colspan="3" height="240px">
								<img src="../products/hao/middle01.jpg" width="100%" height="100%" />								
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
						</tr>
						<tr align="center">
							
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- 第七部分: 放置一张图片-->
			<tr>
				<td>
					<img src="../image/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 />
Copyright © 2005-2016 传智商城 版权所有
				</td>
			</tr>
		</table>
	</body>
</html>

5.网站注册页面:

5.1需求分析:

​ 编写一个HTML页面, 显示效果如图所示

5.2技术分析:
  • 表单标签

    <!--
    			表单标签
    				action : 直接提交的地址
    				
    				method : 
    						get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
    						post 方式  会将参数封装在请求体中, 没有这样的限制
    						
    			
    			input :
    				type: 指定输入项的类型
    					text : 文本
    					password :  密码框
    					radio :		单选按钮
    					checkbox :  复选框
    					file 	 : 上传文件
    					submit   : 提交按钮
    					button 	 : 普通按钮
    					reset	 : 重置按钮
    					hidden  : 隐藏域
    					
    					date    : 日期类型
    					tel     : 手机号
    					number   : 只允许输入数字
    					
    				placeholder : 指定默认的提示信息
    				name : 在表单提交的时候,当作参数的名称
    				id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
    			
    			textarea : 文本域, 可以输入一段文本
    						cols : 指定宽度
    						rows : 指定的是高度
    			
    			select  : 下拉列表
    				option : 选择项
    		-->
    
    步骤分析:
    1. logo部分
    2. 导航栏
    3. 注册部分
    4. 页脚图片
    5. 网站声明信息
5.3代码实现:
<form action="注册入门案例.html">
  <table width="60%" align="center"> 
    <tr>
      <td colspan="2"><font color="blue" size="5">会员注册</font> USER REGISTER</td>
    </tr>
    <tr>
      <td>用户名:</td>
      <td>
        <input type="text"  placeholder="请输入用户名"/>
      </td>
    </tr>
    <tr>
      <td>密   码:</td>
      <td>
        <input type="password"  placeholder="请输入密码"/>
      </td>
    </tr>
    <tr>
      <td>确认密码:</td>
      <td>
        <input type="password"  placeholder="请再次输入密码"/>
      </td>
    </tr>
    <tr>
      <td>email:</td>
      <td>
        <input type="text"  placeholder="请输入邮箱"/>
      </td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>
        <input type="text"  placeholder="请输入真实姓名"/>
      </td>
    </tr>
    <tr>
      <td>性别:</td>
      <td>
        <input type="radio" name="sex" /><input type="radio" name="sex" /><input type="radio" name="sex" /></td>
    </tr>
    <tr>
      <td>出生日期:</td>
      <td>
        <input type="date"  />
      </td>
    </tr>
    <tr>
      <td>验证码:</td>
      <td>
        <input type="text"  />
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="submit" value="注册"  />
      </td>
    </tr>
  </table>
</form>

6.网站后台页面展示

6.1需求分析:

我们前面已经做完了首页商品展示, 那么我们需要一个页面用来编辑我们的商品信息, 还有商品分类, 用户购买之后,还得有订单管理页面

6.2技术分析

框架标签:
frameset

注意: 使用了frameset必须将body删掉,否则页面会有问题

frame
常用属性:

​ src: 引入的html文件路径
​ name: 指定框架的名称

6.3步骤分析
6.4代码实现
扩展

框架中点击跳转

常用的快捷键
Ctrl + D 					删除光标当前所在的行
Ctrl + Shift + R 			复制当前行到下一行
Ctrl + Enter 				将光标移动到下一行
Ctrl + Shift + Enter 		将光标定位在上一行
Ctrl + Shift + /            注释当前行
Ctrl + R  					运行当前网页/刷新当前网页
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值