HTML表格制作

.表格的制作

1、表格元素–<table>

表格中的行–<tr>

表格中的列–<td>

表格中的表头–【居中/加粗】

table标记的边框–border

table标记的宽度–width

table标记的高度–height

table标记的水平对齐方式–align

table标记的表格背景色–bgcolor

table标记的表格边框色–bordercolor

table标记的表格中的内容与边框之间的距离–cellpadding

table标记的表格中的边框与边框之间的距离–cellspacing【默认是1px】

tr标记的align属性–设置当前行的水平对齐方式

tr标记的bgcolor属性–设置当前行的背景色

tr标记的valign属性–设置当前行的垂直对齐方式【top/middle/bottom】

td标记的align属性–设置当前列的水平对齐方式

td标记的bgcolor属性–设置当前列的背景色

td标记的valign属性–设置当前列的垂直对齐方式【top/middle/bottom】

合并单元格

水平方向合并单元格–跨列—colspan

垂直方向合并单元格–跨行—rowspan
删除多余的单元格*

以下是计算器的控制面板代码

<!DOCTYPE html>

<html>

<head>

<title>计算器的控制面板</title>

</head>

<body>

<table border="1" cellspacing="10px" cellpadding="20px"

align="center" bgcolor="aliceblue">

</tr>

</tr>

</tr>

</tr>

<td rowspan="2" bgcolor="yellow">=

</td>

</tr>

</tr>

</table>

</body>

</html>

看成品:

2. 列表元素

2.1 有序列表

ol—有序列表

li—列表中的每一项【条目】

默认的标志是有顺序的数字

我们可以通过ol的type属性来修改标志

1–有顺序的数字

a–有顺序的小写字母

A–有顺序的大写字母

i–有顺序的小写罗马数字

I–有顺序的大写罗马数字

start属性设置书顺序的开始值

2.2 无序列表

ul—无序列表

li—列表中的每一项【条目】

默认的标志是实心点

我们可以通过ul的type属性来修改标志

circle–圆形【。】

disc----实心点[默认]

square–正方形

none–没有标志

2.3 自定义列表

dl—自定义列表

dt—自定义列表的头

dd—子项目

以下是有序，无序，和自定义列表

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</ol>

<dl>

<dt>自定义列表</dt>

</dl>

</body>

</html>

3. 表单<form>

主要负责采集信息的，可以将采集的信息提交。

form的属性

action—指定表单数据的后端处理程序

method----指定表单数据的提交方式【get[默认]/post】

get提交数据会将被处理的数据跟随在请求地址之后

被提交的数据255个字符

https://www.baidu.com/s?&wd=html

post提交数据会将被处理的数据封装到http协议的头

https://www.baidu.com/s

被提交的数据没有限制

通常情况下提交文件只能用post

enctype属性规定在将表单数据发送到服务器之前如何对其进行编码。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<td>application/x-www-form-urlencoded</td>

<td>在发送前对所有字符进行编码（默认）。</td>

</tr>

<tr>

<td>multipart/form-data</td>

<td>不对字符编码。当使用有文件上传控件的表单时，该值是必需的。

</td>

</tr>

<tr>

<td>text/plain</td>

<td>将空格转换为 "+" 符号，但不编码特殊字符。</td>

</tr>

</table>

</body>

</html>

表单元素

input 文本框/密码框/单选按钮/复选框…

seletc 下拉列表

textarea 文本域—富文本编辑器

SS in JS

CSS in JS是一种解决css问题想法的集合，而不是一个指定的库。从CSS in JS的字面意思可以看出，它是将css样式写在JavaScript文件中，而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、tree-shaking。还解决了css中的一些问题，譬如：更方便解决基于状态的样式，更容易追溯依赖关系，生成唯一的选择器来锁定作用域。尽管CSS in JS不是一个很新的技术，但国内的普及程度并不高。由于Vue和Angular都有属于他们自己的一套定义样式的方案，React本身也没有管用户怎样定义组件的样式[1]，所以CSS in JS在React社区的热度比较高。

