Java-web前端总结

src: 资源路径

相对路径: 访问站内资源时使用

页面和图片在同级目录: 直接写图片名

图片在页面的上级目录: ../图片名

图片在页面的下级目录: 文件夹名/图片名

绝对路径: 访问站外资源路径时使用,又称为图片盗链, 存在找不到图片的风险

alt: 图片不能正常显示时显示的文本

title: 鼠标在图片上停止移动时显示的文本

width/height: 设置图片的宽高, 两种赋值方式:1. 像素 2.上级元素百分比 , 如果只设置宽度高度会自动等比例缩放.

超链接

href属性, 作用和图片标签的src属性类似,用于配置资源路径

a标签包裹文本为文本超链接包裹图片为图片超链接

表格table

相关标签: table表格, tr行, td列, th表头,caption表格标题

相关属性: border边框, colspan 跨列, rowspan 跨行

表单form

作用: 用于获取用户输入的各种信息,并且把信息提交给服务器

学习form表单就是学习有哪些控件

分区标签

作用: 将多个有相关性的标签进行统一管理, 可以理解为一个容器.

常见的分区标签

                div: 块级分区标签,特点: 独占一行

                span: 行内分区标签, 特点: 共占一行

如何对页面进行分区: 一般一个页面至少分为3大区(头,体,脚),每个大区里面划分n个小的区域

HTML5标准中新增的分区标签: 作用和div一样, 但是提高了代码的可读性

                header 头

                main 主要/主体

                footer 脚

                nav 导航

                section 区域

二、CSS

Cascading Style Sheet:层叠样式表, 作用: 负责美化页面, 如果html是盖房子,CSS相当于是装修

如何在html 页面中添加CSS样式代码

三种引入方式:

内联样式: 在标签的style属性中添加样式代码,弊端:不能复用

内部样式: 在head标签里面添加style标签,标签体内写样式代码, 可以复用但是只能当前页面复用.

外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以多页面复用.

工作中外部样式使用的更多因为可以实现多页面复用,而且可以将html代码和css样式代码分离开便于维护和管理, 但是学习过程中为了便于演示效果内部样式用的更多

选择器

标签名选择器: 匹配到页面中所有同名标签

        格式: 标签名{样式代码}

id选择器: 当需要选择页面中某一个元素时,给元素添加id,然后通过id选择器选择到元素

        格式: #id{样式代码}

类选择器: 如果需要选择多个不相关的元素时, 给多个元素添加相同的class属性, 然后通过类选择器进行选择

        格式: .class{样式代码}

分组选择器: 可以将多个选择器合并成一个选择器

        格式: 标签名,#id,.class{样式代码}

属性选择器: 通过元素的属性选择元素

        格式: 标签名[属性名='值']{样式代码}

任意元素选择器: 匹配页面中所有的元素

        格式: *{样式代码}

子孙后代选择器: 通过元素和元素之间的关系选择元素, 选择范围更广包含了后代元素

        格式: body div p{样式代码} 匹配body里面的div里面的所有p(包含后代)

子元素选择器: 通过元素和元素之间的关系选择元素,选择范围更精准

        格式: body>div>p{样式代码} 匹配body里面的div里面的p子元素

伪类选择器:匹配元素的状态, 超链接包括(link未访问状态,visited访问过状态,hover悬停状态,active点击/激活状态), p包括(悬停状态,点击状态)

        格式: a:link/visited/hover/active{样式代码}

选择器练习题:

通过内部样式实现以下效果

把张学友改成绿色

把刘德华和悟空改成蓝色

修改取经2人和刘备的背景为黄色

修改密码框的背景为红色

给所有元素添加红色的边框

练习代码1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1{color: green}
        .c1{color: blue}
        h1,h2{background-color: yellow}
        input[type='password']{background-color: red}
        *{border: 1px solid red}
    </style>
</head>
<body>
<p id="p1">张学友</p><p class="c1">刘德华</p><p>郭富城</p>
<h1 class="c1">悟空</h1>
<h1>八戒</h1>
<h2>刘备</h2>
<input type="text">
<input type="password">
</body>
</html>

