HTML

发表于 更新于 分类于 阅读次数：

…

基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 声明H5页面 -->
<!DOCTYPE html>
<html>
<head>
<!-- 元数据，utf-8和GBK支持中文 -->
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

概览

doctype

  • 使用标准模式渲染
  • 知道元素的合法性 HTML4 XHTML HTML5

head

  • meta
  • title
  • style
  • link
  • script
  • base - a 标签的 base url

body

  • div / section / article / aside / header / footer
  • p
  • span / em / strong
  • table / thead / tbody / tr / td
  • ul / ol / li / dl / dt / dd
  • a
  • form / input / select / …

重要属性

  • a[href, target]
  • img[src, alt]
  • table td[colspan, rowspan]
  • form[target, method, enctype]
  • input[type, value]
  • button[type]
  • select>option[value]
  • label[for]

对于默认样式，可以用reset模块重绘。

property与attribute互不影响：

  • property - 写在JavaScript中，可变
  • attribute - 写在HTML中，不可变

基本标签

html

  • manifest：规定文档的缓存 manifest 的位置。可能的值：
  • xmlns：只有XHTML支持，规定namespace属性。

p
br
hr
h1
h6
title
body

格式标签

blockquote：定义摘自另一个源的块引用

  • cite：URL，规定引用的来源。

q：定义一个短的引用。

  • cite：URL，规定引用的来源。

address：定义文档作者/所有者的联系信息

cite：定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题

bdi：设置一段文本，使其脱离其父元素的文本方向设置

bdo：文字显示方向

  • dir：规定文字的文本方向
    • 值：ltr，rtl

abbr：表示一个缩写词或者首字母缩略词

b：加粗

i：斜体

u：下划线

mark：带星号文本

small：定义小型文本（和旁注）。

sub：下标

sup：上标

del：删除

  • cite：URL，规定一个解释了文本被删除的原因的文档的 URL
  • datetime：YYYY-MM-DDThh:mm:ssTZD，规定文本删除时间

ins：插入文本

  • cite：URL，规定一个解释了文本被删除的原因的文档的 URL
  • datetime：YYYY-MM-DDThh:mm:ssTZD，规定文本删除时间

wbr：单词换行分割

s：对那些不正确、不准确或者没有用的文本进行标识。

em：呈现为被强调的文本。

strong：定义重要的文本。

code：定义计算机代码文本。

dfn：一个短语标签，用来定义一个定义项目。

samp：定义样本文本。

kbd：定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。

var：定义变量。可以将此标签与 pre 及 code 标签配合使用。

pre：定义预格式化的文本。被包围在pre标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

ruby：定义 ruby 注释（中文注音或字符）。

rp：在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

rt：标签定义字符（中文注音或字符）的解释或发音。

meter：定义度量衡（磁盘空间使用情况等）。类似于进度条，但不是。

  • form：form_id，规定 meter 元素所属的一个或多个表单。
  • high：number，规定被界定为高的值的范围。
  • low：number，规定被界定为低的值的范围。
  • max：number，规定范围的最大值。
  • min：number，规定范围的最小值。
  • optimum：number，规定度量的最优值。
  • value：number，必需。规定度量的当前值。

progress：定义进度条。

  • max：需要完成的最大值
  • value：当前值

time：定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

  • datetime：datetime，规定日期/时间。
  • pubdate：datetime，指示 time 元素中的日期 / 时间是文档（或最近的前辈 article 元素）的发布日期

表单标签

form：表单

  • accept-charset：character_set，规定服务器可处理的表单数据字符集。
  • action：URL，规定当提交表单时向何处发送表单数据。
  • autocomplete：on/off，规定是否启用表单的自动完成功能。
  • enctype：规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=”post” 的情况）
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
  • method：get/post，规定用于发送表单数据的 HTTP 方法。
  • name：text，规定表单的名称。
  • novalidate：novalidate，如果使用该属性，则提交表单时不进行验证。
  • target：规定在何处打开 action URL。
    • _blank
    • _self
    • _parent
    • _top

label：为 input 元素定义标注（标记）。

  • for：element_id，规定 label 与哪个表单元素绑定。
  • form：form_id，规定 label 字段所属的一个或多个表单。

