Html5 API
Reference
Html Element
CSS

Html5 API

geolocation
draggable
Storage
Web Worker
SSE
HTML Cache Manifest
WebSocket

top
pagetop # Geolocation ```html ```

top
pagetop # draggable ```html

这是一段可移动的段落。请把该段落拖入上面的矩形。

```

这是一段可移动的段落。请把该段落拖入上面的矩形。

top
pagetop # Storage ![](https://no9.press:33443/blog/1609248294775.png) ```html

```

top
pagetop # Web Worker ```html

```

top
pagetop # SSE _{Server Sent Event - One way messageing} ```html app.get('/sse', function (request, response) { response.status(200).set({ "connection": "keep-alive", "cache-control": "no-cache", "content-Type": "text/event-stream" }) response.write(`data: Hello SSE !!\n\n`) }) ```

在上例中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：

事件	描述
onopen	当通往服务器的连接被打开
onmessage	当接收到消息
onerror	当发生错误

top
pagetop # HTML Cache Manifest ^{deprecated in chrome79} ^{https://www.chromestatus.com/feature/6192449487634432} ```html 文档内容 ...... CACHE MANIFEST # v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp //or * FALLBACK: /html/ /offline.html // offline.html replace html dir all file ```

top
pagetop # WebSocket ```html var websocket = require('ws') class WS { constructor (server) { this.server = server } handle() { var server = this.server var socketio = new websocket.Server({server}) socketio.on('connection', async (socket)=> { console.log('a user connection to server') socket.on('message', (obj)=> { console.log('ws->frome clinet message: '+ obj) socket.send('hello client') }) socket.on('close', ()=> { console.log('disconnect from client') }) }) } } module.exports = WS ``` [https://github.com/websockets/ws#simple-server](https://github.com/websockets/ws#simple-server) [https://www.npmjs.com/package/express-ws](https://www.npmjs.com/package/express-ws) [https://socket.io/get-started/chat/#Introduction](https://socket.io/get-started/chat/#Introduction) & [https://github.com/socketio/socket.io-client](https://github.com/socketio/socket.io-client)

pagetop

Reference

EventProperty
urlcode
httpmessage
httpmethod
globalproperty

top
pagetop

EventProperty

Window 事件属性

针对 window 对象触发的事件（应用到 <body> 标签）：

属性	值	描述
onafterprint	script	文档打印之后运行的脚本。
onbeforeprint	script	文档打印之前运行的脚本。
onbeforeunload	script	文档卸载之前运行的脚本。
onerror	script	在错误发生时运行的脚本。
onhaschange	script	当文档已改变时运行的脚本。
onload	script	页面结束加载之后触发。
onmessage	script	在消息被触发时运行的脚本。
onoffline	script	当文档离线时运行的脚本。
ononline	script	当文档上线时运行的脚本。
onpagehide	script	当窗口隐藏时运行的脚本。
onpageshow	script	当窗口成为可见时运行的脚本。
onpopstate	script	当窗口历史记录改变时运行的脚本。
onredo	script	当文档执行撤销（redo）时运行的脚本。
onresize	script	当浏览器窗口被调整大小时触发。
onstorage	script	在 Web Storage 区域更新后运行的脚本。
onundo	script	在文档执行 undo 时运行的脚本。
onunload	script	一旦页面已下载时触发（或者浏览器窗口已被关闭）。

Form 事件

由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：

属性	值	描述
onblur	script	元素失去焦点时运行的脚本。
onchange	script	在元素值被改变时运行的脚本。
oncontextmenu	script	当上下文菜单被触发时运行的脚本。
onfocus	script	当元素获得焦点时运行的脚本。
onformchange	script	在表单改变时运行的脚本。
onforminput	script	当表单获得用户输入时运行的脚本。
oninput	script	当元素获得用户输入时运行的脚本。
oninvalid	script	当元素无效时运行的脚本。
onreset	script	当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect	script	在元素中文本被选中后触发。
onsubmit	script	在提交表单时触发。

Keyboard 事件

属性	值	描述
onkeydown	script	在用户按下按键时触发。
onkeypress	script	在用户敲击按钮时触发。
onkeyup	script	当用户释放按键时触发。

Mouse 事件

由鼠标或类似用户动作触发的事件：

