请求html源文档 get,前端面试准备之——HTML篇

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)

}