HTML5教程 - 技术栈

HTML5读书笔记

jack

2023.10.24

来源：HTML5 Canvas | 菜鸟教程

常识：

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> 元素用于不同类型的输出，比如计算或脚本输出：

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 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

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 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。