最全面、最详细web前端面试题及答案总结

最全面、最详细web前端面试题及答案总结

总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！

本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题
doctype的作⽤是什么？✨
DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个
⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析
⽂档解析类型有：
BackCompat：怪异模式，浏览器使⽤⾃⼰的怪异模式解析渲染⻚⾯。（如果没有声明DOCTYPE，默认就是这个模式）
CSS1Compat：标准模式，浏览器使⽤W3C的标准解析渲染⻚⾯。
IE8还有⼀种介乎于上述两者之间的近乎标准的模式，但是基本淘汰了。

这三种模式的区别是什么？

标准模式(standards mode)：⻚⾯按照 HTML 与 CSS 的定义渲染怪异模式(quirks mode)模式： 会模拟更旧的浏览器的⾏为
近乎标准(almost standards)模式： 会实施了⼀种表单元格尺⼨的怪异⾏为（与IE7之前的单元格布局⽅式⼀致）， 除此之外符合标准定义
HTML、XHTML、XML有什么区别？
HTML(超⽂本标记语⾔): 在html4.0之前HTML先有实现再有标准，导致HTML⾮常混乱和松散
XML(可扩展标记语⾔): 主要⽤于存储数据和结构，可扩展，⼤家熟悉的JSON也是相似的作⽤，但是更加轻量⾼效，所以XML现在市场越来越⼩了
XHTML(可扩展超⽂本标记语⾔): 基于上⾯两者⽽来，W3C为了解决HTML混乱问题⽽⽣，并基于此诞⽣了
HTML5，开头加⼊ 的做法因此⽽来，如果不加就是兼容混乱的HTML，加了就是标准模式。
什么是data-属性？
HTML的数据属性，⽤于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它，来达到操作数据的⽬的。
前端框架出现之后，这种⽅法已经不流⾏了
你对HTML语义化的理解？✨
语义化是指使⽤恰当语义的html标签，让⻚⾯具有良好的结构与含义，⽐如

标签就代表段落，

代表正⽂内容等等。
语义化的好处主要有两点：
开发者友好：使⽤语义类标签增强了可读性，开发者也能够清晰地看出⽹⻚的结构，也更为便于团队的开发和维护机器友好：带有语义的⽂字表现⼒丰富，更适合搜索引擎的爬⾍爬取有效信息，语义类还可以⽀持读屏软件，根据
⽂章可以⾃动⽣成⽬录
这对于简书、知乎这种富⽂本类的应⽤很重要，语义化对于其⽹站的内容传播有很⼤的帮助，但是对于功能性的web软件重要性⼤打折扣，⽐如⼀个按钮、Skeleton这种组件根本没有对应的语义，也不需要什么SEO。