前端常见面试-html

前端常见面试-html

对WEB规范和W3C的理解认识

html

结构

css表现

js

行为

什么是DOCTYPE及作用

DTD〔documenttypedefinition，文档类型定义〕是一系列的语法规那么，用来定义XML或〔X〕HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析以及切换浏览器模式。〔DTD告诉浏览器我是什么文档类型，浏览器会根据这个来判断用什么引擎来解析和渲染他们〕

DOCTYPE是用来声明文档类型和DTD标准的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，则浏览器解析时会出一些错误。〔DOCTYPE告诉浏览器当前是哪个文档类型〕

Html5语义化与新特性

1、什么是HTML语义化？

表示选择适宜的标签〔语义化标签〕便于开发者阅读和写出更优雅的代码

2、为什么要使用语义化标签？

在没有CSS样式的情况下，页面整体也会呈现很好的结构效果

更有利于用户体验

更有利于搜索引擎优化

代码结构清晰，方便团队开发与维护

3、HTML5新特性有哪些？

语义化标签

音视频处理

canvas/webGL

historyAPI

requestAnimationFrame

地理位置

webSocket

行内元素与块级元素

1、行内元素的特点？

元素排在一行

只能包含文本或者其他内联元素

宽高就是内容宽高、设置宽高无效

2、块级元素的特点？

元素独自占一行

元素的宽高都可以设置

可以包含内联元素和其他块元素

为设置宽度时，默认宽度是它容器的100%

常见行内元素a、br、code、em、img、input...

常见块级元素div、p、dl、dt、form、h1~h6...

渐进增强与优雅降级的理解及区别

渐进增强〔ProgressiveEnhancement〕：

一开始就针对低版本浏览器进行构建页面，完成根本的功能，然后再针对高级浏览器进行效果、交互、追加功能到达更好的体验。

优雅降级〔GracefulDegradation〕：

一开始就构建站点的完整功能，然后针对浏览器测试和修复。比方一开始使用CSS3的特性构建了一个应用，然后逐步针对各大浏览器进行hack使其可以在低版本浏览器上正常浏览。

两者区别？

1、广义：

其实要定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级

2、狭义：

渐进增强一般说的是使用CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级那么是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。

例子：

.transition{/*渐进增强写法*/

-webkit-transition:all.5s;

-moz-transition:all.5s;

-o-transition:all.5s;

transition:all.5s;

}

.transition{/*优雅降级写法*/

transition:all.5s;

-o-transition:all.5s;

-moz-transition:all.5s;

-webkit-transition:all.5s;

}

cookie、sessionStorage、localStorage区别

相同点：

存储在客户端

不同点：

cookie数据大小不能超过4k；sessionStorage和localStorage的存储比cookie大得多，可以到达5M+

cookie设置的过期时间之前一直有效；localStorage永久存储，浏览器关闭后数据不丧失除非主动删除数据；sessio