目前为止实现CSS in JS的第三方库有很多:(http://michelebertoli.github.io/css-in-js/)。像JSS[2]、styled-components[3]等。在这里我们就不展开赘述了(相关链接已放在下方)，这篇文章的重点是JS in CSS。

JS in CSS又是什么

在上面我们提到CSS in JS就是把CSS写在JavaScript中，那么JS in CSS我们可以推断出就是可以在CSS中使用JavaScript脚本，如下所示。可以在CSS中编写Paint API的功能。还可以访问：ctx，geom。甚至我们还可以编写自己的css自定义属性等。这些功能的实现都基于CSS Houdini[4]。

.el {
  --color: cyan;
  --multiplier: 0.24;
  --pad: 30;
  --slant: 20;
  --background-canvas: (ctx, geom) => {
    let multiplier = var(--multiplier);
    let c = `var(--color)`;
    let pad = var(--pad);
    let slant = var(--slant);

    ctx.moveTo(0, 0);
    ctx.lineTo(pad + (geom.width - slant - pad) * multiplier, 0);
    ctx.lineTo(pad + (geom.width - slant - pad) * multiplier + slant, geom.height);
    ctx.lineTo(0, geom.height);
    ctx.fillStyle = c;
    ctx.fill();
  };
  background: paint(background-canvas);
  transition: --multiplier .4s;
}
.el:hover {
  --multiplier: 1;
}

Houdini 解决了什么问题

CSS 与 JS的标准制定流程对比

在如今的Web开发中，JavaScript几乎占据了项目代码的大部分。我们可以在项目开发中使用ES 2020、ES2021、甚至提案中的新特性（如:Decorator[5]），即使浏览器尚未支持，也可以编写Polyfill或使用Babel之类的工具进行转译，让我们可以将最新的特性应用到生产环境中（如下图所示）。

JavaScript标准制定流程.png

而CSS就不同了，除了制定CSS标准规范所需的时间外，各家浏览器的版本、实战进度差异更是旷日持久（如下图所示），最多利用PostCSS、Sass等工具來帮我们转译出浏览器能接受的CSS。开发者们能操作的就是通过JS去控制DOM与CSSOM来影响页面的变化，但是对于接下來的Layout、Paint与Composite就几乎没有控制权了。为了解决上述问题，为了让CSS的魔力不在受到浏览器的限制，Houdini就此诞生。

CSS 标准制定流程.png

CSS Polyfill

我们上文中提到JavaScript中进入提案中的特性我们可以编写Polyfill，只需要很短的时间就可以讲新特性投入到生产环境中。这时，脑海中闪现出的第一个想法就是CSS Polyfill，只要CSS的Polyfill 足够强大，CSS或许也能有JavaScript一样的发展速度，令人可悲的是编写CSS Polyfill异常的困难，并且大多数情况下无法在不破坏性能的情况下进行。这是因为JavaScript是一门动态脚本语言[6]。它带来了极强的扩展性，正是因为这样，我们可以很轻松使用JavaScript做出JavaScript的Polyfill。但是CSS不是动态的，在某些场景下，我们可以在编译时将一种形式的CSS的转换成另一种(如PostCSS[7])。如果你的Polyfill依赖于DOM结构或者某一个元素的布局、定位等，那么我们的Polyfill就无法编译时执行，而需要在浏览器中运行了。不幸的是，在浏览器中实现这种方案非常不容易。

页面渲染流程.png

如上图所示，是从浏览器获取到HTML到渲染在屏幕上的全过程，我们可以看到只有带颜色（粉色、蓝色）的部分是JavaScript可以控制的环节。首先我们根本无法控制浏览器解析HTML与CSS并将其转化为DOM与CSSOM的过程，以及Cascade,Layout,Paint,Composite我们也无能为力。整个过程中我们唯一完全可控制的就是DOM，另外CSSOM部分可控。

CSS Houdini草案中提到，这种程度的暴露是不确定的、兼容性不稳定的以及缺乏对关键特性的支持的。比如，在浏览器中的 CSSOM 是不会告诉我们它是如何处理跨域的样式表，而且对于浏览器无法解析的 CSS 语句它的处理方式就是不解析了，也就是说——如果我们要用 CSS polyfill让浏览器去支持它尚且不支持的属性，那就不能在 CSSOM 这个环节做，我们只能遍历一遍DOM，找到 <style> 或 <link rel="stylesheet"> 标签，获取其中的 CSS 样式、解析、重写，最后再加回 DOM 树中。令人尴尬的是，这样DOM树全部刷新了，会导致页面的重新渲染（如下如所示）。

即便如此，有的人可能会说：“除了这种方法，我们也别无选择，更何况对网站的性能也不会造成很大的影响”。那么对于部分网站是这样的。但如果我们的Polyfill是需要对可交互的页面呢？例如scroll，resize，mousemove，keyup等等，这些事件随时会被触发，那么意味着随时都会导致页面的重新渲染，交互不会像原本那样丝滑，甚至导致页面崩溃，对用户的体验也极其不好。

综上所述，如果我们想让浏览器解析它不认识的样式（低版本浏览器使用grid布局），然而渲染流程我们无法介入，我们也只能通过手动更新DOM的方式，这样会带来很多问题，Houdini的出现正是致力于解决他们。

Houdini API

Houdini是一组底层API，它公开了CSS引擎的各个部分，如下图所示展示了每个环节对应的新API（灰色部分各大浏览器还未实现），从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS。Houdini是一群来自Mozilla，Apple，Opera，Microsoft，HP，Intel和Google的工程师组成的工作小组设计而成的。它们使开发者可以直接访问CSS对象模型（CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本地实现。

CSS Houdini-API

Properties & Values API

尽管当前已经有了CSS变量，可以让开发者控制属性值，但是无法约束类型或者更严格的定义，CSS Houdini新的API，我们可以扩展css的变量，我们可以定义CSS变量的类型,初始值,继承。它是css变量更强大灵活。

CSS变量现状：

.dom {
  --my-color: green;
  --my-color: url('not-a-color'); // 它并不知道当前的变量类型
  color: var(--my-color);
}

Houdini提供了两种自定义属性的注册方式，分别是在js和css中。

CSS.registerProperty({
  name: '--my-prop', // String 自定义属性名
  syntax: '<color>', // String 如何去解析当前的属性，即属性类型，默认 *
  inherits: false, // Boolean 如果是true，子节点将会继承
  initialValue: '#c0ffee', // String 属性点初始值
});

我们还可以在css中注册，也可以达到上面的效果

@property --my-prop {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

这个API中最令人振奋人心的功能是自定义属性上添加动画，像这样：transition: --multiplier 0.4s;，这个功能我们在前面介绍什么是js in css那个demo[8]用使用过。我们还可以使用+使syntax属性支持一个或多个类型，也可以使用|来分割。更多syntax属性值：

属性值描述<length>长度值<number>数字<percentage>百分比<length-percentage>长度或百分比,calc将长度和百分比组成的表达式<color>颜色<image>图像<url>网址<integer>整数<angle>角度<time>时间<resolution>分辨率<transform-list>转换函数<custom-ident>ident

Worklets

Worklets是渲染引擎的扩展，从概念上来讲它类似于Web Workers[9]，但有几个重要的区别：

设计为并行，每个Worklets必须始终有两个或更多的实例，它们中的任何一个都可以在被调用时运行
作用域较小，限制不能访问全局作用域的API（Worklet的函数除外）
渲染引擎会在需要的时候调用他们，而不是我们手动调用

Worklet是一个JavaScript模块，通过调用worklet的addModule方法（它是个Promise）来添加。比如registerLayout,registerPaint, registerAnimator 我们都需要放在Worklet中

//加载单个
await demoWorklet.addModule('path/to/script.js');

// 一次性加载多个worklet
Promise.all([
  demoWorklet1.addModule('script1.js'),
  demoWorklet2.addModule('script2.js'),
]).then(results => {});

registerDemoWorklet('name', class {

  // 每个Worklet可以定义要使用的不同函数
  // 他们将由渲染引擎在需要时调用
  process(arg) {
    return !arg;
  }
});

Worklets的生命周期

Worklets lifecycle

Worklet的生命周期从渲染引擎内开始
对于JavaScript，渲染引擎启动JavaScript主线程
然后他将启动多个worklet进程，并且可以运行。这些进程理想情况下是独立于主线程的线程，这样就不会阻塞主线程(但它们也不需要阻塞)
然后在主线程中加载我们浏览器的JavaScript
该JavaScript调用 worklet.addModule 并异步加载一个worklet
加载后，将worklet加载到两个或多个可用的worklet流程中
当需要时，渲染引擎将通过从加载的Worklet中调用适当的处理函数来执行Worklet。该调用可以针对任何并行的Worklet实例。

Typed OM

Typed OM是对现有的CSSOM的扩展，并实现 Parsing API 和 Properties & Values API相关的特性。它将css值转化为有意义类型的JavaScript的对象，而不是像现在的字符串。如果我们尝试将字符串类型的值转化为有意义的类型并返回可能会有很大的性能开销，因此这个API可以让我们更高效的使用CSS的值。

现在读取CSS值增加了新的基类CSSStyleValue，他有许多的子类可以更加精准的描述css值的类型：

子类描述CSSKeywordValueCSS关键字和其他标识符（如inherit或grid）CSSPositionValue位置信息 (x,y)CSSImageValue表示图像的值属性的对象CSSUnitValue表示为具有单个单位的单个值（例如50px），也可以表示为没有单位的单个值或百分比CSSMathValue比较复杂的数值，比如有calc，min和max。这包括子类 CSSMathSum, CSSMathProduct, CSSMathMin,CSSMathMax, CSSMathNegate 和 CSSMathInvertCSSTransformValue由CSS transforms组成的CSSTransformComponent列表，其中包括CSSTranslate, CSSRotate, CSSScale, CSSSkew, CSSSkewX, CSSSkewY, CSSPerspective 和 CSSMatrixComponent

使用Typed OM主要有两种方法：

通过attributeStyleMap设置和获取有类型的行间样式
通过computedStyleMap获取元素完整的Typed OM样式

使用attributeStyleMap设置并获取

myElement.attributeStyleMap.set('font-size', CSS.em(2));
myElement.attributeStyleMap.get('font-size'); // CSSUnitValue { value: 2, unit: 'em' }

myElement.attributeStyleMap.set('opacity', CSS.number(.5));
myElement.attributeStyleMap.get('opacity'); // CSSUnitValue { value: 0.5, unit: 'number' };

在线demo[10]

使用computedStyleMap

.foo {
  transform: translateX(1em) rotate(50deg) skewX(10deg);
  vertical-align: baseline;
  width: calc(100% - 3em);
}

const cs = document.querySelector('.foo').computedStyleMap();

cs.get('vertical-align');
// CSSKeywordValue {
//  value: 'baseline',
// }

cs.get('width');
// CSSMathSum {
//   operator: 'sum',
//   length: 2,
//   values: CSSNumericArray {
//     0: CSSUnitValue { value: -90, unit: 'px' },
//     1: CSSUnitValue { value: 100, unit: 'percent' },
//   },
// }

cs.get('transform');
// CSSTransformValue {
//   is2d: true,
//   length: 3,
//   0: CSSTranslate {
//     is2d: true,
//     x: CSSUnitValue { value: 20, unit: 'px' },
//     y: CSSUnitValue { value: 0, unit: 'px' },
//     z: CSSUnitValue { value: 0, unit: 'px' },
//   },
//   1: CSSRotate {...},
//   2: CSSSkewX {...},
// }

Layout API

开发者可以通过这个API实现自己的布局算法，我们可以像原生css一样使用我们自定义的布局（像display:flex, display:table）。在Masonry layout library[11] 上我们可以看到开发者们是有多想实现各种各样的复杂布局，其中一些布局光靠 CSS 是不行的。虽然这些布局会让人耳目一新印象深刻，但是它们的页面性能往往都很差，在一些低端设备上性能问题犹为明显。

CSS Layout API 暴露了一个registerLayout方法给开发者，接收一个布局名（layout name）作为后面在 CSS中使用的属性值，还有一个包含有这个布局逻辑的JavaScript类。

my-div {
  display: layout(my-layout);
}

// layout-worklet.js
registerLayout('my-layout', class {
  static get inputProperties() { return ['--foo']; }
  
  static get childrenInputProperties() { return ['--bar']; }
  
  async intrinsicSizes(children, edges, styleMap) {}

  async layout(children, edges, constraints, styleMap) {}
});

await CSS.layoutWorklet.addModule('layout-worklet.js');

目前浏览器大部分还不支持

Painting API

我们可以在CSS background-image中使用它，我们可以使用Canvas 2d上下文，根据元素的大小控制图像，还可以使用自定义属性。

await CSS.paintWorklet.addModule('paint-worklet.js');

registerPaint('sample-paint', class {
  static get inputProperties() { return ['--foo']; }

  static get inputArguments() { return ['<color>']; }

  static get contextOptions() { return {alpha: true}; }

  paint(ctx, size, props, args) { }
});

Animation API

这个API让我们可以控制基于用户输入的关键帧动画，并且以非阻塞的方式。还能更改一个 DOM 元素的属性，不过是不会引起渲染引擎重新计算布局或者样式的属性，比如 transform、opacity 或者滚动条位置（scroll offset）。Animation API的使用方式与 Paint API 和Layout API略有不同我们还需要通过new一个WorkletAnimation来注册worklet。

// animation-worklet.js
registerAnimator('sample-animator', class {
  constructor(options) {
  }
  animate(currentTime, effect) {
    effect.localTime = currentTime;
  }
});

await CSS.animationWorklet.addModule('animation-worklet.js');

// 需要添加动画的元素
const elem = document.querySelector('#my-elem');
const scrollSource = document.scrollingElement;
const timeRange = 1000;
const scrollTimeline = new ScrollTimeline({
  scrollSource,
  timeRange,
});

const effectKeyframes = new KeyframeEffect(
  elem,
  // 动画需要绑定的关键帧
  [
    {transform: 'scale(1)'},
    {transform: 'scale(.25)'},
    {transform: 'scale(1)'}
  ],
  {
    duration: timeRange,
  },
);
new WorkletAnimation(
  'sample-animator',
  effectKeyframes,
  scrollTimeline,
  {},
).play();

关于此API的更多内容：(https://github.com/w3c/css-houdini-drafts/tree/main/css-animation-worklet-1)

Parser API

允许开发者自由扩展 CSS 词法分析器。

解析规则：

const background = window.cssParse.rule("background: green");
console.log(background.styleMap.get("background").value) // "green"

const styles = window.cssParse.ruleSet(".foo { background: green; margin: 5px; }");
console.log(styles.length) // 5
console.log(styles[0].styleMap.get("margin-top").value) // 5
console.log(styles[0].styleMap.get("margin-top").type) // "px"

解析CSS：

const style = fetch("style.css")
        .then(response => CSS.parseStylesheet(response.body));
style.then(console.log);

Font Metrics API

它将提供一些方法来测量在屏幕上呈现的文本元素的尺寸，将允许开发者控制文本元素在屏幕上呈现的方式。使用当前功能很难或无法测量这些值，因此该API将使开发者可以更轻松地创建与文本和字体相关的CSS特性。例如：

flex布局: align-items baseline特性。需要知道每一个flex盒子中第一个元素的基线位置。
首字母: 需要知道每个字母的基线高度和字母最大的高度，以及换行内容的基线长度。
单个字形的前进和后退。
换行: 需要访问字体数据，文本的所有样式输入以及布局信息（可用的段落长度等）。
元素中的每一个line boxes都需要一个基线。(line boxes代表包含众多inline boxes的这行)

Houdini 目前进展

Is Houdini ready yet

(https://ishoudinireadyyet.com/)

Houdini 的蓝图

了解到这里，部分开发者可能会说：“我不需要这些花里胡哨的技术，并不能带收益。我只想简简单单的写几个页面，做做普通的Web App，并不想试图干预浏览器的渲染过程从而实现一些实验性或炫酷的功能。”如果这样想的话，我们不妨退一步再去思考。回忆下最近做过的项目，用于实现页面效果所使用到的技术，grid布局方式在考虑兼容老版本浏览器时也不得不放弃。我们想控制浏览器渲染页面的过程并不是仅仅为了炫技，更多的是为了帮助开发者们解决以下两个问题：

统一各大浏览器的行为
像JavaScript一样，在推出新的特性时，我们可以通过Polyfill的形式快速的投入生产环境中。

几年过后再回眸，当主流浏览器完全支持Houdini的时候。我们可以在浏览器上随心所欲的使用任何CSS属性，并且他们都能完美支持。像今天的grid布局在旧版本浏览器支持的并不友好的这类问题，那时我们只需要安装对应的Polyfill就能解决类似的问题。

TML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

[demo]

<html>

<head>

</head>

<body>

This is a link</a>

</body>

</html>

[/demo]

更多 HTML 属性实例

属性例子 1:

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

[demo]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

<h1 align="center">This is heading 1</h1>

<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>

</body>

</html>

[/demo]

属性例子 2:

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

[demo]

<html>

<head>

</head>

<h2>请看: 改变了颜色的背景。</h2>

</body>

</html>

[/demo]

属性例子 3:

<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

<table border="1"> 拥有关于表格边框的附加信息。

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

下面列出了适用于大多数 HTML 元素的属性：

属性值描述

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

id id 规定元素的唯一 id

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

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

HTML 全局属性

HTML 属性赋予元素意义和语境。

下面的全局属性可用于任何 HTML 元素。

HTML 全局属性

属性描述

accesskey 规定激活元素的快捷键。

class 规定元素的一个或多个类名（引用样式表中的类）。

contenteditable 规定元素内容是否可编辑。

contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。

data-* 用于存储页面或应用程序的私有定制数据。

dir 规定元素中内容的文本方向。

draggable 规定元素是否可拖动。

dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。

hidden 规定元素仍未或不再相关。

id 规定元素的唯一 id。

lang 规定元素内容的语言。

spellcheck 规定是否对元素进行拼写和语法检查。

style 规定元素的行内 CSS 样式。

tabindex 规定元素的 tab 键次序。

title 规定有关元素的额外信息。

translate 规定是否应该翻译元素内容。

HTML 事件属性

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 当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本

在线咨询

上一篇：Word文档里能插入在线视频，这个隐藏功能你知道吗？
下一篇：CSS里如何创建形状，如何纯CSS绘制圆，三角形等并文字环绕

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML表格制作

SS in JS

JS in CSS又是什么

Houdini 解决了什么问题

CSS 与 JS的标准制定流程对比

CSS Polyfill

Houdini API

Properties & Values API

Worklets

Typed OM

Layout API

Painting API

Animation API

Parser API

Font Metrics API

Houdini 目前进展

Houdini 的蓝图

您的项目需求