一些概念
html5 有哪些新特性
个人认为，一些常见的html面试题，其实都是这些新特性延展出来的，例如html语义化就是新特性之一，总结下 html5 的10个新特性：
- 语义标签
- 增强型表单
- 音视频
- canva 绘图
- svg 绘图
- 地理位置
- 拖放api
- WebWorker
- WebSrorage
- WebSocket
这10个新特性我这里不一一展开，这里只展开我自己学习过程中或者写项目时有用到的，也就是下面这些题，其他的可以参考下面这篇文章了解下。
参考：https://www.cnblogs.com/jane-panyiyun/p/13092297.html
讲讲 html 语义化标签
什么是语义化：
通俗的解释：就是你看到你看到一个不认识的标签，你可以直接通过这个标签名大致推测出它是干嘛的，例如video标签，顾名思义就是用来定义视频的。
怎么做到语义化：
用正确的标签做正确的事情，例如标题就用标题标签写（h1 - h6），段落就用 p 标签、音视频就用音视频标签等。。
语义化的优缺点：
优点：
缺点：感觉没有吧。。啊 可能对于英语重度恐惧者来讲是种灾难，可能本来只需要记住一个div标签就可以了，现在要记住辣么多单词（没错是我。。）
举例语义化标签
html5 有哪些新标签？
新多媒体元素：
<audio> 定义音频内容
<video> 定义视频
<source> 定义多媒体资源
<embed> 定义嵌入的内容，比如插件
<track> 为诸如<video>和<audio>元素之类的媒介规定外部文本轨道
绘制图形：
<canvas> 标签定义图形，比如图表和其他图像，该标签基于JavaScript的绘图API
新表单元素：
<datalist> 定义选项列表，与input元素配合，来定义input可能的值
<keygen> 规定用于表单的密钥对生成器字段
<output> 定义不同类型的输出，比如脚本的输出
新的语义和结构元素
<header> 定义文档的头部区域（页眉）
<footer> 定义 section 或 document 的页脚
<article> 定义页面独立的内容区域
<aside> 定义页面的侧边栏内容
<section> 定义文档中的节（section、区段）
<nav> 定义导航链接的部分
<time> 定义日期或时间
建议此题只讲一些自己熟悉的，用过的新标签，因为面试官极有可能会根据你的答案往下问，
例如下面这俩延展题：
video 与 audio 标签都有哪些属性？
video
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| height | pixels | 设置视频播放器的高度 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放 |
| muted | muted | 如果出现该属性，视频的音频输出为静音 |
| poster | URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮 |
| preload | auto Metadata none | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性 |
| src | URL | 要播放的视频的 URL |
| width | pixels | 设置视频播放器的宽度 |
audio
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 如果出该属性，则向用户显示音频控件（比如播放/暂停按钮） |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 如果出现该属性，则音频输出为静音 |
| preload | auto Metadata none | 规定当网页加载时，音频是否默认被加载以及如何被加载 |
| src | URL | 规定音频文件的 URL |
参考：https://www.runoob.com/html/html5-new-element.html
Canvas 与 SVG 标签有什么区别？
- SVG适用于描述XML中的2D图形的语言
- Canvas随时随地绘制2D图形（使用javaScript）
- SVG是基于XML的，意味这可以操作DOM，渲染速度较慢
- 在SVG中每个形状都被当做是一个对象，如果SVG发生改变，页面就会发生重绘
- Canvas是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘。
| Canvas | SVG |
|---|---|
| 依赖分辨率 | 不依赖分辨率 |
| 不支持事件处理器 | 支持事件处理器 |
| 能够以.png或.jpg格式保存结果图像 | 复杂度会减慢搞渲染速度 |
| 文字呈现功能比较简单 | 适合大型渲染区域的应用程序 |
| 最合适图像密集的游戏 | 不适合游戏应用 |
(个人没用过不晓得，此答案出处：https://www.cnblogs.com/jane-panyiyun/p/13092297.html)
元素性质
这一块我之前一直记不下来，直到我去详细了解了它们特点，感觉一下子就记住了：
块级元素： 元素里还能再包含其他元素的，例如 div（容纳百川）；ul 可以容纳 li，所以它肯定是个块元素，还有 li 里头也经常容纳 a，所以 li 也是个块级元素；
行内元素： 这种元素不能再包含其他元素，例如 a， br，span，之类的，它们就包含不了其他元素了；
行内块元素： 同时具有前两者的特点的就是行内块元素，例如 button，img，input即能记在一行内又能设置宽高。
块级元素（块状元素、行外元素）
特点：
- 每个元素独占一行
- 不设置宽高的情况下，继承父级元素的宽高参数
- 海纳百川，可以内嵌行内元素和块状元素
常见的块状元素：
<div> <h1>(系列) <p> <ul> <li> <ol> <table> <dl> <dt> <dd>
行内元素（内联元素、行间元素、内嵌元素）
特点：
- 一行可以占据很多个行内元素
- 宽高是由元素内容大小决定的，无法设置，但是可以通过line-height来调整行高
- 无法设置上下内外边距
- 容不下其他元素了
常见的行内元素：
<a> <span> <br> <strong>
行内块元素（内联块状元素）
特点：
- 具有前两者的特点
- 既可以在同一行内，又可以设置宽高边距啥的
常见的行内块元素：
<button> <textarea> <input> <img>
会写但你知道为什么吗
html5 DOCTYPE 声明
不懂会不会考这种手写声明的，在写 html 的时候，其实很多时候都是用 vscode 的快捷键一件生成的，但也要知道为什么在写 html 的时候要这样子声明，每行的意义，没有写会怎样之类的
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
