WEB阶段_HTML(附代码笔记)

(一)案例一:网站信息页面的显示

1、HTML文档的创建


	
		01-HTML的文件创建(浏览器标签显示的名字)
	
	
	
		

你好

2、HTML的结构



	
		
		02-HTML的结构标签
	
	
		Hello HTML!!!
	

3、HTML的字体标签



	
		
		03-HTML的字体标签
	
	
		我是HTML! 
我是HTML!
我是小红!
我是小绿!
我是小蓝!
我是小蓝!

4、HTML的排版标签



	
		
		
	
	
		
		
		
		

一级标题

二级标题

三级标题

一段内容内容 一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容 一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容 一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容 一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容

一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容 一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容

老韩训练营 老韩训练营 老韩训练营
内容
老韩训练营

5、综合:网站信息页面的显示



	
		
		网站信息页面
	
	
	
	
		

公司简介


“金灵教育”隶属于金灵教育科技(上海)有限公司, 一直秉承“用良心做教育”的理念,致力于打造IT教育全产业链人才服务平台,公司总部位于上海 ,线上教学模式可以让学员在不影响工作的情况下转行高新IT行业,全国培养优质人才20000余人 ,同期在校学员5000余人,合作院校超500所,合作企业超10000家, 每年众多学员受益于金灵教育组织的技术研讨会、技术培训课、 网络公开课及免费教学视频。

金灵教育11大学科包含全栈HTML5+培训、全链路设计培训、PHP全栈+服务器集群培训、 JavaEE+分布式开发培训、大数据+人工智能培训、Unity游戏开发培训 、Python人工智能培训、云计算+Python运维培训、全栈软件测试培训、 Android培训、iOS培训,采用100%全程面授高品质、高成本培养模式, 教学大纲紧跟企业需求,拥有全国一体化就业保障服务,成为学员信赖的IT职业教育品牌。

金灵教育隶属于金灵教育科技(上海)有限公司, 一直秉承“用良心做教育”的理念,致力于打造IT教育全产业链人才服务平台, 公司总部位于上海,线上教学模式可以让学员在不影响工作的情况下转行高新IT行业 ,全国培养优质人才20000余人,同期在校学员5000余人,合作院校超500所, 合作企业超10000家,每年众多学员受益于金灵教育组织的技术研讨会、技术培训课、网络公开课及免费教学视频。

金灵教育11大学科包含全栈HTML5+培训、全链路设计培训、PHP全栈+服务器集群培训、 JavaEE+分布式开发培训、大数据+人工智能培训、Unity游戏开发培训、 Python人工智能培训、云计算+Python运维培训、全栈软件测试培训、 Android培训、iOS培训,采用100%全程面授高品质、高成本培养模式, 教学大纲紧跟企业需求,拥有全国一体化就业保障服务,成为学员信赖的IT职业教育品牌。

(二)、案例二:网站图片信息的显示

【目录结构】:../表示回到上级目录所处的同级位置;同级位置时,可以使用名称直接访问

WEB阶段_HTML(附代码笔记)_第1张图片

1、abc目录:HTML的图片标签

 第一个..回到跟abc目录同级的位置,第二个..回到跟demo目录同级的位置,所以加上/图片名称即可获取到



	
		
		
	
	
		
		
	

2、demo目录:HTML的图片标签

由于img跟abc、此HTML文件同级,所以直接img/+图片名称即可;..回到跟demo目录同级的位置,所以/+图片名称即可。



	
		
		
	
	
		一张美女图片
		

3、综合:案例二:网站图片信息的显示

由于图片与此HTML文件同级,所以直接使用名称访问即可。



	
		
		
	
	
		
		
	

(三)、案例三:网站列表页面的显示

1、超链接标签

2、综合:案例三:网站列表页面的显示

target="_self"表示链接在当前页面打开,即覆盖

target="_blank"表示链接在新的窗口打开,即新开

(四)、案例四:网站的首页的显示

1、HTML的表格标签

td标签内可以套table表格



	
		
		
	
	
		
11 12 13
21
221 222
123 123
23
32

2、综合:案例四:网站首页



	
		
		首页
	
	
		
登录 注册 购物车
首页   手机数码    电脑办公    烟酒糖茶    鞋靴箱包   
热门商品
最新商品
关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明
关于我们
Copyright © 2005-2016 传智商城 版权所有

(五)、网站的注册页面的显示

1、综合:案例五:网站的注册页面的显示

td标签先嵌套表单form标签再嵌套表格table标签

注意input标签的type的属性的值



	
		
		
	
	
	
		
登录 注册 购物车
首页   手机数码    电脑办公    烟酒糖茶    鞋靴箱包   
用户名
密码
确认密码
邮箱
姓名
性别
爱好 篮球 足球 排球 羽毛球
籍贯
头像
简介
生日
关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明
Copyright © 2005-2016 传智商城 版权所有

(六)、案例六:网站后台页面的显示

1、data



	
		
		
	
	
		
分类的ID 分类的名称 分类的描述 操作
1 手机数码 手机数码 修改|删除
2 电脑办公 电脑办公 修改|删除
3 烟酒糖茶 烟酒糖茶 修改|删除

2、left

3、right



	
		
		
	
	
		

欢迎,欢迎,热烈欢迎~!

4、top



	
		
		
	
	
		

欢迎来到黑马商城

数据 a < 6 数据 a › 10

5、综合:案例六:网站后台页面的显示



	
		
		
	
	
	
		
		
		
		
		
			
			
			
			
		
	

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

你可能感兴趣的:(Java-WEB阶段,前端,html,笔记)