フロントエンド インタビュー シリーズの第 1 章 - HTML と CSS

少し前に、定型エッセイやアルゴリズムなど、フロントエンド面接に関する知識をまとめました。みんなでシェアしましょう！コラムにも注目、関連記事も続々公開予定！

注: 要約のほとんどはインターネット情報から来ています。要約するときに出典に注意を払っていなかったため、侵害がある場合はご連絡ください。

HTML

HTML、XML、XHTML の違いは何ですか?

• HTML (HyperText Markup Language) はハイパーテキスト マークアップ言語であり、主に Web ページの表示方法を指定するために使用されます。
• XML (Extensible Markup Language) は拡張可能なマークアップ言語であり、将来の Web 言語の開発方向です。XML と HTML の最大の違いは、XML タグは自分で作成でき、数に制限がないのに対し、HTML タグは固定であることです。そして数に限りがございます。
• XHTML (Extensible Hypertext Markup Language) も、現在ほとんどすべての Web ページで使用されているマークアップ言語です。実際、HTML と本質的な違いはありません。タグも使用方法も同じです。HTML よりも厳密です。たとえば、タグは小文字にする必要があり、タグには終了タグが必要です。などです。

DOCTYPE（文書タイプ）の役割

• <!DOCTYPE>宣言は通常、ドキュメントの最初の行に配置され、その主な機能はドキュメントを解析するためにどのモードを使用するかをブラウザに指示することです。
• 通常、指定した後、ドキュメントは標準モードで解析され、それ以外の場合は互換モードで解析されます。
• 標準モードでは、ブラウザの解析ルールはすべて最新の標準に従って解析されます。
• 互換モードでは、ブラウザーは下位互換性のある方法で古いブラウザーの動作をシミュレートし、一部の古い Web サイトに正しくアクセスできるようにします。

標準モードと互換モードの違いは何ですか?

• 標準モードのレンダリング方法と JS エンジンの解析方法は、どちらもブラウザーでサポートされる最高の標準で実行されます。
• 互換モードでは、ページは緩和された下位互換性のある方法で表示され、サイトが壊れるのを防ぐために古いブラウザの動作をシミュレートします。
• 具体的な違いについては、例を示します: ボックス モデル
  • 厳密モードの場合: width はコンテンツの幅です content = width;
  • 互換モードの IE ボックス モデル: コンテンツは = 幅 + パディング + ボーダーです

HTML セマンティクスの理解

• 语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。
• 优点
  • 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
• 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。
• 常见的语义化标签
• <header></header> 头部 <nav></nav> 导航栏<section></section> 区块（有语义化的div） <main></main> 主要区域 <article></article> 主要内容 <aside></aside> 侧边栏 <footer></footer> 底部

JavaScript脚本延迟加载的方式有哪些？

• js 的加载、解析和执行会阻塞页面的渲染过程，因此我们希望 js 脚本能够尽可能的延迟加载，提高页面的渲染速度。
• 方法：
  • 第一种方式是我们一般采用的是将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。
  • 第二种方式是给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。
  • 第三种方式是给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。
  • 第四种方式是动态创建 DOM 标签的方式，我们可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。

常⽤的meta标签有哪些

• <meta> 元素标签是提供有关HTML文档的元数据，元数据不会显示在页面上，但是能够被机器识别。

• 总而言之, meta 标签是用来让机器识别的，同时它对 SEO 起着重要的作用。

• 详细

  • charset。指定了html文档的编码格式，常用的是utf-8(Unicode的字符编码)

  • name & content。指定元数据的名称和内容。

    • <meta name="author" content="Tony">
    • …（可举更多例子）

在 meta 中设置 viewport 是什么意思？（一般会结合移动端布局进行考察）

• Viewport，适配移动端，可以控制视口的大小和比例：
  • <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
