如何理解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

搜知乎吧