HTML5

HyperText Markup Language

基本结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<!doctype html>
<!-- 声明为html5文件 -->
<html>
<!-- html内容 -->
<head>
<!-- 头部元素: 标题, 元数据, 脚本, 样式， icon, 关系 -->
<title>
<!-- html5中标题必需 -->
</title>
</head>
<body>
<!-- 可见页面内容: 段落, 表单, 链接, 格式, 样式, 程序, 列表, 表格, 框架, 多媒体-->
</body>
</html>

元素(element):

1

<begin_tag property="value"; ...> content </end_tag>

空元素(empty)

1

<tag property="value"; ... />

小写文件名, 完整后缀.html

常用标签

基础: !DOCTYPE, html, head, title, body, h1, …, h6, p, br, hr, !–…–
格式: abbr, b, cite, code, del, i, q, s, small, sup, sub, template, time, u, var, wbr
表单: form, input, textarea, button, select, optgroup, option, label, fieldset, legend, datalist, output
框架: iframe
图像: img, map, area, canvas, figcaption, figure, svg
音视频: audio, source, video
链接: a, link
列表: ul, ol, li, dt, dd
表格: table, caption, th, tr, td, thead, tbody, tfoot, col, colgroup
语义: style, div, span, header, nav, section, article, aside, footer,details, dialog, summary
元信息: base, meta
程序: script, noscript, embed, object

常用属性

全局: class, contenteditable, data-*, dir, draggable, hidden, id, lang, spellcheck, style, tabindex, title
html: manifest
del: cite, datetime
time: datetime
form: accept-charset, action, autocomplete (on; off), enctype (application/x-www-form-urlencoded; multipart/form-data; text/plain), method (get; post), name, target (_blank; _parent; _self; _top)
input: accept, alt, autocomplete, autofocus, checked, disabled, formaction, formenctype, formmethod, formtarget, height, maxlength, multiple, name, readonly, required, size, src, type (button; checkbox; color; date; datetime; datetime-local; email; file; hidden; image; month; number; password; radio; range; reset; search; submit; tel; text; time; url; week), value, width
textarea: autofocus, cols, disabled, maxlength, name, readonly, required, rows, wrap
button: autofocus, disabled, formaction, formenctype, formmethod, formtarget, name, type (button; reset; submit), value
select: autofocus, disabled, multiple, name, required, size
optgroup: disabled, label
option: disabled, label, selected, value
lable: for
iframe: height, name, src, width
img: loading (eager; lazy), alt, height, ismap, src, usemap, width
area: alt, coords, href, hreflang, media, rel, shape (default; rect; circle; poly), target, type (MIME)
canvas: height, width
svg: height, width, xmlns (http://www.w3.org/2000/svg), version (1.1; 1.2; 2.0)
audio: autoplay, controls, loop, src
source: src, type, srcset
video: autoplay, controls, height, loop, muted, poster, src, width
a: download, href, hreflang, media, rel (altrenate; author; bookmark; help; license; next; nofollow; noreference; prefetch; prev; search; tag), target, type
link: href, hreflang, media, rel, type
th: colspan, headers, rowspan, scope (col; colgroup; row; rowgroup)
td: colspan, headers, rowspan
col: span
colgroup: span
base: href, target
meta: charset, content, http-equiv, name
script: async, charset, defer, src, type
embed: height, src, type, width
object: data, height, name, type, usemap, width

字符集

ASCII, utf-8, ISO-8859-1, URL, 实体符号, ISO-639-1