HTML5技术扫盲

May 11, 2020

元素
通信
离线与存储
多媒体
- Camera API
- Track 和 WebVTT
图像与效果
性能与集成
设备访问
CSS

元素

语义元素

HTML 语义化标签
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>

音视频元素

<audio>
<video>

表单优化：内置数据校验

校验属性：

type: <input type="email">
required
pattern: 正则校验
min / max
minlength / maxlength

校验效果

通过：CSS 伪类 :valid ，提交数据
不通过：CSS 伪类 :invalid ，显示错误信息并阻止提交

iframe 增强安全性和渲染

sandbox 对 frame 中的内容添加额外限制，如 allow-downloads allow-same-origin allow-scripts 等
seamless: 无缝嵌入 iframe

srcdoc 直接嵌入内联 HTML 文本，如:

var iframe = document.createElement("iframe")
iframe.srcdoc = `<!DOCTYPE html><p>Hello World!</p>`
document.body.appendChild(iframe)

MathML

参考 MDN-MathML

支持使用 MathML 书写数学公式：

<math>
  <msqrt>
    <mn>2</mn>
  </msqrt>
</math>

通信

WebSockets

客户端和服务器建立持久的 TCP 连接，用得比较多了不再赘述。

Server-Sent Events(SSE)

允许服务器向客户端推送事件，可用于数据仪表盘、实时股票价格展示等场景。

WebRTC

浏览器之间建立点对点通信，可用于实时音视频和数据共享等场景。

离线与存储

在线/离线事件

读取属性值: navigator.online: boolean

ononline / onoffline 事件注册：

事件注册：在 window, document 或 document.body 上 addEventListener("ononline", fn);
事件函数: document.[body.]ononline = function(){...}
内联事件: <body ononline="fn1()" onoffline="fn2()">

DOM Storage

LocalStorage：同域跨浏览器窗口和选项卡共享
SessionStorage：仅本次会话可用
GlobalStorage(仅 Firefox)

IndexedDB

用于在浏览器端存储大量结构化数据的事务型数据库系统。

可以和 Web Workers 结合使用以提高性能。

可用于构建 PWA。

File API

文件上传：<input type="file" multiple onchange="handleFiles(this.files)">

ObjectURL:

window.URL.createObjectURL(file) 创建 ObjectURL 使得文件可以通过 URL 来引用(如 a、img 元素等)
window.URL.revokeObjectURL(objURL) ObjectURL 使用完毕后应释放

多媒体

上文已提到过的:

<audio> 与 <video>
WebRTC

Camera API

调用系统自带相机: <input type="file" id="take-picture" accept="image/*">

Track 和 WebVTT

用于时序文本或其他基于时间的数据, 如视频字幕等.

<track>元素作为 <audio> 和 <video> 元素的子元素,用于指定时序文本字幕.

WebVTT 表示 Web 视频文本字幕格式(.vtt).

图像与效果

Canvas Text API

新增 fillText() 和 strokeText() 方法

WebGL 3D

用于特定领域, 这里不做详述.

SVG

基于 XML 语法的矢量图, 可用于绘制简单的 LOGO 或流程图绘制等场景.

性能与集成

Web Workers

创建后台线程执行一个 JS 文件, 一般用于执行大量耗时的计算任务.

XMLHttpRequest Level 2

支持 timeout 超时设定
支持使用 FormData 对象管理表单数据
支持文件上传
支持跨域请求
支持获取二进制数据
支持数据传输进度信息

History API

window.history 对象提供了一些有用的方法来操作浏览器访问历史:

history.back()
history.forward()
history.go()

ContentEditable

可编辑元素, 可用于实现富文本编辑器, 详情查看另一篇文章 <在线编辑器实现浅析>.

拖拽 API

用于实现拖拽元素, 主要包括 ondrop ondrag ondragstart ondragend ondragenter ondragleave 等事件及相关属性方法.

焦点管理

document.activeElement 查找当前聚焦的 Element
document.hasFocus 判断当前元素是否是焦点

基于 Web 的协议处理程序

实现在 Web 中可以使用非 HTTP 协议将网页链接到其他资源, 如发邮件等.

属于特定领域功能, 用到时再研究.

动画渲染控制

window.requestAnimationFrame(callback) 执行动画, 并在下一次浏览器重绘前调用 callback.

一般 callback 会更新动画, 用于在不同的渲染时机中触发不同的动画.

全屏 API

element.requestFullscreen() document.exitFullscreen() document.onfullscreenchange document.onfullscreenerror

鼠标锁定 API

使鼠标指针不离开指定区域, 如游戏场景中, 鼠标指针移到最左侧后, 鼠标不会移出游戏窗口, 而是保持在边缘移动画面.

兼容性问题: 只有 Chrome 和 Firefox 实现了有限功能.

设备访问

Camera API 见上文
鼠标锁定 API 见上文

触摸事件

TouchEvent 界面触摸状态发生变化时的事件回调
Touch 单个触摸对象
TouchList 一组触摸对象, 如多点触摸时

地理位置 API

navigator.geolocation 对象提供了一套地理相关 API:

Geolocation.getCurrentPosition() 获取设备当前位置
Geolocation.watchPosition() 设备位置改变时的触发事件

设备方向

deviceorientation 设备方向改变时的触发事件
devicemotion 设备移动时的触发事件

CSS

Background

已经用得很普遍了.

box-shadow 阴影
background 属性支持多背景

Border

同样早就用过

border-image
border-radius

CSS Animations

CSS 动画的灵活性和可玩性都极大, 后面会专门抽时间研究一下.

MDN - CSS Animations

排版相关

文字溢出处理: text-overflow
连字符(长单词)处理: hyphens
- hyphens 属性值
hyphens: none; 单词不断行 hyphens: manual; 有连字符时换行 hyphens: auto; 浏览器自动处理
文字阴影: text-shadow
文字装饰(下划线/中划线): text-decoration
指定在线字体: @font-face

多列布局

参考: MDN-多列布局

column-count: n; 设置后浏览器自动将当前元素分为 n 列

column-width: 200px; 最小列宽

columns: n 200px; 合并列数与列宽设置

column-gap: 20px; 列间隙, 默认 1em