HTML5 面试知识点整理

前言：之前整理得面试侃侃而谈 H5 和 C3 有点杂乱，并不是太系统，这次对着「HTML5与CSS3权威指南」以及阮一峰和张鑫旭得博客系统在整理下，有个系统得了解，下次面试，我直接上来给面试官系统谈谈「 H5 」谈谈「 C3 」谈谈「 E6 」，直接镇住他也懒得让面试官问我基础浪费时间，万一问道没学到还尴尬。😅

以下内容因为整理得时候都系统得学了，所以不会涉及详细得使用指南，只是简单得列举下，面试得时候谈到具体得内容，只能看自己得掌握情况系统发挥。

HTML5 面试知识点整理开始。

一、语法的改变

文件声明

!DOCTYPE(忽略大小写)

字符编码

<meta charset="UTF-8">

二、HTML5 兼容性写法

元素标记的省略
- 单标签，不允许写结束标签，例如 img
- 双标签，可省略结束标签，例如 li
- 例如 head 和 body 这些标签可省略全部标记浏览器会自动创建
具有 Boolean 值的属性。例如 disable，readonly 默认写了就是 true 不写就是 false
标签属性值可省略双引号/单引号
标签 script 和 link 等的 type 属性值可以省略
标签不再区分大小写
单标签的 / 可省略，但在 XHTML 必须写为 <br />

三、新增语义化标签

section
article
aside
header
footer
nav
main
figure(figcaption)常用于图文说明
small 网站底部的版权状态，我常常用错使用 div 来替代。
☆★☆★☆★☆★

time(datetime,pubdate**微格式**：利用class属性来对网页添加诸如新闻、日期、地点、电话之类的附加信息的方法)
mark 高亮
embed(用来插入各种多媒体)
progress(显示一项任务的完成进度)
meter(用来显示已知范围的标量值或者分数值)
address
wbr软换行

☆★☆★☆★☆★
details(open)summary 一般用于内容的摘要，标题或图例

<dialog open>
    <p>内容</p>
</dialog>
showModal();
close();

output 输出
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result"></output>
</form>

<ruby>
    拼音 <rp>(</rp><rt>Pinyin</rt><rp>)</rp>
</ruby>

☆★☆★☆★☆★

list 做下拉框
<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Internet Explorer">
    <option value="Opera">
    <option value="Safari">
</datalist>

☆★☆★☆★☆★
canvas
video(source)
audio(source)

四、Web组件

4.1 template定制模板:

以前使用 UnderScore 结合 Jquery 做瀑布流，使用的字符串模板都是这样的:

<script type="text/template"></script>

现在 HTML5 给规范了。使用 <template><template/>

特点是：
加载页面时 template (标签可放在任意位置)内容不会呈现必须通过 JavaScript 实例化即:document.body.appendChild(temp.content.cloneNode(true))

因为模板里面的 DOM 不能直接获取，所以 template 标签有个只读属性content 表示template 标签内部所有的 DOM。

4.2 shadow DOM 组件(现在已废弃)

影子 DOM 又叫 DOM 中的 DOM 看到这个 shadow DOM 估计你脑海中第一个想到的是 Virtual DOM，虽然两者完全不一样。

点击查看具体用法

let sdroot = eleDOM.attachShadow({mode: 'open'});

特点:

eleDOM 元素里面的内容都不显示，可通过 slot 组件解决。
模块化概念，内部的样式(作用域CSS),选择器等等不会影响到外面。

4.3 slot组件

web 组件内的一个占位符(拥有 name 属性的插槽叫具名插槽，一个事件slotchange)
一般 template 和 slot 结合 shadow DOM 组件使用。

<header id="app">
    <h3 slot="attributes">header</h3>
    <template id="temp">
        <style>
            div {
              color: tomato;
              background-color: #cfc;
              width: 180px;
              height: 100px;
            }
        </style>
        <div>文字颜色为tomato<slot name="attributes"></slot></div>
    </template>
</header>
<script>
    const shadowRoot = app.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(temp.content);
</script>

4.4 自定义元素（了解下就行）

<script>
class AppDrawer extends HTMLElement {
    
}
window.customElements.define("app-drawer",AppDrawer);
</script>
<app-drawer>自定义元素</app-drawer>

4.5 HTML 导入(在 Google Chrome 73 后已过时)

css 有导入，JS 也有导入。HTML 有时会使用 iframe 导入，但是现在不用了。HTML 导入功能可用来 bootstrap 包的引入，便于管理。