• 其中，content 参数有以下几种：
  • width viewport ：宽度(数值/device-width)
  • height viewport ：高度(数值/device-height)
  • initial-scale ：初始缩放比例
  • maximum-scale ：最大缩放比例
  • minimum-scale ：最小缩放比例
  • user-scalable ：是否允许用户缩放(yes/no）

HTML5有哪些更新

• 新特性
  • （1）新增语义化标签：nav、header、footer、aside、section、article
  • （2）音频、视频标签：audio、video
  • （3）数据存储：localStorage、sessionStorage
  • （4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
  • （5）input标签新增属性：placeholder、autocomplete、autofocus、required
  • （6）history API：go、forward、back、pushstate
• 移除
  • 纯表现的元素：basefont，big，center，font, s，strike，tt，u
  • 对可用性产生负面影响的元素：frame，frameset，noframes

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

• 行内元素有：a b span img input select strong；
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
• 空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：
  • 常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
  • 鲜见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

说一下 web worker

• 概念
  • 在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
• 如何创建 web worker
  • 检测浏览器对于 web worker 的支持性。
  • 创建 web worker 文件（js，回传函数等）。
  • 创建 web worker 对象。

iframe 有那些优点和缺点？

• 优点：
  • 用来加载速度较慢的内容（如广告）
  • 可以使脚本可以并行下载
  • 可以实现跨子域通信
• 缺点：
  • iframe 会阻塞主页面的 onload 事件
  • 无法被一些搜索引擎索识别
  • 会产生很多页面，不容易管理

渐进增强和优雅降级之间的区别

• 渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。
• 优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。
• 两者区别：
  • 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
  • 降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带

说一下 HTML5 drag API（可能会结合具体的系统设计题查考）

• dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
• darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
• dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
• dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
• dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
• drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
• dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

CSS

CSS 选择器有哪些？

• （1）id选择器（#myid）
• （2）类选择器（.myclassname）
• （3）标签选择器（div,h1,p）
• （4）后代选择器（h1 p）
• （5）相邻后代选择器（子）选择器（ul>li）
• （6）兄弟选择器（li~a）
• （7）相邻兄弟选择器（li+a）
• （8）属性选择器（a[rel="external"]）
• （9）伪类选择器（a:hover,li:nth-child）
• （10）伪元素选择器（::before、::after）
• （11）通配符选择器（*）

CSS 选择器优先级

• 为了给选择器进行优先级比较，我们对每种选择器都分配了权重
  • !impotant 权重为正无穷
  • 行内样式 权重为 1000
  • ID选择器 权重为 100
  • 类选择器/伪类选择器/属性选择器 权重为 10
  • 标签选择器 权重为 1
  • 通配符选择器/子类选择器/兄弟选择器 权重为 0
  • 继承的样式没有权重
• 总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

display 有哪些值？说明他们的作用。

• block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
• none 元素不显示，并从文档流中移除。
• inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
• inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
• list-item 像块类型元素一样显示，并添加样式列表标记。
• table 此元素会作为块级表格来显示。
• inherit 规定应该从父元素继承display属性的值。

伪类和伪元素选择器有什么区别

• 伪类，更多的定义的是状态。常见的伪类有
  • :hover，:active，:focus，:visited，:link，:not，:first-child，:last-child等等。
• 伪元素，不存在于DOM树中的虚拟元素，它们可以像正常的html元素一样定义css，但无法使用JavaScript获取。常见伪元素有
  • ::before，::after，::first-letter，::first-line等等。
• CSS3明确规定了，伪类用一个冒号(:)来表示，而伪元素则用两个冒号(::)来表示。但目前因为兼容性的问题，它们的写法可以是一致的，都用一个冒号(:)就可以了，所以非常容易混淆。

在 a 元素中有四种伪类状态，为什么它们的使用顺序很重要

• A标签有四种状态：

  • 链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类
  • :link、:visited、:hover、:active

• 当链接未访问过时：

  • （1）当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；
  • （2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。

• 当链接访问过时，情况基本同上，只不过需要将:link换成:visited。

盒子模型

• 盒模型都是由四个部分组成的，分别是 margin、border、padding和content。
• 标准盒模型和IE盒模型的区别在于设置 width 和 height 时，所对应的范围不同。标准盒模型的 width 和 height 属性的范围只包含了 content，而IE盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。
• 一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。它的值可以设置如下：
  • content-box
  • border-box

Px、em、rem、vh、vw的区别及使用场景

• 区别

  • px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
  • em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
  • em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。

• 使用场景

  • 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可 。
  • 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

居中布局

• （1）我们可以利用margin:0 auto来实现元素的水平居中。
• （2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。
• （3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。
• （4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。
• （5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。
• （6）grid 布局 justify-content: center; align-content: center;
• More…

对于宽高固定的元素，上面的方法均适用。对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

隐藏元素的方法有哪些

• display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
• visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
• opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
• position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
• z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
• clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
• transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

display:none 与 visibility:hidden 的区别

• 在渲染树中

  • Display:none 会让元素完全从渲染树中消失，渲染时不会占据任何空间；
  • visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

• 是否是继承属性

  • Display:none 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示
  • visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；

• 性能相关：修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；

• 如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。

两列自适应布局

• 两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式
• float+overflow:hidden
• flex 布局。在右侧设置 flex:1;
• grid 布局。父元素设置 grid-template-columns:auto 1fr;
• More Link

三列自适应布局

• Flex-box布局：这也是目前最为流行的布局，也是大部分人工作中用的最多的布局了，flex布局实现三栏布局的方法很简单，给外层盒子使用display:flex 里面的盒子左右300px，中间flex为1即可
• 圣杯布局（浮动 + 负边距 ）：三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面，父级盒子设置左右padding，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开。
• 双飞翼布局的实现方案：三个盒子对应三个元素，其中中间盒子套了两层，中间盒子内部盒子设置margin,三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开
• Grid 布局：grid-template-columns: 300px auto 300px;
• Table
• 浮动 + margin
• Link

注：一些 CSS 实战布局，还是可以看牛客网中的一个训练。其中后面就有两列布局和三列布局。

BFC

• 块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

• 通俗解释：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

• BFC 怎么形成？

  • 根元素，即HTML元素
  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position的值为absolute或fixed

• BFC 应用场景？

  • 可以包含浮动元素——清除内部浮动
  • 分属于不同的BFC时可以阻止margin重叠。属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。
  • 自适应两栏布局。我们可以通过通过给main设置overflow：hidden来触发main生成BFC， 当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。从而实现自适应两栏布局。

清除浮动

• 浮动解释：

  • 浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。
  • 浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。
  • 此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

• 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

• 如何清除浮动：清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

  • 使用clear属性清除浮动。clear: both
  • 使用BFC块级格式化上下文来清除浮动。给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动
  • 给浮动的元素的容器添加浮动。给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用
  • 使用CSS的:after伪元素。通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格，并且赋予clear属性来清除浮动

了解 flex 布局么？（会结合实际布局考察）

• flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。

• 一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。

• 我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。

• 对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

响应式设计的概念及基本原理

• 响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

  • 关于原理： 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。
  • 关于兼容： 页面头部必须有mate声明的viewport。
  • <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no"/>

CSS3中有哪些新特性

• 属性选择器
• 圆角 （border-radius:8px）
• 颜色
• rgba()函数
• hsl()及hsla()函数
• opacity属性，用于设置透明度
• 旋转 （transform）、transition、animation
• 阴影和反射 （Shadoweflect）
• box-shadow：为元素添加阴影
• 文字特效 （text-shadow）
• 多列布局 （multi-column layout）
• 文字渲染 （Text-decoration）
• 线性渐变 （gradient）
• 增加了旋转,缩放,定位,倾斜,动画,多背景

link和@import的区别

• link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import属于 CSS 范畴，只能加载 CSS。

• link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。@import 会产生闪烁的问题

• link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。

• link 支持使用 Javascript 控制 DOM 去改变样式；而@import不支持。

对 requestAnimationframe 的理解

• HTML5 提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧

• window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

• 取消动画： 使用cancelAnimationFrame()来取消执行动画

• 优势：

• CPU节能

  • 当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统走的RequestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。

• 函数节流

  • 在高频率事件( resize, scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销

• 减少DOM操作

  • requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