属性	值	描述
onclick	script	元素上发生鼠标点击时触发。
ondblclick	script	元素上发生鼠标双击时触发。
ondrag	script	元素被拖动时运行的脚本。
ondragend	script	在拖动操作末端运行的脚本。
ondragenter	script	当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleave	script	当元素离开有效拖放目标时运行的脚本。
ondragover	script	当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstart	script	在拖动操作开端运行的脚本。
ondrop	script	当被拖元素正在被拖放时运行的脚本。
onmousedown	script	当元素上按下鼠标按钮时触发。
onmousemove	script	当鼠标指针移动到元素上时触发。
onmouseout	script	当鼠标指针移出元素时触发。
onmouseover	script	当鼠标指针移动到元素上时触发。
onmouseup	script	当在元素上释放鼠标按钮时触发。
onmousewheel	script	当鼠标滚轮正在被滚动时运行的脚本。
onscroll	script	当元素滚动条被滚动时运行的脚本。

Media 事件

由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:

属性	值	描述
onabort	script	在退出时运行的脚本。
oncanplay	script	当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
oncanplaythrough	script	当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange	script	当媒介长度改变时运行的脚本。
onemptied	script	当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。
onended	script	当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
onerror	script	当在文件加载期间发生错误时运行的脚本。
onloadeddata	script	当媒介数据已加载时运行的脚本。
onloadedmetadata	script	当元数据（比如分辨率和时长）被加载时运行的脚本。
onloadstart	script	在文件开始加载且未实际加载任何数据前运行的脚本。
onpause	script	当媒介被用户或程序暂停时运行的脚本。
onplay	script	当媒介已就绪可以开始播放时运行的脚本。
onplaying	script	当媒介已开始播放时运行的脚本。
onprogress	script	当浏览器正在获取媒介数据时运行的脚本。
onratechange	script	每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
onreadystatechange	script	每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
onseeked	script	当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
onseeking	script	当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
onstalled	script	在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend	script	在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate	script	当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onvolumechange	script	每当音量改变时（包括将音量设置为静音）时运行的脚本。
onwaiting	script	当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本

top
pagetop

URL Code

