Web开发技术复习整理
[toc]
Web前端
src和href的区别
href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。
当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。 当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。HTML 5 <!DOCTYPE> 标签
声明必须位于 HTML5 文档中的第一行，也就是位于 标签之前。该标签告知浏览器文档所使用的 HTML 规范。doctype 声明不属于 HTML 标签；tag; 它是一条指令，告诉浏览器编写页面所用的标记的版本。
在所有 HTML 文档中规定 doctype 是非常重要的，这样浏览器就能了解预期的文档类型。
注释：<!DOCTYPE> 标签没有结束标签！
提示：<!DOCTYPE> 对大小写不敏感。
粗体
产生粗体字的HTML标签为
html实体符号编码解析
1 | ! ! ! |
书签
在HTML中定义一个书签应该使用
1 | <a href="#C4">Jump to Chapter 4</a> |
html创建电子邮件链接
1 | <a href="mailto:xxx@yyy> |
网页中一般使用的图片格式
常用的图片格式有JPG、GIF、PNG。
1 | 一、JPEG |
用于播放html5视频文件的标签
1 | <video> |
＜audio＞标签支持的音频格式
wav, mp3, ogg, acc, webm
CSS三种样式表及其使用（内部样式表，行内样式表，外部样式表）
1 | 内部样式表是将CSS代码写在HTML文档的head标签中，并且用style标签定义 |
1 | 内部样式表是将CSS代码写在HTML文档的head标签中，并且用style标签定义 |
1 | 外部样式表（外链式） |
零碎知识点
Web客户端在Internet上被称为浏览器，它一种用来浏览Web页面的软件
主页( Home Page)就是网站默认的首页。主页默认的文件名通常为 index.html或default.html
css指的是Cascading Style Sheets
结构与样式分离依赖于css
使用内部样式表示方法定义样式应该使用的标签是style
在html文档中，应用外部样式表的正确位置是
部分链接到外部样式表使用的标签是link
当编写css时，不同属性应使用；分隔
1 | p { |
位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束：
在css中设置文本属性text-indent 主要设置的是首行缩进
1 | 将段落的第一行缩进 50 像素： |
字体粗细：font-weight
overflow:hidden 容器里的内容超出容器部分隐藏
1 | 文本阴影 text-shadow(参数1，参数2，参数3) |
设置超级链接没有下划线
a{
text-decoration:none
}
CSS尺寸设置的单位
1 | px：pixel像素的缩写，绝对长度单位，它的大小取决于屏幕的分辨率，是开发网页中常常使用的单位。 |
行内元素和块级元素
1、行内元素：a img span b strong input select section
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
2、块级元素：div p table ul lo li h1-h6 dl dt
3、空元素：br hr img input link meta
区别：
1、块级元素会独占一行 默认的宽度占满父级元素，行内元素不会换行
2、行内元素的width height 无效
3、块级元素可以设置margin和padding属性，行内元素padding-left、padding-right，margin-left，margin-right（水平方向），有边距效果，padding-top，padding-bottom，margin-top，margin-bototm，（垂直方向）没有边距效果，
本质（浏览器将块级元素的dispaly属性默认为block，行内元素属性默认为inline，因此行内元素与块级元素的切换可以通过修改display属性实现）
在页面上引用脚本文件js.js
jQuery
方法get()的作用使用 http get 请求从服务器接口加载数据
fadeIn()方法可以逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）
1 | 以下P标签经过Jquery以下操作后的标签将变成 |
1 | 使用Jquery给按钮添加点击事件的代码正确的是 |
javaScript
javaScript是运行在客户端的脚本语言。
在JavaScript中，把字符串"123"转换为整型值123的正确方法是
1 | var str="123"; |
1 | 在JavasScript中，若要实现复选框全选功能，则在横线处填写的代码应为document.getElementsByName("chk"); |
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。(比如input)
1 | javascript获取div中的文本信息document.getElementById("one").innerHTML; |
1 | $(document).ready(function(){ |
JavaScript是支持对象的编程语言
JavaScript 关键字
| break case catch continue default delete do else finally void while with |
for function if in instanceofnew return switch this throw try typeof var |
|---|---|
XML
XML（Extensible Markup Language），可扩展标记语言。是一种用于标记电子文件使其具有结构性的标记语言。
XML特点
1 | 1）XML可以从HTML中分离数据。即能够在HTML文件之外将数据存储在XML文档中，这样可以使开发者集中精力使用HTML做好数据的显示和布局，并确保数据改动时不会导致HTML文件也需要改动，从而方便维护页面。XML也能够将数据以“数据岛”的形式存储在HTML页面中，开发者依然可以把精力集中到使用HTML格式化和显示数据上。 |
XML使用一个简单而又灵活的标准格式，为基于Web的应用提供了一个描述数据和交换数据的有效手段。但是，XML并非是用来取代HTML的。HTML着重如何描述将文件显示在浏览器中，而XML与SGML相近，它着重描述如何将数据以结构化方式表示。
XML与HTML的区别：
- 可扩展性方面：HTML不允许用户自行定义他们自己的标识或属性，而在XML中，用户能够根据需要自行定义新的标识及属性名，以便更好地从语义上修饰数据。
- 结构性方面：HTML不支持深层的结构描述，XML的文件结构嵌套可以复杂到任意程度，能表示面向对象的等级层次。
- 可校验性方面：HTML没有提供规范文件以支持应用软件对HTML文件进行结构校验，而XML文件可以包括一个语法描述，使应用程序可以对此文件进行结构校验。
XML对数据进行描述的方式 XML使用DTD来描述数据
定义XML版本的声明中语法正确的是
DTD指的是Document Type Definition
XML标签对大小写敏感
XML文档必须有根标签
XML元素必须被正确地嵌套
XSL指的是eXtensible Stylesheet Language
XML语法格式
- 必须有声明语句
version：版本号，推荐使用主流版本1.0，1.1版本不向下兼容。
encoding：编码方式，告知解析引擎当前文档使用的字符集。·
standalone：是否独立，yes和no两个值，是否依赖其他文件。 - 注意大小写。在XML文档中，大小写是有区别的。注意在写元素时，前后标记的大小写要保持一致。最好养成一种习惯，或者全部大写，或者全部小写，或者大写第一个字母，这样可以减少因为大小写不匹配而产生的文档错误
- XML文档有且只有一个根元素。
- 属性值使用引号。在HTML代码里面，属性值可以加引号，也可以不加。但是XML规定，所有属性值必须加引号（可以是单引号，也可以是双引号，建议使用双引号），否则将被视为错误。
- 所有的标记必须有相应的结束标记。
- 所有的空标记也必须被关闭。
XML 元素必须遵循以下命名规则：
（1）名称可以含字母、数字以及其他的字符。
（2）名称不能以数字或者标点符号开始。
（3）名称不能以字符 “xml”（或者 XML、Xml）开始。
（4）名称不能包含空格。
1 |
|
XML约束
在XML技术里，可以编写一个文档来约束一个XML文档的书写规范（与xml语法无关），这称之为XML约束。目的是为了保证数据的规范性和安全性。
两种约束
（1）DTD约束：语法简洁，共能比较单一。文件后缀名.xml
（2）Schema约束：语法复杂，功能比较强大。文件后缀名.xsd
1 | <!-- ELEMENT定义标签 --> |
1 | ## css中的display属性有哪些值？各有什么作用？ |
WebPPT知识
第一章 Web开发技术概述
服务器
邮件服务器（收发电子邮件）、FTP服务器（文件传输）、域名服务器DNS（域名解析）和Web服务器（组织并展示相关的信息资源） 等。承担各种服务任务的计算机就叫做服务器。
互联网+：将互联网作为工具，让互联网与传统行业进行深度融合，创造新的发展生态。滴滴打车、支付宝等等
Web
- 全称为World Wide Web，缩写为WWW译为“万维网”,简称为Web
- 是一个可通过互联网来访问的、由许多互相链接的超文本组成的系统。
URI：Uniform Resource Identifier 统一资源标识符
HTTP: HyperText Transfer Protocol 超文本传输协议
Web 与 Internet的关系：Web不等于Internet，它只是Internet中的一个部分，而且和浏览器有关。以后只要提到Web，就一定是和浏览器有关的应用或其他事项。可以说Web是Internet中的一个子集或者说Web是互联网提供信息的一种手段。
Web服务器
- 又称WWW服务器、网站服务器、站点服务器或HTTP服务器
- 为用户提供信息浏览和信息处理服务。将信息用超文本（Hypertext）组织，为用户在Internet上搜索和浏览信息提供服务。
- Web服务器实际上就是一个软件系统。但它必须安装在一台高性能和高可靠性的计算机上，所以人们通常将那台计算机就叫做Web服务器。
常用的Web服务器有： ▪ Microsoft IIS ▪ IBM WebSphere ▪ Oracle WebLogic ▪ Apache 开源 ▪ Tomcat 开源 ▪ Jboss 开源▪ 金蝶公司 Apusic
要使一台计算机成为Web服务器，必须安装上述专门的信息服务程序，并且安装UNIX、Linux或Windows 2003/2008/2012 Server等网络操作系统。一台计算机可以安装多个Web服务器。
为什么有些Web服务器需要花钱购买？
IIS、Tomcat、Apache和Jboss等，支持的并发访问用户数有限，适合作中小型网站系统的Web服务器，而WebLogic、WebSphere和金蝶Apusic等专业Web服务器，在并发用户大量增加的情况下，仍可保持较高的处理性能，适合作大型网站系统的Web服务器。购买专业版时又区分5用户、10用户、25用户、100用户的Web服务器，是指Web服务器最大支持的并发用户数。
Web页面
Web在提供信息服务之前，所有信息都必须以文件方式事先存放在Web服务器所管辖磁盘中某个文件夹下，其中包含了由超文本标记语言（HyperText Markup Language，HTML）组成的文本文件，这些文本文件称为超链接文件，又称网页文件或Web页面文件（Web page）。
静态网页 HTM.HTML
动态网页 ASP.ASPX.JSP.PHP
扩展名为HTM或HTML的页面文件为静态页面，ASP、ASPX、JSP、PHP等页面文件为动态网页，或者叫Web服务器页面。 Web服务器页面需要Web服务器对它们进行重新处理后，动态生成新的HTML页面再传送给客户端供用户浏览。例如服务器动态页面中大都需要进行数据库访问的请求与处理，要将获取的数据合并处理后形成新的网页传回给浏览器。
统一资源定位符（URL）
信息资源放在Web服务器之后，需要将它的地址告诉给用户，以便让用户来访问，这个地址就叫统一资源定位符（Uniform Resource Locators，URL），俗称为网址
URL字串=协议名称（通常为http、ftp、file等）+主机名+文件名（含路径）
example：
- http://www.yahoo.com.cn/index.htm ，http://指采用的传输协议是http，www.yahoo.com.cn为主机名，/index.htm为根目录下的文件。
- file:///C:/windows/Sandstone.htm也是一个URL地址，指向本地C盘中Windows目录下的Sandstone.htm文件， “file://”指采用的直接文件方式访问； “/C:/windows/Sandstone.htm”表示文件从根目录开始的路径
URL是对可从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
eg：
URL地址中的主机名也可直接输入对应的IP地址，例如输入：http://202.202.0.36/ （有时也包括端口号 http://202.202.0.36:81/ ） Web服务器默认TCP端口号为80，用于监听有无页面请求。 http://202.202.0.36:80/ 和 http://202.202.0.36/ 等同。
为什么有时URL地址中没有文件名还能照常显示页面内容呢
这是因为在Web服务器的配置中，可以事先设定一个或多个默认文件名，浏览器会自动查找这些默认的文件名。
URI和URL的区别
统一资源标识符URI是一个用于标识某一互联网资源名称的字符串。 Web上可用的每种资源 -HTML文档、图像、视频片段、程序等都可由URI来定位。 URL网址只是属于URI的一种，用来定位所需访问的网页地址。
eg
href=“…/Shweather.htm” 也可写成 href=“/web/Shweather.htm”
URI绝对地址可直接在浏览器中输入，访问相关资源；相对地址则不可用在浏览器地址栏 URI相对地址只能用在页面文件中
为什么需要URI相对地址?
当网站目录层次较多、内容较长时，可以简化书写，避免出错，也可减少页面文件的字节数。页面内容要在浏览器中显示，从Web服务器下载到客户端，页面中的每个字节都是网络流量的组成部分。
Web浏览器的工作原理
Browser就是Web客户端程序，要浏览Web页面必须在本地计算机上安装浏览器软件，用于与Web服务器建立连接，并与之进行通信。浏览器根据访问地址确定信息资源的位置，并将用户感兴趣的信息资源取回来，对 HTML 文件进行解释，然后将文字图像显示出来，或者将多媒体信息还原出来。
在网络带宽相同的情况下同一台计算机使用不同的浏览器访问同一个网站，为什么访问速度会不一样？
浏览器是个软件，是软件就有软件复杂度的问题，就有软件运行效率的问题，如算法是否先进，代码是否简洁有效等等，另外浏览器的安全级别的设置也会大大影响访问速度。如果安全级别高了，都要去检查当然就慢了。还有如果浏览器中加载了很多插件也会拖累浏览器。
浏览器Cookie
- 浏览器和服务器之间是通过HTTP进行通信的。HTTP是一种无记忆的协议，即用户目前正在浏览的页面对在此之前浏览过的页面没有丝毫的记忆和了解。
- 实际情况是有时需要浏览器能够记住一些信息，且这些信息无需用户记住。
- 浏览器中引入了Cookie的概念，浏览器允许用户通过Cookie读写一些信息，这在一定程度上实现了浏览器的记忆功能。
https:// 与 http:// 的区别
HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer安全套接字），是以安全为目标的HTTP通道，是HTTP的安全版。即HTTP下加入套接字SSL层，对传输的网页进行加密处理，被广泛用于安全敏感的通讯，例如交易支付方面。
C/S模式与B/S模式
C/S模式Client/Server客户端/服务器 需要下载安装运行的各种游戏软件 各种移动APP软件 Foxmail邮件客户端软件 ……
优点:可异种平台集成；分布式管理；能充分发挥客户端PC的处理能力；运行安全、稳定、速度快，且在适当情况下可脱机操作。
缺点或不足:必须在客户端安装大量的应用程序（客户端软件）；需要在客户端安装支持系统运行的动态链接库等；存在移植困难、用户界面风格不统一、操作复杂、不利于推广使用、维护和升级过程繁琐、信息内容和形式单一和不易应用新技术等不足。
B/S模式Browser/Server浏览器/服务器 各种页游 网易126邮箱、163邮箱、Web QQ邮箱、 gmail邮箱等等 通过浏览器运行的各种业务系统 ……
B/S模式是一种基于Web的协同计算模式，是一种三层架构的瘦客户机/肥服务器的计算模式。在这种结构下，用户工作界面是通过Web浏览器来实现，少部分事务逻辑在前端（Browser）实现，主要事务逻辑在服务器端（Server）实现，形成所谓三层(3-tiers)结构。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。
优点:具有良好的开放性；无需下载安装，利用浏览器单一的访问点，用户可在任何时间和地点使用系统；系统维护方便，有效地降低了整个系统的运行和维护成本。
缺点或不足:运行速度没有C/S模式快，且受网络带宽的影响较大；会出现更多安全性问题。
注意点：面向大众的网站系统应尽可能多地被各种用户访问，需考虑浏览器的兼容性，还需考虑在网络带宽在有限和不稳定的情况下，仍然可被快速访问，因此除了考虑互联网上使用的安全性外，其稳定性、可靠性、有效性等也是网站开发中必须重点考虑的问题。面向某个企业的Web App，浏览器的兼容性则可不作为重点考虑。
Web访问的原理
静态网页
该网页文件里没有特殊程序代码，只有HTML标记和客户端脚本代码，这种网页以后缀.htm或.html的文件存放，也可实现各种动态的效果，如.GIF动画、FLASH、滚动字母等，这些动态效果只是视觉上的。静态网页访问速度快，容易被搜索引擎收录。
动态网页
网页文件中不仅含有HTML标记和客户端脚本代码，而且含有需Web服务器进行处理的代码（文件扩展名一般为ASPX、JSP、PHP等）。用户登录、发布新闻、发布公司产品、交流互动、博客、网上调查等都需要动态网页来实现。
Web开发平台的组成
- Microsoft .NET开发平台
- Oracle Java EE开发平台 Servlet、JSP和EJB是J2EE平台的三大核心技术。Java EE 是在 Java SE 的基础上构建的
- LAMP开发平台（Linux+Apache+MySQL+PHP） ……….
Web前端开发技术
HTML CSS DHTML/JavaScript ActiveX XML XHTML
DHTML可实现功能： 1）动态交互功能，使网页产生动态效果。 2）让用户站点易于维护。 3）可减轻服务器负荷，更大发挥网络能力
微软ActiveX控件技术是一种可重用的软件技术。将一个或一组功能封装起来，以对象方式供开发者使用，例如将文件加密和解密做成一个ActiveX控件，网上银行将密码输入框做成一个ActiveX控件，防止木马读取密码等。有大量商用或免费ActiveX控件供开发人员使用，也可用VC、VB等来开发一个ActiveX控件。ActiveX控件可在页面中直接使用，例如ActiveMovie控件可用于播放声音与视频，只需在控件的属性中指定参数值，就可在Web页面中控制其播放。 IE、Netscape、Firefox等浏览器都支持ActiveX技术。
当浏览的网页遇到ActiveX控件时，会检查用户本地系统的注册表，查看其是否已安装在本地机上。若已安装，浏览器显示该网页并激活控件。若未在用户本地安装，浏览器将查找并安装到本地。下载控件时，浏览器会缺省地显示一个消息框，通知用户将要开始下载，用户可以选择终止下载或继续下载（浏览器的Internet选项中设置）。
HTML的不足：HTML不能适应信息检索和存档要求；无法描述矢量图形、科技符号和一些其他特殊显示效果；文档结构混乱而缺乏条理，导致浏览器的设计越来越复杂。
XML弥补了HTML的不足，将网络上传输的文档规范化，并赋予标记一定的含义，与此同时，还要保留其简捷、适于网上传输和浏览的优点。XML是标记语言，可根据需要自定义新的标记。XML已在文件配置、数据存储、异构数据交换等众多方面得到广泛应用。
后端开发技术
CGI PHP JSP ASP/ASP.NET ADO/ADO.NET Web Service WCF
第二章 Web开发环境的建立
每个网站的内容都存放在一个物理路径中，这个物理路径也即主目录。一个网站所有文件不一定非要将它们全部放在一个目录下，可以分散存放在不同的硬盘分区中。例如右图中将photo放到F盘中，将student放在E盘中。那我们的Web服务器如何来管理分散存放的某个网站内容呢？这就要通过创建虚拟目录来管理分散存放的网站目录。
.NET Framework 有3个组成部分：CLR（Common Language Runtime，公共语言运行库）：负责管理内存、线程执行、代码执行、代码安全验证、编译和其它系统服务。托管代码:需要以CLR环境来支撑运行的程序代码；非托管代码:用VB、VC++等工具开发的程序。.NET Framework 类库：提供很多现成的方法供开发人员编程使用，如复制、移动、删除一个文件、杀死一个进程、连接数据库等ASP.NET：使用托管代码来开发网站
源代码的版本控制简称为源码控制，它在多人协作开发环境中是非常重要的，它包含了对应用程序中每个源文件修改的历史记录，可对多个开发者的行为进行协调。在需要比较两种版本的文件或找回早期版本的文件时，源代码的控制是非常有用的。
第三章 HTML与CSS
1 | + 文档类型：<!DOCTYPE HTML ……> |
HTML标记、标签（tag）和HTML元素（element）是两个不同的概念，在HTML文档对象编程模型中把HTML标记称为元素，实际使用中常常不加区分。在面向对象编程中，每个标记都是一个对象。
不是所有的网页都是可以通过工具制作出来的，还需要手工编写代码。通过工具可以制作功能不太复杂的简单网页，较为复杂的页面只能通过手工编写代码来完成，有时还需要在网站后台编写网页代码动态生成网页传送给浏览器显示。
HTML5特性
- 语义特性 HTML5可使网页有更好的结构，标签更为丰富。
- 设备兼容特性 可获取地理位置；使外部应用与浏览器内部数据直接连接，例如视频影音可直接与麦克风及摄像头相联。
- 本地存储特性 本地存储功能使HTML5网页运行更快，占用带宽更少。
- 连接特性 Server-Sent Event和WebSockets可实现服务器将数据“推送”到客户端。
- 网页多媒体特性 提供Audio、Video等多媒体功能。
- 性能与集成特性 通过XMLHttpRequest2等技术，帮助Web应用和网站在多样化的环境中更快速地工作。
- 三维、图形及特效特性 提供SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中所呈现的惊人视觉效果。
HTML注重的是内容本身，而不是显示方式。CSS注重解决网页字体大小、颜色、边框等格式问题，以提供给用户尽量美观、易读的网页。
依优先级最高的是内联样式，其次是联入样式表，然后是导入外部样式表。外链样式和联入样式中，最后定义的样式优先级最高。内联样式会向标记中添加更多属性及内容，对于网页设计者来说很难维护，应尽量减少使用内联样式
使用CSS的优点
- 网页代码和网页格式分离，外链样式被浏览器保存在缓存里，加快了网页下载速度。
- 将网站的样式放在外部文件中，网站的各个网页都引用这个文件，只要修改这个文件中的样式，整个网站的网页格式就随之变化，保证了网站显示风格的一致。避免了一个个网页的修改，大大减少了重复工作量。
CSS的选择符
CSS中的选择符有：
- HTML标记
- 具有上下文关系的HTML标记
- 用户自定义类选择符
- 用户定义的ID选择符
- 虚类
- 虚元素
虚类
是一种特殊的类选择符，虚类的形式为：选择符:虚类{ 属性值对 }虚类主要针对超链接A标记来使用，可指定超链接标记A以不同的方式显示链接
超链接有4种不同的样式状态
- a:link 链接访问前的样式
- a:visited 链接访问后的样式
- a:active 链接活动时的样式
- a:hover 鼠标在链接上的样式
可将虚类和自定义类名组合起来使用，以实现页面中各个超链接按不同样式来呈现。
虚元素
有2个特殊的选择符first-letter和first-line，用于P、div、span等块级元素的首字母和首行效果。
格式为：
- 选择符:first-letter {属性值对}
- 选择符.类:first-letter {属性值对}
1 | <ol type="A"> |
- 输入部件
- 输出部件
- 存储器
1 | <ul type="circle"> |
- 算术逻辑部件(ALU)
- 辅助存储器
- 中央处理器(CPU)
- 辅助存储器
定位属性
| 样式属性 | 含义 | 取值 |
|---|---|---|
| position | 绝对定位还是相对定位 | absolute：将浏览器显示区域的左上角或框架页面显示区域的左上角作为原点Origin来定位。relative：表示相对位置，相对本元素的父元素来定位。父元素左上角为原点。static（默认值）： 表示静态位置，按照HTML文件中各元素的先后顺序放置。 |
| left、top | x坐标、y坐标 | position为absolute时，以Origin为原点的x坐标、y坐标position为relative时，以父元素左上角为原点的x坐标、y坐标。 |
| z-index | 设定元素的遮挡序号。 | 取值为整数，可正可负，值较高的元素覆盖较低的元素 |
表格制作
1 | <table border="1"> |
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
CSS3新增columns属性，可实现多列自动布局，自动将内容按指定的列数排列。column-count：设置列的具体个数column-gap：指定的列之间的间隙column-rule：列之间的宽度，样式和颜色的规则
第四章 DHTML
JavaScript编程基础
HTML和CSS可用来创建网页，用户只能查看不能修改网页内容和外观，无法和网页进行交互。如点击某按钮，执行完点击事件后，就要让它disable，不再接受用户的点击，HTML和CSS是无法实现的，必须借助客户端脚本语言JavaScript(简称JS) 以及HTML DOM来完成。
JS嵌入在HTML文件中，能对鼠标点击、表单提交等用户事件做出反应和处理。
特点
- 简单性 JS是简化的编程语言，变量类型简单，不声明也能使用。
- 基于对象 JS不完全面向对象，不支持类和继承，是基于对象而不是面向对象的语言
- 可移植性 JS可在浏览器上不经修改直接运行。
- 动态性 可用来设计客户端交互式动态页面。
- 安全性 JS是一种安全性语言，对本地资源的访问和操作有限，只能通过浏览器实现信息浏览或动态交互。
1 | 验证手机号码："^1[3|4|5|7|8][0-9]\\d{8}$" |
/\D/ 表示不是0-9
!/\D/.test(str)
我们不能像在传统的语言里那样用class来定义类, 但我们可利用JS的闭包封装机制来实现JS中的类
JS自定义对象有两种方式：
- 把函数function当成对象
- 用prototype对象来实现JS的自定义对象。Prototype是函数的子对象， 很神奇，它可以给函数对象动态地添加属性和方法。
HTML DOM基础（Document Object Model）
HTML DOM 是一个可让脚本程序动态访问和更新HTML文档内容、结构和样式的技术。它是跨平台、可适应不同程序语言的文件对象模型，采用直观一致的方式，将HTML文档进行模型化处理，是一种提供存取和更新文档内容、结构和样式的编程接口。
prompt、alert、confirm方法实现对话框功能，其中prompt为接受用户输入字符串的对话框；confirm实现具有确认和取消按钮的对话框；alert为仅输出文本对话框。
cookie
cookie是放在浏览器缓存中的一个文件，里面存放着各个参数名及参数值。cookie的参数是以分号相隔的,例:name=wcl;sex=male;color=red;expires=Sun May 27 22:04:25 UTC+0800 2008Cookie可用来存放当前页面的参数信息，也可用来存放同一网站打开的多个页面间的共享信息。可以对cookie设置失效期限，既可永久保留，也可关闭网站后就删除，也可在指定时间内失效。expires指定cookie的失效日期，当没有失效日期时，关闭浏览器即失效。例如：用户登录时需要从学生、任课教师、班主任、辅导员中选择一种角色登录，用cookie保存选定角色后，下次登录系统，就取cookie中的保存的用户角色作为默认值。
文档对象
动态生成8行16列表格
通过优化网页代码，节省网络流量------网页减肥
文档对象的事件除了响应键盘、鼠标常规
操作事件外，还增加了其他大量事件，例如鼠标的拖拉操作事件、浏览器鼠标右键快捷菜单事件oncontextmenu等。
HTML DOM树简介
HTML DOM是一种结构化的对象模型，采用DOM技术访问和更新HTML页面内容时，可依据HTML源代码，建立页面的树型结构模型，然后按照树型结构的层次关系来操纵Web页面。
在DOM树型结构中，每个节点都是一个对象，各节点对象都有属性和方法。
attributes节点属性的对象集合 chileNodes子节点的对象集合
DOM树型结构节点有只读属性和读写属性两类。通过只读属性可以浏览节点，并可获得节点的类型及名称等信息；通过读写属性可以访问文字节点的内容。
用DOM树方法可以动态创建HTML文档或HTML元素，并可通过JS程序随时改变文档的节点结构或内容，建立动态的网页生成效果。
jQuery简介
把一些通用的函数事先写好，放在外部单独JS文件中，在手工编写网页代码时，就可重复使用这些通用函数，大大简化网页代码的编写工作，提高网页开发的效率。
利用jQuery，也即JS开发库，HTML DOM的很多复杂编程操作都可轻松实现，大大减轻Web前端开发人员的编程难度，提高了编程效率。
jQuery是一个快捷、小巧和特性丰富的avaScript库，凭借简洁语法和跨平台的兼容性，大大简化了JS开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而优雅的代码风格改变了JS程序员的设计思路和编写程序的方式。
table tr:nth-child(even) 就是指表格中的偶数行，然后用jQuery的addClass方法添加CSS类名alternateColor，它已在style块中定义好了。
jQuery选择器
- 元素选择器 $(“div”)表示选择所有div元素
- ID选择器 (“#button1”)将选择ID为button1的元素。``(“div #main”)选中ID为main的div元素。``
- 类选择器 $(“.important”)将选择页面上所有应用了important类的元素。
- 后代选择器 若在一个选择器后面有一个空格，再跟另外一个选择器，则表示选择包含在第一个选择器中的第二个选择器。 $(”div p”)将选择div中出现的所有p元素。
- 子元素选择器 若一个选择器后面是一个大于号>，后面再跟另一个选择器，则表示选择直接包在第一个选择器中的第二个选择器。 $(‘#ss > li’) 选择Id为SS元素中的所有li元素。
第五章 XML基础
XML是一种类似于HTML的标记语言XML是用来描述数据的XML的标记非预先定义，须自行定义标记
XML的特点
- XML的可扩展性
- 标记的自描述性
- XML语言的规则性
- 文档的结构化
- 允许Meta数据(元数据)
- XML文档的多样显示
- 允许XML DOM操作 XML DOM的作用就是使用脚本语言如何对XML文档的节点和数据进行增删查改等各项操作。
XML中有关名词的相互关系
XML DTD用以说明XML文档中数据的类型和格式,目前已被XML Schema所替代。
避免命名冲突
- 使用前缀
- 使用命名空间（Namespaces）为
标签添加了一个 xmlns 属性，这样就为前缀赋予了一个与某个命名空间相关联的限定名称。<f:table xmlns:f=“http://www.w3school.com.cn/furniture”>
XML DOM
对于XML文档，可利用CSS的样式或XSLT格式转换后利用浏览器解析和浏览它，如何对XML文档进行数据的添加、删除、修改、查询等操作，就需要使用XML DOM技术了。 XML DOM实际上就是访问XML文档的标准应用程序接口。先看例子。
XML DOM是W3C提出的针对XML的文档对象模型，是一个与语言无关、与平台无关的标准接口规范，定义了一套标准的用于XML的对象和一种标准的访问与处理XML文档的方法。
对于XML应用开发来说，DOM 就是一个对象化的XML数据接口，它定义了XML文档的逻辑结构，可动态创建XML文档；遍历文档结构；添加、修改、删除文档内容；改变文档的显示方式等。无论是在浏览器里还是在浏览器外，无论是在服务器还是在客户端，只要有用到XML的地方，都可利用DOM接口进行编程应用。
DOM将XML文档作为树结构来看待。XML文档中的每个成分都是一个节点。例如整个文档是一个文档根节点；每个XML标记是一个元素节点；包含在XML元素中的文本是文本节点；每一个XML属性是一个属性节点；注释属于注释节点。
XML DOM与 SAX
访问XML文档的标准应用程序接口有两种：DOM（Document Object Model）和SAX（Simple API for XML）
DOM接口中的XML分析器，在对XML文档进行分析之后，不管这个文档有多简单或者多复杂，其中的信息都会被转化成一棵对象节点树——DOM 树。在这棵节点树中，有一个Document根节点，所有其他的节点都是根节点的后代节点。节点树生成之后，就可通过XML DOM接口访问、修改、添加、删除树中的节点和属性以及文本内容等。应用程序可在任何时候访问XML文档中的任何一部分数据，也即可随机访问。与XML DOM不同，SAX提供的访问模式是一种顺序模式，这是一种快速读写XML数据的方式。当使用SAX分析器对XML文档进行分析时，会触发一系列事件，并激活相应的事件处理函数，应用程序通过编写的事件处理函数实现对XML文档的访问，因而SAX接口也被称作事件驱动接口。由于DOM分析器把整个XML文档转化成DOM树放在了内存中，当XML文档很大或结构比较复杂时，对内存的需求就比较高。SAX分析器在对XML文档进行分析时，触发了一系列的事件，由于事件触发本身是有时序性的，SAX提供的是一种顺序访问机制，对于分析过的部分，不能再倒回去重新处理，因此SAX分析器缺乏灵活性但实现简单，对内存要求比较低。
XML DOM对象
- Document对象
- Node对象（节点对象） Node对象的子对象有Document、Element、Attribute、Text、Comment等。
- NodeList对象（节点列表）
- NamedNodeMap（有名节点映射）
XML与数据库的关系
- XML不是数据库，数据库系统有它自己的一套管理模式，而XML仅仅是用来存放数据的文件，一个XML文档相当于数据库中的一个表。因此XML不可能取代数据库，但将数据库和XML结合起来，能够完成很多以前无法完成的工作，例如异构数据交换、应用系统集成等。
- 数据若放在数据库中共享，则受到数据库连接请求失败、防火墙隔离等各种限制。XML是文本文件，可以穿透任何防火墙进行传输，已成为互联网上的事实数据交换标准。
- 随着XML的广泛应用，各数据库产品都被重新设计，使之能很好支持XML，如Oracle、SQL Server、DB2、Sybase、MySQL等。另外还出现了支持native（原生） XML文档进行存储管理的专属XML数据库系统，如X-Hive、XML Repository、eXcelon、BaseX、 Sedna、 XMLDB等，提供对标签和路径的操作，文档存储和检索迅捷，可提供高质量的全文搜索。
- 开发一个访问数据库的XML应用系统需要同时借助XML编程接口和数据库编程接口，前者用于对XML文档的解析、定位和查询，所需技术包括DOM和SAX；后者则是用于访问数据库，如数据库中数据的更新和检索等等，需要利用的技术有ODBC、JDBC、ADO/ADO.NET等。
- XML文档可通过ADO.NET等各种数据接口方式存放到数据库中，也可将数据表中的数据形成一个XML文档通过XSL来呈现。
JSON
在XML中，需要许多开始标记和结束标记来标识数据，在互联网网上传输数据时效率不高，出现了JSON(JavaScript Object Notation) 轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析和生成， 作为XML文档的一种有力补充。
第六章 .NET Web应用程序开发
C#
ASP.NET中采用强类型语言VB.NET、C#等，采用完全面向对象方式编程。C#是由C和C++发展而来的面向对象和类型安全的编程语言。C#读作C Sharp，它和Java非常相近。
using System使用了由Microsoft.NET类库中提供的System名称空间，用来组织类库的分层。分层的类库之间用操作符“.”表示上下级分层关系。使用“using”后，就可无障碍地使用名称空间中的各种类型成员。名称空间除具有避免名称冲突之功能外，更重要的是在引用名称空间后，就可在程序代码中方便地使用系统提供的各种类库成员。
名称空间除避免名称冲突外，也方便了程序代码的编写
C#中的数据类型
数据类型变量直接包含数据，而引用类型变量存储对于对象的引用
数据类型
简单类型（如char、int和float）枚举类型结构类型
引用类型类类型，接口类型，代表（delegate）类型，数组类型。
对于引用类型，两个变量可引用相同的对象，因而可能出现对一个变量的操作影响到其他变量所引用对象的情况
C#语言是一种强类型的语言，在使用变量前必须对该变量的类型进行声明，建议在声明变量时就对变量进行初始化。
变量名
必须以英文字母或@开头，由字母、数字、下划线组成，不能有空格、标点、运算符号、C#中关键字名、C#中库函数名，且大小写敏感。
常量
C#中定义常量用const修饰符，例如“public const double y=1.234;”。枚举类型是由一组特定常量构成的一种数据结构，是值类型的特殊形式。当需要一个有指定常量集合组成的数据类型时，可使用枚举类型。枚举类型不能实现接口、不能定义方法、属性、事件。
C#表达式
算术表达式
赋值表达式
关系表达式
逻辑表达式。
控制语句
分支语句有3种：
①三元运算符，例如：a=(b>5)?100:10表示b>5时a=100，否则a=10；
②if语句（一次仅测试一个条件）；
③switch语句（一次将测试变量与多个值比较）。
循环语句有4种。可用break和continue语句跳出循环或继续执行循环。foreach语句可以遍历一个集合中的所有元素。
ASP.NET常用控件的使用介绍
- 标准控件是和界面设计制作有关的控件
- 数据访问操作及数据可视化方面控件
- 对用户输入的内容进行验证的控件
- 提供站点导航、动态菜单、树型菜单的控件
- 用户登录界面的设计制作控件
- WEB门户定制控件，可拖动区域在屏幕上重新布局
- 提供Ajax编程的控件
- 提供动态数据操控的的控件
- 提供WEB页面上的报表处理控件
- HTML中的常规控件
客户端控件：Web服务器对客户端控件不做任何处理，交由客户端浏览器来处理。
服务器端控件：需要占用Web服务器的内存、CPU等系统资源等来处理服务端控件，最终转变成客户端控件，再交由客户端浏览器来处理。为提供网页访问速度，页面中尽量使用客户端控件。
当某控件的EnableViewState属性为true时，表示该控件的值在页面刷新或回传重新显示页面后不会丢失，但却耗费网络资源和服务器资源。因此当页面回传后无须保值处理时应设为false。
第七章 AJAX技术
Ajax：Asynchronous Javascript and XML
该技术的目标是让用户动态地与页面进行交互，加快服务器的响应速度，减少用户的等待时间，是一种创建交互式Web应用程序的开发技术。其技术的最简单描述就是实现局部刷新。
Ajax的局部刷新：通过异步数据交换和处理，显著提高Web应用程序运行效率。Ajax不是新技术，是各个已有核心技术的创新应用。
Ajax的核心是支持异步请求的XmlHttpRequest对象，使开发者可使用JavaScript向服务器提出异步请求并处理响应。
实现Ajax技术的应用开发主要有：直接基于XMLHttpRequest对象，利用各种Ajax框架，简化Ajax开发
CGI脚本
https://www.jb51.net/article/10514.htm
CGI 意思为 Common Gateway Interface, 一种基于浏览器的输入、在Web服务器上运行的程序方法. CGI脚本 使你的浏览器与用户能交互，为了在数据库中寻找一个名词, 提供你写入的评论，或者从一个表单中选择几个条目并且能得到一个明确的回答. 如果你曾经遇到过在web上填表或进行搜索, 你就是用的CGI脚本. 你那时也许没有意识到，因为大部分工作是在服务器上运行的，你看到的只是结果.
CGI脚本是什么?
CGI脚本简单地讲是个运行在Web服务器上的程序, 有浏览器的输入触发. 这个脚本通常象服务器和系统中其他程序如数据库的桥梁。
CGI 脚本难道不是一个真正的脚本?按照你的服务器的支持, 他们可能是一个编译好的程序或者批命令文件或者其他可执行的东西. 为了简单起见，我们统称他们为脚本scripts.
CGI 脚本是任何运行在web服务器上的程序. CGI意思是Common Gateway Interface。
CGI脚本是用下列两种方法使用的: 作为一个表单的ACTION 或 作为一个页中的直接link。
CGI脚本是怎样工作的?
- 一个URL指向一个CGI脚本. 一个CGI脚本的URL能如普通的URL一样在任何地方出现。
- 服务器接收请求, 按照那个URL指向的脚本文件(注意文件的位置和扩展名),执行脚本.
- 脚本执行基于输入数据的操作，包括查询数据库、计算数值或调用系统中其他程序.
- 脚本产生某种Web服务器能理解的输出结果.
- 服务器接收来自脚本的输出并且把它传回浏览器，让用户了解结果。
一个服务器同时运行多个网站三种方式
1.IP一样，端口不一样
2.端口一样IP不一样
3.端口一样，IP一样，绑定的域名不一样关于Ajax
readyStae状态：
0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 早早起床，拥抱太阳！数据库加载中
