1.对Web标准的理解和W3C的认识。
Web标准简单的将页面分为结构（HTML）,样式（CSS），和行为（JavaScript），Web标准将其独立分开使其更具有模块化。
W3C对Web标准提出了规范化的要求，比如
① 对结构的要求：标签字母要小写，标签要闭合，标签不随意嵌套，这样有助于页面被搜索引擎的抓取，对SEO有很大的帮助。
② 对样式和行为的要求：要求尽量使用外链的样式表和脚本，做到页面的模块化，使用更少的代码和组件，这样使页面容易维护，改版方便，不需要变动页面内容
2. Doctype的作用？严格模式和混杂模式的区别? 以及如何触发？
Doctype存在HTML页面代码的第一行（<html>标签之前），用于告诉浏览器用什么样的Web标准来解析该页面。
严格模式是根据浏览器所支持的最高的标准来解析文档。混杂模式（兼容模式）页面会以宽松的向后兼容的模式被解析，会模拟老浏览器的的行为以防止站点无法工作。
页面如果包含完整的DOCTYPE 页面就是以严格模式来解析页面， 如果不写或者Doctype的格式错误会导致浏览器以兼容模式解析该页面。
3. 为什么HTML5只用书写<!DOCTYPE HTML> ?
因为HTML5不是基于SGML，因此不需要对DTD进行引用，但是要用DOCTYPE来规范浏览器的行为
而HTML4.0是基于SGML， 因此需要对DTD的引用，才能让浏览器知道该文档所使用的文档类型。
4. 描述从输入网址到显示网页的过程
1、浏览器输入网址
2、DNS服务器解析相应的域名：一般是本机的DNS服务器先解析，如果没有就请求上级DNS服务器中解析，直到得到相应的Web服务器的IP地址
3、浏览器与服务器建立TCP连接（两次握手）
4、浏览器向服务器发送HTTP请求
5、服务器响应浏览器的请求，查找资源并返回响应报文（包括状态码200,300,400,500等）
6、服务器返回相应的HTML源文件
7、服务器与客户端断开TCP连接（4次挥手）
8、浏览器得到相应的资源开始进行解析，构建DOM树，渲染DOM树，绑定事件的等页面显示完成。
5. HTTP1.1和HTTP2的区别
1、HTTP 2.0 采用二进制格式并非文本格式
2、HTTP 2.0 是完全多路复用
3、使用报头压缩，降低了HTTP/2的开销
4、HTTP/2 可以让服务器的响应主动推送到客户端缓存中
6. HTML和XHTML的区别？
HTML是web网页设计语言，XHTML是基于XML的置标语言
XHTML元素必须被正确嵌套，正确关闭，标签必须小写，必须有根元素。
7. 盒子模型
分为IE盒子模型和标准盒子模型 （content border padding margin）
IE盒子模型包括conent、border 和 padding
标准盒子模型包括content
8. 行内元素有哪些? 块级元素有哪些？
行内元素： span img input textarea a input
块级元素： div h1~h6 ul ol p table dir
9. 对浏览器内核的理解？以及常见的浏览器内核有哪些？
浏览器内核负责对网页语法的解释和渲染显示，不同浏览器对网页语法的解释和渲染有所不同，因此在编写页面时要在不同内核的浏览器中测试才行。
常见的浏览器内核有
IE浏览器的 Trident
Opera Chrome 使用webkit内核
IE Edge浏览器使用 EdgeHtml内核
10. CSS引入方法有哪些？ link 和 @import 有什么区别？
页面内使用css的方式有： 行内嵌入式 页面头部内嵌套 外面链接调用
外部链接有两种方式：link 和 @import
两者的区别：link是XHTML的标签，不仅可以引入CSS外，还可以定义RSS服务
@import是属于CSS范畴，只能引入CSS文件
link引入的文件在页面的加载同时加载，而@import的CSS必须在页面加载完后才能加载
link引入的样式支持JS的DOM操作更改样式（即通过更改link的src属性，来达到更换css样式表），而@import引入的样式不可以更改。
11. 简述你对HTML语义化的理解
1、HTML语义化可以让页面的内容结构化，结构清晰，有利于浏览器和搜索引擎的解析
2、在没有CSS样式的情况下，以文档的形式展示出来，并且是便于理解的
3、有利于阅读源码人员的理解，方便以后的维护，更新。
4、搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；
12、form表单的readonly 和 disabled属性的区别？
readonly是用户只能看，不能更改，但是会随表单提交
disabled是input元素在加载时禁用，不会随着表单提交
但二者都可以通过js脚本更改value值。
13、<head>标签中唯一必须的标签是？
下面这些标签可用在 head 部分：：<base> <meta> <script> <link> <style> <title>,, 以及。,, 以及。
<title>定义文档的标题，是head中唯一必须的元素
14、HTML5 新增了哪些特性？ 如何处理HTML5新标签的兼容问题？
H5 新增了article section nav footer header； date time search email calender； canvas audio video； localStorge sessionStorge
使用html5shim框架， 对于IE6/7/8 通过document. 产生标签
如何分辨HTML5？ 通过声明，或者标签。
15、HTML5的离线存储怎么用？
在用户没有连接英特网时，可以正常访问站点和应用；在用户连接英特网时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的 ‘.appcache’文件的缓存机制（并非存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来。之后当网络处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
使用方法：(1) 在页面头部像下面一样加入一个 manifest 的属性；
(2) 在 cache.manifest文件里编写离线存储资源；
CACHE MANIFEST#v0.11CACHE：
js/app.js
css/style.css
(3) 在离线状态时，操作 window.applicationCache进行需求实现；
16、浏览器怎么对HTML5的离线存储资源进行管理和加载呢？
在线情况下，浏览器检测html5文件头部是否有mainfest属性，如果有就请求mainfest文件，如果是第一次访问，就会根据mainfest文件的内容下载相应的资源并且进行离线存储， 如果已经访问过并且相应的资源已经离线存储，那么就调用相应的离线资源加载页面，然后浏览器会对比新的mainfest文件和就得mainfest文件，如果发生改变，就将重新下载文件中资源进行离线缓存
如果是离线情况就直接调用mainfest文件对应的资源。
17、cookies、sessionStorge、 localStorge的区别？
cookies的大小只有4k，每次http请求都会发送，可以规定cookies的生命时间，即在规定时间内清除，默认是每次页面关闭的时候清除
sessionStorge的大小有5M， 在浏览器关闭的时候清除， 不参与服务器通信
localStorge的大小有5M,会一直存在，不会清除除非手动清除， 不参与服务器通信
cookies通过domain文件和path/路径 能达到文档源级别
sessionStorge、localStorge是文档源级别即同源窗口共享
但sessionStorge在不同浏览器的同一个窗口不能共享
文档源级别是 协议、主机名、端口一样
18、Label 的作用是什么？ 怎么使用？
label标签是来扩大表单控件的点击范围，本身没有任何样式，当点击label标签的时候，会自动将焦点转到与label相关联的控件上
<lable name="number">Number </lable>
<input id= "number" type="text">
//当点击label标签时，焦点转到input标签上
19、如何实现浏览器内多个标签页之间的通信？
1 使用localStorge
localStorge.setItem(key, value) //给localStorge添加内容
localStorge.getItem(key)//获取localStorge中的内容
在两一个页面进行
window.addEventListener("storge", function(event){
console.log(event.key + "=" + event.newValue);
})
2 使用cookies 和 setInterval
document.cookies="name="+name;
setInterval(function(){
JSON.parse("{\"+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim,"\":\"") +"\"}")[key];
}, 1000);
20、 webSocket 如何兼容低浏览器？
AdobeFlash
SocketActiveXHTMLFile（IE）
基于multipart编码
发送 XHR基于长轮询的 XHR
21、iframe有哪些缺点？
会阻塞主页面的onload事件
搜索引擎无法解析这种页面，不利于SEO
会影响页面的并行加载
并行加载： 同一时间针对同一域名的请求
一般情况下iframe和所在页面在同一域下
解决方案：
使用js动态给iframe的src加载页面内容
22、实现 不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果？
height:1px
overflow: hidden
background:#ccc
23、实现在移动端的border为1px
.content:after{
position:absolute;
content: " ";
left: 0
top: 0
width:100%;
border: 1px solid #ccc;
}
@media(-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){
.content:after{
-webkit-transform: scaleY(0.7)
transform:scaleY(0.7)
}
@media(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2){
.content:after{
-webkit-transform: scaleY(0.5)
transform:scaleY(0.5)
}
网友评论