JAVA学习之路——WEB前端

网站数据传输流程

WEB前端

1.html：负责搭建页面结构和内容
2.css：负责美化页面
3.javaScript：负责给页面添加动态效果和内容
4.iQuery：对JavaScript的封装，可以写的更少但实现更多
5.bootstrup：前端页面框架

HTML

XML：可扩展标记语言
HTML(HyperTextMarkupLanguage)：超文本标记语言，超文本指不仅仅是纯文本还包括文本样式、多媒体相关（图片、音频、视频）
学习HTML：主要学习的就是HTML里面有哪些标签，标签有哪些属性，标签和标签之间的嵌套关系

创建第一个HTML页面

new——other…——HTML files
添加注释：CTRL+SHIFT+/

页面结构介绍

略

常用的文本标签

1.文本标题标签：h1~h6
字体加粗，独占一行，有上下的间距
align = left/right/center
2,段落标签：p
独占一行，有上下的间距
3.水平分割线：hr
4.换行：br

列表标签

1.无序列表
ul type li
2.有序列表
ol type start设置起始值 reversed降序 li
3.定义列表
dl dt dd
4.列表嵌套
有序和无序可以任意无序嵌套

图片标签 img

src路径
1.相对路径 :当访问站内资源
a.页面和文件同目录：直接写文件名
b.文件在页面的上级目录：…/文件名
c.文件在页面的下季目录：文件夹名/文件名
2.绝对路径 ：当访问站外资源时使用
alt:当图片不能正常显示时显示的文本
width/height:1.像素 2.上级元素的百分比
如果只设置宽度，高度会等比缩放
title：当鼠标在图片上悬停时显示的文本
支持的图片格式：jpg/jpeg png gif

超链接a

如果不写href属性就是一个纯文本
href：资源路径
1.页面资源：可访问站内和站外资源
2.文件资源：如果浏览器支持浏览则浏览
不支持则下载
target=_blank：从新的窗口中显示页面，默认是从当前窗口跳转
页面内部跳转，先往目的地添加一个空的a标签作为锚，通过另外一个a标签跳转到这个a标签的位置 ：

<a id="top"></a>   
<a href="#top">回到顶部</a>

图片可点击：

<a href=“”> <img src=“...”></a>

表格标签table

标签：table表格 tr行 td列 th表头 caption表格标题
属性：
1.table： border边框粗细 ，cellspacing单元格间距，cellspadding单元格内边距
2.td rowspan跨行，colspan跨列

<table border="1" cellspacing="0" align="center" widyh="50%">
	<caption>购物车</caption>
	<tr>
	<!-- table header 表头，字体加粗并居中 -->
		<th>编号</th>
		<th>商品名称</th>
		<th>商品单价</th>
	</tr>
	<tr>
		<td>1</td>
		<td>鼠标</td>
		<td>25</td>
	</tr>
	<tr>
		<td>2</td>
		<td>键盘</td>
		<td>80</td>
	</tr>
	<tr>
		<td>总价</td>
		<td colspan="2" align="center">105</td>
	</tr>
</table>

表单form

用户获取用户的各种信息，然后将各种数据提交到服务器

<!--action路径 数据提交路径
	默认请求方式为get(请求参数在地址的后面)
	任何控件都必须要有name属性 作用是对请求参数的介绍
	如果不写则不会提交该控件的内容
  -->
<form action="http://www.baidu.com">
</form>

学习表单主要学习的就是有哪些控件：
文本框、密码框、单选、多选、下拉选、文本域等
各种控件：
1.文本框

<!-- value文本框设置默认值 placeholder占位文本 
	 maxlength最大长度    readonly 只读 -->
用户名:<input type="text" name="usename" value="aaa" 
	  	  maxlength="5" placeholder="请输入用户名" 
	  	  readonly="readonly">

2.密码框

密码:<input type="password" name="password">

3.单选

<!-- checked：默认选中 label：标签扩充点击范围 -->
性别:<input type="radio" name="gender" value="men" 
		checked="checked" id="r1"><label for="r1">男</label>
		<input type="radio" name="gender" value="women"
		id="r2"><label for="r2">女</label>

4.多选

爱好:<input type="checkbox" name="hobby" value="smoke" id="c1"><label for="c1">抽烟</label>
	<input type="checkbox" name="hobby" value="drink" id="c2"><label for="c2">喝酒</label>
	<input type="checkbox" name="hobby" value="tangtou" id="c3"><label for="c3">烫头</label>

5.日期

生日:<input type="date" name="birthday">

6.文件