选择器练习2: 通过内部样式实现以下效果

关羽绿色
张飞和苹果黄色
文本框和所有水果背景红色
p2字体粉色
p2和p3背景黄色
百度官网未访问绿色,访问过红色悬停黄色,点击粉色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #l-1{color: green}
    .c1{color: yellow}
    input[type='text'],body>p{background-color: red}
    body>div>div>p{color: pink}
    body div div p{background-color: yellow}
    a:link{color: green}
    a:visited{color: red}
    a:hover{color: yellow}
    a:active{color: pink}
  </style>
</head>
<body>
<ul>
  <li>刘备</li><li id="l-1">关羽</li><li class="c1">张飞</li>
</ul>
<p>香蕉</p><p class="c1">苹果</p>
<input type="text">
<input type="password">
<div>
  <p>p1</p>
  <div><p>p2</p></div>
  <div><div><p>p3</p></div></div>
</div>
<a href="http://www.baidu.com">百度官网</a>
</body>
</html>

颜色赋值

三原色:红绿蓝 , Red Green Blue RGB ,每个颜色的取值范围0-255

颜色赋值方式:

颜色单词赋值: red/blue/yellow/pink......

6位16进制赋值: #ff0000

3位16进制赋值: #f00 #000黑色 #fff白色

3位10进制赋值: rgb(255,0,0)

4位10进制赋值: rgba(255,0,0,0-1) a=alpha透明度值越小越透明

背景图片

background-image:url("路径"); 设置背景图片

background-size:100px 200px; 设置背景图片的尺寸宽度和高度

background-repeat:no-repeat; 禁止重复

background-position: 横向纵向; 设置背景图片的位置 , 两种赋值方式:1. 偏移值 2. 百分比

文本和字体相关样式

text-align:left/right/center; 文本水平对齐方式

text-decoration:overline上划线/underline下划线/line-through删除线/none去掉自带的线;

line-height:20px; 设置行高, 多行文本可以控制行间距, 单行文本可以控制垂直居中

text-shadow: 颜色 x偏移值 y偏移值浓度; 设置阴影

font-size:20px; 设置字体大小

font-weight: bold加粗/normal去掉加粗

font-style:italic; 斜体

font-family:xxx,xxx,xxx; 设置字体

font: 20px xxx,xxx,xxx; 设置字体和字体大小

练习3

1. 刘德华宽度100 高度30 绿色背景红色字体横向和纵向居中

2. 苹果和香蕉字体大小25px 斜体

3. 冰箱去掉加粗蓝色阴影方向是左下浓度3

4. 洗衣机添加下划线

5. 百度去掉下划线字体加粗字体大小20px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 100px;
      height: 30px;
      background-color: green;
      color: red;
      text-align: center;
      line-height: 30px;
    }
    span{
      font-size: 25px;
      font-style: italic;
    }
    #bx{
      font-weight: normal;
      text-shadow: blue -10px 10px 3px;
    }
    #xyj{
      text-decoration: underline;
    }
    a{
      text-decoration: none;
      font-weight: bold;
      font-size: 20px;
    }
  </style>
</head>
<body>
<div id="d1">刘德华</div>
<div>张学友</div>
<span>香蕉</span>
<span>苹果</span>
<h1 id="bx">冰箱</h1>
<h1 id="xyj">洗衣机</h1>
<a href="http://www.baidu.com">百度</a>

</body>
</html>

元素的显示方式display

block: 块级元素, 特点: 独占一行可以修改元素的宽高, 包含:h1-h6,p,div

inline: 行内元素,特点: 共占一行不可以修改元素的宽高,包含:span,b,i,s,u,a

inline-block:行内块元素, 特点: 共占一行并且可以修改元素的宽高,包含:img图片,input

none: 隐藏元素

盒子模型

盒子模型由四部分样式组成,包括:content内容,margin外边距,border边框,padding内边距

