必考：你是如何理解 HTML 语义化的？
举例法
HTML 语义化就是使用正确的标签（总结）。
段落就写 p 标签，标题就写h1标签，文章就写article标签，视频就写video标签，等等。
阐述法
首先讲以前的后台开发人员使用table布局，然后讲美工人员使用div+css布局，最后讲专业的前端会使用正确的标签进行页面开发。
html语义化的好处
参考：语义化标签的好处 和 标签语义化以及使用好处 和理解HTML语义化
- HTML结构清晰
- 代码可读性较好
- 无障碍阅读
- 有利于SEO（搜索引擎排名），搜索引擎可以根据标签的语言确定上下文和权重问题
- 移动设备能够更完美的展现网页（对css支持较弱的设备）（读取设备将根据其自身的条件来合适地显示页面）
- 便于团队维护和开发
总结：结构清晰，搜索引擎，移动设备，团队
meta viewport 是做什么用的，怎么写？
简答
没有移动端优化的时候，窄屏幕设备在一个虚拟窗口或视口（viewport）中渲染页面，这个窗口或视口通常比屏幕宽；然后缩小渲染的结果，以便在一屏内显示所有内容。用户可以移动、缩放以查看整个页面。
但是，有了媒体查询和响应式设计，这种机制就没必要了，因此引入了“viewport meta 标签”，让Web开发人员控制视口（viewport）的大小和比例（允不允许缩放）。
具体
浏览器的 viewport 是可以看到Web内容的窗口区域，通常与渲染出的页面的大小不同，这种情况下，浏览器会提供滚动条以滚动访问所有内容。
窄屏幕设备在一个虚拟窗口或视口中渲染页面，这个窗口或视口通常比屏幕宽；然后缩小渲染的结果，以便在一屏内显示所有内容。然后用户可以移动、缩放以查看页面的不同区域。
这样做是因为许多页面没有做移动端优化，在小窗口渲染时会乱掉。所以，这种虚拟视口是一种让未做移动端优化的网站在窄屏设备上看起来更好的办法。
但是，对于用媒体查询针对窄屏幕做了优化的页面，这种机制不大好：比如如果虚拟视口宽 980px，那么在 640px 或480px或更小宽度要起作用的媒体查询就不会触发了，浪费了这些响应式设计。
为了缓解这个问题，引入了“viewport meta 标签”，让Web开发人员控制视口的大小和比例（允不允许缩放）。
举例法
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
- viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，不局限于浏览器可视区域的大小。viewport标记，用于指定用户是否可以缩放Web页面。
- width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。 补充：rem是基于html元素的字体大小来决定，而em则根据使用它的元素的大小决定（很多人错误以为是根据父类元素，实际上是使用它的元素继承了父类的属性才会产生的错觉）。
- user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。
- initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。
- maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制。值的范围为0.25~10.0之间。
补充：meta 有什么作用
META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。
它提供的信息虽然用户不可见，但却是文档的最基本的元信息。除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。 html，本身是描述信息的数据，而mata就是对整个html文件信息的描述。
详见：meta有什么作用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="编程, 前端, 极客, Call, Apply, Bind">
<meta name="theme" content="xh-2">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Document</title>
</head>
http-equiv
这个枚举属性定义了能改变服务器和用户引擎行为的编译，具体内容在content 中。
content
此属性包含http-equiv 或name 属性的值，具体取决于所使用的值。
你用过哪些 HTML 5 标签？
把平时用到的html5标签列举出来即可，但是要注意如果这个标签的用法比较复杂，你要先看一下MDN的文档再说这个标签；如果你说出一个标签，却不知道它有哪些API，那么就会被扣分。 下面是一个简单的总结：
- 根元素
<html> - 文档元数据
<head>，<title>，<base>，<link>，<meta>，<style> - 脚本
<script>，<noscript>，<template> - 章节： body，section，nav，article，h1，header，footer
- 组织内容： p，ol，ul，dl，dt，div
- 文字形式： em，strong，s，b
- 嵌入内容： img，iframe，video，audio，canvas，svg
- 表格： table，tbody，thead，tr，td
- 表单： form，label，button，select，input，textarea
- 一些内容相关的标签： header，main，footer，article
- 功能相关的标签： canvas，video，audio
H5 是什么？
H5表示移动端页面，反正不是HTML5。
H5 泛指那些在移动端网络社交媒体（以微信为主）中传播的，带有交互体验、动态效果以及音效的 Web 页面。在 H5 当中可以使用 HTML5 标准的相关技术制作页面，但是，H5 只是一种产品形式，H5 不是 HTML5、HTML5 也不是 H5。
总之，HTML5 是一种技术标准，H5 是一种产品形式。
标签嵌套规则
（1）<p>元素和<h1~6>元素不能嵌套块元素（实际上，h1~h6中嵌套块级元素并不报错）。
（2）a 元素不能包含块级元素（但是可行）。但在实际应用中，a元素包含div是可行的，按照HTML5新的标签分类原则，a元素能包含的类型由其父元素决定，因此若其父元素能包含div，则a就能包含div。
（3）在列表元素<li><dt><dd>等插入非列表兄弟元素只会导致IE6\IE7的解析错误，其他浏览器虽不合规矩，但也不报错。
（4）a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)。
（5）ul 作为 li 的子元素虽不正常，但是不报错，是最佳实践。
（6）ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；ul、ol下都只能跟li，dl下只能跟dt.dd。
（7）dt 元素内不能嵌套块级元素。
html5 新特性
参考：HTML5新特性都有哪些 （总结的很不错，还包括了闭合不闭合标签）
- 新增结构标签：
<article>
<aside>
<footer> 一个文档可以有多个footer
<header>一个文档可以有多个header
<nav> 导航
<section> 在文档中定义部分
- 新增的input类型和属性
类型：color，date，search
属性：placeholder
- 新的图形标签：canvas
参考：www.cnblogs.com/zhen-prz/p/…
要重点掌握 canvas 与 svg（可缩放矢量图形） 的对比：
canvas是html5提供的新元素<canvas>，而svg存在的历史要比canvas久远，svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。
相同点： 二者绘制的皆是2D图形。
不同点：
| canvas | svg | |
|---|---|---|
| 实现方式 | 通过 JavaScript 来绘制图形 | 使用 XML 来描述图形 |
| 图形性质 | 标量图 | 矢量图 |
| 与分辨率的关系 | 依赖分辨率 | 不依赖分辨率（不会失真） |
| 事件处理 | 不支持事件处理器 | 支持事件处理器 |
| 文件保存方式 | 以 png 或 jpg 的格式保存结果图形 | 以 svg 的格式保存结果图形（svg文件可在html文件中以img标签的src、元素背景等形式引入，也可直接在html文件中引入svg标签） |
| 适用场景 | 适合图像密集型的游戏（对象会被频繁的重绘） | 适合带有大型渲染区域的应用程序（如百度地图）（可被放大而不失真），不适合游戏（因为复杂度高会减慢渲染的速度） |
| 是否可以引用普通的图片 | 可引入jpg或png这类格式的图片 | 不可引入 |
| 图片如何变化 | Canvas 是逐像素进行渲染的，一旦图形被绘制完成，他就不会继续得到浏览器的关注，如果他的位置发生变化，那么就需要重新来绘制图形，其中包括任何或已经被图形覆盖的对象 | SVG DOM 中的每个元素都是可用的，可以为某个元素附加事件处理器，每个被绘制过的图形均视为对象，如果 SVG 对象的属性发生变化，那么浏览器可以自行重现图形 |
总结：分辨率，事件处理，保存，应用场景，普通图片，绘制方式
补充：需要注意html5新特性中的屏幕截图是通过canvas实现的：
html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。
- 新的多媒体标签 video、audio、source、embed、track
笔者为2020届应届毕业生，非科班渣硕转行前端开发，在接下来的一段时间里会将秋招复习中的相关问题分类总结出来。
