前端面试题宝典

HTML 和 CSS 进阶

简介：HTML和CSS的进阶问题，你知多少？
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~

HTML 和 CSS 进阶

HTML 规范是 W3C 与 WHATWG 合作共同产出的，HTML5 因此也不例外。其中：

  • W3C 指 World Wide Web Consortium
  • WHATWG 指 Web Hypertext Application Technology Working Group

说好听是「合作产出」，但其实更像是「HTML5 有两套规范」。但话说天下大势合久必分，分久必合，如今（2018.5.29）它们又表示将会开发单一版本的 HTML 规范。

那么 HTML5 给开发者提供了哪些便利呢？简单列举有：

  • 用于绘画的 canvas 元素
  • 用于媒介播放的 video 和 audio 元素
  • 对本地离线存储更好的支持（localStorage、sessionStorage）
  • 新的语义化标签（article、footer、header、nav、section...)
  • 新的表单控件（calendar、date、time、email、url、search...)

除了这些常规的之外，还有：

  • 给汉字加拼音
<ruby>
  前端开发核心知识进阶
  <rt>qianduankaifahexinzhishijinjie</rt>
</ruby>
  • 展开收起组件

简单几行代码：

<details>
  <summary>前端开发核心知识进阶</summary>
  前端领域，入门相对简单，可是想要「更上一层楼」却难上加难，也就是我们常说的「职业天花板较低」，
  君不见——市场上高级/资深前端工程师凤毛麟角。这当然未必完全是坏事，一旦突破瓶颈，在技能上脱颖而出，
  便是更广阔的空间。那么，如何从夯实基础到突破瓶颈？
</details>

不可忽视的 Web components

事实上，Web components 的概念在几年前也已经提出，貌似一直没有发展的「如火如荼」，这里我为什么又单独拿出来讲呢？

我并不想赘述 Web components 的基础概念，但是我认为，作为「更高阶」的前端工程师，要时刻保持技术视野和信息广度。在框架带来的「组件化」、「生命周期化」这些统治级别的概念下，对比并结合 Web components，我认为是可以深入研究的一个课题方向。我总结一下 Web components 的特殊点或者优点：

  • 原生规范，无需框架

这条优点的后半句话是：「但是继承且具备了框架的优点」，在新的 Web components 规范中，我们会发现组件生命周期的概念、slot 概念、模版概念（类比 JSX 或者 Vue template），再结合本来就已经存在的组件化，shadow dom，扩展原生元素的能力，我认为 Web components 还是具备了较好的发展前景。

  • 真正的 CSS scope Web components 实现了真正的 CSS scope，做到了样式隔离。这一点读者可以对比我们下面即将介绍的 CSS Modules。真正的 CSS scope 对于项目的可维护性至关重要。

进击的 HTML 和 CSS 带来了进击的 Web components 概念。通过这个案例，我更想建议读者：真正的高级工程师，不仅仅要理解 this、熟练掌握各种基础（当然这是前提），更要有技术嗅觉，对新的解决方案能够理解，并进行对比，面向「未来」编程。

移动端 H5 注意事项总结

HTML5 因为其强大先进的能力，毫无疑问打来了一场开发的变革。在国内，体现最明显的就是各种 H5 移动页面。

因为移动端的碎片化现象，以及技术落地的成熟度尚浅，造成了不少问题，那么移动端开发 H5 有哪些坑以及小技巧呢？

这里列举一些典型情况，目的在于梳理和整理，不再一一详解。具体信息社区上都可以找到，感兴趣的读者可以另行学习。

  • 打电话发短信写邮件的小技巧

这些技巧都和 a 标签相关，其中打电话：

<a href="tel: 110">打电话给警察局</a>
  • 发短信，写邮件依赖「mailto」
<a href="sms: 110">发短信给警察局</a>

<a href="mailto: 110@govn.com">发邮件给警察局</a>

<a href="mailto: 110@govn.com; 120@govn.com">
  发邮件给警察局以及 120 急救
</a>

  • 移动端 300 毫秒点击延迟以及点击穿透现象 这是由于历史原因造成的，一般解决手段为禁止混用 touch 和 click，或者增加一层「透明」蒙层，也可以通过延迟上层元素消失来实现。

  • 点击元素禁止产生背景或边框

一般可以使用：

-webkit-tap-highlight-color: rgba(0,0,0,0);

HTML5 和 CSS3 其他面试问题整理

