如何理解HTML语义化
历史：以前的html都是一堆没有语义的冷冰冰的标签。最泛滥的就是div+css，以前的页面，一打开就是一堆div+css，为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且官方w3c，也在HTML5给出了几个新的语义化的标签。
使用语义化后有什么好处：
- 正确的标签做正确的事情
- 页面内容结构化
- 无CSS样子时也容易阅读，便于阅读维护和理解
- 便于浏览器、搜索引擎解析
举例：header元素代表“网页“和”section”的页眉，footer元素代表“网页”或“section”的页脚，nav元素代表页面的导航链接区域，h1，p。
meta viewport是做什么用，怎么写
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
width表示移动设设备下显示的宽度为设备宽度(device-width)
initial-scale表示设备与视口的缩放比率
maximum和minimum分别表示缩放的最大最小值, 要注意的是, maximum必须比minimum大.
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许.
刚开始 web 页面仅仅是在 PC 端进行查看的，但是后来随着移动互联网的发展，越来越多的 web 访问是通过移动端进行的，但是因为 PC 的 viewport 要比移动端大，所以为了快速修复这个问题，移动端的浏览器默认只是把整个页面等比例缩小到移动端的 viewport 大小。
这样做的后果就是，用户看到的是一个缩小版的整个页面，字体、图标和内容等等都非常小，想要点击或者查看都需要去放大页面进行操作，放大页面之后就会出现横向滚动条，这对用户体验来说是非常不好的。
用过哪些HTML5标签
canvas 提供了一个通过js和html的<canvas>元素来绘制图形的方式
/* HTML*/
<canvas id="canvas"></canvas>
/* JS */
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green'; //填充颜色
ctx.fillRect(10, 10, 150, 100); //位置和宽高
video 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放
<video controls autoplay> //controls支持用户控制视频，autoplay自动播放
<source src="myVideo.mp4" type="video/mp4"> //source 用以不同的浏览器支持的多种格式，提供相同的媒体内容
<source src="myVideo.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is
a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>
audio 元素用于在文档中表示音频内容
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English"> //计时字幕
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
<audio controls="controls">
Your browser does not support the <code>audio</code> element.
<source src="foo.wav" type="audio/wav">
</audio>
什么是H5
搜知乎吧