语法:

<link rel="import" href="">
<script>
    const content = document.querySelector("link[rel='import']");
    console.log(content.import);
</script>

需要注意的是这个语法和引入 stylesheet 语法不同，不会直接把内容搬过来，必须配合 JS 使用。废弃的原因很简单模块化完全可替代。

五、全局属性

全局属性是所有 HTML 元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。

以前常见的有:

title
class
id
style

HTML5 新增:

表示整个页面是否可编辑，默认为 off

document.designMode = "on"

contenteditable表示元素是可编辑的
元素有isContentEditable属性表示此元素时候可编辑

hidden元素不可见，渲染但不占空间

spellcheck 定义检查元素的拼写错误
这个属性是枚举型而不是布尔类型,这意味着显式设置其中一个值true或false是强制性的
accesskey="q"提供了为当前元素生成快捷键的方式alt+q
tabindex
整数属性，指示元素是否可以获取输入焦点（可聚焦），是否应该参与顺序键盘导航。一般用于弹框里面有表单的情况，如果是做一些键盘可访问的元素，当鼠标点击出现边框可配合CSS :focus-visible伪类让我感动哭了使用。
autocapitalize控制用户输入/编辑文本输入时文本输入是否自动大写
autofocus自动聚焦
dir一个指示元素中文本方向的枚举属性

六、input 标签支持的控件

以下控件某些自带正则:

以前：
text
checkbox
password
radio
reset   
submit
button

HTML5新增：

color
number
range
tel     
time
email
file
url 
week
search
date
month
datetime-local
hidden
image

原生自带表单 UI 可能比较丑可通过：

进行样式重置。

控件新增属性：

autofocus
placeholder
form,formaction,formenctype,formmethod,formnovalidate,formtarget
required
autocomplete
min,max,maxlength,multiple,step,pattern
list(list配合datalist使用配合autocomplete)
readonly
selectionDirection选中文字方向
图片的height

链接相关属性
download
其他属性
ol:start和reversed
style的scoped
script:async和defer
link:mainfest

通过 rel="preload" 进行内容预加载：指明哪些资源是在页面加载完成后即刻需要的。
preload 还有许多其他好处。使用 as 来指定将要预加载的内容的类型，将使得浏览器能够：

更精确地优化资源加载优先级。
匹配未来的加载需求，在适当的情况下，重复利用同一资源。
为资源应用正确的内容安全策略。
为资源设置正确的 Accept 请求头。
支持media="(max-width: 600px)"
支持 type="video/mp4"

prefetch 与 preload 不同：prefetch 供下一个导航/页面使用，所以这个 API 没啥用。更多 link 使用方法：HTML rel属性值释义大全

七、HTML5新增事件

分为五类:

鼠标事件

ondrag  当元素被拖拽的时候执行
ondragover  当元素拖拽经过释放对象的时候
ondragstart 当元素拖拽操作开始的时候执行
ondragend   当元素拖拽操作结束的时候执行
ondragenter 当元素拖拽进入释放对象的时候
ondragleave 当元素拖拽离开释放对象的时候
ondrop  当拖拽元素被放开的时候
onmouswheel 当鼠标滑轮滚动的时候执行
onscroll    当元素的滚动条滚动的时候执行

新媒体事件

onpause 当媒体数据暂停的时候执行
onplay  当媒体数据继续开始播放的时候执行
ontimeupdate    当媒体改变其播放位置的时候执行
onvolumechange  当媒体音量大小发生改变的时候执行，包括无声
onwaiting   当媒体元素停止播放的时候
onended 当媒体已经到达最后的时候执行
onloadstart 当浏览器开始加载媒体数据的时候执行
onplaying   当媒体数据已经开始播放的时候执行
onprogress  在浏览器正在获取媒体数据的时候执行
---
oncanplay   当媒体可以播放的时候执行
oncanplaythrough    当媒体可以播放到最后的时候执行
ondurationchange    当媒体长度改变的时候执行
onemptied   当媒体资源元素变成空的时候执行
onerror 当加载元素发生错误的时候执行
onloadeddata    当媒体数据加载完毕的时候执行
onloadedmetadata    当媒体元素的持续时间加载完毕的时候执行
onratechange    当媒体数据播放比率发生改变的时候执行
onreadystatechange  当ready-state发生改变的时候执行
onseeked    当元素的seeking属性不是true的时候执行
onseeking   当元素的seeking属性是true的时候执行
onstalled   当获取元素数据发生错误的时候执行
onsuspend   当浏览器停止获取媒体数据的时候执行

