Web开发
1.Web前端：基础Html静态页面 css样式表 JavaScript动态的特效
基本的概念：URL: http://localhost:port/path/file
http这是一种无状态的连接协议
Web开发的基本结构：
C/S结构
B/S结构 Java的主要开发结构
[图片上传失败...(image-c1a172-1568650925008)]
前端的开发工具：HBuilder WebStorm VScode Sublim
文档 1.W3C 2. https://www.runoob.com
2.Html(超文本标记语言) 版本 html4 html5
3.CSS层叠样式表：负责页面的排版以及美化
· CSS 指层叠样式表 (Cascading Style Sheets)
· 样式定义如何显示 HTML 元素
· 样式通常存储在样式表中
· 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
· 外部样式表可以极大提高工作效率
· 外部样式表通常存储在 CSS 文件中
· 多个样式定义可层叠为一
[图片上传失败...(image-6ce4ba-1568650925007)]
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
总结：以上三种样式是有优先级的 内联样式>内部样式>外部样式。
内部样式表>外部样式表有一个前提：外部样式表一定要写在内部样式表的前面。总体来说：就近原则（离被设置元素越近优先级就越高）
CSS 类选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
类选择器：.选择器名称
Id选择器与类选择器的区别？
相同点：可以应用于任何html元素
不同点：
id选择器只能在文档中使用一次而类选择器可以使用多次
可以使用类选择器为一个元素同时设置多个样式，而id选择器是不可以的。
子元素选择器：使用（>）主要用于选择指定标签元素的第一代子元素
后代选择器：可以使用（空格）用于选择指定标签元素下的后代元素
总结：>作用于元素的第一代后代 空格：作用于元素的所有后代
通用选择器（*）：它的作用是匹配html中所有的标签元素
分组选择器：element,element
注意：
CSS是具有继承性的：它就是一种规则，它允许样式不仅应用于某个特定的html标签元素，而且也可以应用其后代
CSS是具有特殊性的，从例子中可以看到green生效了？为什么呢？浏览器会根据一个权值一判断使用哪一种样式。使用的是权值最高的样式。
权值的定义：标签的权值为1 类选择器的权值为10 ID选择器权值为100
P span 它的权值如何计算：1+1=2
P span .waring 它的权值是：12
CSS具有层叠性：当权值相同的时候，后面的样式会覆盖前面的样式
重要性 !important
元素的分类
Html中的标签分类：块级元素 内联元素（行内元素） 内联块级元素
常见的块级元素：<div> <p> <h1>…<h6> <ol> <ul> <table> <form>
常见的内联元素:<a> <span> <strong> <em>
常见的内联块元素：<img> <input>
块级元素<div> <p> <h1>…<h6> <ol> <ul> <table> <form>。块级元素的设置 display:block 作用：将元素显示为块级元素
块级元素的特点：
每个块级元素都会从新的一行开始（独占一行）
元素的高度 宽度 行高 顶边距以及底边距都是可以设置的
如果元素不设置宽度，它是本身父容器的100%（和父元素的一样）
行内元素（内联元素 inline）特点：
在同一行显示
元素的宽度以及高度是不可以设置的
元素的宽度就是它包含文字或图片的宽度，是不可变的
内联块（inline-block）:就是同时具备内联元素以及块级元素的特点
元素的特点：
和其它元素在同一行来显示的
元素的宽度以及高度是可以设置的
盒子模型
Margin外边距
Padding 内边距
Border 边框
盒子模型的宽度以及高度和平时理解的是不一样的，CSS内定义的宽度以及高度指的是填充以里的内容范围。
[图片上传失败...(image-a347c3-1568650925007)]
CSS的布局模型（3种）
流动模型(Flow)
流动模型它是网页默认的布局方式，块级元素，它会垂直分布，因为块级元素默认的宽度为100%，而内联元素在此模型下是从左到右水平分布的。
浮动模型(Float)
层模型（Layer）:它有三种类型 绝对定位 相对定位 固定定位
绝对定位：需要用到position:absolute表示绝对定位，它可以将元素从文档流是拖离出来，然后可以使用一些属性left right top bottom相对于其最近的一个具有定位的属性的父包含块进行绝对定位，如果不存在，它会相对于body元素（相对于浏览器的窗口）
相对定位：需要用到position:relative可以使用一些属性left right top bottom来确定元素在正常文档流中的偏移位置。偏移前的位置保留不动
[图片上传失败...(image-3e022f-1568650925007)]
[图片上传失败...(image-910ec8-1568650925007)]
NPM:包管理工具，通过这个命令可以在NPM服务上安装所有需要的前端框架
NPM如何安装：NodeJS <u>https://nodejs.org/en/</u>
安装之后到命令窗口输入Npm –version
Npm install 所要安装的框架
JavaScript
JS的作用
ECMAScript(标准、核心部分) ES3 ES5 ES6 ES7
JavaScript的组成部分
a) ECMAScript(标准、核心部分) 基本的语法
b) DOM(Document Object Model文档对象模型)
c) BOM(浏览对象模型)
- js可以写在什么地方
a) 可以写在head头里
b) 可以写在body的最后
c) 区别：如果写在头里面，当页面加载的时候首先会执行js,然后才会加载其它的内容，如果写在body里面：它会先加载页面的内容，然后再执行js脚本
5.js可以写入输出 对事件做出反应 改变html的内容
可以改变样式 可以对表单做验证
- ECMAScript中有5种简单数据类型：
Undefined、Null、Boolean、Number和String。还有一种复杂数据类型——Object。ECMAScript不支持任何创建自定义类型的机制，所有值都成为以上6中数据类型之一。
- 函数的声明
1.普通的函数声明
function box(num1, num2) {
return num1+ num2;
}
2.使用变量初始化函数
var box= function(num1, num2) {
return num1 + num2;
};
Js中除了自定义对象之外还提供了一些内置对象：String
Date Array
Array:在文档中提供了三个属性
|
|
返回对创建此对象的数组函数的引用。
|
|
|
设置或返回数组中元素的数目。
|
|
|
使您有能力向对象添加属性和方法。
|
函数的总结
1.当一个函数没有明确的返回值的时候，返回的值就是undefined
2.在使用return的时候，函数就会停止执行。并返回指定的值(具体的值/函数)。
3.return会返回唯一的一个值，那么也可以返回一个函数
<script type="text/javascript">
var box = function() {
var a = 1;
return function(){
alert(a++);
}
alert(a);
}
var newFunction = box();
alert(newFunction());
</script>
4.匿名函数
d) 如何定义
function(){
return “这是一个匿名函数”
}
- 函数的自执行
(function(){
alert("这是一个自执行函数");
})();
//如果有参数
(function(age){
alert(age);
})(10);
- 在JS中函数的参数也可以传递函数function
function box(sumFunction,num) {
return sumFunction(num);
}
var sum= function(num){
return num+10;
}
var result= box(sum,10);
alert(result);
BOM: 浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
浏览器对象模型包含的对象：
· Window: 所有浏览器都支持 window 对象。它代表浏览器的窗口。
· Screen
· History：对象包含浏览器历史。****history.back()****history.forward()
· Location: 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。
HTML DOM 树
[图片上传失败...(image-27b17c-1568650925005)]
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
· JavaScript 能够改变页面中的所有 HTML 元素
· JavaScript 能够改变页面中的所有 HTML 属性
· JavaScript 能够改变页面中的所有 CSS 样式
· JavaScript 能够对页面中的所有事件做出反应
Window对象的方法
|
|
按照指定的周期（以毫秒计）来调用函数或计算表达式。
|
|
|
在指定的毫秒数后调用函数或计算表达式。
|
|
|
显示带有一段消息和一个确认按钮的警告框。
|
|
|
显示带有一段消息以及确认按钮和取消按钮的对话框。
|
|
|
显示可提示用户输入的对话框。
|
注意:setInterval（code执行多次）与setTimeout（指定的毫秒后code执行一次）的区别
Location对象：href reload()
History对象：
|
|
加载 history 列表中的前一个 URL。
|
|
|
加载 history 列表中的下一个 URL。
|
|
|
加载 history 列表中的某个具体页面。
|
Window.document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
|
|
根据id来查询节点元素
|
|
|
返回带有指定名称的对象集合。
|
|
|
返回带有指定标签名的对象集合。
|
作业：
编写一个html页面，需要使用CSS来实现导航栏的效果
[图片上传失败...(image-66e73d-1568650925005)]
关于Html,css,js的基础
P ul ol hr br strong em form input a img
Span div table select option header nav
Section footer aside
表单的元素：text password button submit reset
Radio checkbox file hidden date textarea
CSS:
外部样式表：不需要<style>标签 使用link标签来调用外部样式表，有什么好处？可以使网站简洁，风格统一。
JS:
1.JS中的对象：自定义对象 内置对象Array
以下对象都属于BOM
History:go(-1) back()加载 history 列表中的前一个 URL。Forward()加载 history 列表中的下一个 URL。
Location:reload()方法 属性href
2.获取元素的三种方法：getElementById() getElementsByName() getElementsByTagName();
<script type="text/javascript">
function getValue() {
var x = document.getElementById("username").value;正确的
document.username.value;不正确的
document.form1.username.value;正确的
alert(x);
}
</script>
<form action="" method="post" name=”form1”>
<input type="text" id="username" />
<input type="button" value="ok" onclick="getValue()"/>
</form>
Html中每个标签都会对应一个DOM对象
- setInterval（code执行多次）与setTimeout（指定的毫秒后code执行一次）的区别
基本语法：setInterval(code,millisec[,"lang"])
setInterval(“show()”,50)在指定的周期内执行多次show()方法
setTimeout(“show()”,50)在50毫秒后调用一次show方法
- Form 对象中elements[]的用法
求表单元素的个数
var x = document.form1.elements.length;
var x = document.form1.length;
document.form1.elements****[0]获取到表单中指定的元素
5.如何向select中动态的添加option选项
selTerm.add(new Option(i),null);
如何清空下拉框中的选项
selCourse.options.length =0;
- 通过js可以动态改变样式
<div id="imageLayer" style="display: none;">dfadf</div>
<script type="text/javascript">
document.getElementById("imageLayer").style.display="block";
</script>
<a href="javascript:history.go(-1)">这是一个链接</a>
表单：<form action=****”****服务器端的资源****”**** method=****”****post****”**** id=****”****form1****”**** name=****”****form1****”****></form>
Post与get的区别
表单的元素：<input type=****””****>text password file hidden date email radio checkbox ****select
全局函数
E****val() isNaN() decodeURI()encodeURI()
var a = "3",b="4";
alert(a+"+"+b);
//如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。
alert(isNaN(a));//false
//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
alert(eval(a+"+"+b));
目录的结构：../ / ../../../
如何改变堆叠次序：z-index
面中的图像加入超链接后，默认情况下都带有一道黑框，如何去掉它呢？
border="0"
在CSS中下面哪种方法表示超链接文字在鼠标经过时，超链接文字无下划线
A:hover {TEXT-DECORATION: none}
CSS有三种选择符，分别是标签选择符，类选择符和ID选择器。
通过readonly属性可以设置文本框为只读。
JS中的基本数据类型****Number****String****Boolean****Null
Undefined
var a=“aaaa”; parseInt(a) NaN
** var a=“2aaa”，parseInt(a) 2**
** eval(“2+3”) 5**
在HTML5规范中，定义了<video>和<audio>标签，请写出标签作用
标签<video> 元素定义视频：<video width="1280" height="720" controls src="video.mp4">您的浏览器不支持 video 标签。</video>****标签<audio> 元素定义音频，比如音乐或其他音频流****<audio src=“audio.mp3“ controls>您的浏览器不支持 audio 标签。</audio>****属性：****autoplay 视频在就绪后马上播放。****controls 向用户显示控件，比如播放按钮。****height 设置视频播放器的高度。****loop 当媒介文件完成播放后再次开始播放。****src 要播放的视频的 URL。****width 设置视频播放器的宽度。
在CSS中，伪类及伪对象是什么，有什么特点
伪类及伪对象：由CSS自动支持，属CSS的一种扩展型类 名称不能被用户自定义 使用时只能按照标准格式进行应用
function fun(){
return 5;
}
var a=fun ;
var b=fun() ;
a与b有什么区别： 第一个是将函数赋值给a
第二个b的值为5，表示调用函数，这个函数的返回值为5
V****ue react react native ****foundation**** angularjs
N****odejs webpack glup
表格table中，如何实现跨行以及跨列 rowspan colspan
表单中常用的表单元素
I****nput:text input:password input:file input:hidden input:date input:email
I****nput:radio input:checkbox select option
I****nput:submit input:reset
<input type="text" name="" id="" required placeholder="" readonly disabled>
Readonly****:只读 ****disabled****：禁用
区别：****Readonly****只对text/password有效 而****disabled****对所有的元素都有效
后期表表单的数据会提交给服务器端，如果设置为****Readonly****，那么前台的数据可以传递到后台。
如果设置为****disabled****，前台的数据将无法传递给后台
F****orm表单中常用的属性有哪些:
<form 属性 id name class action method>表单元素</form>
D****iv与span有什么区别****?****div是块级元素而span是内联元素
Css中是如何表示块级元素以及内联元素的。
D****isplay:block display:inline
什么是盒子模型？有哪些常用的属性？margin padding border.
CSS中常用的布局有几种：流动布局 浮动 绝对定位
相对定位 固定定位
CSS中常用的选择器：id(#) class(.) 标签(p) 后代(空格) 子元素选择器(>) 分组选择器(p,ul) 通用选择器()*
Window对象中有哪些常用的方法
关闭窗口 获取焦点(失去) **** alert()警告框**** prompt()****提示框: 如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。confirm()确认框: 如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。** open();**
Window对象中有哪些子对象：<u>history</u> <u>location</u> <u>Screen</u>（浏览器对象模型BOM）
Document（DOM文档对象模型）
JS由哪几个部分组成：ECMAScript Bom Dom
|
|
解析一个字符串并返回一个浮点数。
|
|
|
解析一个字符串并返回一个整数。
|
|
|
计算 JavaScript 字符串，并把它作为脚本代码来执行。
|
|
|
检查某个值是否是数字。
|
setInterval（code执行多次）与setTimeout（指定的毫秒后code执行一次）的区别
JavaScript中的数据类型有几种
Undefined、Null、Boolean、Number和String。还有一种复杂数据类型——Object。ECMAScript不支持任何创建自定义类型的机制，所有值都成为以上6中数据类型之一。
JavaScript中获取节点元素的三种方法
表单验证：例如如何判断两次输入的密码是否一致
二级联动、select下拉列表
HTML：超文本标记语言 <p></p>
XML(可扩展标记语言):也可以存储数据
<student>
<id>100</id>
<name>tom</name>
<school>neusoft</school>
</student>
Json:js的对象表示方法，可以用来存储数据
Var person={
Name:tom,
Age:30
}
Servlet:服务器端的应用程序是使用Java语言编写的。
Servlet的作用：可以接收并处理客户端的请求，Servlet是运行在服务器上的java程序。
如何创建自己的Servlet?
Web项目的开发流程
[图片上传失败...(image-20f198-1568650925003)]
[图片上传失败...(image-8f78ec-1568650925003)]
Servlet中的资源跳转：1.请求转发（发送一次请求） 2.重定向(发送两次请求)
[图片上传失败...(image-3babc0-1568650925003)]
Jsp(Java Server Page):动态网页(与数据库交互)
Jsp它是MVC模型中的View(视图)：负责向用户的展现
Jsp就是Servlet,Tomcat容器(Servlet容器)会将Jsp编译成Servlet，最终才能执行。
Jsp文件特点：
<%@ page language="java" contentType="text/html; charset=utf-8"****pageEncoding="utf-8"%>
注意：Jsp中可以写什么东西
Java代码
H****tml
C****ss
J****s
Jquery
后期所有的html页面都要改写xxx.jsp
[图片上传失败...(image-6a35-1568650925003)]
问题是：servlet与jsp页面如何传递数据？
有以下四个作用域(数据共享)，可以将servlet中的list，保存到作用域中。
page表示当前页面有效
request表示发生一次请求的时候有效
session只要浏览器不关闭就一直有效
application只有服务器不关闭就是直有效
List<Object> list= service.queryInfo();
//要将查询后的结果List<Object>保存到request作用域中(将list保存到服务器中)
req.setAttribute("list", list);
客户端向服务端请求的时候，传递参数的方式有几种
1.超连接
<a href="/NeusoftManagerSystem/manager?id=<%=gb.getId() %>&q=delete" class="btn btn-danger">删除</a>
2.可以使用隐藏域向服务器端传递参数
<form>
<input type=”hidden” name=”q” value=”update”>
<input type=”hidden” name=”abc” value=”123”>
</form>
服务端(servlet)如何保存对象并在jsp页面中获取到对象
1.保存数据 req.setAttribute("list", list);
2.jsp页面如何获取 request.getAttribute("list");
注意所有用户发送的请求一定要通过servlet来处理请求
修改的操作流程
[图片上传失败...(image-902416-1568650925002)]
<c:set var="gb" value="${guestbook}"/>
${gb.id}
${gb.name}
使用jstl(标签库) el表达式来优化jsp页面
凡是以.tld结尾的文件都是标签文件
{对象名.属性名}
例如：
req.setAttribute("admin", admin);
{requestScope.admin.属性名}
req.setAttribute("username", admin.getUesrName());
{requestScope.username}
Session.setAttribute("admin", admin)
${sessionScope.admin.属性名}
可以对集合进行遍历操作
<c:forEach var="变量" items=”集合”>
Item <c:out value="${变量}"/><p>
</c:forEach>
[图片上传失败...(image-7f7696-1568650925002)]
