2020年web前端最全面试题目及答案
HTML篇
1,doctype的作用是什么
DOCTYPE是html5标准网页声明,且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档,不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析
文档解析类型有:
BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。(如果没有声明DOCTYPE,默认就是这个模式)
CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。
IE8还有一种介乎于上述两者之间的近乎标准的模式,但是基本淘汰了。
2, 这三种模式的区别是什么?
标准模式(standards mode):页面按照 HTML 与 CSS 的定义渲染
怪异模式(quirks mode)模式: 会模拟更旧的浏览器的行为
近乎标准(almost standards)模式: 会实施了一种表单元格尺寸的怪异行为(与IE7之前的单元格布局方式一致),除此之外符合标准定义
3, HTML、XHTML、XML有什么区别
HTML(超文本标记语言): 在html4.0之前HTML先有实现再有标准,导致HTML非常混乱和松散
XML(可扩展标记语言): 主要用于存储数据和结构,可扩展,大家熟悉的JSON也是相似的作用,但是更加轻量高效,所以XML现在市场越来越小了
XHTML(可扩展超文本标记语言): 基于上面两者而来,W3C为了解决HTML混乱问题而生,并基于此诞生了HTML5,开头加入<!DOCTYPE html>的做法因此而来,如果不加就是兼容混乱的HTML,加了就是标准模式。
4, 什么是data-属性?
HTML的数据属性,用于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它,来达到操作数据的目的。
5, 你对HTML语义化的理解?
语义化是指使用恰当语义的html标签,让页面具有良好的结构与含义,比如<p>标签就代表段落,<article>代表正文内容等等。
语义化的好处主要有两点:
开发者友好:使用语义类标签增强了可读性,开发者也能够清晰地看出网页的结构,也更为便于团队的开发和维护
机器友好:带有语义的文字表现力丰富,更适合搜索引擎的爬虫爬取有效信息,语义类还可以支持读屏软件,根据文章可以自动生成目录
这对于简书、知乎这种富文本类的应用很重要,语义化对于其网站的内容传播有很大的帮助,
但是对于功能性的web软件重要性大打折扣,比如一个按钮、Skeleton这种组件根本没有对应的语义,也不需要什么SEO。
6, HTML5与HTML4的不同之处
文件类型声明(<!DOCTYPE>)仅有一型:<!DOCTYPE HTML>。
新的解析顺序:不再基于SGML。
新的元素:section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。
input元素的新类型:date, email, url等等。
新的属性:ping(用于a与area), charset(用于meta), async(用于script)。
前端响应式布局●全域属性:id, tabindex, repeat。
新的全域属性:contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
移除元素:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt
7有哪些常用的meta标签?