照片:<input type="file" name="pic">

7.隐藏域

<!--隐藏域:当需要给服务器提交数据，但是这个数据不需要给用户展示时使用 -->
	<input type="hidden" name="xxx" value="yyy">

8.下拉选

所在地:<select name="city">
		<option>请选择</option>
		<option value="bj" selected="selected">北京</option>
		<option value="sh">上海</option>
		<option value="gz">广州</option>
	</select>

9.文本域

自我介绍:<textarea name="intro" rows="3" cols="20" placeholder="随便说点啥"></textarea>

10.提交按钮

<input type="submit" value="注册">

11.重置按钮

<input type="reset">

12.自定义按钮

<input type="button" value="按钮">

分区标签

作用：分区标签可以理解成是一个容器，用于将多个相关标签进行统一管理
div：独占一行
span：共占一行
HTML5新增的分区标签：header头、footer脚、nav导航、aside边、section块、article正文（块和正文效果相似）

实体引用（特殊转义字符）

1.空格：&nbsp
2.小于号：&lt
3.大于号：&gt

CSS

Casecading层叠Style样式Sheet表
用于美化页面

CSS的引入方式

1.内联样式：在标签的style属性中添加样式代码；
弊端：不能复用
2.内部样式：在head标签里面添加style标签，在标签体内通过选择器给标签添加样式
弊端：只能当前页面复用
3.外部样式：在单独的CSS文件中写样式代码，通过link标签引入到页面中，可以多页面复用

<link rel="stylesheet" href="first.css">

三种引用方式的优先级：内联>内部=外部(后执行覆盖先执行的)

选择器

1.标签名选择器
格式：标签名{样式代码}
选取页面中所有同名标签
2.id选择器
页面中id需要是唯一的
格式：#id{样式代码}
3.类(class)选择器
格式：.class{样式代码}
选取页面中同一类标签
4.分组选择器
将多种选择器通过逗号合并为一个选择器
格式：div,#abc,.c1{样式代码}
5.属性选择器
格式：标签名[属性名=‘属性值’]{样式代码}
6.子孙后代选择器
格式：div span{}
选取div里面所有的span（包括子元素span和所有后代span）
7.子元素选择器
格式：div>span
选取div里面所有的span子元素
8.伪类选择器
用于选择元素的状态：未访问状态 / 访问过状态 / 悬停状态 / 点击状态
格式：a:visited访问过 / link未访问 / hover悬停 / active点击
9.任意元素选择器
选中页面中所有元素
格式： *{样式代码}

颜色赋值方式

三原色：红绿蓝 0-255(16进制0-ff)
颜色单词：red
6位16进制：#ff0000
3为16进制：#f00
3位十进制：rgb(0-255,0-255,0-255) rgb(255,0,0)
4位十进制：rgba(0-255,0-255,0-255，0-1) a=alpha透明度

背景图片

设置图片路径：
background-image:url("…/…/img/a.jpg");
设置图片大小：
background-size:100px 200px;
禁止重复：
background-repeat:no-repeat;
控制位置（横向和纵向百分比）：
background-position:50% 50%;

显示方式display

block：块级元素默认值（独占一行的元素称为块级元素：div、h1-h6、p、hr）
可以修改宽高，不能多个元素显示在一行
inline：行内元素默认值（共占一行的元素称为行内元素：span）
不可以修改宽高
inline-block：行内块元素默认值（共占一行，可以修改宽高：img）
既可以共占一行，也可以修改宽高

盒子模型

盒子模型=宽高+外边距(margin)+内边距(padding)+边框(border)
1.宽高：width/height
赋值方式：1.像素px ；2.上级元素的百分比
行内元素不能修改宽高，宽高只能由内容决定
2.外边距：margin 元素上级元素或相邻兄弟元素的距离称为外边距
赋值方式：margin-left/right/top/bottom:10px;
margin:10px;
margin:10px 20px; //上下10px，左右20px
margin:0 auto; //水平居中
margin:10px 20px 30px 40px; //顺时针上右下左
行内元素上下外边距无效
相邻行内元素上下外边距相加，相邻块级元素外边距取最大值
粘连问题：当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距会出现粘连问题，给上就安苏添加overflow:hidden;解决问题
3.边框：border
赋值方式：border:边框粗细 边框样式 颜色;
单独给某个边赋值：border=left/right/top/bottom:边框粗细 边框样式 颜色;
行内元素四个方向边框全部生效，影响元素所占宽度但不影响元素所占的高度
4.内边距：padding 元素边框距内容的距离
赋值方式：padding-left/right/top/bottom:10px;
padding:10px;
padding:10px 20px;
padding:10px 20px 30px 40px;
行内元素上下内边距不影响元素所占高度