ASCII Value	URL-encode	ASCII Value	URL-encode	ASCII Value	URL-encode
æ	%00	0	%30	`	%60
	%01	1	%31	a	%61
	%02	2	%32	b	%62
	%03	3	%33	c	%63
	%04	4	%34	d	%64
	%05	5	%35	e	%65
	%06	6	%36	f	%66
	%07	7	%37	g	%67
backspace	%08	8	%38	h	%68
tab	%09	9	%39	i	%69
linefeed	%0a	:	%3a	j	%6a
	%0b	;	%3b	k	%6b
	%0c	<	%3c	l	%6c
c return	%0d	=	%3d	m	%6d
	%0e	>	%3e	n	%6e
	%0f	?	%3f	o	%6f
	%10	@	%40	p	%70
	%11	A	%41	q	%71
	%12	B	%42	r	%72
	%13	C	%43	s	%73
	%14	D	%44	t	%74
	%15	E	%45	u	%75
	%16	F	%46	v	%76
	%17	G	%47	w	%77
	%18	H	%48	x	%78
	%19	I	%49	y	%79
	%1a	J	%4a	z	%7a
	%1b	K	%4b	{	%7b
	%1c	L	%4c	\|	%7c
	%1d	M	%4d	}	%7d
	%1e	N	%4e	~	%7e
	%1f	O	%4f		%7f
space	%20	P	%50	€	%80
!	%21	Q	%51		%81
"	%22	R	%52	‚	%82
#	%23	S	%53	ƒ	%83
$	%24	T	%54	„	%84
%	%25	U	%55	…	%85
&	%26	V	%56	†	%86
'	%27	W	%57	‡	%87
(	%28	X	%58	ˆ	%88
)	%29	Y	%59	‰	%89
*	%2a	Z	%5a	Š	%8a
+	%2b	[	%5b	‹	%8b
,	%2c	\	%5c	Œ	%8c
-	%2d	]	%5d		%8d
.	%2e	^	%5e	Ž	%8e
/	%2f	_	%5f		%8f

ASCII Value	URL-encode	ASCII Value	URL-encode	ASCII Value	URL-encode
	%90	À	%c0	ð	%f0
‘	%91	Á	%c1	ñ	%f1
’	%92	Â	%c2	ò	%f2
“	%93	Ã	%c3	ó	%f3
”	%94	Ä	%c4	ô	%f4
•	%95	Å	%c5	õ	%f5
–	%96	Æ	%c6	ö	%f6
—	%97	Ç	%c7	÷	%f7
˜	%98	È	%c8	ø	%f8
™	%99	É	%c9	ù	%f9
š	%9a	Ê	%ca	ú	%fa
›	%9b	Ë	%cb	û	%fb
œ	%9c	Ì	%cc	ü	%fc
	%9d	Í	%cd	ý	%fd
ž	%9e	Î	%ce	þ	%fe
Ÿ	%9f	Ï	%cf	ÿ	%ff
	%a0	Ð	%d0
¡	%a1	Ñ	%d1
¢	%a2	Ò	%d2
£	%a3	Ó	%d3
	%a4	Ô	%d4
¥	%a5	Õ	%d5
\|	%a6	Ö	%d6
§	%a7		%d7
¨	%a8	Ø	%d8
©	%a9	Ù	%d9
ª	%aa	Ú	%da
«	%ab	Û	%db
¬	%ac	Ü	%dc
¯	%ad	Ý	%dd
®	%ae	Þ	%de
¯	%af	ß	%df
°	%b0	à	%e0
±	%b1	á	%e1
²	%b2	â	%e2
³	%b3	ã	%e3
´	%b4	ä	%e4
µ	%b5	å	%e5
¶	%b6	æ	%e6
·	%b7	ç	%e7
¸	%b8	è	%e8
¹	%b9	é	%e9
º	%ba	ê	%ea
»	%bb	ë	%eb
¼	%bc	ì	%ec
½	%bd	í	%ed
¾	%be	î	%ee
¿	%bf	ï	%ef

top
pagetop

Http Message

1xx: 信息

消息:	描述:
100 Continue	服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
101 Switching Protocols	服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。

2xx: 成功

消息:	描述:
200 OK	请求成功（其后是对GET和POST请求的应答文档。）
201 Created	请求被创建完成，同时新的资源被创建。
202 Accepted	供处理的请求已被接受，但是处理未完成。
203 Non-authoritative Information	文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。
204 No Content	没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
205 Reset Content	没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
206 Partial Content	客户发送了一个带有Range头的GET请求，服务器完成了它。

3xx: 重定向

消息:	描述:
300 Multiple Choices	多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
301 Moved Permanently	所请求的页面已经转移至新的url。
302 Found	所请求的页面已经临时转移至新的url。
303 See Other	所请求的页面可在别的url下被找到。
304 Not Modified	未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy	客户请求的文档应该通过Location头所指明的代理服务器提取。
306 Unused	此代码被用于前一版本。目前已不再使用，但是代码依然被保留。
307 Temporary Redirect	被请求的页面已经临时移至新的url。

4xx: 客户端错误

消息:	描述:
400 Bad Request	服务器未能理解请求。
401 Unauthorized	被请求的页面需要用户名和密码。
402 Payment Required	此代码尚无法使用。
403 Forbidden	对被请求页面的访问被禁止。
404 Not Found	服务器无法找到被请求的页面。
405 Method Not Allowed	请求中指定的方法不被允许。
406 Not Acceptable	服务器生成的响应无法被客户端所接受。
407 Proxy Authentication Required	用户必须首先使用代理服务器进行验证，这样请求才会被处理。
408 Request Timeout	请求超出了服务器的等待时间。
409 Conflict	由于冲突，请求无法被完成。
410 Gone	被请求的页面不可用。
411 Length Required	"Content-Length" 未被定义。如果无此内容，服务器不会接受请求。
412 Precondition Failed	请求中的前提条件被服务器评估为失败。
413 Request Entity Too Large	由于所请求的实体的太大，服务器不会接受请求。
414 Request-url Too Long	由于url太长，服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时，就会发生这种情况。
415 Unsupported Media Type	由于媒介类型不被支持，服务器不会接受请求。
416	服务器不能满足客户在请求中指定的Range头。
417 Expectation Failed

5xx: 服务器错误

消息:	描述:
500 Internal Server Error	请求未完成。服务器遇到不可预知的情况。
501 Not Implemented	请求未完成。服务器不支持所请求的功能。
502 Bad Gateway	请求未完成。服务器从上游服务器收到一个无效的响应。
503 Service Unavailable	请求未完成。服务器临时过载或当机。
504 Gateway Timeout	网关超时。
505 HTTP Version Not Supported	服务器不支持请求中指明的HTTP协议版本。

top
pagetop

Http Method

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

top
pagetop

GlobalProperty

# accesskey ```html HTML
CSS ``` HTML 教程
CSS 教程

注释：请使用Alt + accessKey (或者 Shift + Alt + accessKey) 来访问带有指定快捷键的元素。

## class ## contenteditable ^5np ```html

