WEB

一.Java体系结构

二.课程介绍

1.HTML

• 用来勾勒出网页的结构和内容

2.CSS

• 用来美化网页

3.JavaScript

• 让网页呈现动态的数据和效果

4.jQuery

• 框架,可以提高js编程效率

三.WEB三要素

四.XML和HTML

1.XML

• 可扩展(自定义)标记语言
• 标记、属性、嵌套关系都可以定义
• 用来存储或传输数据

2.HTML

• 超文本标记语言
• 标记、属性、嵌套关系是固定(w3c)的
• 用来显示数据
• 某些版本的HTML完全符合XML规范

理解:HTML是标签固定的XML

五.创建WEB项目注意事项

1.切换视图

• 在Eclipse右上角选择JavaEE视图

2.选择war包

• 在创建maven项目最后一步,选择war

3.解决报错

• 展开项目,右键点击Deployment,选择Generate…

六.跨行跨列

一.显示方式

1.块

• 有宽高,垂直排列
• hn,p,ol,ul,div,table,form

2.行内

• 无宽高,水平排列
• span,i,em,b,strong,u,del,a,label

3.行内块

• 有宽高,水平排列
• img,input,select,textarea

4.修改显示方式

• display:block;
• display:inline;
• display:inline-block;
• display:none;

二.定位

1.定位的作用

• 用于解决元素的排列问题

通过定位可以将元素摆放到任意位置

2.定位的分类

默认定位

• 默认情况下块垂直排列,行内水平排列.
• 默认的定位方式也称之为流定位.

流:元素有序排列而形成的队伍.

特殊定位

• 浮动定位:解决块元素水平排列的问题.
• 相对定位:让元素以自身为目标产生微小的偏移.
• 绝对定位:让元素以父辈为目标产生较大的偏移.
• 固定定位:让元素以窗口为目标产生巨大的偏移.

三.浮动定位

1.概述

• 作用:解决块元素水平排列的问题.
• 分类:左浮动,右浮动.
• 步骤:1)目标离队 2)后者前进 3)目标去指定位置

2.右浮动

• 让块按照倒序左右排列
  

3.左浮动

• 让块按照正序左右排列
  

4.消除浮动影响

5.学子商城服务区

四.相对、绝对、固定定位

1.相同点

• 设置偏移量的方式相同
  

2.不同点

• 偏移时所参考的目标不同

3.相对定位

• 以自身的位置为目标,通常偏移量较小.

• 目标不离队.

    position: relative;
    left: 20px;
    top: -10px;
  

4.绝对定位

• 以带有position的父辈为目标,通常偏移量较大
• 若父辈都有position,则以就近的父辈为目标
• 若父辈都没position,则以就远的父辈为目标
• 特点:目标离队.

你想以谁为目标,就在谁上加position.

	position: absolute;
	left: 20px;
	top: 30px;

5.固定定位

• 以浏览器窗口为目标进行定位
• 定位的元素将离队

元素会挂在窗口上保持不动

	position: fixed;
	left: 10px;
	top: -20px;