1.对Web标准的理解和W3C的认识。
Web标准简单的将页面分为结构(HTML),样式(CSS),和行为(JavaScript),Web标准将其独立分开使其更具有模块化。
W3C对Web标准提出了规范化的要求,比如
① 对结构的要求:标签字母要小写,标签要闭合,标签不随意嵌套,这样有助于页面被搜索引擎的抓取,对SEO有很大的帮助。
② 对样式和行为的要求:要求尽量使用外链的样式表和脚本,做到页面的模块化,使用更少的代码和组件,这样使页面容易维护,改版方便,不需要变动页面内容2. Doctype的作用?严格模式和混杂模式的区别? 以及如何触发?
Doctype存在HTML页面代码的第一行(标签之前),用于告诉浏览器用什么样的Web标准来解析该页面。
严格模式是根据浏览器所支持的最高的标准来解析文档。混杂模式(兼容模式)页面会以宽松的向后兼容的模式被解析,会模拟老浏览器的的行为以防止站点无法工作。
页面如果包含完整的DOCTYPE 页面就是以严格模式来解析页面, 如果不写或者Doctype的格式错误会导致浏览器以兼容模式解析该页面。3. 为什么HTML5只用书写 ?
因为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
标准盒子模型包括content8. 行内元素有哪些? 块级元素有哪些?
行内元素: span img input textarea a input
块级元素: div h1~h6 ul ol p table dir9. 对浏览器内核的理解?以及常见的浏览器内核有哪些?
浏览器内核负责对网页语法的解释和渲染显示,不同浏览器对网页语法的解释和渲染有所不同,因此在编写页面时要在不同内核的浏览器中测试才行。
常见的浏览器内核有
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中唯一必须的元素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相关联的控件上
Number
//当点击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基于长轮询的 XHR21、iframe有哪些缺点?
会阻塞主页面的onload事件
搜索引擎无法解析这种页面,不利于SEO
会影响页面的并行加载
并行加载: 同一时间针对同一域名的请求
一般情况下iframe和所在页面在同一域下
解决方案:
使用js动态给iframe的src加载页面内容22、实现 不使用 border 画出 1px 高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果?
height:1px
overflow: hidden
background:#ccc23、实现在移动端的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)
}