Web前端面试常见面试问题汇总
1.渐进增强和优雅退化
渐进增强
它不是一种技术，而是一种设计理念。每个浏览器的渲染能力都不一样，所以几乎不可能做出一个网页和体验都一样，大家都能看到的网站。但应保证网站的可访问性，以保证用户在任何环境下都能正常访问网页的核心内容或使用基本功能(防止网页被打开、打字错误等。)并为他们提供当前条件下的最佳体验。这是逐渐增强的核心思想。
优雅的降级也是一种设计思路。为了保证在高版本浏览器中的最佳体验，我们应该降级低版本浏览器的兼容性，使其能够正常浏览。
这两种想法的区别在于:
1.渐进增强是向上兼容，优雅退化是向后兼容；
2.渐进增强是由简单到复杂，优雅退化是由复杂到简单；
3.渐进增强侧重于内容(保证核心内容)，优雅退化侧重于浏览体验(为了兼容较低版本的浏览器)。
2.文档类型
功能
DTD(DocumentTypeDefinition)是一系列用于定义XML或(X)HTML的语法规则。
的文档类型。浏览器将使用它来确定文档类型，决定解析哪个协议，以及切换浏览模式。
DOCTYPE用于声明文档类型和dtd。
规范性，主要目的之一是验证文件的合法性。如果文档代码不合法，浏览器解析时会出现一些错误。
HTML5的文档类型声明:
HTML 4.01 strict(HTML 4.01 strict模式)的DTD包含所有HTML。
元素和属性，但不包括可公开和不推荐使用的元素(如font)，其文档类型声明:
-//W3C//dtdxhtml 1.0 strict//EN "
" http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-strict . DTD " & gt；
标准模式和怪异模式
怪异模式(怪癖
模式)用于模拟旧浏览器的行为。早期的网站没有遵循完整的规范。随着浏览器支持越来越多的规范，在那些老浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了奇怪的模式，其中一行是错误的或无效的。
DOCTYPE会触发怪异模式。
浏览器使用文件开头的DOCTYPE来决定是以怪异模式还是标准模式进行处理。文档类型
您可以确保不同的浏览器以相同的方式解析文档，并执行相同的呈现模式。
怪异模式和标准模式的主要区别:
1.怪异模式的宽度和高度将包括填充和边框。它不包括在标准模式中。在标准模式下，您可以设置盒子大小:
Border-box将标准的盒子模型转换为怪异模式下的盒子模型。
2.在怪异模式下，当内容超过容器高度时，容器会被拉伸而不是溢出。
3.在怪异模式下，表格中的字体样式(如字体大小)不会被继承。
4.怪异模式下的颜色值必须使用十六进制表示法。
3.语义化
HTML5
中的语义化是为了使元素、属性或属性值有意义，更准确地标记特定类型的内容。语义化元素的目的是分离元素的语义和表示。元素只负责文档内容的结构和含义，而CSS
样式控制内容的表示，如元素，没有语义，但可以加粗字体。这样的元素违背了语义的目的，将被抛弃。
优势
使HTML文档结构清晰，布局合理，主题突出，可读性更强。
有利于SEO，搜索引擎根据标签确定上下文和每个关键词的权重。
方便其他设备解析，比如盲人阅读器根据语义渲染网页。
有利于开发和维护，语义更易读，代码更好维护，与CSS3的关系更和谐。
语义标签
定义文档的页眉区域，该区域应作为介绍内容的容器或导航链接栏；
页脚内容，通常包含章节作者、版权数据或与文档相关的链接等信息；
文章
文档、页面、应用程序或网站中的独立结构是可独立分发和重用的结构。例如，在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件或其他独立的内容项目；
nav描述了一个有多个超链接的区域，其中包含一个链接列表，这些链接可以跳转到其他页面或页面内的其他部分；
Section代表文档中的一个区域(或节)，例如，内容中的一个主题组；
Main定义了文档的主要内容，这些内容在文档中应该是唯一的，并且不包含任何在文档中重复的内容，比如侧栏、导航栏链接、版权信息和网站。
Logo，搜索框(搜索框是文档的主要内容)；
在旁边
表示与页面其余内容关系不大的部分，被认为是独立于内容的一部分，可以单独分离而不影响整体。它通常以侧边栏或嵌入内容的形式出现。
4.超链接伪类
链接、访问、活动和悬停的声明顺序是什么？
:link表示未访问过的链接状态；
:已访问表示已访问状态；:active表示活动状态(鼠标按下)；:悬停表示悬停状态。
推荐顺序是LVHA，即:链接:已访问:悬停:活动。原因如下:
当鼠标悬停在未访问的链接上时，如果:hover在:link中，则:link和:hover都将被点击。
之前声明，那么(:hover)会被覆盖；
当鼠标悬停在已访问的连接上时，如果:hover在:visited中，则:visited和:hover都将被点击。
之前声明，那么(:hover)会被覆盖；
当鼠标点击链接时,: active和:hover都将被点击。我们大多数人希望:hover只在悬停时显示样式，而使用:active在按下鼠标时。
风格，所以:active是在:hover之后声明的；
综上所述，:hover应该在:link and:visited and before:active，所以active在最后。和:链接和
:两者的参观顺序无关紧要，互不影响。
5.常用长度单位为5。半铸钢ˌ钢性铸铁(Cast Semi-Steel)
除了px长度单位，CSS中还有以下长度单位:
六分之一寸PC，1pc = 12pt = 1/6 * 1in = 16px；
1磅，72英寸。1pt = 1/12 _ 1pc = 1/72 _ 1in≈1.33 px；
一英寸中，1in = 2.54cm = 96px；
Ex在带有字母“X”的字体中，它是该字体小写字母的高度。对于很多字体，1ex≈0.5 em；
em1em等于父元素的字号，2em是父元素字号的两倍；
rem，当用在根元素的font-size()上时，代表它的初始值；
Ch表示元素使用的字体中“0”的宽度；
vh1vh相当于视口高度的1%，100vh为视口高度；
vw1vw相当于视口宽度的1%，100vw为视口宽度；
vmax视口高度vw和宽度vh的最小值。
vmin视口的高度vw和宽度vh的最大值；
%是相对于父元素的大小确定的；
参考:CSS[1]
CSSpercentage[2]
6.事件对象
冒泡捕捉
事件冒泡和捕获是事件处理的两种机制，主要描述在一个元素上激活两个相同类型的事件处理程序会发生什么。
当单击子元素时，浏览器运行两个不同的阶段:捕获阶段和冒泡阶段。捕获阶段的行为:
浏览器检查元素的最外层祖先是否在捕获阶段注册了onclick事件处理程序，如果是，就运行它；
然后，它移动到该元素的下一个祖先元素并执行相同的操作，然后它单击该元素，然后单击下一个祖先元素，以此类推，直到它到达实际单击的元素；
冒泡和捕捉正好相反:
浏览器检查实际点击的元素是否在冒泡阶段注册了onclick事件处理程序，如果是，就运行它；
然后，它移动到下一个直接祖先元素并做同样的事情，然后下一个，以此类推，直到它到达该元素；
在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段注册。所以当点击子元素时，上面的代码会先执行子元素绑定的事件，然后冒泡上来触发父元素绑定的事件。
addEventListener函数的第三个参数是一个布尔值。含义:
当布尔值为假(这也是默认值)时，意味着向上的气泡触发了事件；
当布尔值为真时，表示向下捕捉到触发事件；
不能冒泡的事件
有些事件不会冒泡。例如:
模糊元素失焦时触发，失焦时也触发focusout事件，但可以冒泡；
当焦点元素获得焦点时触发；
鼠标移动到元素时mouseenter会触发这个事件，对应的是mouseover事件，但是会冒泡；
鼠标离开元素时触发mouseleave，对应mouseout，但会冒泡；
事件冒泡允许我们利用事件委托，尤其是在处理大量子元素时。如果我们将事件绑定到每个子元素，这并不优雅。我们可以将事件绑定到父元素，让子节点上发生的事件冒泡到父节点，并使用。
e.target属性可以获取当前触发事件的子元素。
事件对象中的方法
stopPropagation()防止事件冒泡。设置时，点击元素时不会触发父元素绑定的事件；
preventDefault()防止默认事件的发生；
stopImmediatePropagation()它用于防止监听同一个事件的其他事件监听器被调用，防止事件冒泡，比如给同一个div。
元素绑定多个click事件(可以使用addEventListener方法注册多个事件)。
StopImmediatePropagation方法，当点击div元素时，后面注册的点击不会被触发，也会阻止事件冒泡；
例如，在下面的示例中，将多个click事件绑定到P，在第二个事件函数中调用stopImmediatePropagation，然后单击第三个事件。
该事件不会触发，因为冒泡也被阻止，所以父元素的click事件不会触发。
段落
文档。Queryselector ("div ")。AddEvent Listener ("click "，(event) = > {alert("我是一个div元素，我是一个p元素的上层元素")；//p元素的click事件不冒泡，函数不会执行}，false)；constp = document . query selector(' p ')p . addevent listener(" click "，(event) = > {alert("我是第一个绑定在p元素上的侦听器函数")；}，假)；P.addeventlistener ("click "，(event) = > {alert("我是绑定在p元素上的第二个监听器函数")；event . stop immediate propagation()；//执行stopImmediatePropagation方法，防止click事件冒泡，并防止绑定在p元素上的其他click事件的事件侦听器函数的执行。}，假)；P.addeventlistener ("click "，(event) = > {alert("我是绑定在p元素上的第三个监听器函数")；//这个监听函数排在前一个函数之后，不会执行这个函数}，false)；
"
在IE浏览器中，还可以使用e.cancelBubble=true取消事件冒泡；使用e.returnValue=false。
它还可以防止默认事件的发生。
目标和当前目标
target属性指向事件目标，而currentTarget属性指向正在处理当前事件的对象，该对象始终指向由事件绑定的元素。和目标
它在定义时可能不指向事件目标。
例如:
div.addEventListener('click '，(e)= & gt；{
console.log(e.target，e . current target)；
}，假)；
E.target可以指向一个div元素或其子元素。E.currentTarget总是指向div元素。
以上是边肖今天为大家分享的关于参加前端Web面试常见面试问题的总结。希望这篇文章能对准备参加前端面试的朋友有所帮助。如果想了解更多前端Web知识，记得关注官网，北大青鸟前端Web的培训。最后，祝朋友们工作顺利，成为一名优秀的前端Web工程师。
参考数据
[1]
CSS length:#/zh-CN/docs/Web/CSS/length
[2]
CSS百分比:
#/zh-CN/docs/Web/CSS/percentage