通过盒子模型的相关样式控制元素的显示效果

content内容: 控制元素的显示尺寸

相关样式: width和height

赋值方式:

像素

上级元素百分比

行内元素不能修改元素的宽高

margin外边距: 控制元素的显示位置

外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距

赋值方式:

margin-left/right/top/bottom:10px; 单独某一个方向赋值

margin:50px; 四个方向赋值

margin:10px 20px; 上下10 左右20

margin:10px 20px 30px 40px; 上右下左顺时针赋值

上下相邻彼此添加外边距取最大值

左右相邻彼此添加外边距两者相加

行内元素上下外边距无效

粘连问题: 当元素的上边缘和上级元素的上边缘重叠时, 给元素添加上外边距会出现粘连问题, 给上级元素添加overflow:hidden解决

border边框: 控制元素的边框效果

赋值方式:

单独某一个方向添加边框: border-left/right/top/bottom:粗细样式颜色;

四个方向添加边框: border:粗细样式颜色

圆角: border-radius 值越大越圆 ,超过宽高一半时为正圆

padding内边距: 控制元素内容的位置

内边距: 元素内容距元素边缘的距离称为内边距

给元素添加内边距会影响元素的宽高

赋值方式: (类似外边距)

padding-left/right/top/bottom:10px; 单独某一个方向赋值

padding:50px; 四个方向赋值

padding:10px 20px; 上下10 左右20

padding:10px 20px 30px 40px; 上右下左顺时针赋值

CSS三大特性

继承: 指元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响,比如超链接的字体颜色

层叠: 多个选择器可以选择到同一个元素, 如果作用的样式不同,层叠性指的是可以将多个不同的样式层叠到一起显示, 如果作用的样式相同则由优先级决定哪个生效.

优先级: 指选择器的优先级, 作用范围越小优先级会越高,

!important>id选择器>class选择器>标签名选择器>继承(间接选中)

居中相关内容

如果元素是块级元素,让元素自身居中使用margin:0 auto,如果让元素内容居中则使用text-align:center

如果元素是行内块元素, 让元素自身居中需要给上级添加text-align:center , 内容居中也是text-align:center;

如果元素是行内元素,让元素自身居中需要给上级添加text-align:center ,内容居中(不存在)

定位方式

共五种定位方式:

静态定位

默认的定位方式,也叫作文档流定位

格式: position:static

特点: 元素以左上为基准 , 块级元素从上往下依次排列, 行内元素从左向右依次排列

通过外边距控制元素的位置

无法实现元素层叠显示

相对定位

格式: position: relative;

特点: 元素不脱离文档流(不管元素显示到什么位置都占着原来的位置)

通过left/right/top/bottom相对于元素的初始位置做偏移

相对定位可以实现元素层叠效果

应用场景: 当需要移动某一个元素,而且其它元素不受影响时

绝对定位

格式: position:absolute;

特点: 元素脱离文档流(不占原来的位置,后面的元素会顶上来)

通过left/right/top/bttom相对于窗口或某一个上级元素做位置偏移

应用场景:需要层叠显示并且元素不需要占原来的位置

固定定位

格式: position:fixed;

特点: 元素脱离文档流, 元素固定在窗口的某个位置不随内容位置的移动而移动.

通过left/right/top/bottom相对于窗口做位置偏移

浮动定位

格式: float:left/right;

特点: 元素脱离文档流,从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止

一行装不下时会自动折行,折行时有可能被卡主

如果某个元素的所有子元素全部浮动,则自动识别的高度为0, 后面的元素会顶上来(如果被盖的内容有文字,文字会被挤出来) 最终可能导致显示异常, 给元素添加overflow:hidden可以解决此问题

相对定位和绝对定位区别:

相对定位不脱离文档流(占位置) 绝对定位脱离文档流不占位置
相对定位参照物是原来位置, 绝对定位参照物是窗口(默认)或某一个上级元素

position定位回顾:

静态定位: static(默认) 无法层叠显示, 元素以左上为基准, 通过外边距

