[面试押题] HTML篇

一、方方版押题的注意事项

1. 只押命中率高的，20%这样的题就没什么必要了。

• 题目少
• 思路清晰
• 命中率高

2. 针对的是2W以下薪资水平

• 2W块以上也需要看押题
• 但是更重要的是经验、学历、谈吐、项目
• 看看2W薪资的问题
  • 你是如何管理下属的？项目工期紧，你如何说服下属加班？
  • 电商项目如何做前后端技术选型？你在项目中遇到最难的问题是什么，如何解决？
  • 如何实现前端性能和异常监控系统？
  • Vue/React 源码你了解吗？React 的 Fiber 架构说一说，Vue 为什么需要 DOM diff？

3. 押题效果

在前端面试中能遇到50%的原题

二、HTML押题

• 说明，HTML的内容在面试时基本不会遇到，遇到也是一道的样子。

题一：讲讲HTML中的语义化标签

这是个概念题。而概念题的答法如下。

1. 是什么：语义化标签是一种写 HTML 标签的方法论/方式。
2. 怎么做：实现方法是遇到标题就用 h1 到 h6，遇到段落用 p，遇到文章用 article，主要内容用 main，边栏用 aside，导航用 nav……（就是找到中文对应的英文）
3. 解决了什么问题：明确了HTML的书写规范
4. 优点是：一、适合搜索引擎检索；二、适合人类阅读，利于团队维护。
5. 缺点是：没有。
6. 怎么解决缺点：无需解决。

总结：「是什么、怎么做、解决了什么问题、优点是、缺点是、怎么解决缺点」

题二、HTML5中有哪些新标签

纯记忆性题目。

面试注意：

• 说一两个自己熟悉的就行
• 一定不要提自己不熟悉的标签
• 因为很有可能面试官追问，然后变成你的下一题。

答案举例：

• 文章相关：header main footer nav section article figure mark
• 多媒体相关：video audio svg canvas
• 表单相关：type=email type=tel

答案来源：

• 搜索：mdn html5 tags
• 得到： HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org)

题三：Canvas和SVG的区别是什么？

区分题。 答题思路为：先说一，再说二，再说相同点，最后说不同点。

如果你在题二中提到了的话，那么这道题一定会被问。

答案：

1. Canvas 主要是用笔刷来绘制 2D 图形的。
2. SVG 主要是用标签来绘制不规则矢量图的。
3. 相同点：都是主要用来画 2D 图形的。
4. 不同点：Canvas 画的是位图，SVG 画的是矢量图。
5. 不同点：SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂。
6. 不同点：SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。

基本上要看别人的总结和自己平时写的博客总结，不然回答不好。

平时学习的时候，要注意写博客积累，新旧比较，同一作用的不同方法的比较……