HTML5
元素
语义化标签：header, nav, aside, section, article, footer
应用程序标签：datalist, progress, meter
媒体元素：audio, video, embed
图形图像：SVG, Canvas
input类型：date, number, range, tel, search
video
事件
oncanplay：视频可播放，除了首次触发，视频当前时间变化时也会触发
onloadeddata：视频首次数据准备完成（仅支撑开始播放数据）
自动播放
允许静音下自动播放
<iframe src="https://player.vimeo.com/video/156299091?muted=1&autoplay=1" frameborder="0" allowfullscreen></iframe>
audio
主动播放
主动播放前存在交互行为，可点击时播放静音音频，此后浏览器允许js主动播放
自动播放
属性
链接关系属性：rel="start/next/prev/friend"
自定义属性：data-xxx="value"
表单属性：placeholder="",require="require",multiple="multiple"
DOM
DOM获取：document.querySelector/.querySelectorAll
样式集获取： classList
事件
拖放操作
事件
dragstart：拖拽开始时触发的事件。drag：拖拽过程中持续触发的事件。dragend：拖拽结束时触发的事件。dragenter：拖拽元素进入目标容器时触发的事件（单次触发）。dragover：拖拽元素在目标容器上方悬停时持续触发的事件（多次触发）。dragleave：拖拽元素离开目标容器时触发的事件。drop：拖拽元素放置到目标容器时触发的事件。
API
dataTransfer：用于在拖放过程中传递数据的对象，包含拖拽的数据和操作方法。effectAllowed：用于设置拖放操作的效果。dropEffect：用于设置放置操作的效果。
实现
-
拖拽源即要拖动的元素，设置
draggable属性为true来允许元素进行拖拽。 -
监听拖拽事件：
dragstart监听拖拽开始，阻止放置目标dragover清除默认拖入行为。 -
处理拖放事件：监听放置目标
drop事件，处理传递数据。
| 更多详见：[HTML 拖放 API - Web API 接口参考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API) |
禁用拖拽
draggable="false"：设置不可拖拽
user-select: none;：设置不可选中
@dragstart.prevent：阻止拖拽事件(适用于图片)
历史记录控制
history.pushState, window.onpopstate
BOM
浏览器全屏：docuement.body.requestFullScreen
web存储
localStorage,sessionStorage
indexDB
SVG
svg采用 xml 描述矢量图形
svg图标颜色
<defs>
<style>
.cls-1 {
// 设为字体颜色
fill: currentColor;
stroke: currentColor;
}
</style>
</defs>
// 或直接设置fill: currentColor
<path class="cls-1" ...></path>
注： svg属性严格区分大小写
