*Web前端汇总
1、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
- 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
- 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
- 空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
2、src与href的区别
- href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
- src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
3、同步和异步的区别
- 同步是阻塞模式，异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
- 异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
4、cookies，sessionStorage和localStorage的区别
- sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
- web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
5、一次完整的HTTP事务是怎样的一个过程？
基本流程：
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
* Html页面
1、页面结构
1.首先要了解页面的结构（包含哪些元素？哪些计算机语言能够在页面中运行 ）
（1）html
不仅可以包含文字，还可以包含图片、链接，甚至音乐、程序等非文字元素的标记语言
（展示给用户，不能太单调，css）
（2）css
是一种用来表现HTML的计算机语言，能使HTML页面变得更加美观
（要展示给用户光漂亮是不够的，用户还要能够动态的操作HTML页面，也就是让浏览器和用户之间的交互不仅仅是用户能浏览html中的内容，还要能对html页面操作，JavaScript）
（3）JavaScript
用来给HTML网页增加动态功能、交互行为
是一种解释性脚本语言（不进行预编译）
目前我们熟悉的语言Java、JavaScript、C、C++，都属于高级编程语言
①计算机不能理解高级语言，也就不能直接执行高级语言了
②计算机只能直接理解机器语言，所以任何语言，都必须将其翻译成机器语言，计算机才能运行高级语言编写的程序
③翻译的方式有两种，一个是编译，一个是解释。
1）编译：Java语言的运行先经过编译，但是JAVA语言的编译不是直接编译成计算机能识别的语言，而是编译成JAVA虚拟机能识别的class文件
JAVA语言就是典型的翻译方式为编译的编程语言，
虽然不是编译成计算机能直接识别的语言，但是同其他以编译为翻译方式的高级编程语言的原理大体上是相同的。
最明显：C/C++，可以编译成二进制代码,以可执行文件的形式存在（exe文件）
都是先编译再运行，而且是一次编译到处运行，效率非常高。（只需要在第一次运行的时候编译一次）
2）解释：解释性脚本语言的程序不需要编译，解释性脚本语言在运行程序的时候才翻译
解释性脚本语言有专门的解释器来负责解释，不过每次都需要翻译，效率比较低。
JavaScript 就是一种解释性脚本语言
④JavaScript也有自己专门的解释器——JavaScript引擎，它存在于浏览器端，作为浏览器的一部分
一句话：html（超文本标记语言）、css（层叠 样式表）、JavaScript脚本语言这三样东西在浏览器端相互配合、相辅相成形成了比较成熟的前端界面
（4）这三样东西在HTML页面中的位置
- <code class="language-html">html的基本结构
- <html>
- <head>
-
- </head>
- <body>
-
- </body>
- </html></code>
①html：贯穿整个页面
②css：三种声明方式
外联样式表：在head便签中 用link标签的href属性来引用后缀名为.css的css样式文件
内联样式表：在head标签下的style标签中，选择器 + 样式声明
内部样式表：在标签的style属性中添加css样式声明
③JavaScript：在<script>标签中，可以在head标签中，也可以在body标签中（区别一会再说）
小总结：
以上内容总结出一句话：目前为止，在整个html页面中，可以写html代码、css样式、JS脚本语言
位置：html贯穿整个页面，
css可以定义在head头标签中，也可以在定义在html标签的属性中
JavaScript定义在<script>标签中，<script>标签既能在head标签中定义也能在body标签中定义
问题1：JQuery、EasyUI也可以写在html页面中
jQuery是一个快速、简洁的JavaScript框架（本质上也是JavaScript）
EasyUI：类库中都是以 .css和.js结尾的文件。别人写好的css样式和JavaScript（本质上也是css和JavaScript）
所以追其根源，html页面中就是 html、css、JavaScript
问题2：jsp中能编写Java代码
jsp是特殊的Servlet，本质是Java，是Java就要运行在服务器端，浏览器是不能解析Java代码的
为什么用浏览器访问jsp时能在浏览器端显示呢?
分两种情况：
①对于html文件，当我们用浏览器访问时能自动解析，解析完毕就会将内容展示在浏览器上
②对于jsp，当我们用浏览器访问时，我们写好的jsp文件会生成.java文件，服务器运行JAVA文件，会把jsp中编写的html代码，发送给浏览器
可以这样理解，我们编写的HTML文件被浏览器直接解析
而我们编写的jsp，是借助JAVA代码将html代码发给浏览器，浏览器再解析
本质上都是浏览器解析html代码（这里的html代码，包括刚才说的html、css、JavaScript）
2.加载顺序
从上到下运行，先解析head标签中的代码，
（1）head标签中会包含一些引用外部文件的代码，从开始运行就会下载这些被引用的外部文件，当遇到script标签的时候浏览器暂停解析（不是暂停下载），将控制权交给JavaScript引擎（解释器）
如果<script>标签引用了外部脚本，就下载该脚本，否则就直接执行，执行完毕后将控制权交给浏览器渲染引擎； 所以js文件应当放在body的最后。
（2）当head中代码解析完毕，会开始解析body中的代码，如果此时head中引用的外部文件没有下载完，将会继续下载。 浏览器解析body代码中的元素，会按照head中声明一部分样式去解析；如果此时遇到 body标签中的<script>，同样会将控制权交给JavaScript引擎来解析，JavaScript解析完毕后将控制权交还给浏览器渲染引擎。
当body中的代码全部执行完毕、并且整个页面的css样式加载完毕后，css会重新渲染整个页面的html元素。
（3）按照之前的描述，<script>写到body标签内靠后比较好，因为JavaScript 会操作html元素， 如果在body加载完之前写JavaScript 会造成JavaScript 找不到页面元素，但是我们经常将<script>写到head中， body中不会有大量的js代码，body中的html代码结构会比较清晰。
3. onload 和 ready的区别
- $(function(){ ... }); 表示文档结构（DOM）已经加载完成（不包含图片等非文字媒体文件）
- window.onload(function(){...}); 表示页包含的所有元素都加载完成（包括图片等文件）
- 页面加载顺序： 域名解析→加载html→加载js和css→ready事件→加载图片等其他信息→onload事件；
- 如果ready()之前有js代码，那么先执行ready()之前的js代码，然后再执行ready()；
4. JS事件绑定
<!--this指当前被点击的DOM对象-->
<div id="outestA" onclick="var id=this.id; alert(id); return false;">方式一</div>
<button id="test2" onclick="btnClick(this);">方式二</button>
<button id="test3">方式三</button>
<script type="text/javascript">
/*1、谁调用，this就指向谁
* 2、事件冒泡：由内而外；事件捕获：由外而内*/
/*1、事件处理函数中的this指windwon*/
function btnClick(obj){
//事件处理函数中的this指window对象，此处的obj才指dom对象
alert(this.id);
alert(obj.id);
}
//用bind或者on绑定事件，可以注册多个事件
$("#test3").bind("click",function (e) {
//此处的this指向dom对象
alert(this.id);
});
$(function(){
//使用dom绑定事件
var dom = document.getElementById("test3");
//false阻止事件冒泡，使用事件捕获
dom.addEventListener('click', a, false);
function a(){
alert(this.id);
}
})
</script>
View Code JS加载执行顺序：
- 1、加载顺序：引入标记<script/>的出现顺序。 js相当文档的一部分；
- 2、每个脚本定义的全局变量和函数，都可以被后执行的脚本所调用；
