正值秋分，金九银十的季节，程序员们又开始出来猎捕 offer 了。本猿自毕业校招以来两年都未投出简历过，所以在掘金和 github 上拜读大佬的面试经验贴，然后厚脸皮的摘录总结一下，如有勘误或涉及版权相关的，还望指出，哈哈。
MIND
1. 说一下 DOCTYPE
DOCTYPE 是文档类型，一般位于文档第一行，告知浏览器用什么样的模式来解析文档。在 DOCTYPE 声明且格式正确的情况下，浏览器采用标准模式进行解析，否则采用兼容模式进行解析。
- 标准模式下，浏览器采用最高标准进行解析
- 而在兼容模式下，会采用向下兼容的模式来模拟老浏览器的运行模式，使得老浏览器可以运行网站。
2. HTML 语义化
在没有语义化前，前端经过了table 布局 到 div 布局，直到现在，程序员更乐意用语义化标签进行布局。
- 首先对于人来说，这些标签比起前者，更容易分辨它身处的网页结构，方便程序员理解和后期维护，并且在没有样式的情况下，呈现的页面依旧容易被使用者阅读。
- 对于机器或程序而言，更好的语义化布局，将提供更好的
SEO给搜索引擎解析，提供层次清晰的文档内容供爬虫获取，甚至阅读器能够通过 strong 标签获取语调上的变化，这些都是语义化所呈现的非凡意义。
3. HTML5 有哪些新标签和特性
- 存储：localStorage 和 sessionStorage
- 语义化标签：article，section，aside，header，footer，nav
- 获取地址：getCurrentPosition
- 可见性：visibilityState
- 视频音频：audio、video
- 表单属性：email、search、date、url
- 绘画 canvas
4. 前端 SEO 该注意什么
- 网页标题，其次是
meta其中的description和keys两个属性，这三个属性是搜索引擎解析的重点，三者比重逐渐减小，title 强调重点，description 高度概括，keys 列举关键字 - 多使用语义化标签，层次更清晰，更容易解析
- 尽量不使用
iframe，搜索引擎无法解读 iframe - 重要内容放在前面，比如使用双飞翼布局
5. meta 中 viewport 用来干嘛的
viewport 指的是视口，在 PC 上代表浏览器窗口，但在移动端上有三种不同的视口，分别为：
layoutviewport布局视口，用来解决移动端屏幕下而出现布局混乱的问题，一般设为 980px，使得通过拖动和缩放展示页面。visualviewport视觉视口，其实就是指移动端的屏幕窗口，等于屏幕分辨率大小。idealviewport理想视口，为了解决需要拖动缩放显示页面的问题，将布局视口设为视觉视口的大小（屏幕大小），从而在不同分辨率下可先显示一致。
6. link 是干嘛的，和 @import 有什么区别
link 一个空标签，通过 rel 属性来定义文档和外部文件之间的关系。
它与 @import 有四点不同：
- 兼容性：@import 在 css2.1 引入，在 IE5+ 才能识别，link 不存在兼容性；
- 功能：@import 只能加载样式，而 link 可加载多种文件，比如图标；
- 加载：@import 导入样式与页面同时加载，而 @import 导入样式等页面加载完毕后才加载；
- 可控性：@import 不是标签，无法通过 js 动态生成，而 link 标签可以，通过动态生成，可以控制页面部分的样式。
总结
HTML 在面试中所占比例很小，语义化应该是重点，接下来开始 CSS 的复习。
本文使用 mdnice 排版