window新增事件

onresize    当窗体大小改变的时候执行
onhaschange 当文档发生改变的时候执行
onmessage   当该信息被触发的时候执行
onpopstate  当窗体历史改变的时候执行
onoffline   当文档离线的时候执行
ononline    当文档上线的时候执行
onafterprint    在文档打印之后执行
onbeforeprint   在文档打印之前执行
---
onbeforeloaded  在文档加载完毕之前执行
onerror 当错误发生时执行
onpagehide  当窗体隐藏的时候执行
onpageshow  当窗体显示的时候执行
onredo  当文档执行恢复上一次操作的时候执行
onstorage   当文档加载ok的时候执行
onondo  当文档执行恢复之前一次操作的时候执行
onunload    当用户离开文档的时候执行

表单事件

oninput     当元素获得用户输入的时候执行
oninvalid   当元素验证无效的时候执行
onformchange    当表单发生改变的时候执行

动画事件

animationstart - CSS 动画开始后触发
animationiteration - CSS 动画重复播放时触发
animationend - CSS 动画完成后触发

其中DOM二级事件监听第三个参数发生了更改:

addEventListener(type,cb,bool);
第三个参数改为对象形式：
{
    passive:true,//preventDefault
    once:true,
    capture:true
}

八、文件数据类型

filelist(File接口基于Blob)
DataTransfer
blob(BLOB (binary large object)，表示二进制大对象)
blob要想使用必须:

img.src = window.URL.createObjectURL(blob);
img.onload = function(e) {
  window.URL.revokeObjectURL(img.src); // 清除释放
};

ArrayBuffer
fileReader
理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型

九、XHR2.0 和 fetch

跨域
进度事件
二进制上传下载

讲到跨域：

在HTML5中，一些 HTML 元素提供了对 CORS 的支持，例如 <audio>、<img>、<link>、<script> 和 <video> 均有一个跨域属性 (crossOrigin property)，它允许你配置元素获取数据的 CORS 请求。

十、本地存储

localStorage
sessionStorage
indexedDB
HTML5 indexedDB前端本地存储数据库实例教程

MYSQL
PWA
借助Service Worker和cacheStorage缓存及离线开发
借助Service Worker和cacheStorage缓存及离线开发(mainfest)

十一、通信

11.1 WebSocket

WebSocket 教程

11.2 Server-Sent Events服务器单向浏览器通信

Server-Sent Events 教程

11.3 跨页面通信

postMessage结合message和iframe(postMessage可跨域)
MessageChannel(MC消息通道)
BroadcastChannel(BC广播通道)

页面间通信与数据共享解决方案简析

11.4 WebWorker

阮一峰——Web Worker 使用教程

11.5 SharedWorker

注意调试得时候禁用缓存也没用:

new SharedWorker(`./worker.js?date=${new Date()}`);
//如果要使共享进程可以连接到多个不同的页面，这些页面必须属于相同的域(相同的协议，主机以及端口)

SharedWorker

11.6 push&Notification 推送与通知

简单了解HTML5中的Web Notification桌面通知

十二、Geolocation 地理位置信息

Geolocation 获取到当前设备的经纬度（位置）。

function getUserLocation() {
    return new Promise((resolve, reject) => {
        if (!navigator.geolocation) {
            reject()
        } else {
            navigator.geolocation.getCurrentPosition(success, error);
        }
        function success(position) {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            resolve({latitude, longitude});
        }
        function error() {
            reject();
        }
    })
}
getUserLocation().then(res=>console.log(res));

十三、canvas

十四、Video和Audio

playbackRate视频倍速播放

十五、FullScreen 全屏 API

HTML5 全屏 API 在 FireFox/Chrome 中的显示差异比较老了文章，其实使用很简单，三句语法：

// 开启全屏
document.documentElement.requestFullscreen();
// 退出全屏
document.exitFullscreen();
//是否是全屏，不是的话为null
document.fullscreenElement

加个按钮就能使用了。

十、battery

关于电池🔋的 API，电量低的时候可以使用。

navigator.getBattery().then(function(battery) {
  console.log("是否在充电? " + (battery.charging ? "是" : "否"));
  console.log("电量等级: " + battery.level * 100 + "%");
  console.log("充电时间: " + battery.chargingTime + " s");
  console.log("放电时间: " + battery.dischargingTime + "s");
});

附图一张：

百炼功纯始自然

创建日期：2020年4月21日23点42分