文本相关

水平对齐方式：text-align:center/left/righr;
文本修饰：text-decoration:overline(下划线)/underline(上划线)/line-through(删除线)/none
文本阴影：text-shadow:颜色 x偏移值 y偏移值 透明度;
行高：line-height:像素;
文本样色：color:red;

/* 文本对齐方式 left righr center */
		text-align:center;
		/* 文本修饰 
			underline下划线
			overline上划线
			line-through删除线
			none去掉文本修饰
		*/
		text-decoration:underline;
		/* 文本阴影 :颜色 x偏移值 y偏移值 浓度*/
		text-shadow:green 15px 15px 2px;
		line-height:150px;
		color:blue;

字体相关

字体大小：font-size:20px;
字体加粗：font-weight:bold/normal;
斜体：font-style:italic;
字体设置：font-family:xxx xxx xxx
字体大小+字体设置：font:20px xxx xxx xxx;

CSS的三大特性

1.继承：元素可以继承上级元素的文本和字体相关的样式，部分标签自带效果不受继承影响，比如：超链接a的字体颜色，h1-h6的字体大小
2.层叠性：多个选择器如果选择到同一个元素，作用的样式不同则全部层叠到一起全部生效，如果作用的样式相同则由优先级决定
3.优先级：作用范围越小，优先级越高，id>class>div>继承(属于间接选中)

溢出设置overflow

hidden：隐藏
visible：显示（默认）
scroll：滚动显示

行内元素垂直对齐方式 vertical-align

baseline：基线对齐（默认）
top：上对齐
middle：中对齐
bottom：下对齐

定位方式4+1

position定位 4

1.静态定位（文档流定位,默认定位方式）：static
特点：块级元素从上到下排列，行内元素从左到右排列，静态定位不能实现元素层叠效果，通过外边距控制元素的位置
2.相对定位：relative
特点：元素不脱离文档流，通过left/right/top/bottom让元素相对于初始位置做偏移
当需要移动页面中某一个元素，并且其他元素不受影响时，使用相对定位
3.绝对定位：absolute
特点：元素脱离文档流，通过left/right/top/bottom让元素相对于窗口（默认）或某一个上级元素做位置偏移。如果希望相对于上级窗口的话需要在上级元素加relative
当需要网某一个页面元素里面添加标签，并且不希望影响其他元素位置时使用绝对定位
4.固定定位：fixed
特点：脱离文档流，通过left/right/top/bottom让元素相对于窗口做偏移，元素会固定在窗口的某个位置
当需要将某个元素固定在窗口的某个位置时使用

浮动定位 float

特点：脱离文档流，元素从当前文档行向左或向右浮动，当撞到上级元素边框或其他浮动元素时停止
clear:both;进制两侧有浮动元素
浮动到一行时如果装不下会自动换行
当元素的所有子元素全部浮动时，则元素自动浮动的高度为0，通过给元素添加overflow:hidden解决问题
应用场景：当需要将纵向排列的uansu改成横向排列时，使用浮动定位

JavaScript

JS历史：95年由NetScape公司发布LiveScript，同年改名JavaScript，和java语言没有任何关系
JS特点：
1.属于脚本语言，不需要编译，由浏览器解析执行
2.JavaScript可以嵌入到HTML页面中
3.基于面向对象
4.属于弱类型语言
5.交互性强
6.安全性强（JS只能访问浏览器内部的程序，不能访问其他程序和磁盘上的数据）

如何在HTML中引入JavaScript

三种引入方式：
1.内联：在标签内部的事件属性中添加JS代码，当事件触发时，JS代码执行
2.内部：在HTML页面中的任意位置添加script标签，标签体内写JS代码，当页面加载时执行
3,.外部：在单独的JS文件中写JS代码，在HTML标签中通过script标签引入

语法

数据类型

JS语言中只有对象类型
常用的对象类型：
1.数值类型：number
底层去拿时浮点数，在使用过程中会自动转换整数和小数
2.字符串类型：string
var s = “abc” / ‘abc’;
3.布尔值类型：boolean
var s = true / false;
4.未定义类型：underfined
当变量值声明不赋值饿时候变量类型为未定义类型
5.自定义对象：object
Hero person student;

变量的声明和赋值

JS属于弱类型语言
var x = 10;
var s = “abc”;
x=“xxx”; //可以

运算符 + - * / % > < >= <= = ==

