JavaWeb页面设计

第一章   HTML常用设置
1.1.html：html、标题标签、特殊符号、水平线标签、文字标记、图片标签等解析。

	
	
		
		
		
		 
	
	
		
		
一级标题标签
		
二级标题标签
		
三级标题标签
		
四级标题标签
		
六级标题标签
		
		
特殊符号
		大于号：   >     

		小于号：  <     

		版权符号:©   

		商品符号:®    

		引号:   "  

		空    格：       

		换行标签: <br / > 
		
		
水平线标签
		

		

		

		

		
		
文字标记
		中关村软件园 软件开发 训练营欢迎您！
		

		
图片标签
		
		
	

展示效果如下：title标签展示的内容，目录和效果如下


1.2.文字段落、音乐标签、视频标签、字体标签和网页中滚到效果的应用。

	
		
		
	
	
		
文字段落
		
 剑圣说： 你的剑就是我的剑！！！ 
		
		
音乐标签
		
		
		
		
视频标签
		
		
		
字体标签
		
			2000万柔光双摄，照亮你的美！！！
		
		
		
网页中滚动效果的应用
		
			
			
		
		
			
				马云说，对钱不感兴趣！！
			
		
		
		
			欢迎 Admin,登陆成功！
		
	

展示效果如下：

1.3.表格标签和表格的嵌套：

	
		
		
	
	
		
		

			

				
1,1
				
1,2
				
1,3
			
			

				
2,2
				
2,3
			
			

				
3,1
			
		
		
		
表格的嵌套
		
	

展示效果如下：

1.4.文本框、密码框、单选按钮、多选按钮、下拉选和文本域和按钮。

	
		
		
	
	
		
		

			
			文本框 :   


			密码框: 				  


			性别[单选按钮]:  男 
						中
						女
			
			


			爱好[多选按钮]: 
				       抽烟 
				       喝酒 
				       烫头 
			


			[下拉选] :  省 : 
			
				--请选择--
				云南省
				河南省
				河北省
				山西省
			
			
			


			[文本域]  备注: 

				请输入备注
			


			按钮:

			 
			普通按钮
			
			
			
		
	

展示效果如下：

1.5.Email类型、search类型、数字类型、滑块类型、颜色类型、日期类型、placeholder属性、required属性和autofocus属性。

	
		
		
	
	
		

			Email类型 : 
			


			search 类型 : 
			


			数字类型:   
			


			滑块类型: 
			


			颜色类型: 
			


			日期类型: 
			


			placeholder属性:	
			
			


			required属性	： 
			 
			 


			autofocus属性: 
			 
             
			



			
			
		
	

效果展示如下：

第二章   Html的设置
2.1.字体样式设计

	
		
		
		
		
	
	
		
字体样式设计
		
		

			第一种  行内式
		
				
		
第二种 嵌入式
		
		
第三种 引入式
	
	

展示效果如下：

2.2.选择器的设置

	
		
		
		
	
	
		
		
AAAAAAAAAAA
		
		
BBBBBBBBBBB
		
		
CCCCCCCCCCC
		
DDDDDDDDDDDD 
	
	

展示效果如下：

2.3.边框线、选择器等的设置。

	
		
		
		
	
	
		
		

		
AAAAAAAAAAA
		

		
		
		

			

				top
				
图片
				
欢迎admin 登录
			
			

				主体内容
				
数据列表
			
		
	

展示效果如下：

2.4.div + css页面分割展示

	
		
		
		
	
	
		

			
顶部
			
			

				
左边菜单栏
				
右边显示内容的区域
			
			
底部信息
		
	

展示效果如下：

2.5.盒子模型（选出页面某一块当作盒子）

	
		
			
		
	
	
		
 这是div块的内容展示 
	

展示效果如下：

2.6.ul+li列表样式设计

	
		
		
	
	
	
		

			

				
首页
				
日志
				
相册
				
说说
				
留言板
			
		
		
	

展示效果如下：

2.7.盒子阴影设置

展示效果如下：

2.8.文字特效设置

	
		
		
		
	
	
王者荣耀
	
	

展示效果如下：

2.9.动画的事件、方法设置

展示效果如下：长方形在旋转

第三章   js相关知识
3.1.js基础知识1

展示效果如下：点击点击我弹出弹框

3.2.js基础知识2

	
		
		
	
	
		点击我
		

	
	

展示效果服下：点击惦记我出现第三种输出方式。

3.3.js运算1

展示效果如下：

3.4.js运算2

展示效果如下：

3.5.js运算3

	
		
		
	
	
		
加法+
		 
		+
		
		=
		

		
减法-
		 
		-
		
		=
		
		
		
模%(取余)
		 
		%
		
		=
		
			
	

