Geolocation API
Geolocation API 用于获取用户的地理位置。
由于该功能涉及用户隐私，所以浏览器会提示用户，是否同意给出地理位置，用户可能会拒绝。另外，这个
API 只能在 HTTPS 环境使用。
浏览器通过navigator.geolocation属性提供该 API。
Geolocation 对象
navigator.geolocation属性返回一个 Geolocation
对象。该对象具有以下三个方法。
Geolocation.getCurrentPosition()：返回一个 Position
对象，表示用户的当前位置。
Geolocation.watchPosition()：指定一个监听函数，每当用户的位置发生变化，就执行该监听函数。
Geolocation.clearWatch()：取消watchPosition()方法指定的监听函数。
Geolocation.getCurrentPosition()
Geolocation.getCurrentPosition()方法用于获取用户的位置。
1navigator.geolocation.get ...
FontFace API
FontFace API 用来控制字体加载。
这个 API
提供一个构造函数FontFace()，返回一个字体对象。
1new FontFace(family, source, descriptors)
FontFace()构造函数接受三个参数。
family：字符串，表示字体名，写法与 CSS
的@font-face的font-family属性相同。
source：字体文件的 URL（必须包括 CSS
的url()方法），或者是一个字体的 ArrayBuffer 对象。
descriptors：对象，用来定制字体文件。该参数可选。
123456var fontFace = new FontFace( 'Roboto', 'url(https://fonts.example.com/roboto.woff2)');fontFace.family // "Roboto"
FontFace()返回的是一个字体对象，这个对象包含字体信息。注意，这时字体文件还没有开始加载。
字体对象包含以下属性。 ...
Fetch API 教程
fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript
脚本里面发出 HTTP 请求。
浏览器原生提供这个对象。本章详细介绍它的用法。
基本用法
fetch()的功能与 XMLHttpRequest
基本相同，但有三个主要的差异。
（1）fetch()使用
Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。
（2）fetch()采用模块化设计，API
分散在多个对象上（Response 对象、Request 对象、Headers
对象），更合理一些；相比之下，XMLHttpRequest 的 API
设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。
（3）fetch()通过数据流（Stream
对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest
对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。
在用法上，fetch()接受一个 URL
字符串作为参数，默 ...
剪贴板操作 Clipboard API
教程
简介
浏览器允许 JavaScript 脚本读写剪贴板，自动复制或粘贴内容。
一般来说，脚本不应该改动用户的剪贴板，以免不符合用户的预期。但是，有些时候这样做确实能够带来方便，比如“一键复制”功能，用户点击一下按钮，指定的内容就自动进入剪贴板。
目前，一共有三种方法可以实现剪贴板操作。
Document.execCommand()方法
异步的 Clipboard API
copy事件和paste事件
本文逐一介绍这三种方法。
Document.execCommand() 方法
Document.execCommand()是操作剪贴板的传统方法，各种浏览器都支持。
它支持复制、剪切和粘贴这三个操作。
document.execCommand('copy')（复制）
document.execCommand('cut')（剪切）
document.execCommand('paste')（粘贴）
（1）复制操作
复制时，先选中文本，然后调用document.execCommand('copy')，选中的文本就会进入剪贴板。
123con ...
Canvas API
概述
<canvas>元素用于生成图像。它本身就像一个画布，JavaScript
通过操作它的
API，在上面生成图像。它的底层是一个个像素，基本上<canvas>是一个可以用
JavaScript 操作的位图（bitmap）。
它与 SVG
图像的区别在于，<canvas>是脚本调用各种方法生成图像，SVG
则是一个 XML 文件，通过各种子元素生成图像。
使用 Canvas API
之前，需要在网页里面新建一个<canvas>元素。
123<canvas id="myCanvas" width="400" height="250"> 您的浏览器不支持 Canvas</canvas>
如果浏览器不支持这个
API，就会显示<canvas>标签中间的文字：“您的浏览器不支持
Canvas”。
每个<canvas>元素都有一个对应的CanvasRenderingContext2D对象（上下文对象）。Canva ...
其他标签
本章介绍一些最新引入标准的标签。
<dialog>
基本用法
<dialog>标签表示一个可以关闭的对话框。
123<dialog> Hello world</dialog>
上面就是一个最简单的对话框。
默认情况下，对话框是隐藏的，不会在网页上显示。如果要让对话框显示，必须加上open属性。
123<dialog open> Hello world</dialog>
上面代码会在网页显示一个方框，内容是Hello world。
<dialog>元素里面，可以放入其他 HTML 元素。
123456<dialog open> <form method="dialog"> <input type="text"> <button type="submit" value="foo">提交</button> </form>< ...
表单标签
表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。
表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。
<form>
简介
<form>标签用来定义一个表单，所有表单内容放到这个容器元素之中。
123<form> <!-- 各种表单控件--></form>
上面代码就是表单的基本形式。
下面是一个比较常见的例子。
12345<form action="https://example.com/api" method="post"> <label for="POST-name">用户名：</label> <input id="POST-name" type="text" name="user"> <input type ...
iframe
<iframe>标签用于在网页里面嵌入其他网页。
基本用法
<iframe>标签生成一个指定区域，在该区域中嵌入其他网页。它是一个容器元素，如果浏览器不支持<iframe>，就会显示内部的子元素。
12345<iframe src="https://www.example.com" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p><a href="https://www.example.com">点击打开嵌入页面</a></p></iframe>
上面的代码在当前网页嵌入https://www.example.com，显示区域的宽度是100%，高度是500像素。如果当前浏览器不支持<iframe>，则会显示一个链接，让用户点击。
浏览 ...
表格标签
表格（table）以行（row）和列（column）的形式展示数据。
<table>，<caption>
<table>是一个块级容器标签，所有表格内容都要放在这个标签里面。
123<table> ... ...</table>
<caption>总是<table>里面的第一个子元素，表示表格的标题。该元素是可选的。
123<table> <caption>示例表格</caption></table>
<thead>、<tbody>、<tfoot>
<thead>、<tbody>、<tfoot>都是块级容器元素，且都是<table>的一级子元素，分别表示表头、表体和表尾。
12345<table> <thead>... ...</thead> <tbody>... ...</tbody> & ...
多媒体标签
除了图像，网页还可以放置视频和音频。
<video>
<video>标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示<video>内部的子元素。
123<video src="example.mp4" controls> <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p></video>
上面代码中，如果浏览器不支持该种格式的视频，就会显示<video>内部的文字提示。
<video>有以下属性。
src：视频文件的网址。
controls：播放器是否显示控制栏。该属性是布尔属性，不用赋值，只要写上属性名，就表示打开。如果不想使用浏览器默认的播放器，而想使用自定义播放器，就不要使用该属性。
width：视频播放器的宽度，单位像素。
height：视频播放器的高度，单位像素。
autopla ...