双等 和 三等：
双等：先统一类型，再比较是否相等
三等：先比较类型，如果类型相同再比较值

"666"==666; //true
"666"===666;  //false

除法运算会自动转换整数和小数
typeof 变量；获取变量的类型
typeof 66+6 = “number6”;

语句 if else while for switch case do while

if和while括号内的内容，如果不是布尔值，会自动转换成布尔值
for循环中的int i改成var i，不支持新for循环

方法声明

Java：public 返回值类型 方法名 (参数列表){方法体}；
JS：function 方法名(参数列表){方法体}；
声明常见的四种方法：
1.无参无返回值
2.无参有返回值
3.有参无返回值
4.有参有返回值
方法声明的三种方式：
1.function 方法名(参数列表){方法体}；
2.var 方法名 = function(参数列表){方法体};
3.var 方法名 = new Function(“参数1”,“参数2”,…,“方法体”); //Function大写

和页面标签相关的方法

1.通过id获取元素对象
var obj = document.getElementById(“id”);
2.获取和修改元素的文本内容
d.innerText = “abc”
d.innerText;
3.获取和修改文本框的文本内容
//得到文本框对象
var i = document.getElementById(“i1”);
i.value = “xxx”; //赋值
i.value; //取值
4.获取和修改元素的HTML内容
d.innerHTML=“

xxx

”;
d.innerHTML+=“

yyy

”;

字符串相关

1.创建字符串
var s1 = “abc”/‘abc’;
var s2 = new String(“abc”);
2.把字符串转成数值
parseInt(“18.6”) //18
perseInt(20.5) //20
parseFloat(“18.6”) //18.6
parseFloat(“18”) //18
Number()作用和parseFloat类似
3.转大小写
“abc”.toUpperCase();
"ABC"toLowerCase();
4.获取字符串出现的位置
str.indexof() //从前面查找
str.lastIndexOf(); //从后面查找
5.替换字符串 只替换出现的第一个
str.replace(old,new);
6.截取字符串
str.substring(start,?end);
7.拆分字符串
var arr = str.split(“拆分参照”);

数组相关

1.创建数组
var arr1 = [“acd”,true,20];
var arr2 = new Array();
2.往数组中添加内容
var arr = new Array();
arr.push(“xxx”);
arr.push(true);
3.获取和修改数组长度（JAVA中数组长度不可变）
var arr = [“acd”,true,20];
arr.length; //获取长度
arr.length = 1; //修改长度
4.数组遍历（和java一样）
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
5.数组反转
arr.reverse();
6.数组排序
默认排序规则是通过Unicode编码进行排序
var arr = [21,8,4,13];
arr.sort(); //13,21,4,8
自定义排序：

	var arr = [21,8,4,13];
	function mysort(a,b){
		return a-b;
	}
	//执行方法时需要加括号，把方法当做某个方法的参数时不用加括号
	arr.sort(mysort);
	alert(arr);

日期相关

服务器时间和客户端时间
1.获取当前客户端时间
var d = new Date();
创建指定时间的时间对象
var d2 = new Date(“2019/7/2 10:10:10”);
2.获取和设置时间戳（时间戳：距1970年1月1号）
var d1 = new Date();
d1.getTime(); //获取时间戳
d1.setTime(1000); //设置时间戳
3.获取时间分量
var d1 = new Date();
d1.getFullYear(); //年
d1.getMonth(); //月
d1.gatDate(); //日
d1.getDay(); //星期
d1.getHourse(); //时
d1.getMinutes(); //分
d1.getSeconds(); //秒
4.获取年月日 和 获取时分秒
d1.toLocaleDateString(); //获取年月日
d1.toLocaleTimeString(); //获取时分秒

正则表达式

应用场景：1.查找内容 ；2.校验文本

1.JS中创建正则对象
模式：i忽略大小写 g全局查找
第一种：var reg = /规则/模式;
var reg = /^\w{6,10}KaTeX parse error: Got function '\newline' with no arguments as superscript at position 1: \̲n̲e̲w̲l̲i̲n̲e̲/);
2.正则对象的相关方法
1)查找内容的方法：exec()
var str = “you can you up no can no bb”;
var reg =/no/g;
alert(reg.ecex(str)); //no
alert(reg.ecex(str)); //no
alert(reg.ecex(str)); //null
2)校验方法 test()
var str = “you can you up no can no bb”;
var reg = /^you/;
alert(reg.test(str));
3.字符串和正则对象的方法
1)查找内容：match();
var str = “you can you up no can no bb”;
var reg =/no/g;
var arr = str.match(reg);
2)替换：replace(reg,new)
var str = “you can you up no can no bb”;
var reg =/no/g;
str.replace(reg,“不”);