展示效果如下：输入数字，点击等于算出结构：

3.6.js设计抽奖

	
		
		
		
	
	
		
学院抽奖系统
		

			请输入卡号: 
			抽奖
		
		

	
	

展示效果如下：输入点击抽奖

3.7.实例1：
1.前端框架frameset：作用：切割页面，把页面切割成若干行或者列，例如：rows="100,*,50" : 把页面切割成三行，第一行的高度是 100px,第二行的高度是自由* ,第三行的高度是 50px。cols="200,*"：把页面分割成两列，第一列宽200px，第二列宽度自由。

1.各个页面的设置：align = "center"表示所在的行文字居中显示，marquee标签中的文字从右往左滚动展示。

	
		
		
	
    
	
		
学生管理系统
		
			欢迎 rose, 登陆成功！！
		
	


	
		

			copyright © || 联系我们||合作伙伴 

			Addr: 小名
		
	
	
		
			导航栏
		
	
	
		
详细内容
	

展示效果如下：

3.login登录页面设计：title表示页面的作用，页面中不展示，
表示换行，form表示表单，action表示跳转的页面，method表示返回的方法，一般为get方法或post方法，border表示边框宽度，cellspacing表示单元格间距，表示一行，表示行中的列， 表示一个空格，input表中这一行或列可输入内容，type表示内容的类型，name为后端传来的名字，placeholder没有输入是默认的内容，标签为超链接，href为超链接的地址。

	
		
		
	
	
		






		

			

				

					
用户名
					
 
				
				

					
密   码
					
 
				
				

					

						 
						注册
						
					
				
			
		
	

展示效果如下：

3.8.节点相关操作，onclick点击追加、插入、删除、复制和修改节点

	
		
		
	
	
追加
插入
删除节点
复制节点
修改
		

			
aaa1
			
aaa2
			
aaa3
			
aaa4
			
aaa5
		

	

展示效果如下：

3.9.列表展示、全选、修改等操作

	
		
		
		
		
	
	
		
学生管理系统
		、
			

			

				
全选
				
序号
				
姓名
				
性别
				
班级
				
操作
			
			

				

				
1
				
张三丰
				
男
				
计科1班
				

					修改||
					删除
				
			
			

				

				
2
				
李思敏
				
男
				
计科1班
				

					修改||
					删除
				
			
			

				

				
1
				
张三丰
				
男
				
计科1班
				

					修改||
					删除
				
			
			

				

				
1
				
张三丰
				
男
				
计科1班
				

					修改||
					删除
				
			
			

				

				
1
				
张三丰
				
男
				
计科1班
				

					修改||
					删除
				
			
			

				

				
1
				
张三丰
				
男
				
计科1班
				

					修改||
					删除
				
			
			

				

				
1
				
张三丰
				
男
				
计科1班
				

					修改||
					删除
				
			
			

				
反选 
				

				

				

				

				

			
		
	

展示效果如下：
 

3.10.节点样式属性

	
		
		
	
	
		
div哈哈哈
		点击我

	

 展示点击变化：

3.11.鼠标事件

	
		
		
		
		
	
	
		单击
		双击
		按下
		弹起
		

	

展示效果如下：鼠标放在矩形上会变色

 3.12.键盘事件：

	
		
		
	
	
		username:
		
	

展示效果如下：输入时会变色
 

3.13.cookie

3.14.cookie封装：

第四章  流程控制、函数、变量和一维数组
4.1.四种一如方法，引入外部文件和重定向

	
		
		
		
	
	
	
		
		点击运行行内式
		


		第四种，重定向
	

效果如下：

 4.2.运算符

展示效果如下
 

4.3.控制流程语句

展示效果如下：

4.4.流程控制关键字

展示效果如下

4.5.如何创建函数

展示如下：

 4.6.变量的作用域

展示效果如下：

4.7.一维数组创建

展示如下：

4.8.一维数组操作

展示如下：

4.9.常用对象String

​​​​展示如下：

4.10.常用对象Date

展示如下：

4.11.js定时器

	
		
		
	
	
		


		停止
		
	

​​​​​展示如下：

4.12.动态时间

展示如下：

4.13.时间案例

	
		
		
	
	
		页面  秒后跳转到百度
		
	

​​​​​​​展示如下：

4.14.确认取消框

展示如下：

4.15.抓取节点的几种方式
 

	
		
		
	
	
		
AAAAAdivdiv
		
pname1pname1pname1
		
pname2pname2pname2
		
cl1111class1class1
		
cl222class1class1
		
cl3333class1class1
		
cl444444ss1class1
		
	

展示如下

4.16.通过关系获得节点

	
		
		
	
	
		

			
aa1
			
aa2
			
aa3
		
		
	

​​​​​​​展示如下：