史上最全HTML5面试题目汇总，高级前端晋升之View渲染机制

4、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

答案解析：

新特性，新增元素：

1）内容元素：article、footer、header、nav、section

2）表单控件：calendar、date、time、email、url、search

3）控件元素：webworker，websockt，Geolocation

移除元素：

1）显现层元素：basefont，big，center，font，s，strike，tt，u

2）性能较差元素：frame，frameset，noframes

处理兼容问题有两种方式：

1）IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

2）使用是html5shim框架

另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。

5、如何区分 HTML 和 HTML5？

答案解析：

1）在文档类型声明上不同：

HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。

2）在结构语义上不同：

HTML：没有体现结构语义化的标签，通常都是这样来命名的

，这样表示网站的头部。

HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：

6、简述一下你对HTML语义化的理解？

答案解析：

1）用正确的标签做正确的事情；

2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；

3）即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的；

4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；

5）使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。

7、HTML5的离线储存怎么使用，工作原理能不能解释一下？

答案解析：

localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 数据在浏览器关闭后自动删除。

8、iframe有那些缺点？

答案解析：

1）在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面；

2）框架结构有时会让人感到迷惑，页面很混乱；

9、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

答案解析：

1）<!Doctype>声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

2）严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

10、常见兼容性问题？

1）png24位的图片在IE6浏览器上出现背景；

解决方案是：做成PNG8；

2）浏览器默认的 margin 和 padding 不同。

解决方案是：加一个全局的*{margin:0;padding:0;}来统一。

3）IE6双边距bug：块属性标签float后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。浮动IE产生的双倍距离 #box{float:left;width:10px;margin:0 0 0 100px;} 这种情况下IE6会产生200px的距离。

解决方法：加上_display：inline，使浮动忽略

4）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性； Firefox下，只能使用getAttribute()获取自定义属性。

解决方法：统一通过getAttribute()获取自定义属性。

5）IE下，even对象有x，y属性，但是没有pageX，pageY属性，但是没有x，y属性；

解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

6）Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示

解决方法：可通过加入 CSS 属性 -webkt-text-size-adjust:none;解决

7）超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active ；

解决方法：改变CSS属性的排列顺序：L-V-H-A: a:link{ }  a:visited{ } a:hover{ } a:active{ }

11、如何实现浏览器内多个标签页之间的通信？

答案解析：

调用localstorge、cookies等本地存储方式

12、webSocket如何兼容低浏览器？

答案解析：

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR

13、支持HTML5新标签

答案解析：

1）IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式；

2）当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

14、如何区分：DOCTYPE 声明\新增的结构元素\功能元素，语义化的理解？

答案解析：

1）用正确的标签做正确的事情；

2）html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

3）在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的；

4）搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利用 SEO ；

5）使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

15、介绍一下 CSS 的盒子模型？

答案解析：

1）有两种，IE 盒子模型、标准 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；

2）盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）。

16、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有哪些？

答案解析：

1）id 选择器（#myid）

2）类选择器（.myclassname）

3）标签选择器（div，h1，p）

4）相邻选择器（h1 + p）

5）子选择器（ul > li）

6）后代选择器（li a）

7）通配符选择器（* ）

8）属性选择器（ a[rel = “external”]）

9）伪类选择器（a: hover, li: nth - child）

17、可继承的样式： font-size font-family color, UL LI DL DD DT

18、不可继承的样式：border padding margin width height

19、优先级就近原则，同权重情况下样式定义最近者为准

20、载入样式以最后载入的定位为准;

解析答案：优先级为: !important >  id > class > tag  ；   important 比 内联优先级高

21、CSS3新增伪类举例：

答案解析：

p:first-of-type   选择属于其父元素的首个

元素的每个

元素；

p:last-of-type   选择属于其父元素的最后

元素的每个

元素；

p:only-of-type  选择属于其父元素唯一的 

 元素的每个 

 元素；

p:only-child    选择属于其父元素的唯一子元素的每个 

 元素；

p:nth-child(2)  选择属于其父元素的第二个子元素的每个 

 元素；

:enabled  :disabled 控制表单控件的禁用状态；

:checked        单选框或复选框被选中。

22、如何居中div？ 如何居中一个浮动元素？

答案解析：

给div 设置一个宽度，然后添加 margin:0 auto 属性；div{width:200px; margin:0 auto; }

23、居中一个浮动元素

答案解析：

确定容器的宽高  宽500 高300的层，设置层的外边距

.div{width:500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:green；left：50%；头：50%}

24、css3有哪些新特性？

答案解析：

CSS3 实现圆角（border-radius:8px;），阴影（box-shadow:10px）,对文字加特效（text-shadow）,线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转，缩放，定位，倾斜

增加了更多的 css 选择器 多背景 rgba

25、为什么要初始化 CSS 样式

答案解析：

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法是：*{padding:0;margin:0} (不建议)

淘宝的样式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,

textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

并且后续会持续更新**

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-MPOwkz1y-1712015889296)]

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】