隐藏元素的两种方式

1.display:none
让元素隐藏，并脱离文档流
2.visibility:hidden/visible;
hidden隐藏（不脱离文档流）； visible显示

通过JS代码给元素添加样式

格式：d1.style.样式名 = 样式值;

文本框的失去焦点事件

onblur

事件取消

在事件属性中执行 return false;则会取消掉当前事件

DHTML

简介：Dynamic(动态) HTML = HTML+CSS+JS
对象分类：
1.JS语言内置对象，包括：number,string,boolaen,onject,array等
2.BOM：Browser Object Model(浏览器对象模型)，包含和浏览器相关的内容
3.DOM：Document Object Model(文档对象模型)，包含和页面相关的内容

BOM

window对象：该对象的属性和方法称为全局属性和全局方法，访问时可以省略window
window里面常见的方法：
1.window.alert(); 提示框
2.window.confirm(); 确认框
3.prompt(); 弹出文本框
4.isNaN(); 判断变量是否是数值
5.window.parseInt(); /parseFloat();转整数和转小数
window里面常见的属性：
1.history：历史
history.length(); 历史页面数量
history.back(); 返回上一页面
history.forword(); 前往下一页面
history.go(n); n正值前进，负值后退，0刷新
2.location：位置
location.href //获取和修改浏览器的访问地址
location.reload() //刷新地址
3.screen：屏幕
screen.width/height
screen.availWidth/availHeight
4.navigator：导航/帮助
navigator.userAgent //获得浏览器相关信息
window相关的事件：
1.窗口点击事件：window.onclick
2.页面加载完成事件：onload
3.获取焦点事件：onfocus
4.失去焦点事件：onblur

定时器

setInterval(方法,时间间隔);

通过标签名获取元素中的对象

var arr=document.getElementsByTagName(“img”);

停止定时器

var timer = setInterval(方法,时间间隔);
clearInterval(timer);

只执行一次的定时器

setTimeout(方法,时间间隔);

DMO

DOM文档对象类型

和页面相关的内容

查找页面元素的方式

1.通过id查找元素
var b =document.getElementById(“id”);
2.通过标签名查找元素
var arr = document.getElementsByTagName(“标签名”);
3.通过name查找元素
var arr = document.getElementsByName(“name属性值”);
4.通过class属性查找元素
var arr = document.getElementsByClassName(“class属性值”);
5.获取页面的body
document.body

创建元素对象

var i = document.createElement(“img”);
//设置图片路径
i,src="";

添加元素

格式：父元素.appendChild(子元素);

插入元素

格式：父元素.insertBefore(新元素,弟弟元素);

删除元素

格式：父元素.removeChild(被删除的元素);

获取和修改元素文本内容

格式：元素对象.innerText = “xxx”;

获取和修改元素HTML内容

格式：元素对象.innerHTML = “xxx”;

修改元素的样式

格式：元素对象.style.样式名= “值”;

事件

什么是事件：事件就是一些系统提供的特定时间点，事件分为鼠标事件，键盘事件和改变状态事件
1.鼠标事件：
onclick 点击事件
onmouseover 移入事件
onmouseout 移出事件
onmousedown 按下事件
onmouseup 抬起事件
onmouseover 移动事件
event.clientX/Y 获取鼠标位置
2.键盘事件：
onkeydown 按键按下事件
onkeyup 按键抬起事件
event.keyCode 获取按键字符编码
String.fromCharCode(event.keyCode);
3.状态改变事件：
onload 页面加载完成事件
onsubmit 表格提交
onfocus 获取焦点
onblur 失去焦点
onchange 值改变
onresize 窗口尺寸改变

事件对象event

事件对象中保存着和事件相关的信息
1.鼠标事件中可以获得鼠标的坐标
event.clientX/clientY
2.键盘事件中可以获得键盘的编码
event.keyCode;
String.fromCharCoad(keyCoad);
3.任何事件里面都可以获得事件源（事件源：指触发事件的标签）
var obj = event.target || event.srcElement;

事件的动态绑定

在标签的动态属性中添加事件称为非动态绑定，通过JS代码给元素添加事件称为动态绑定
格式：元素对象.事件名=function(){方法体};

事件的传递（事件冒泡）

如果一个范围有多个元素的事件需要触发，则事件的传递顺序是从最底层元素往上级元素传递
如果某一个范围内多个元素都需要添加事件，则只需要将事件添加在最上层