Web应用开发技术笔记
第一章
1.1 WEB技术概述
Web的三要素
展示资源：超文本技术(HTML)
资源地址：统一资源定位技术(URL)
获取资源：应用层协议(HTTP)
静态网页
可否用静态WEB技术开发一个电子商务网站？
答：不能，买卖需要有交互，网页需要实时更新，而静态网站的加载一次成型，无法做到和网页的交互与实时更新。
动态网页（Applet）
Applet存在的问题
不允许进行文件读写，无法进行数据库操作
属胖客户端，下载速度缓慢
发展限制，推广受阻：
Applet 需要浏览器给予支持，而且还要根据不同的版本安装不同版本的JVM
SUN和微软之间的版权矛盾，微软的IE浏览器在一段时间内不支持JVM
动态网页
这类网页文件不仅含有HTML标记，而且含有程序代码（在服务器端运行），这种网页的后缀一般根据不同的程序设计语言而不同，如ASP.NET文件的后缀为.aspx；JSP文件为.jsp。
两个显著特点：
可以动态产生页面
支持客户端和服务器端的交互功能
动态Web的发展
CGI(Common Gateway Interface，公共网关接口)
CGI技术允许服务端的应用程序根据客户端的请求，动态生成HTML页面，这使客户端和服务端的动态信息交换成为了可能。
CGI是一个标准，采用多进程的机制进行处理，每当一个新用户连接到服务器上时，服务器就为其分配一个新的进程 ，效率低。
1994年， PHP
Rasmus Lerdorf发明了专用于Web服务端编程的PHP(Personal Home Page Tools)语言。
1996年， ASP
Microsoft借鉴PHP的思想，推出ASP技术。借助Microsoft Visual Studio等开发工具在市场上的成功，ASP迅速成为了Windows系统下Web服务端的主流开发技术。
1997年，Servlet
Servlet SUN公司推出了Servlet技术，作为Java阵营的CGI解决方案。
1998年，JSP
允许在HTML页面中嵌入Java脚本代码，实现动态网页功能。
2000–，开发框架或应用模型
整合Web开发技术形成完整的开发框架或应用模型.net 和javaEE，来满足各种复杂的应用需求。
静态网页动态网页的比较
1.2 Web应用程序的工作原理
应用程序开发分为两种结构，C/S模式和B/S模式。
**C/S模式：**客户端/服务器模式，这类应用程序一般独立的运行。客户端需要安装专用的客户端软件。
**B/S模式：**浏览器/服务器模型，需要借助浏览器来运行。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。
C/S结构优缺点对比
B/S结构优缺点对比
优点：具有分布性特点，可以随时随地进行查询，浏览等业务处理；
业务扩展简单方便，通过增加网页即可增加服务器功能；
维护简单方便，只需要改变网页，即可实现所有用户的同步更新；
开发简单，共享性强。
缺点：在跨浏览器上B/S架构不尽如人意；
表现要达到C/S程序的程度要花费不少的精力；
在速度和安全性上需要花费巨大的设计成本，这是B/S架构的最大问题；
客户端服务端的交互是请求-响应模式，需要刷新页面；
Web应用程序的开发
Web应用程序包含: 前端的Web浏览器+支持HTTP协议的Web服务器+基于HTML格式的Web页(文档)
从技术层面看，Web架构的精华有三处：
用超文本技术(HTML) 实现信息与信息的连接(看得懂)；
用统一资源定位技术(URL) 实现全球信息的精确定位(可定位) ；
用新的应用层协议(HTTP) 实现分布式的信息共享(找得到) 。
小结：Web是一个抽象的(假想的)信息空间。作为Internet上的一种应用架构，Web的首要任务就是向人们提供信息和信息服务。
1.3 动态Web技术
当前主流的三大动态Web开发技术
JSP
ASP/ASP.NET
PHP
PHP
Hypertext Preprocessor，超级文本预处理语言
PHP的优势：
开放源代码，开源产品丰富
PHP应用开发速度快，周期短
开发成本低
后期维护费用低
ASP/ASP.NET
Active Server Pages，动态服务器页面
ASP只能建立在Windows的IIS Web服务器上
ASP.NET技术又称为ASP+
在ASP基础上发展起来，不仅仅更新界面并且修复了一些缺陷，在保留ASP的最大优点并全力使其扩大化的基础上开发出来的
JSP
Java Server Pages
JAVA EE系统中Web层技术，负责动态生成用户界面
1.4 JAVA Web开发的方式与体系结构
JSP的工作原理
JSP和客户端的交互是通过HTTP协议实现的，这个过程主要分为以下4个步骤：
客户端和服务器建立连接
客户端发送请求
服务器发出响应
关闭连接
.jsp->.java->.class->.html
JAVA开发Web程序几种方式
直接使用JSP （✖）
JSP+ JavaBean （课堂）
JSP+ JavaBean+Servlet （课堂）
JAVA EE开发模型
SSH=Struts+Spring+Hibernate开发框架
第二章
2.1 HTML
Hyper Text Markup Language 它不是一种真正的编程语言，只是一种标记符。通过约定的标签符号对文件的内容进行标注，浏览器会自动解释这些标签的含义，显示内容。
后缀：.html/.hml
html，css，javascript的关系
html=身体
css=衣服
JS=大脑（控制动作）
html文件的基本结构
头部和身体
html语言不区分大小写
被使用标签不可以交错
2.2 常用标签
文本相关标签
标题标签 <H1>…<H6> 字体由大到小
<H1> 在一个html文件内只能出现一次
段落标签：<p>段落内容\</p>
换行标签： <br>
图像标签
图片：<img src="URL" alt="图片出错提示" title="鼠标悬停提示信息" width="图片宽度" height="图片高度">
页面链接标签
<a href="目标文件链接" targer="self当前页面打开、blank新窗口打开" title="鼠标滑过显示的文本">链接显示的文本</a>
链接到目标文件有两种方式：相对路径和绝对路径
base：改变链接默认行为，一般在head里
表格标签
文字布局
有序列表：<OL>
无序列表：<UL>
内容分隔：<HR>标签用于在页面上绘制水平线
<HR size="线的厚度值" color="线的颜色" width="线宽">
2.3 表单标签
<FORM>
ACTION=“URL”：提交后由服务器上的那个处理程序处理
METHOD：指定GET或POST（安全性较高）方法
type:text（文本输入框）password（密码框）radio（单选按钮）checkbox（复选框）reset、button、submit（按钮）
2.4 HTML5
HTML5草案的前身名为Web Applications 1.0，是HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的标准、语义化、图像表达能力和交互效果。
HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等
新标签
canvas
video
audio
新属性
不再使用
font
center
frame
table.*
td.*
HTML5新特性和效果
语义化标签
这些元素，开发者可以更细致的描述文档结构，让文档更加易读，搜索引擎也能更好的理解页面中各部分间的关系，可以搜索到更快，更准确的信息。
媒体支持：Video和Audio
<video width="448" height="336" controls="controls">
<source src="Beyond《光辉岁月》.m4v" type='video/mp4'>
</video>
画布：canvas（需要和JS一起使用）
canvas 元素使用 JavaScript 在网页上绘制图像.画布是一个矩形区域，可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML5 优点
1、提高可用性和改进用户的友好体验；
2、新的标签，有助于开发人员定义重要的内容；
3、可以给站点带来更多的多媒体元素(视频和音频)；
4、当涉及到网站的抓取和索引的时候，对于搜索引 擎优化很友好；
5、被大量应用于移动应用程序和游戏；
6、可移植性好
客户端存储数据
HTML4的时代在浏览器端存储点网站个性化的数据，尤其是用户浏览器的痕迹，用户的相关数据等一般只能存储在Cookie中
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
新的表单输入类型和属性
email
url
number
range
date pickers
search
color
autocomplete
autofocus
form
form overrides
height 和 width
list
min, max 和 step
multiple
pattern
placeholder
required
第三章 CSS
3.1 CSS简介
层叠样式表单，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
CSS布局和Table布局
3.2 如何在网页中应用样式表
内嵌样式表
利用标签的style属性来指定各种CSS样式表属性。每一页的样式都独立 ，不能通过修改某个样式代码来完成整个网站中多个页面的样式 修改，甚至同一页面中的相同元素，也不能共用同一样的代码。
完全将表现和内容混合在一起
<h1 style="color:white;background-color:blue“>This is a line of Text.</h1>
内部样式表
利用style标签来包含本页面所需样式定义 。即在对象的标记内，使用对象的style属性定义适用其的样式表属性。在HTML文档的<HTML>和<BODY>标记之间插入一个块对象。如：<STYLE>...</STYLE>
<style type="text/css">
body {
color: red;
background: green;
margin: 0;
padding: 0;
} h1 {
font: 15pt/17pt "Arial";
font-weight: bold;
color: maroon}
</style>
外部样式表
链入外部样式表文件 (Linking to a Style Sheet)，可以先建立外部样式表文件（.css）。
链接式
<link rel="stylesheet" type="text/css" href="mystyle.css" />
导入式
<style type="text/css">
@import "mystyle.css";
</style>
3.3 CSS语法
CSS的定义是由三个部分构成:
选择器(selector)
属性(properties)：没有先后次序的要求
属性的取值(value)
selector {property1: value; property2: value;}
可选的值
选择器
基本选择器
多元素的组合选择器
子元素选择器：F必须是E的子元素
后代元素选择器：E后所有的后代
属性选择器
伪类
用来添加一些选择器的特殊效果
正常的类是以点开始，后边跟一个名称
在选择器后边跟个冒号，再跟个状态限定字符；
例如：设置鼠标移上时改变颜色或下划线等属性来告知用户这个是可以点击的，设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
CSS 2.1中的伪类
CSS 3 属性选择器
CSS 3中与用户界面有关的伪类
CSS 3中的结构性伪类
class 和id 的区别
W3C对于id与class的设定原则：
id 具有唯一性
class 具有普遍性
使用原则也是依据这一特性建立。id是不能重复，所以在 XHTML的结构中，大结构一定是用id。比如标志、导航、主体内容、版权。个性制定的规范命名为#logo , #nav , #content , #copyright
3.4 CSS布局与定位
在使用CSS排版的页面中，<div>与<span>是两个常用标记。利用这两个标记，加上CSS对其样式的控制，可以很方便的实现各种效果。
<div>（divsion）简单而言是一个区块容器标记，即<div></div>之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。
因此，可以把<div></div>中的内容视为一个独立的对象，用于CSS的控制。声明时只需要对<div>进行相应的控制，其中的各标记元素都会因此而改变。
用div盒模型结构给各部分内容划分到不同的区块，然后用css来定义盒模型的位置、大小、边框、内外边距、排列方式等
div 用于搭建网站结构（框架）、css 用于创建网站表现（样式/美化），实质即使用XHTML对网站进行标准化重构，使用CSS将表现与内容分离，便于网站维护，简化html页面代码，可以获得一个较优秀的网站结构便于日后维护、协同工作和搜索引擎蜘蛛抓取。
盒属性
所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间，一个页面由很多这样的盒子组成，这些盒子之间会互相影响。
一、单个盒子的内部结构
二、多个盒子之间的相互关系
行内元素和块元素
行内元素（inline element）
特点是只占内容的宽度，默认不会换行，行内元素一般放文本或者其它的行内元素。常见内联元素<span>,<a>
块元素(block element)
特点不管内容有多少，它要换行，同时沾满整行，块元素可以放文本，行内元素，块元素。常见块元素：<div>,<p>。
区别：
行内元素只占内容的宽度，块元素内容不管内容多少要占全行。
行内元素只能容纳文本和其它行内元素，块元素可以容纳文本，行内元素和块元素。（与浏览器类版本和类型有关）
CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许对元素进行定位
定位的基本思想：它允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
定位机制
普通流
块级框从上到下一个接一个地排列（不设宽度时，独占一行），框之间的垂直距离是由框的垂直外边距计算出来，行内元素会按顺序依次前后排列。
浮动(Float属性)
float：设置元素浮动到页面的边缘。取值如下：
none：缺省值，不浮动
left：元素在页面左边缘浮动,让出自己右边空间，给下一个元素显示；
right：元素在页面右边缘浮动,直到碰到他的父元素的右边界。
浮动目的：就是可以让多个块级元素一行内显示，从而实现布局效果。
浮动种类：左浮动和右浮动。
定位(position 属性)
通过使用 position 属性，可以选择 4 种不同类型的定位
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative(标准流内)
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute(标准流外)
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
多重样式表叠加
如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。
注意：依照后定义的优先的原则，优先顺序如下：
内嵌>内部>导入式
内部与链接式发生冲突时，哪个后定义更接近标签，哪个优先级高
3.5 响应式 Web 设计
为不同终端提供相应的兼容版本。
页面的设计与开发应当根据设备环境（屏幕尺寸、屏幕定向、系统平台等）以及用户行为（改变窗口大小等）进行相应的响应和调整。
响应式Web设计的优势
开发、维护、运营成本优势：页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。
兼容性优势：移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。
操作灵活：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。
RWD 核心方法
响应式布局
布局：固定布局，流动布局，弹性布局，表格布局，混合布局等。
单位：px，em，百分比，rem等。
body{font-size:100%;}
最佳方案：流动布局为最佳选择，百分比和em为最佳单位。
媒介查询（利用特定的属性值来决定使用什么样的样式。）
属性值：设备分辨率，色彩深度，高度，宽度，横屏或竖屏等。
1、为站点设定视口
2、使用媒介查询
3、媒介查询的顺序
轻量级CSS框架
Bootstrap:专为前端开发而设计，有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。//cs.cumt.edu.cn
Layui:采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。//lib.cumt.edu
Spectre:现代的、自由的、响应迅速的CSS框架。它提供了优雅的元素、基于flexbox的响应式布局系统以及CSS组件和实用程序，可以使用Sass和Scss编译器进行修改。它非常轻量级，并且支持大多数现代浏览器。
jQuery UI:建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题//cumt.edu.cn