input：规定了用户可以在其中输入数据的输入字段。

  • accept：audio/* video/* image/* MIME_type，规定通过文件上传来提交的文件的类型。 (只针对type=”file”)
  • alt：定义图像输入的替代文本。 (只针对type=”image”)
  • autocomplete：on off，规定输入字段是否应该启用自动完成功能。
  • autofocus：属性规定当页面加载时元素应该自动获得焦点。
  • checked：规定在页面加载时应该被预先选定的input元素。 (只针对 type=”checkbox” 或者 type=”radio”)
  • disabled：规定应该禁用的 input 元素。
  • width：pixels，宽度(只针对type=”image”)
  • height：pixels，高度(只针对type=”image”)
  • name：元素的名称。
  • max：number / date，元素的最大值。
  • min：元素的最小值。
  • maxlenght：允许的最大字符数。
  • multiple：允许用户输入到元素的多个值。
  • pattern：用于验证元素的值的正则表达式。
  • placeholder：描述输入字段预期值的简短的提示信息 。
  • readonly：输入字段是只读的。
  • required：规定必需在提交表单之前填写输入字段。
  • size：规定以字符数计的元素的可见宽度。
  • src：URL，规定显示为提交按钮的图像的 URL。 (只针对 type=”image”)
  • step：合法数字间隔。
  • value：值。
  • list：datalist_id，属性引用 datalist 元素，其中包含 input 元素的预定义选项。
  • type：元素的类型。
    • radio：单选按钮
    • checkbox：复选框
    • range：用于精确值不重要的输入数字的控件
    • color：拾色器
    • file：文件选择字段和 “浏览…” 按钮，供文件上传
    • hidden：隐藏输入字段
    • date：date 控件
    • datetime：date 和 time 控件，基于UTC时区
    • datetime-local：date 和 time 控件，不带时区
    • time：输入时间的控件
    • week：week 和 year 控件
    • month：month 和 year 控件
    • text：默认
    • url：输入 URL 的字段
    • tel：输入电话号码的字段
    • email：用于 e-mail 地址的字段
    • number：用于输入数字的字段
    • password：密码字段
    • search：输入搜索字符串的文本字段
    • submit：提交按钮
    • button：按钮
    • reset：重置按钮
    • image：图像作为提交按钮
  • form：form_id，规定元素所属的一个或多个表单。
  • formaction：URL，属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=”submit” 和 type=”image”)
  • formenctype：属性规定当表单数据提交到服务器时如何编码(只适合 type=”submit” 和 type=”image”)。
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
  • formmethod：定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=”submit” 和 type=”image”)
  • formnovalidate：覆盖form元素的 novalidate 属性。
  • formtarget：规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=”submit” 和 type=”image”)
    • _blank
    • _self
    • _parent
    • _top
    • framename

textarea：一个多行的文本输入控件

  • autofocus：规定当页面加载时，文本区域自动获得焦点。
  • cols：文本区域内可见的宽度。
  • disabled：禁用文本区域。
  • name
  • placeholder
  • readonly
  • required
  • form：form_id
  • maxlength：最大字符数。
  • rows：可见的行数。
  • wrap：当提交表单时，文本区域中的文本应该怎样换行。

button：

  • autofocus：规定当页面加载时，文本区域自动获得焦点。
  • disabled：禁用文本区域。
  • form：form_id
  • name
  • value：按钮初试值
  • type：类型
    • button
    • reset
    • submit
  • form：form_id，规定元素所属的一个或多个表单。
  • formaction：URL，属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=”submit” 和 type=”image”)
  • formenctype：属性规定当表单数据提交到服务器时如何编码(只适合 type=”submit” 和 type=”image”)。
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
  • formmethod：定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=”submit” 和 type=”image”)
  • formnovalidate：覆盖form元素的 novalidate 属性。
  • formtarget：规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=”submit” 和 type=”image”)
    • _blank
    • _self
    • _parent
    • _top
    • framename

select：用来创建下拉列表

  • autofocus：规定当页面加载时，文本区域自动获得焦点。
  • disabled：禁用文本区域。
  • form：form_id
  • name
  • required
  • size：下拉列表中的可见数目
  • multiple：为true时，可以多选

optgroup：用于把相关的选项组合在一起

  • disabled：禁用
  • label：描述

option：定义下拉列表中的一个选项（一个条目）。作为select，optgroup，datalist的元素使用

  • disabled：禁用文本区域。
  • selected：被选中
  • value：送往服务器的值
  • label使用optgroup时的标注

fieldset：将表单内的相关元素分组。

  • disabled：禁用文本区域。
  • name
  • form

legend：为fieldset元素定义标题。

datalist：规定了 input 元素可能的选项列表。使用 input 元素的 list 属性来绑定 datalist 元素。

output：作为计算结果输出显示

  • for：描述计算中使用的元素与计算结果之间的关系。
  • form
  • name

框架

iframe：规定一个内联框架。

  • height：高度
  • width：宽度
  • src：URL，显示的文档
  • name
  • seamless：规定 iframe 看起来像是父文档中的一部分。
  • srcdoc：HTML_code，规定页面中的 HTML 内容显示在 iframe 中。
  • sandbox：定义一系列额外的限制。
    • “”：启用所有限制条件
    • allow-forms：允许将内容作为普通来源对待。
    • allow-same-origin：嵌入的页面的上下文可以导航（加载）内容到顶级的浏览上下文环境
    • allow-scripts：允许表单提交。
    • allow-top-navigation：允许脚本执行。

图像

img：插入一个图像

  • alt：代替文本
  • src：URL，图像链接
  • width：宽度
  • height：高度
  • crossorigin：图像的跨域属性
    • anonymous
    • use-credentials
  • ismap：将图像规定为服务器端图像映射
  • usemap：mapname，将图像定义为客户器端图像映射。

map：用于客户端图像映射。图像映射指带有可点击区域的一幅图像。

  • name：为 image-map 规定的名称。

area：定义图像映射内部的区域

  • alt：替代文本
  • coords：规定区域的坐标。
  • shape：形状
    • default：全部区域
    • rect：矩形
    • circle：圆形
    • poly：多边形
  • type：MIME_type，规定目标 URL 的 MIME 类型。
  • media：规定目标 URL 是为何种媒介/设备优化的。默认：all。
  • href：URL
  • hreflang：language_code
  • target：打开目标 URL
    • _blank
    • _parent
    • _self
    • _top
    • framename
  • rel：规定当前文档与目标 URL 之间的关系。
    • alternate：文档的替代版本（比如打印页、翻译或镜像）。
    • author：链接到文档的作者。
    • bookmark：用于书签的永久网址
    • help：链接到帮助文档
    • license：链接到文档的版权信息。
    • next：选项中的下一个文档
    • nofollow：是一个HTML标签的属性值。这个标签的意义是告诉搜索引擎”不要追踪此网页上的链接”或”不要追踪此特定链接。
    • noreferrer：如果用户点击链接指定浏览不要发送 HTTP referer 头部信息。
    • prefetch：指定的目标文件应该被缓存
    • prev：选项中的前一个文档
    • search：文档链接到搜索工具
    • tag：当前文档的标签(关键词)
1
2
3
4
5
6
7
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
 
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

canvas：通过脚本（通常是 JavaScript）来绘制图形

  • height
  • width

figcaption：为 figure 元素定义标题。

figure：规定独立的流内容（图像、图表、照片、代码等等）。元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。

audio：定义声音，比如音乐或其他音频流。

  • autoplay：音频在就绪后马上播放
  • controls：向用户显示音频控件
  • loop：每当音频结束时重新开始播放
  • muted：音频输出为静音
  • src：音频文件的 URL
  • preload：音频是否默认被加载以及如何被加载
    • auto：页面加载后载入整个音频
    • metadata：页面加载后只载入元数据
    • none：页面加载后不载入音频

source：为媒体元素（比如 video 和 audio）定义媒体资源

  • media：media_query，媒体资源的类型，供浏览器决定是否下载
  • src：URL
  • type：MIME_type，媒体资源的 MIME 类型

track：为媒体元素（比如 audio and video）规定外部文本轨道，这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。

  • default：该轨道是默认的
  • label：文本轨道的标签和标题
  • src：URL
  • srclang：language_code，轨道文本数据的语言
  • kind：文本轨道的文本类型
    • captions：该轨道定义将在播放器中显示的简短说明。
    • chapters：该轨道定义章节，用于导航媒介资源。
    • descriptions：该轨道定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见。
    • metadata：该轨道定义脚本使用的内容。
    • subtitles：该轨道定义字幕，用于在视频中显示字幕。

video：义视频，比如电影片段或其他视频流，支持三种视频格式：MP4、WebM、Ogg。

  • autoplay：音频在就绪后马上播放
  • controls：向用户显示音频控件
  • loop：每当音频结束时重新开始播放
  • muted：音频输出为静音
  • height：高度
  • width：宽度
  • poster：URL，规定视频正在下载时显示的图像，直到用户点击播放按钮。
  • src：音频文件的 URL
  • preload：音频是否默认被加载以及如何被加载
    • auto：页面加载后载入整个音频
    • metadata：页面加载后只载入元数据
    • none：页面加载后不载入音频

链接

nav：定义导航链接的部分，内部使用a标签

main：用于指定文档的主体内容，至多使用一次

a：超链接

  • href：URL
  • hreflang：language_code
  • media：media_query，规定目标 URL 的媒介类型。
  • download：filename，指定下载链接
  • type：MIME_type，规定目标 URL 的 MIME 类型。
  • target：在何处打开URL
    • _blank
    • _parent
    • _self
    • _top
    • framename
  • rel：规定当前文档与目标 URL 之间的关系。
    • alternate：文档的替代版本（比如打印页、翻译或镜像）。
    • author：链接到文档的作者。
    • bookmark：用于书签的永久网址
    • help：链接到帮助文档
    • license：链接到文档的版权信息。
    • next：选项中的下一个文档
    • nofollow：是一个HTML标签的属性值。这个标签的意义是告诉搜索引擎”不要追踪此网页上的链接”或”不要追踪此特定链接。
    • noreferrer：如果用户点击链接指定浏览不要发送 HTTP referer 头部信息。
    • prefetch：指定的目标文件应该被缓存
    • prev：选项中的前一个文档
    • search：文档链接到搜索工具
    • tag：当前文档的标签(关键词)

link：定义文档与外部资源的关系，link 元素是空元素，它仅包含属性，只能存在于 head 部分。

  • href
  • hreflang
  • media：media_query，规定被链接文档将显示在什么设备上。
  • sizes：定义了链接属性大小，只对属性 rel=”icon” 起作用。
  • type：MIME_type
  • rel：规定当前文档与目标 URL 之间的关系。
    • alternate：文档的替代版本（比如打印页、翻译或镜像）。
    • author：链接到文档的作者。
    • bookmark：用于书签的永久网址
    • help：链接到帮助文档
    • license：链接到文档的版权信息。
    • next：选项中的下一个文档
    • nofollow：是一个HTML标签的属性值。这个标签的意义是告诉搜索引擎”不要追踪此网页上的链接”或”不要追踪此特定链接。
    • noreferrer：如果用户点击链接指定浏览不要发送 HTTP referer 头部信息。
    • prefetch：指定的目标文件应该被缓存
    • prev：选项中的前一个文档
    • search：文档链接到搜索工具
    • tag：当前文档的标签(关键词)

元信息

head可以包含的标签

  • title
  • style
  • base
  • link
  • meta
  • script
  • noscript

meta：提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。元数据通常以 名称/值 对出现。如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

  • charset：character_set
  • content：定义与 http-equiv 或 name 属性相关的元信息。
  • http-equiv：把 content 属性关联到一个名称。
    • content-type：规定文档的字符编码。
    • default-style：规定要使用的预定义的样式表。
    • refresh：定义文档自动刷新的时间间隔。
  • name：
    • application-name：规定页面所代表的 Web 应用程序的名称。
    • author：规定文档的作者的名字。
    • description：规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。
    • generator：规定用于生成文档的一个软件包（不用于手写页面）。
    • keywords：规定一个逗号分隔的关键词列表 - 相关的网页
    • viewport：
      • width：设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
      • initial-scale：设置页面的初始缩放值，为一个数字，可以带小数
      • minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
      • maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数
      • height：设置layout viewport 的高度，这个属性对我们并不重要，很少使用
      • user-scalable：是否允许用户进行缩放，值为 “no” 或 “yes”, no 代表不允许，yes 代表允许
    • HandheldFriendly：true，针对手持设备优化，主要是针对一些老的不识别viewport的浏览器
    • MobileOptimized：320，微软的老式浏览器
    • screen-orientation：portrait，uc强制竖屏
    • x5-orientation：portrait，QQ强制竖屏
    • full-screen：yes，UC强制全屏
    • x5-fullscreen：true，QQ强制全屏
    • browsermode：application，UC应用模式
    • x5-page-mode：app，QQ应用模式

base：

  • href：为页面上的所有的相对链接规定默认 URL 或默认目标。
  • target：页面中所有的超链接和表单在何处打开。

列表

ul：定义无序列表

ol：定义了一个有序列表，列表排序以数字来显示

  • reversed：倒序
  • type：1/A/a/I/i，规定列表的类型。

li：定义列表项目，用于ul，ol中。

  • value：规定列表项目的数字

dl：定义一个描述列表，与dt，dd一起使用。

dt：定义一个描述列表的项目/名字

dd：对一个描述列表中的项目/名字进行描述

表格

table：表格

  • border：1/0，是否有边框

caption：定义表格的标题

thead：标签用于组合 HTML 表格的表头内容，内部必须包含一个或者多个 tr 标签。

tbody：规定表格的各个部分

tfoot：用于组合 HTML 表格的页脚内容

th：定义 HTML 表格中的表头单元格

  • colspan：跨列
  • headers：header_id，规定与表头单元格相关联的一个或多个表头单元格。
  • rowspan：跨行
  • scope：规定表头单元格是否是行、列、行组或列组的头部
    • col：规定单元格是列的表头。
    • colgroup：规定单元格是列组的表头。
    • row：规定单元格是行的表头。
    • rowgroup：规定单元格是行组的表头。

tr：定义 HTML 表格中的行

td：标准单元格

  • colspan：跨列
  • headers：header_id，规定与表头单元格相关联的一个或多个表头单元格。
  • rowspan：跨行

col：规定了 colgroup 元素内部的每一列的列属性。

  • span：跨列

colgroup：用于对表格中的列进行组合，以便对其进行格式化

  • span：跨列

节

summary：定义一个可见的标题。只有 Chrome 和 Safari 6 支持

dialog：定义一个对话框、确认框或窗口。

  • open：规定 dialog 元素是有效的，用户可以与它进行交互。

details：标签规定了用户可见的或者隐藏的需求的补充细节。标签用来供用户开启关闭的交互式控件。元素的内容对用户是不可见的，除非设置了 open 属性。只有 Chrome 和 Safari 6 支持

  • open：规定 details 是否可见。

aside：可用作文章的侧栏。定义 article 标签外的内容。

article：定义独立的内容

section：定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

footer：定义文档或者文档的一部分区域的页脚。在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，您可以定义多个 footer 元素。

header：定义文档或者文档的一部分区域的页眉，应该作为介绍内容或者导航链接栏的容器。

style：定义 HTML 文档的样式信息。

  • media：media_query，为样式表规定不同的媒体类型。
  • scoped：如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。
  • type：text/css，规定样式表的 MIME 类型。

div：元素经常与 CSS 一起使用，用来布局网页。默认情况下，浏览器通常会在 div 元素前后放置一个换行符。

span：用于对文档中的行内元素进行组合。

程序

script：用于定义客户端脚本

  • async：异步执行脚本（仅适用于外部脚本）。
  • charset：在脚本中使用的字符编码（仅适用于外部脚本）。
  • defer：当页面已完成解析后，执行脚本（仅适用于外部脚本）。
  • src：URL，外部脚本
  • type：MIME-type
    • text/javascript （默认）
    • text/ecmascript
    • application/ecmascript
    • application/javascript
    • text/vbscript

noscript：text，用来定义在脚本未被执行时的替代内容

embed：定义了一个容器，用来嵌入外部应用或者互动程序（插件）。

  • height
  • width
  • src：URL，嵌入的内容
  • type：MIME_type

object：定义嵌入的对象。

  • form
  • height
  • width
  • name
  • usemap：mapname，规定与对象一同使用的客户端图像映射的名称。
  • type：MIME_type

param：此标签可为包含它的 object 标签提供参数。

  • name
  • value

事件属性

窗口事件

onafterprint：在打印文档之后运行脚本

onbeforeonload：在文档加载之前运行脚本

onblur：当窗口失去焦点时运行脚本

onfocus：当窗口获得焦点时运行脚本

onload：当文档加载时运行脚本

onhaschange：当文档改变时运行脚本

onoffline：当文档离线时运行脚本

ononline：当文档上线时运行脚本

onunload：当用户离开文档时运行脚本

onmessage：当触发消息时运行脚本

onpagehide：当窗口隐藏时运行脚本

onpageshow：当窗口可见时运行脚本

onpopstate:当窗口历史记录改变时运行脚本

onundo：当文档执行撤销时运行脚本

onredo：当文档执行再执行操作（redo）时运行脚本

onresize：当调整窗口大小时运行脚本

onstorage：当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本

onerror：当错误发生时运行脚本

表单事件

onfocus：当元素获得焦点时运行脚本

onblur：当元素失去焦点时运行脚本

onchange：当元素改变时运行脚本

oninput：当元素获得用户输入时运行脚本

oninvalid：当元素无效时运行脚本

onselect：当选取元素时运行脚本

onsubmit：当提交表单时运行脚本

onformchange：当表单改变时运行脚本

onforminput：当表单获得用户输入时运行脚本

oncontextmenu：当触发上下文菜单时运行脚本

键盘属性

onkeydown：当按下按键时运行脚本

onkeypress：当按下并松开按键时运行脚本

onkeyup：当松开按键时运行脚本

鼠标事件

onclick：当单击鼠标时运行脚本

ondblclick：当双击鼠标时运行脚本

ondrag：当拖动元素时运行脚本

ondragend：当拖动操作结束时运行脚本

ondragenter：当元素被拖动至有效的拖放目标时运行脚本

ondragleave：当元素离开有效拖放目标时运行脚本

ondragover：当元素被拖动至有效拖放目标上方时运行脚本

ondragstart：当拖动操作开始时运行脚本

ondrop：当被拖动元素正在被拖放时运行脚本

onmousedown：当按下鼠标按钮时运行脚本

onmousemove：当鼠标指针移动时运行脚本

onmouseout：当鼠标指针移出元素时运行脚本

onmouseover：当鼠标指针移至元素之上时运行脚本

onmouseup：当松开鼠标按钮时运行脚本

onmousewheel：当转动鼠标滚轮时运行脚本

onscroll：当滚动元素的滚动条时运行脚本

多媒体事件

onabort：当发生中止事件时运行脚本

oncanplay：当媒介能够开始播放但可能因缓冲而需要停止时运行脚本

oncanplaythrough：当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本

ondurationchange：当媒介长度改变时运行脚本

onemptied：当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本

onended：当媒介已抵达结尾时运行脚本

onerror：当在元素加载期间发生错误时运行脚本

onloadeddata：当加载媒介数据时运行脚本

onloadedmetadata：当媒介元素的持续时间以及其他媒介数据已加载时运行脚本

onloadstart：当浏览器开始加载媒介数据时运行脚本

onpause：当媒介数据暂停时运行脚本

onplay：当媒介数据将要开始播放时运行脚本

onplaying：当媒介数据已开始播放时运行脚本

onprogress：当浏览器正在取媒介数据时运行脚本

onratechange：当媒介数据的播放速率改变时运行脚本

onreadystatechange：当就绪状态（ready-state）改变时运行脚本

onseeked：当媒介元素的定位属性不再为真且定位已结束时运行脚本

onseeking：当媒介元素的定位属性为真且定位已开始时运行脚本

onstalled：当取回媒介数据过程中（延迟）存在错误时运行脚本

onsuspend：当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本

ontimeupdate：当媒介改变其播放位置时运行脚本

onvolumechange：当媒介改变音量亦或当音量被设置为静音时运行脚本

onwaiting：当媒介已停止播放但打算继续播放时运行脚本

其他

ontoggle：在用户打开或关闭 details 元素时触发。

全局属性

accesskey：设置访问元素的键盘快捷键。使用：Alt + ch

class：规定元素的类名（classname）

contenteditable：true/false，规定是否可编辑元素的内容。

data-*：用于存储页面的自定义数据

dir：ltr/rtl/auto，设置元素中内容的文本方向。

draggable：true/false/auto，指定某个元素是否可以拖动

hidden：hidden 属性规定对元素进行隐藏。

id：规定元素的唯一 id

lang：设置元素中内容的语言代码。

spellcheck：检测元素是否拼写错误

style：规定元素的行内样式（inline style）

tabindex：设置元素的 Tab 键控制次序。

title：规定元素的额外信息（可在工具提示中显示）

MIME

Application

Audio

Video

Image

Text

Multipart

Model

Message

Font

MIME 参考

Audio/Vidio 对象

方法

canPlayType()：检测浏览器是否能播放指定的音频/视频类型。
load()：重新加载音频/视频元素。
play()：开始播放音频/视频。
pause()：暂停当前播放的音频/视频。

属性

audioTracks：返回表示可用音频轨道的 AudioTrackList 对象。
autoplay：设置或返回是否在加载完成后随即播放音频/视频。
buffered：返回表示音频/视频已缓冲部分的 TimeRanges 对象。
controller：返回表示音频/视频当前媒体控制器的 MediaController 对象。
controls：设置或返回音频/视频是否显示控件（比如播放/暂停等）。
crossOrigin：设置或返回音频/视频的 CORS 设置。
currentSrc：返回当前音频/视频的 URL。
currentTime：设置或返回音频/视频中的当前播放位置（以秒计）。
defaultMuted：设置或返回音频/视频默认是否静音。
defaultPlaybackRate：设置或返回音频/视频的默认播放速度。
duration：返回当前音频/视频的长度（以秒计）。
ended：返回音频/视频的播放是否已结束。
error：返回表示音频/视频错误状态的 MediaError 对象。
loop：设置或返回音频/视频是否应在结束时重新播放。
mediaGroup：设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）。
muted：设置或返回音频/视频是否静音。
networkState：返回音频/视频的当前网络状态。
paused：设置或返回音频/视频是否暂停。
playbackRate：设置或返回音频/视频播放的速度。
played：返回表示音频/视频已播放部分的 TimeRanges 对象。
preload：设置或返回音频/视频是否应该在页面加载后进行加载。
readyState：返回音频/视频当前的就绪状态。
seekable：返回表示音频/视频可寻址部分的 TimeRanges 对象。
seeking：返回用户是否正在音频/视频中进行查找。
src：设置或返回音频/视频元素的当前来源。
startDate：返回表示当前时间偏移的 Date 对象。
textTracks：返回表示可用文本轨道的 TextTrackList 对象。
videoTracks：返回表示可用视频轨道的 VideoTrackList 对象。
volume：设置或返回音频/视频的音量。

事件

abort：当音频/视频的加载已放弃时触发。
canplay：当浏览器可以开始播放音频/视频时触发。
canplaythrough：当浏览器可在不因缓冲而停顿的情况下进行播放时触发。
durationchange：当音频/视频的时长已更改时触发。
emptied：当目前的播放列表为空时触发。
ended：当目前的播放列表已结束时触发。
error：当在音频/视频加载期间发生错误时触发。
loadeddata：当浏览器已加载音频/视频的当前帧时触发。
loadedmetadata：当浏览器已加载音频/视频的元数据时触发。
loadstart：当浏览器开始查找音频/视频时触发。
pause：当音频/视频已暂停时触发。
play：当音频/视频已开始或不再暂停时触发。
playing：当音频/视频在因缓冲而暂停或停止后已就绪时触发。
progress：当浏览器正在下载音频/视频时触发。
ratechange：当音频/视频的播放速度已更改时触发。
seeked：当用户已移动/跳跃到音频/视频中的新位置时触发。
seeking：当用户开始移动/跳跃到音频/视频中的新位置时触发。
stalled：当浏览器尝试获取媒体数据，但数据不可用时触发。
suspend：当浏览器刻意不获取媒体数据时触发。
timeupdate：当目前的播放位置已更改时触发。
volumechange：当音量已更改时触发。
waiting：当视频由于需要缓冲下一帧而停止时触发。

Canvas

颜色、样式和阴影

属性：

fillStyle：颜色值/gradient/pattern，设置或返回用于填充绘画的颜色、渐变或模式。
strokeStyle：颜色值/gradient/pattern，设置或返回用于笔触的颜色、渐变或模式。
shadowColor：颜色值，设置或返回用于阴影的颜色。
shadowBlur：number，设置或返回用于阴影的模糊级别。
shadowOffsetX：number，设置或返回阴影与形状的水平距离。
shadowOffsetY：number，设置或返回阴影与形状的垂直距离。

方法：

createLinearGradient(x1, y1, x2, y2)：创建线性渐变（用在画布内容上）。
createPattern(image, “repeat/repeat-x/repeat-y/no-repeat”)：在指定的方向上重复指定的元素。
createRadialGradient(x0,y0,r0,x1,y1,r1)：创建放射状/环形的渐变（用在画布内容上）。
addColorStop(stop, color)：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置，颜色，规定渐变对象中的颜色和停止位置。

线条样式

lineCap：butt/round/square，平直/圆形/正方形，设置或返回线条的结束端点样式。
lineJoin：bevel/round/miter，斜角/圆角/尖角，设置或返回两条线相交时，所创建的拐角类型。
lineWidth：设置或返回当前的线条宽度。
miterLimit：设置或返回最大斜接长度。

矩形

rect(x, y, width, height)：创建矩形。
fillRect(x, y, width, height)：绘制”被填充”的矩形。
strokeRect(x, y, width, height)：绘制矩形（无填充）。
clearRect(x, y, width, height)：在给定的矩形内清除指定的像素。

路径

fill()：填充当前绘图（路径）。
stroke()：绘制已定义的路径。
beginPath()：起始一条路径，或重置当前路径。
moveTo()：把路径移动到画布中的指定点，不创建线条。
x：路径的目标位置的 x 坐标。
y：路径的目标位置的 y 坐标。
closePath()：创建从当前点回到起始点的路径。
lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条。
x：路径的目标位置的 x 坐标。
y：路径的目标位置的 y 坐标。
clip()：从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo()：创建二次贝塞尔曲线。
cpx：贝塞尔控制点的 x 坐标。
cpy：贝塞尔控制点的 y 坐标。
x：结束点的 x 坐标。
y：结束点的 y 坐标。
bezierCurveTo()：创建三次贝塞尔曲线。
cp1x：第一个贝塞尔控制点的 x 坐标。
cp1y：第一个贝塞尔控制点的 y 坐标。
cp2x：第二个贝塞尔控制点的 x 坐标。
cp2y：第二个贝塞尔控制点的 y 坐标。
x：结束点的 x 坐标。
y：结束点的 y 坐标。
arc()：创建弧/曲线（用于创建圆形或部分圆）。
x：圆的中心的 x 坐标。
y：圆的中心的 y 坐标。
r：圆的半径。
sAngle：起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
eAngle：结束角，以弧度计。
counterclockwise：可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
arcTo()：创建两切线之间的弧/曲线。
x1：两切线交点的横坐标。
y1：两切线交点的纵坐标。
x2：第二条切线上一点的横坐标。
y2：第二条切线上一点的纵坐标。
r：弧的半径。
isPointInPath()：如果指定的点位于当前路径中，则返回 true，否则返回 false。
x：要测试的 x 坐标。
y：要测试的 y 坐标。

变换

scale()：缩放当前绘图至更大或更小。
scalewidth：缩放当前绘图的宽度（1=100%，0.5=50%，2=200%，依次类推）。
scaleheight：缩放当前绘图的高度（1=100%，0.5=50%，2=200%，依次类推）。
rotate()：旋转当前绘图。
angle：旋转角度，以弧度计。
translate()：重新映射画布上的 (0,0) 位置。
x：添加到水平坐标（x）上的值。
y：添加到垂直坐标（y）上的值。
transform()：替换绘图的当前转换矩阵。
a：水平缩放绘图。
b：水平倾斜绘图。
c：垂直倾斜绘图。
d：垂直缩放绘图。
e：水平移动绘图。
f：垂直移动绘图。
setTransform()：将当前转换重置为单位矩阵。然后运行 transform()。
a：水平缩放绘图。
b：水平倾斜绘图。
c：垂直倾斜绘图。
d：垂直缩放绘图。
e：水平移动绘图。
f：垂直移动绘图。

文本

font：设置或返回文本内容的当前字体属性。
textAlign：设置或返回文本内容的当前对齐方式。
start：默认。文本在指定的位置开始。
end：文本在指定的位置结束。
center：文本的中心被放置在指定的位置。
left：文本在指定的位置开始。
right：文本在指定的位置结束。
textBaseline：设置或返回在绘制文本时使用的当前文本基线。
alphabetic：默认。文本基线是普通的字母基线。
top：文本基线是 em 方框的顶端。
hanging：文本基线是悬挂基线。
middle：文本基线是 em 方框的正中。
ideographic：文本基线是表意基线。
bottom：文本基线是 em 方框的底端。

fillText()：在画布上绘制”被填充的”文本。
text：规定在画布上输出的文本。
x：开始绘制文本的 x 坐标位置（相对于画布）。
y：开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth：可选。允许的最大文本宽度，以像素计。
strokeText()：在画布上绘制文本（无填充）。
text：规定在画布上输出的文本。
x：开始绘制文本的 x 坐标位置（相对于画布）。
y：开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth：可选。允许的最大文本宽度，以像素计。
measureText()：返回包含指定文本宽度的对象。
text：要测量的文本。

font：
font-style：规定字体样式。可能的值：
normal
italic
oblique
font-variant：规定字体变体。可能的值：
normal
small-caps
font-weight：规定字体的粗细。可能的值：
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
font-size/line-height：规定字号和行高，以像素计。
font-family：规定字体系列。
caption：使用标题控件的字体（比如按钮、下拉列表等）。
icon：使用用于标记图标的字体。
menu：使用用于菜单中的字体（下拉列表和菜单列表）。
message-box：使用用于对话框中的字体。
small-caption：使用用于标记小型控件的字体。
status-bar：使用用于窗口状态栏中的字体。

图像绘制

drawImage(img, sx, sy, swidth, sheight, x, y, width, height)：图像，裁剪区域，放置区域。向画布上绘制图像、画布或视频。

像素操作

width：返回 ImageData 对象的宽度。
height：返回 ImageData 对象的高度。
data：返回一个对象，其包含指定的 ImageData 对象的图像数据。每个对象占数组的4个连续下标

createImageData(width, height, imageData)：创建新的、空白的 ImageData 对象。
getImageData(x, y, width, height)：返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。
putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight)：把图像数据（从指定的 ImageData 对象）放回画布上。

合成

globalAlpha：透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间。设置或返回绘图的当前 alpha 或透明值。
globalCompositeOperation：设置或返回新图像如何绘制到已有的图像上。

值：
source-over：默认。在目标图像上显示源图像。
source-atop：在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in：在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
source-out：在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。
destination-over：在源图像上显示目标图像。
destination-atop：在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
destination-in：在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。
destination-out：在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
lighter：显示源图像 + 目标图像。
copy：显示源图像。忽略目标图像。
xor：使用异或操作对源图像与目标图像进行组合。

其他

方法：

save()：保存当前环境的状态。
restore()：返回之前保存过的路径状态和属性。
createEvent()：创建事件
getContext()： 获取上下文
toDataURL()：转Base64编码

案例

基础操作

1
2
3
4
5
6
let canvas = document.getElementById('canvas')
let context = canvas.getContext('2d')
window.onload = () => {
  canvas.width = 1152
  canvas.height = 768
}

绘制一个红色矩形

1
2
canvas.fillStyle('red')
canvas.fillRect(100, 100, 400, 400)

图像缩放

1
2
3
4
5
6
7
8
9
10
11
let image = new Image()
img.src = 'img.jpg'
// 当图像加载完成后开始绘制
img.onload = () => {
  // 从(0, 0)绘制
  context.drawImage(image, 0, 0)
  // 从(0, 0)绘制，图像缩放为(300, 500)
  context.drawImage(image, 0, 0, 300, 500)
  // 将原图像映射到画布上(放大2倍)
  context.drawImage(image, 0, 0, 300, 500, 0, 0, 600, 1000)
}

图像加水印

1
2
3
4
5
6
7
8
// drawImage 也可以传 canvas 参数
let waterMarkCanvas = document.getElementById('water-mark-canvas')
let waterMarkContext = waterMarkCanvas.getContext('2d')
waterMarkCanvas.width = 300
waterMarkCanvas.height = 500
waterMarkContext.fillStyle = "rgba(255,255,255,0.3)"
waterMarkContext.fillText("abcd", 20, 50)
context.drawImage(waterMarkCanvas, 0, 0, 300, 500, 0, 0, 30, 50)

放大镜（离屏）

1
<canvas id="off-canvas" style="display: none"/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
let isMouseDown = false
let canvas = document.getElementById('canvas')
let context = canvas.getContext('2d')
let offCanvas = document.getElementById('off-canvas')
let offContext = canvas.getContext('2d')

let release = (event) => {
  event.preventDefualt()
  isMouseDown = false
}
let getTruePosition = (event) => {
  let { left, top } = canvas.getBoundingClientRect()
  let x = event.clientX - left
  let y = event.clientY - top
  return {x, y}
}

canvas.onmousedown = (event) => {
  // 禁用默认事件
  event.preventDefualt()
  // 默认获取的是鼠标相对浏览器的坐标，需要转化为相对 canvas 的坐标
  isMouseDown = true
  let point = getTruePosition(event)
  // Todo
  // 保存上下文
  context.save()
  context.beginPath()
  context.arc(point.x, point.y, 100, 0, Math.PI * 2)
  // clip 后只能在区域内绘制
  context.clip()
  context.drawImage(offCanvas, ...)
  // 恢复上下文
  context.restore()
}
canvas.onmousemove = (event) => {
  event.preventDefualt()
  if(!isMouseDown) return
  // Todo
}

canvas.onmouseup = release
canvas.onmouseout = release

滤镜

1
2
3
4
5
6
7
// 获取图像的区域像素
let imageData = context.getImageData(x, y, w, h)
// 应用图像的区域像素
let imageData = context.putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyW, dirtyH)
// 创建ImageData
let imageData = context.createImageData(w, h)
// Todo