相对定位: relative 不脱离文档流, 通过left/right/top/bottom相对于初始位置做偏移

绝对定位: absolute 脱离文档流,通过left/right/top/bottom相对窗口或某一个上级元素

固定定位: fixed 脱离文档流, 通过left/right/top/bottom相对窗口做位置偏移

溢出设置overflow

visible超出部分显示(默认值)

hidden超出部分隐藏

scroll超出部分滚动显示

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

top上对齐

middel中间对齐

bottom下对齐

baseline基线对齐

显示层级 z-index

当元素层叠显示时,需要控制元素的显示层级

z-index的值越大显示越靠前.

三、JavaScript

作用: 负责给页面添加动态效果.

语言特点:

属于脚本语言, 不需要编译直接由浏览器解析执行

基于面向对象

属于弱类型语言

安全性强: JavaScript语言只能访问浏览器内部的数据,浏览器以外的数据禁止访问

交互性强: 因为JS语言是嵌入到html页面中最终执行在客户端电脑上的语言和用户近距离接触, Java语言每次交互都需要通过网络请求到服务器后再执行.

变量,数据类型,运算符,各种语句,方法,面向对象

如何在html页面中添加JavaScript代码

三种引入方式:

内联: 在标签的事件属性中添加JS代码,当事件触发时执行.

事件: 系统给提供的一些特定的时间点

点击事件: 当点击元素时触发的时间点称为点击事件.

内部: 在html页面中的任意位置添加script标签,在标签体内写JS代码

外部: 在单独的js文件中写js代码, 然后在html页面中通过script标签的src属性引入到页面中

变量

JS属于弱类型语言

java强类型: int age = 18; String name="张三"; name=20;报错

JS弱类型: let age=18; let name="张三"; name=20; 不报错

JS中通过let或var关键字声明变量

let声明的变量作用域类似Java语言中的作用域

案列：

for(let i=0;i<10;i++){

let j=i+1;

}

let x = j+i; //不报错 但是访问不到j和i两个变量

var声明的变量作用域相当于是全局变量
for(var i=0;i<10;i++){

var j=i+1;

}

var x = j+i; //不报错,而且可以访问到j和i的值

数据类型

JavaScript语言只有对象类型.

常见的对象类型:

string: 表示字符串, 可以通过单引号或双引号修饰 'abc' "abc"

number:相当于Java中所有数值类型的总和

boolean: 布尔值 true/false

undefined: 未定义 , 当变量只声明不赋值时,对象的类型为未定义类型

typeof 变量; 获取变量的类型

运算符

算数运算符: + - * / %

除法运算会自动根据结果转换整数或小数

java: int x=5; int y=2; x/y = 2;

JS : let x=5; let y=2; x/y=2.5; x=6 x/y=3;

关系运算符: > < >= <= != ==和===

==和===区别: ==先统一两个变量的类型再比较值, ===先比较类型,如果类型相同之后再比较值 eg:"666"==666 true "666"===666 false

逻辑运算符: && , ||, !

赋值运算符: = += -= *= /= %=

三目运算符: 条件?值1:值2

各种语句

if else

while / do while

for

switch case

方法

java: public 返回值类型方法名(参数列表){方法体}

JS: function 方法名(参数列表){方法体}

三种声明方法的方式:

function 方法名(参数列表){方法体}

let 方法名 = function(参数列表){方法体}

let 方法名 = new Function("参数1","参数2","方法体");

和页面相关的方法

通过选择器选择页面中的元素对象
let 元素对象 = document.querySelector("选择器");
获取或修改元素的文本内容 <标签名>文本内容</标签名>
元素对象.innerText; //获取
元素对象.innerText = "xxxx"; //修改
获取或修改控件的值
元素对象.value; //获取
元素对象.value = "xxxx"; //修改

NaN

Not a Number: 不是一个数字

isNaN(变量), 判断变量是否是NaN true代表是NaN false代表不是NaN

JavaScript代码排错思路

