web前端常见面试题

多云转晴

发布于 2020-08-25 08:04:23

2.3K00

代码可运行

文章被收录于专栏：webTowerwebTower

运行总次数：0

代码可运行

1. 渐进增强与优雅降级

渐进增强 并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能（避免网页打不开、排版错误等），并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。

优雅降级 也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。

这两种思想的区别在于：

渐进增强是向上兼容，优雅降级是向下兼容；
渐进增强是从简单到复杂，优雅降级是从复杂到简单；
渐进增强关注的是内容（保证核心内容），优雅降级关注的是浏览体验（为了兼容低版本浏览器）

2. DOCTYPE

<!DOCTYPE html>
<html>
    <!-- ... -->
</html>

作用

DTD（Document Type Definition，文档类型定义）是一系列的语法规则，用来定义 XML 或 (X)HTML 的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。 DOCTYPE 是用来声明文档类型和 DTD 规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。

HTML5 的文档类型声明：

<!DOCTYPE html>

HTML 4.01 Strict（HTML 4.01 严格模式）的 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（如font），它的文档类型声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

标准模式与怪异模式

怪异模式（Quirks Mode）用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的 DOCTYPE 都会触发怪异模式。

浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。DOCTYPE 可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。

怪异模式与标准模式的主要区别：

怪异模式的宽度和高度会包含 padding 和 border。标准模式不包含，标准模式下可以通过设置 box-sizing: border-box 将标准盒模型转化成怪异模式下的盒模型。
怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。
怪异模式下，在表格中的字体样式（如 font-size ）不会继承。
怪异模式下颜色值必须使用十六进制标记法。

3. 语义化

HTML5 中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而 CSS 样式控制内容的呈现，像 <b> 元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。

优点

使得 HTML 文档结构清晰、布局合理、主体突出、可读性更强。
有利于 SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页。
有利于开发和维护，语义化更具可读性，代码更好维护，与 CSS3 关系更和谐。

语义化标签

<header> 定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器；
footer 内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息；
article 文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目；
nav 描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表；
section 表示文档中的一个区域（或节），比如，内容中的一个专题组；
main 定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站 logo，搜索框（搜索框作为文档的主要内容）；
aside 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

4. 超链接伪类

:link、:visited、:active 和 :hover 的声明顺序是怎样的？

:link 表示未访问的链接状态； :visited 表示已访问状态；:active 表示激活状态（鼠标按下）；:hover 表示悬停状态。

推荐顺序是 LVHA，即 :link :visited :hover :active。理由如下：

当鼠标悬停在未访问的链接上时，:link 和 :hover 都会命中，如果 :hover 在 :link 之前声明，那么(:hover)就会被覆盖；
当鼠标悬停在已访问的连接上时，:visited 和 :hover 都会命中，如果 :hover 在 :visited 之前声明，那么(:hover)就会被覆盖；
当鼠标单击链接时，:active 和 :hover 都会命中，我们大多是想让 :hover 只在悬停时展示样式，按下鼠标时使用 :active 样式，因此 :active 在 :hover 之后声明；
综上，:hover 应在 :link 和 :visited 之后，在 :active 之前，因此 active 在最后。而 :link 和 :visited 两者的顺序无所谓，互不影响。

5. CSS 常见的长度单位

CSS 中除了 px 长度单位之外，还有下面几个长度单位：

pc 六分之一英寸，1pc = 12pt = 1/6 * 1in = 16px；
pt 一磅，72 分之一英寸。1pt = 1/12 _ 1pc = 1/72 _ 1in ≈ 1.33px；
in 一英寸，1in = 2.54cm = 96px；
ex 在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex ≈ 0.5em；
em 1em 等于父级元素的字体大小，2em 就是父级元素字体大小的二倍；
rem 当用在根元素（<html>）的 font-size 上面时，它代表了它的初始值；
ch 代表元素所用字体 font 中“0”这一字形的宽度；
vh 1vh 相当于视口高度的 1%，100vh 就是视口的高度；
vw 1vw 相当于视口宽度的 1%，100vw 就是视口的宽度；
vmax 视口高度 vw 和宽度 vh 两者中的最小值
vmin 视口高度 vw 和宽度 vh 两种中的最大值；
% 相对于父级元素的大小来确定；

参考：CSS <length>[1]

CSS percentage[2]

6.事件对象

冒泡与捕获

事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。

在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：

浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它；
然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素；

而冒泡与捕获恰恰相反：

浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它；
然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素；

而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。

addEventListener 函数的第三个参数是个布尔值。含义：

当布尔值是 false 时（这也是默认值），表示向上冒泡触发事件；
当布尔值是 true 时，表示向下捕获触发事件；

不能冒泡的事件

有些事件是不会冒泡的。比如：

blur 元素失去焦点时触发，focusout 事件也是失去焦点时触发，但可以冒泡；
focus 元素获取焦点时触发；
mouseenter 鼠标移动到元素上时会触发该事件，与之对应的是 mouseover 事件，但会冒泡；
mouseleave 鼠标离开元素时触发，与之对应的是 mouseout，但会冒泡；

事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用 e.target 属性可以获取到当前触发事件的子元素。

事件对象中的方法

stopPropagation() 阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发；
preventDefault() 阻止默认事件的发生；
stopImmediatePropagation() 它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个 div 元素绑定多个 click 事件（使用 addEventListener 方法可以注册多个），当在第二个事件函数中调用 stopImmediatePropagation 方法时，点击 div 元素时，后面注册的 click 将不会被触发，而且还会阻止事件冒泡；

比如下面的例子，给 p 绑定多个 click 事件，在第二个事件函数中调用 stopImmediatePropagation，第三个 click 事件就不会触发，因为也阻止了冒泡，因此父元素的 click 事件也不会触发。

<div>
  <p>paragraph</p>
</div>

<script>
  document.querySelector("div").addEventListener("click", (event) => {
    alert("我是 div 元素,我是 p 元素的上层元素");
    // p元素的 click 事件没有向上冒泡，该函数不会被执行
  }, false);

  const p = document.querySelector('p')
  p.addEventListener("click", (event) => {
    alert("我是 p 元素上被绑定的第一个监听函数");
  }, false);

  p.addEventListener("click", (event) => {
    alert("我是 p 元素上被绑定的第二个监听函数");
    event.stopImmediatePropagation();
    // 执行 stopImmediatePropagation 方法，阻止click事件冒泡，并且阻止p元素上绑定的其他 click 事件的事件监听函数的执行.
  }, false);

  p.addEventListener("click", (event) => {
    alert("我是 p 元素上被绑定的第三个监听函数");
    // 该监听函数排在上个函数后面，该函数不会被执行
  }, false);

</script>

“在 IE 浏览器中，使用 e.cancelBubble = true 也可以取消事件冒泡；使用 e.returnValue = false 也能阻止默认事件的发生。

target 与 currentTarget

target 属性指向的是事件目标，而 currentTarget 属性指向的是正在处理当前事件的对象，它总是指向事件绑定的元素。而 target 指向的可能不是定义时的事件目标。

例如：

div.addEventListener('click', (e) => {
    console.log(e.target, e.currentTarget);
},false);

e.target 可能指向 div 元素，也可能指向它的子元素。而 e.currentTarget 总是指向 div 元素。

参考资料

[1]

CSS length: https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

[2]

CSS percentage: https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-08-22，如有侵权请联系 cloudcommunity@tencent.com 删除

css

jquery

html

html5

本文分享自 WebTower 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度