hello world

```

hello world

## contextmenu ^5np ## data-* ^5np ```html

喜鹊
金枪鱼
蝇虎

```

物种

点击某个物种来查看其类别：

喜鹊
金枪鱼
蝇虎

[https://www.w3school.com.cn/tags/att_global_data.asp](https://www.w3school.com.cn/tags/att_global_data.asp) ## dir ```html

Write this text right-to-left!

```

Write this text right-to-left!

[https://www.w3school.com.cn/tags/att_standard_dir.asp](https://www.w3school.com.cn/tags/att_standard_dir.asp) ## deaggable ^5np ```html

这是一段可移动的段落。请把该段落拖入上面的矩形。

```

这是一段可移动的段落。请把该段落拖入上面的矩形。

## dropzone ^5np ## hidden ^5np ```html ``` ## id ## lang ## spellcheck ^5np ## style ## tabindex ```html W3School Google Microsoft ``` W3School Google Microsoft ## title ```html PRC was founded in 1949.

W3School.com.cn

``` PRC was founded in 1949.

W3School.com.cn

## translate

pagetop

Html Element

!doctype
a
abbr
acronym
address
applet
area
article
aside
audio
b
base
basefont
bdi
big
blockquote
body
br
button
canvas
caption
center
cite
code
col
colgroup
command
details
dd
del
dir
div
dialog
em
embed
fieldset
figcaption
figure
font
footer
form
frame
frameset
h1
head
header
hr
i
iframe
img
input
ins
kbd
keygen
label
legend
li
link
main
map
mark
menu
menuitem
meta
meter
nav
noframes
noscript
object
ol
optgroup
option
output
p
param
pre
progress
q
rp
s
samp
script
section
select
small
source
span
strike
strong
style
sub
summary
sup
table
tbody
td
textarea
tfoot
th
thead
time
title
tr
track
ul
video
wbr
# define **^5np**: means label has *^{new property in html5^{* version, you can checkout link below every example
**⁵ⁿ**: means *^{new label}* in html5 version , you can checkout link below every example
**^X**: not support in html5 OR not suggest use
# ``````
> define comment

#
> define document type

```html

```
#define this document is belong html5
```

# \ ^5np
> define anchor
```html
W3School
```
[https://www.w3school.com.cn/tags/tag_a.asp](https://www.w3school.com.cn/tags/tag_a.asp)

top

# \
> define abbreviation
```html
The PRC was founded in 1949.
```
The PRC was founded in 1949.

[https://www.w3school.com.cn/tags/tag_abbr.asp](https://www.w3school.com.cn/tags/tag_abbr.asp)

top

# ^X\
> like abbr label; not support in html5
```html
WWW
```
WWW

[https://www.w3school.com.cn/tags/tag_acronym.asp](https://www.w3school.com.cn/tags/tag_acronym.asp)

top

# \
> define author and contact
```html

Written by Donald Duck.

Visit us at:

Example.com

Box 564, Disneyland

USA

```

Written by Donald Duck.

Visit us at:

Example.com

Box 564, Disneyland

USA

[https://www.w3school.com.cn/tags/tag_address.asp](https://www.w3school.com.cn/tags/tag_address.asp)

top

# X\
> define embed applet, not suggest use, not support in html5, please replace by object
```html

Java applet that draws animated bubbles.

```

Java applet that draws animated bubbles.

[https://www.w3school.com.cn/tags/tag_applet.asp](https://www.w3school.com.cn/tags/tag_applet.asp)

top

# \
> define picture maping area
```html

```

[https://www.w3school.com.cn/tags/tag_area.asp](https://www.w3school.com.cn/tags/tag_area.asp)

top

# \ ⁵ⁿ
> define article
> post blog newspaper comment
```html

Internet Explorer 9
Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....

```

Internet Explorer 9
Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....

[https://www.w3school.com.cn/tags/tag_article.asp](https://www.w3school.com.cn/tags/tag_article.asp)

top

# \ ⁵ⁿ
> define outside of the page content, artile's sidebar
```html
Me and my family visited The Epcot center this summer.

Epcot Center
The Epcot Center is a theme park in Disney World, Florida.

```

Me and my family visited The Epcot center this summer.

Epcot Center
The Epcot Center is a theme park in Disney World, Florida.

[https://www.w3school.com.cn/tags/tag_aside.asp](https://www.w3school.com.cn/tags/tag_aside.asp)

top

# \}}