关于 HTML5 和 CSS3 的面试问题都并不困难，往往都是属于「是否听说过」、「用过哪些」，这种知道即可的问题，不会太有「深度」。这里我们总结一下关于 HTML5 和 CSS3 新特性的问题，答案也比较容易找到，这里仅做梳理，不再进行展开。

  • link 和 @import 的区别
  • CSS3 新增选择符有哪些
  • CSS 如何定义权重规则
  • 如何使用纯 CSS 创建一个三角形
  • CSS3 如何写出一个旋转的立方体
  • localStorage 和 cookies 的区别是什么
  • 如何实现浏览器内多个标签页之间的通信
  • 渐进增强和优雅降级概念区别是什么
  • 如何实现 CSS3 动画
  • 这些内容比较基本，和进阶关系不大，我们不过多纠结。

CSS 变量和主题切换优雅实现

什么是 CSS 变量呢？我们直接来看实例，有代码：

body {
 background: white;
 color: #555;
}

a, a:link {
 color: #639A67;
}
a:hover {
 color: #205D67;
}

如果我们借助 CSS 变量，定义：

:root {
 --bg: white;
 --text-color: #555;
 --link-color: #639A67;
 --link-hover: #205D67;
}

之后，上述代码可以直接简化为：

body {
 background: var(--bg);
 color: var(--text-color);
}
a, a:link {
 color: var(--link-color);
}
a:hover {
 color: var(--link-hover);
}

这个很好理解，在任何语言中，变量是个好东西：它可以降低维护成本，甚至实现更好的性能。

CSS 变量语法也很简单：我们使用--变量名的方式定义变量，使用var(--变量名)的方式消费变量。

值得一提的是，CSS 变量的兼容性「出乎意料」的好：

如果要控制列表的层级，则需要在符号-前使用空格。如下：

CSS Modules 理论和实战

我做面试官时，对 CSS 的考察除了基础布局和经验以外，非常喜欢问 CSS 工程相关的题目，比如：

如何维护大型项目的 z-index

比如，

  • 如何维护 CSS 选择器和样式之间的冲突

这个环节我们就来谈谈 CSS Modules，看看这个方案是否能让「CSS 冲突成为历史」。

  • 什么是 CSS Modules

CSS Modules 是指：项目中所有 class 名称默认都是局部起作用的。

其实，CSS Modules 并不是一个官方规范，更不是浏览器的机制。它依赖我们的项目构建过程，因此实现往往需要借助 Webpack。借助 Webpack 或者其他构建工具的帮助，可以将 class 的名字唯一化，从而实现局部作用。

这么说可能比较抽象，我们来看一个例子：

<div class="test">
  This is a test
</div>

对应的样式表为：

.test {
 color: red;
}

编译后：

<div class="_style_test_309571057">
  This is a test
</div>
._style_test_309571057 {
   color: red;
}

其中 class 名是动态生成的，全项目唯一的。因此通过命名规范的唯一性，达到了避免样式冲突的目的。

仔细想来，这样的解决方案似乎有一个问题：如何实现样式复用？因为生成了全局唯一的 class 名，那么我们如何像传统方式那样实现样式复用呢？

从原理上想，全局唯一的 class 是在构建过程中，如果能给在构建过程进行标识，表示该 class 将被复用，就可以解决问题了。这样的方式，就依靠 composes 关键字实现。我们来看案例：样式表 style.css 文件中：

.common {
 color: red;
}

.test {
 composes: common;
 font-size: 18px;
}

注意我们使用了 composes 关键字，在 .test 中关联了 .common 样式。对于 HTML 文件：

import style from "./style.css";
<div class="${style.test}">
  this is a test
</div>

编译后：

<div class="_style__test_0980340 _style__common_404840">
  this is a test
</div>

总结

本文我们既有「大面儿」上的梳理，也有关键点的「实战」深入。有趣实用的标签和属性、移动端 H5 注意事项总结、HTML5 和 CSS3 面试题梳理，这三块内容旨在将碎片化的知识点以「记事本」式的排列；Web components 更多给大家带来对新技术的思考和总结；CSS 变量、CSS Module 是我认为最有发展潜力、最有实用价值、最能马上落地实现的解决方案。

HTML 和 CSS 向来被忽视，但是涉及到项目组织和构建，涉及到新技术的调研和决断，我们切不可含糊。

最后

“前端面试题宝典”经历接近一年的迭代打磨，目前已经提供了小程序刷题、PC端访问（https://fe.ecool.fun/）。

截至2022年3月29日，已经录入前端常见面试题800+，想刷前端面试题的小伙伴千万不要错过。

我们在近期推出了简历指导、模拟面试等增值服务，有想了解的小伙伴们可以添加小助手微信（interview-fe）进行咨询哦~