如果页面没有运行出效果第一时间F12查看控制台的报错, 根据控制台提示的信息找到错误的位置

JavaScript对象分类

内置对象: 包括number,string,boolean等

BOM: Browser Object Model, 浏览器对象模型, 包含和浏览器相关的内容

DOM:Document Object Model ,文档对象模型, 包含和页面相关内容

BOM浏览器对象模型

window对象, 该对象中的属性和方法称为全局属性和全局方法, 访问时可以省略掉window.

window中的常用方法:

isNaN() 判断变量是否是NaN

alert("xxxx") 弹出提示框

confirm("xxx") 弹出确认框

prompt("xxx") 弹出文本框

parseInt() 将字符串或小数转成整数

parseFloat() 将字符串转成整数或小数
let timer = setInterval(方法,时间间隔) 开启定时器
clearInterval(timer) 停止定时器
setTimeout(方法,时间间隔) 开启执行一次的定时器

window对象中常用的属性

location:位置

location.href; 获取或修改浏览器的请求地址

location.reload(); 刷新

history:历史

history.length; 得到历史页面数量

history.back() 返回上一页面

history.forward() 前往下一页面

DOM文档对象模型

包含和页面相关内容

通过选择器选择页面中的元素对象
let 元素对象 = document.querySelector("选择器");
获取或修改元素的文本内容 <标签名>文本内容</标签名>
元素对象.innerText; //获取
元素对象.innerText = "xxxx"; //修改获取或修改控件的值
元素对象.value; //获取
元素对象.value = "xxxx"; //修改
创建元素对象
let 变量 = document.createElement("标签名");
把元素对象添加到某个元素里面
父元素.append(新元素);
获取body元素对象的方式
document.body

前端MVC设计模式

MVC设计模式就是将实现一个前端业务的代码划分了三部分.

M: Model 模型, 指数据模型前端的数据一般都来自于服务器

V: View 视图, 指页面相关代码

C: Controller 控制器, 指将数据展示到页面中的过程代码

前端MVC设计模式存在的弊端: 在Controller控制器部分的代码需要频繁的进行DOM操作(遍历查找页面元素的过程), 会导致执行效率降低, MVVM设计模式可以解决此问题.

前端MVVM设计模式

M: Model 模型, 指数据模型前端的数据一般都来自于服务器

V: View 视图, 指页面相关代码

VM: ViewModel 视图模型, 负责将页面中可能发生改变的元素和数据进行绑定,并且会一直监听数据的改变,当数据发生改变时从内存中找到和数据对应的元素然后再进行改动,避免了频繁DOM操作带来的资源浪费,从而提高了执行效率

四、VUE

目前最流行的前端框架, 此框架基于MVVM设计模式.

在第三阶段所涉及到的VUE是通过在html页面中引入vue.js的方式去使用此框架, 第四个阶段会接触脚手架方式

在html页面中引入vue.js文件, 此文件可以通过CDN服务器引入到自己的页面中, 也可以将CDN服务器的js文件下载到本地再引入

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

VUE对象的工作原理, VUE对象相当于是MVVM设计模式中的VM(视图模型), 负责将可能发生改变的页面元素和数据变量在内存中进行绑定, 并且不断监视这数据变量的改变,当值发生改变的时候会从内存中找到对应的页面元素,并将其改变.

VUE相关指令

{{变量}}: 插值, 让此处的文本内容和变量进行绑定
v-text: 让某个元素的文本内容和变量进行绑定
v-html: 让某个元素的文本或标签内容和变量进行绑定
v-bind:属性名=变量, 让元素的某个属性的值和变量进行绑定 , v-bind可以省略
v-model=变量, 双向绑定: 变量会影响页面, 页面也会影响变量
v-on:事件名="方法", 事件绑定, 事件触发的方法需要写在methods里面, 简写: @事件名="方法"
v-for="变量 in 数组"; 循环遍历, 遍历的过程中会生成当前元素以及子元素.

以上内容参考代码：https://gitee.com/lsw0901_0/web-java.git