转载自 前端面试常考系列三
一、简述一下src与href的区别
href 表示超文本引用，在 link和a 等元素上使用。src 表示来源地址，指向外部资源所在位置，在 img、script、iframe 等元素上。
src 的内容，是页面的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。
src用于替换当前元素，href用于在当前文档和所引用的外部资源之间建立联系。
二、HTML5的标签有什么作用
a、使Web页面的开发规范统一，增强了语义。
b、使搜索引擎更加容易按照HTML5规则识别出有效的内容。
c、使Web页面更接近于一种数据字段和表。
三、不使用border如何画出1px高的线，在不同浏览器的不同模式下都能保持相同效果
方法如下：
<div style="height:1px;overflow:hidden;background:red">
</div>
四、谈谈你对canvas的理解
canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。标记和 SVG以及VML之间的一个重要的不同是，有一个基于 JavaScript 的绘图 API，而SVG和VML使用一个XML文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。
五、img的alt和title有何区别
alt属性和title属性的区别是前者是在图片无法加载的时候才会显示的其值，而title是在图片正常加载鼠标划上去显示的值，虽然alt也有后者的功能，但是只是在低版本的ie浏览器才支持，高版本及标准浏览器不支持这个功能了。
六、表单的主要用途是什么，由几部分组成
表单的主要用途是：在网页中采集数据，完成服务器之间的数据传送。表单对于用户而言是数据的录入和提交的界面；表单对于网站而言获取用户信息的途径。
表单构成：表单由表单标签、表单域和表单按钮组成
a、表单标签：面包含了处理表单数据所用CGI程序的URL,以及数据提交到服务器的方法。
b、表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。
c、表单按钮：包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
七、表单提交中Get和Post方式的区别
(1)、get是从服务器上获取数据，post是向服务器传送数据。
(2)、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在 HTML HEADER内一起传送到ACTION属性所指的URL地址,用户看不到这个过程。
(3)、对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
(4)、get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB 。
(5)、get安全性低，post安全性较高。
八、HTML5 新增的表单元素有哪些
input的类型有email（自动验证email格式）
url（自动验证url格式）
number（只能输入数字）
range（类似音量滑动条）
Date pickers (date,month, week, time, datetime, datetime-local)（自带日期选择）
search（搜索域，类似百度的类似搜索提示）
color（颜色选择，这个现在不兼容大部分浏览器=-=）
datalist（自动验证内容是否在可选择选项中）
keygen
output
九、HTML5废弃了哪些HTML4元素
第一类：表现性元素basefont
big
center
font
s
strike
tt
u
建议用语义正确的元素代替他们，并使用CSS来确保渲染后的效果。
因框架有很多可用性及可访问性问题，HTML5规范将以下元素移除。
frame
frameset
noframes
但html5支持iframe。
很多表现性的属性也被新规范移除，如下：
align
body标签上的link、vlink、alink、text属性
bgcolor
height和width
iframe元素上的scrolling属性
valign
hspace和vspace
table标签上的cellpadding、cellspacing和border属性
header标签上的profile属性
链接标签a上的target属性
img和iframe元素的longdesc属性
abbr取代acronym（用于表示缩写）
object取代了applet
ul取代了dir
十、HTML5 标准提供了哪些新的 API
HTML5 提供的应用程序 API 主要有：
Media API
Text Track API
Application Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API
十一、HTML5有哪些类型的存储，区别是什么
存储类型有：HTML5的存储类型有：essionStorage和localStorage。
两者区别：sessionStorage属于session级别,只在当前域名内才有效，当浏览器窗口关闭，存入的值跟着也消失。
localStorage属于cookie级别，永久存在浏览器中。
十二、简单介绍一下消息推送与WebSocket
B/S架构的系统多使用HTTP协议，
HTTP协议的特点：
1、无状态协议
2、用于通过Internet发送请求消息和响应消息
3、使用端口接收和发送消息，默认为80端口底层通信使用Socket完成。
HTTP协议决定了服务器与客户端之间的连接方式，无法直接实现消息推送,有下面一些变相的解决办法：
01.轮询客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。
优点：后端程序编写比较容易。
缺点：请求中有大半是无用，浪费带宽和服务器资源。
实例：适于小型应用。
客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。
优点：在无消息的情况下不会频繁的请求，耗费资小。
缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。
实例：WebQQ、Hi网页版、Facebook IM 。
在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。
优点：消息即时到达，不发无用请求；管理起来也相对便。
缺点：服务器维护一个长连接会增加开销。
实例：Gmail聊天
在页面中内嵌入一个使用了Socket类的程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信，JavaScript在收到服务器端传送的信息后控制页面的显示。
优点：实现真正的即时通信，而不是伪即时。
缺点：客户端必须安装Flash插件；非 HTTP 协议，无法自动穿越防火墙。
实例：网络互动游戏。
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
特点:
a、事件驱动
b、异步
c、使用ws或者wss协议的客户端socket
d、能够实现真正意义上的推送功能
缺点：少部分浏览器不支持，浏览器支持的程度与方式有区别。
一、简述一下src与href的区别
href 表示超文本引用，在 link和a 等元素上使用。src 表示来源地址，指向外部资源所在位置，在 img、script、iframe 等元素上。
src 的内容，是页面的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。
src用于替换当前元素，href用于在当前文档和所引用的外部资源之间建立联系。
二、HTML5的标签有什么作用
a、使Web页面的开发规范统一，增强了语义。
b、使搜索引擎更加容易按照HTML5规则识别出有效的内容。
c、使Web页面更接近于一种数据字段和表。
三、不使用border如何画出1px高的线，在不同浏览器的不同模式下都能保持相同效果
方法如下：
<div style="height:1px;overflow:hidden;background:red">
</div>
四、谈谈你对canvas的理解
canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。标记和 SVG以及VML之间的一个重要的不同是，有一个基于 JavaScript 的绘图 API，而SVG和VML使用一个XML文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。
五、img的alt和title有何区别
alt属性和title属性的区别是前者是在图片无法加载的时候才会显示的其值，而title是在图片正常加载鼠标划上去显示的值，虽然alt也有后者的功能，但是只是在低版本的ie浏览器才支持，高版本及标准浏览器不支持这个功能了。
六、表单的主要用途是什么，由几部分组成
表单的主要用途是：在网页中采集数据，完成服务器之间的数据传送。表单对于用户而言是数据的录入和提交的界面；表单对于网站而言获取用户信息的途径。
表单构成：表单由表单标签、表单域和表单按钮组成
a、表单标签：面包含了处理表单数据所用CGI程序的URL,以及数据提交到服务器的方法。
b、表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。
c、表单按钮：包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
七、表单提交中Get和Post方式的区别
(1)、get是从服务器上获取数据，post是向服务器传送数据。
(2)、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在 HTML HEADER内一起传送到ACTION属性所指的URL地址,用户看不到这个过程。
(3)、对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
(4)、get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB 。
(5)、get安全性低，post安全性较高。
八、HTML5 新增的表单元素有哪些
input的类型有email（自动验证email格式）
url（自动验证url格式）
number（只能输入数字）
range（类似音量滑动条）
Date pickers (date,month, week, time, datetime, datetime-local)（自带日期选择）
search（搜索域，类似百度的类似搜索提示）
color（颜色选择，这个现在不兼容大部分浏览器=-=）
datalist（自动验证内容是否在可选择选项中）
keygen
output
九、HTML5废弃了哪些HTML4元素
第一类：表现性元素basefont
big
center
font
s
strike
tt
u
建议用语义正确的元素代替他们，并使用CSS来确保渲染后的效果。
因框架有很多可用性及可访问性问题，HTML5规范将以下元素移除。
frame
frameset
noframes
但html5支持iframe。
很多表现性的属性也被新规范移除，如下：
align
body标签上的link、vlink、alink、text属性
bgcolor
height和width
iframe元素上的scrolling属性
valign
hspace和vspace
table标签上的cellpadding、cellspacing和border属性
header标签上的profile属性
链接标签a上的target属性
img和iframe元素的longdesc属性
abbr取代acronym（用于表示缩写）
object取代了applet
ul取代了dir
十、HTML5 标准提供了哪些新的 API
HTML5 提供的应用程序 API 主要有：
Media API
Text Track API
Application Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API
十一、HTML5有哪些类型的存储，区别是什么
存储类型有：HTML5的存储类型有：essionStorage和localStorage。
两者区别：sessionStorage属于session级别,只在当前域名内才有效，当浏览器窗口关闭，存入的值跟着也消失。
localStorage属于cookie级别，永久存在浏览器中。
十二、简单介绍一下消息推送与WebSocket
B/S架构的系统多使用HTTP协议，
HTTP协议的特点：
1、无状态协议
2、用于通过Internet发送请求消息和响应消息
3、使用端口接收和发送消息，默认为80端口底层通信使用Socket完成。
HTTP协议决定了服务器与客户端之间的连接方式，无法直接实现消息推送,有下面一些变相的解决办法：
01.轮询客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。
优点：后端程序编写比较容易。
缺点：请求中有大半是无用，浪费带宽和服务器资源。
实例：适于小型应用。
客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。
优点：在无消息的情况下不会频繁的请求，耗费资小。
缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。
实例：WebQQ、Hi网页版、Facebook IM 。
在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。
优点：消息即时到达，不发无用请求；管理起来也相对便。
缺点：服务器维护一个长连接会增加开销。
实例：Gmail聊天
在页面中内嵌入一个使用了Socket类的程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信，JavaScript在收到服务器端传送的信息后控制页面的显示。
优点：实现真正的即时通信，而不是伪即时。
缺点：客户端必须安装Flash插件；非 HTTP 协议，无法自动穿越防火墙。
实例：网络互动游戏。
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
特点:
a、事件驱动
b、异步
c、使用ws或者wss协议的客户端socket
d、能够实现真正意义上的推送功能
缺点：少部分浏览器不支持，浏览器支持的程度与方式有区别。
 - Python实现)
