HTML5读书笔记
jack
2023.10.24
常识：
HTML5 是下一代 HTML 标准。
HTML , HTML 4.01的上一个版本诞生于 1999 年
<!DOCTYPE html>用于声明下面代码是H5;
浏览器支持
你可以让一些较早的浏览器（不支持HTML5）支持 HTML5。
现代的浏览器都支持 HTML5
HTML5 <canvas>
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
使用 JavaScript 来绘制图像
使用 style 属性来添加边框:
Canvas 坐标：左上角是00；
可以画线段，圆，字符，渐变，图像，
HTML5 SVG
SVG 定义为可缩放矢量图形。SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。
把 SVG 直接嵌入 HTML 页面。
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
HTML5 MathML
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
HTML5 拖放（Drag 和 Drop）
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
HTML5 Geolocation（地理定位）
HTML5 Geolocation API 用于获得用户的地理位置。
HTML5 Video(视频)
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。
<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.
HTML5 Audio(音频)
HTML5 提供了播放音频文件的标准。
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。
HTML5 新的 Input 类型
HTML5 表单元素
<datalist> : <datalist> 元素规定输入域的选项列表。
<keygen>: <keygen> 元素的作用是提供一种验证用户的可靠方法。<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<output>
<output> 元素用于不同类型的输出，比如计算或脚本输出：
HTML5 新的表单属性
HTML5 的 <form> 和 <input>标签添加了几个新属性.
<form>新属性：
autocomplete: autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
novalidate: novalidate 是一个布尔（true 或 false）属性。
novalidate 属性是 HTML 表单元素的一个布尔属性，用于设置浏览器不对表单进行验证。
<input>新属性：
autocomplete
autofocus: autofocus 属性是一个布尔属性。
autofocus 属性规定在页面加载时，域自动地获得焦点。
form: form 属性规定输入域所属的一个或多个表单。
formaction: The formaction 属性用于描述表单提交的URL地址.
formenctype: formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formmethod: formmethod 属性定义了表单提交的方式。
formnovalidate
formtarget
height 与 width
list: list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
min 与 max
multiple: multiple 属性是一个 boolean 属性.
pattern (regexp): pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。
placeholder: placeholder 属性提供一种提示（hint），描述输入域所期待的值。
required: required 属性是一个 boolean 属性.
step: step 属性为输入域规定合法的数字间隔。
HTML5 语义元素
语义= 意义
语义元素 = 有意义的元素
无语义 元素实例: <div> 和 <span> - 无需考虑内容.
语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<article> 标签定义独立的内容。.
<nav> 标签定义导航链接的部分。
<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。
<header>元素描述了文档的头部区域
<footer> 元素描述了文档的底部区域.
<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
HTML5 Web 存储
HTML5 web 存储，一个比 cookie 更好的本地存储方式。
客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
HTML5 Web SQL 数据库
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。
HTML5 应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
指定该页面需要进行缓存操作。
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
一旦应用被缓存，它就会保持缓存直到发生下列情况：
用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存
HTML5 Web Workers
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
HTML5 服务器发送事件(Server-Sent Events)
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
EventSource 对象用于接收服务器发送事件通知：
HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。