HTML 参考手册- (HTML5 标准)

功能排序

New : HTML5 新标签

标签	描述
基础
<!DOCTYPE>	定义文档类型。
<html>	定义一个 HTML 文档
<title>	为文档定义一个标题
<body>	定义文档的主体
<h1> to <h6>	定义 HTML 标题
<p>	定义一个段落
<br>	定义简单的折行。
<hr>	定义水平线。
<!--...-->	定义一个注释
格式
<acronym>	HTML5不再支持。定义只取首字母的缩写。
<abbr>	定义一个缩写。
<address>	定义文档作者或拥有者的联系信息。
<b>	定义粗体文本。
<bdi>New	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo>	定义文本的方向。
<big>	HTML5不再支持。定义大号文本。
<blockquote>	定义块引用。
<center>	HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。
<cite>	定义引用(citation)。
<code>	定义计算机代码文本。
<del>	定义被删除文本。
<dfn>	定义定义项目。
<em>	定义强调文本。
<font>	HTML5不再支持。 HTML 4.01 已废弃。定义文本的字体、尺寸和颜色
<i>	定义斜体文本。
<ins>	定义被插入文本。
<kbd>	定义键盘文本。
<mark>New	定义带有记号的文本。
<meter>New	定义度量衡。仅用于已知最大和最小值的度量。
<pre>	定义预格式文本
<progress>New	定义运行中的任务进度（进程）。
<q>	定义短的引用。
<rp>New	定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New	定义字符（中文注音或字符）的解释或发音。
<ruby>New	定义 ruby 注释（中文注音或字符）。
<s>	定义加删除线的文本。
<samp>	定义计算机代码样本。
<small>	定义小号文本。
<strike>	HTML5不再支持。 HTML 4.01 已废弃。定义加删除线的文本。
<strong>	定义语气更为强烈的强调文本。
<sub>	定义下标文本。
<sup>	定义上标文本。
<time>New	定义一个日期/时间
<tt>	HTML5不再支持。定义打字机文本。
<u>	定义下划线文本。
<var>	定义文本的变量部分。
<wbr>New	规定在文本中的何处适合添加换行符。
表单
<form>	定义一个 HTML 表单，用于用户输入。
<input>	定义一个输入控件
<textarea>	定义多行的文本输入控件。
<button>	定义按钮。
<select>	定义选择列表（下拉列表）。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<label>	定义 input 元素的标注。
<fieldset>	定义围绕表单中元素的边框。
<legend>	定义 fieldset 元素的标题。
<datalist>New	规定了 input 元素可能的选项列表。
<keygen>New	规定用于表单的密钥对生成器字段。
<output>New	定义一个计算的结果
框架
<frame>	HTML5不再支持。定义框架集的窗口或框架。
<frameset>	HTML5不再支持。定义框架集。
<noframes>	HTML5不再支持。定义针对不支持框架的用户的替代内容。
<iframe>	定义内联框架。
图像
<img>	定义图像。
<map>	定义图像映射。
<area>	定义图像地图内部的区域。
<canvas>New	通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<figcaption>New	定义一个 caption for a <figure> element
<figure>New	figure 标签用于对元素进行组合。
Audio/Video
<audio>New	定义声音，比如音乐或其他音频流。
<source>New	定义media元素 (<video> 和 <audio>)的媒体资源。media
<track>New	为媒体(<video> 和 <audio>)元素定义外部文本轨道。
<video>New	定义一个音频或者视频
链接
<a>	定义一个链接
<link>	定义文档与外部资源的关系。
<nav>New	定义导航链接
列表
<ul>	定义一个无序列表
<ol>	定义一个有序列表
<li>	定义一个列表项
<dir>	HTML5不再支持。 HTML 4.01 已废弃。定义目录列表。
<dl>	定义一个定义列表
<dt>	定义一个定义定义列表中的项目。
<dd>	定义定义列表中项目的描述。
<menu>	定义菜单列表。
<command>New	定义用户可能调用的命令（比如单选按钮、复选框或按钮）。
表格
<table>	定义一个表格
<caption>	定义表格标题。
<th>	定义表格中的表头单元格。
<tr>	定义表格中的行。
<td>	定义表格中的单元。
<thead>	定义表格中的表头内容。
<tbody>	定义表格中的主体内容。
<tfoot>	定义表格中的表注内容（脚注）。
<col>	定义表格中一个或多个列的属性值。
<colgroup>	定义表格中供格式化的列组。
样式/节
<style>	定义文档的样式信息。
<div>	定义文档中的节。
<span>	定义文档中的节。
<header>New	定义一个文档头部部分
<footer>New	定义一个文档底部
<section>New	定义了文档的某个区域
<article>New	定义一个文章内容
<aside>New	定义其所处内容之外的内容。
<details>New	定义了用户可见的或者隐藏的需求的补充细节。
<dialog>New	定义一个对话框或者窗口
<summary>New	定义一个可见的标题。当用户点击标题时会显示出详细信息。
元信息
<head>	定义关于文档的信息
<meta>	定义关于 HTML 文档的元信息。
<base>	定义页面中所有链接的默认地址或默认目标。
<basefont>	HTML5不再支持。 HTML 4.01 已废弃。定义页面中文本的默认字体、颜色或尺寸。
程序
<script>	定义客户端脚本。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<applet>	HTML5不再支持。 HTML 4.01 已废弃。定义嵌入的 applet。
<embed>New	定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
<object>	定义嵌入的对象。
<param>	定义对象的参数。

HTML5 <canvas> 参考手册

描述

HTML5 <获得用于在画布上绘图的对象获得用于在画布上绘图的对象> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

本手册提供完整的 getContext("2d") 对象的属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签的属性及方法。

注意:Internet Explorer 8 及更早的IE版本不支持 <canvas> 元素。

颜色、样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式。
strokeStyle	设置或返回用于笔触的颜色、渐变或模式。
shadowColor	设置或返回用于阴影的颜色。
shadowBlur	设置或返回用于阴影的模糊级别。
shadowOffsetX	设置或返回阴影与形状的水平距离。
shadowOffsetY	设置或返回阴影与形状的垂直距离。

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）。
createPattern()	在指定的方向上重复指定的元素。
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）。
addColorStop()	规定渐变对象中的颜色和停止位置。

线条样式

属性	描述
lineCap	设置或返回线条的结束端点样式。
lineJoin	设置或返回两条线相交时，所创建的拐角类型。
lineWidth	设置或返回当前的线条宽度。
miterLimit	设置或返回最大斜接长度。

矩形

方法	描述
rect()	创建矩形。
fillRect()	绘制"被填充"的矩形。
strokeRect()	绘制矩形（无填充）。
clearRect()	在给定的矩形内清除指定的像素。

路径

方法	描述
fill()	填充当前绘图（路径）。
stroke()	绘制已定义的路径。
beginPath()	起始一条路径，或重置当前路径。
moveTo()	把路径移动到画布中的指定点，不创建线条。
closePath()	创建从当前点回到起始点的路径。
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条。
clip()	从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo()	创建二次贝塞尔曲线。
bezierCurveTo()	创建三次贝塞尔曲线。
arc()	创建弧/曲线（用于创建圆形或部分圆）。
arcTo()	创建两切线之间的弧/曲线。
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false。

转换

方法	描述
scale()	缩放当前绘图至更大或更小。
rotate()	旋转当前绘图。
translate()	重新映射画布上的 (0,0) 位置。
transform()	替换绘图的当前转换矩阵。
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()。

文本

属性	描述
font	设置或返回文本内容的当前字体属性。
textAlign	设置或返回文本内容的当前对齐方式。
textBaseline	设置或返回在绘制文本时使用的当前文本基线。

方法	描述
fillText()	在画布上绘制"被填充的"文本。
strokeText()	在画布上绘制文本（无填充）。
measureText()	返回包含指定文本宽度的对象。

图像绘制

方法	描述
drawImage()	向画布上绘制图像、画布或视频。

像素操作

属性	描述
width	返回 ImageData 对象的宽度。
height	返回 ImageData 对象的高度。
data	返回一个对象，其包含指定的 ImageData 对象的图像数据。

方法	描述
createImageData()	创建新的、空白的 ImageData 对象。
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上。

合成

属性	描述
globalAlpha	设置或返回绘图的当前 alpha 或透明值。
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上。

其他

方法	描述
save()	保存当前环境的状态。
restore()	返回之前保存过的路径状态和属性。
createEvent()	创建新的 Event 对象
getContext()	获得用于在画布上绘图的对象
toDataURL()	导出在 canvas 元素上绘制的图像

HTML 音频/视频 DOM 参考手册

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。

这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。

HTML 音频/视频方法

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道。
canPlayType()	检测浏览器是否能播放指定的音频/视频类型。
load()	重新加载音频/视频元素。
play()	开始播放音频/视频。
pause()	暂停当前播放的音频/视频。

HTML 音频/视频属性

属性	描述
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	设置或返回音频/视频的音量。

HTML 音频/视频事件

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

Perl IF...ELSIF 语句

Perl 条件语句

一个 if 语句后可跟一个可选的 elsif 语句，然后再跟另一个 else 语句。

这种条件判断语句在多个条件的情况下非常有用。

在使用 if , elsif , else 语句时你需要注意以下几点。

if 语句后可以跟上 0 个或 1 个 else 语句，但是 elsif 后面必须有 else 语句。
if 语句后可以跟上 0 个或 1 个 elsif 语句，但它们必须写在 else 语句前。
如果其中的一个 elsif 执行成功，其他的 elsif 和 else 将不再被执行。

语法

语法格式如下所示：

if(boolean_expression 1){   # 在布尔表达式 boolean_expression 1 为 true 执行}elsif( boolean_expression 2){   # 在布尔表达式 boolean_expression 2 为 true 执行}elsif( boolean_expression 3){   # 在布尔表达式 boolean_expression 3 为 true 执行}else{   # 布尔表达式的条件都为 false 时执行}

实例

#!/usr/bin/perl$a = 100;# 使用 == 判断两个数是否相等if( $a  ==  20 ){    # 条件为 true 时执行    printf "a 的值为 20
";}elsif( $a ==  30 ){    # 条件为 true 时执行    printf "a 的值为 30
";}else{    # 以上所有的条件为 false 时执行    printf "a 的值为 $a
";}

执行以上程序，输出结果为：

a 的值为 100

Perl 条件语句

SSDB 的命令行工具 ssdb-cli 对于 SSDB 的管理非常有用, 你可以用它来执行所有的命令, 监控服务的状态, 清除整个数据库, 等等.

连接到 SSDB 服务器

$ /usr/local/ssdb/ssdb-cli -h 127.0.0.1 -p 8888ssdb (cli) - ssdb command line tool.Copyright (c) 2012-2013 ideawu.com'h' or 'help' for help, 'q' to quit.ssdb 127.0.0.1:8888

输入 'h', 然后按回车查看帮助信息. 下面是操作的演示:

ssdb 127.0.0.1:8888> set k 1ok(0.000 sec)ssdb 127.0.0.1:8888> get k1(0.000 sec)ssdb 127.0.0.1:8888> del kok(0.000 sec)ssdb 127.0.0.1:8888> get kerror: not_found(0.000 sec)ssdb 127.0.0.1:8888>

对于 Windows 用户:

在 ssdb-master 源码的目录时运行

toolsssdb-cli.bat

需要安装 Python 2.x, 同时, 你需要将 Python 的目录加入到环境变量中的 Path 变量.

转义响应中的中文和二进制数据

如果你执行完命令后发现有乱码或者屏幕输出异常, 可以把下面这行命令拷贝进 ssdb-cli 然后按回车键:

: escape

监控 SSDB 实例的状态

info

命令 info 显示了数据在 SSDB 中的分布情况, 还有 LevelDB 的健康程度.

ssdb 127.0.0.1:8899> infoversion 1.8.0links 1total_calls 4dbsize 1829binlogs capacity : 10000000 min_seq : 1 max_seq : 74replication client 127.0.0.1:55479 type : sync status : SYNC last_seq : 73replication slaveof 127.0.0.1:8888 id : svc_2 type : sync status : SYNC last_seq : 73 copy_count : 0 sync_count : 44leveldb.stats Compactions

Level  Files Size(MB) Time(sec) Read(MB) Write(MB)

0 0 0 0 0 0 1 1 0 0 0 0

25 result(s) (0.001 sec)

links

当前服务器的连接数.

dbsize

数据库预估的大小(可能和硬盘占用差异非常大), 字节数. 如果服务器开启了压缩, 这个大小是压缩后的大小.

binlogs

参见同步和复制

replication

参见同步和复制

key_range.

不同数据类型的 key 在 SSDB 中是排序的, 所以这个信息表示不同数据类型的最小 key 和最大 key.

leveldb.stats

这个信息显示了 LevelDB 每一层级的文件数量和文件总大小. 越小的层级如果文件越少, 那么数据库就越健康(查询更快速).

info cmd

ssdb 127.0.0.1:8899> info cmdversion    1.6.7cmd.get    calls: 20000    time_wait: 27   time_proc: 472cmd.set    calls: 267045   time_wait: 7431 time_proc: 7573cmd.setx    calls: 111100   time_wait: 3663 time_proc: 6456cmd.del    calls: 0    time_wait: 0    time_proc: 0

cmd.

calls: 该命令总共处理了多少次.
time_wait: 命令在被处理前等待的总共时间(单位毫秒).
time_proc: 命令处理总共消耗的时间(单位毫秒).

compact

这个命令强制 SSDB 服务器对数据进行收缩(compaction), 收缩之后, 操作通常会变得更快.

但是, compact 的过程可能会拖慢正常服务, 特别是是当数据库比较大时. 所以, 建议在空闲时使用.

SSDB 图形界面工具

你可以尝试下图形界面(GUI)的 SSDB 管理工具:

phpssdbadmin - PHP 开发的 SSDB GUI 管理工具, 类似 phpmyadmin.
FastoNoSQL - 跨平台的 SSDB, Redis, Memcached GUI 管理工具.

HTTP 方法：GET 对比 POST

HTTP 定义了与服务器交互的不同方法，两种最常用的 HTTP 方法是：GET 和 POST。

什么是 HTTP ？

超文本传输协议（HTTP）的设计目的是保证客户端与服务器之间的通信。

HTTP 的工作方式是客户端与服务器之间的请求-应答协议。客户端是终端用户，服务器端是网站。

web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

有关 HTTP 的更多内容，您可以参考本站的 HTTP 教程！

两种 HTTP 请求方法：GET 和 POST

在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。

GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。

GET 方法

请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：

/test/demo_form.php?name1=value1&name2=value2

有关 GET 请求的其他一些注释：

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据

POST 方法

请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：

POST /test/demo_form.php HTTP/1.1
Host: 51coolma.cn
name1=value1&name2=value2

有关 POST 请求的其他一些注释：

POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

比较 GET 与 POST

下面的表格比较了两种 HTTP 方法：GET 和 POST。

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

其他 HTTP 请求方法

下面的表格列出了其他一些 HTTP 请求方法：

方法	描述
HEAD	与 GET 相同，但只返回 HTTP 报头，不返回文档主体。
PUT	上传指定的 URI 表示。
DELETE	删除指定资源。
OPTIONS	返回服务器支持的 HTTP 方法。
CONNECT	把请求连接转换到透明的 TCP/IP 通道。

Px、Em 换算工具

以下工具提供了 em 和 px 的换算工具。

第一个输入框：设置了网页默认的字体像素 (通常 16px)
第二个输入框：输入像素值，可以将 px 换算为 em。
第三个输入框：输入em（相对长度单位）值，可以将 em 换算为 px

设置默认的像素大小:
px

PX 换算为 EM:
px
EM 换算为 PX:
em
换算结果:

文本字体大小

下表列出了在网页字体默认值为 16px 时， px 和 em 及网页字体百分比的换算数据。

px	em	百分比
6px	0.3750em	37.50%
8px	0.5000em	50.00%
10px	0.6250em	62.50%
12px	0.7500em	75.00%
14px	0.8750em	87.50%
16px	1.0000em	100.00%
18px	1.1250em	112.50%
20px	1.2500em	125.00%
22px	1.3750em	137.50%
24px	1.5000em	150.00%
25px	1.5625em	156.25%

pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。

px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。

em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。

字号：是中文字库中特有的一种单位，以中文代号表示特定的磅值pt，便于记忆、表述。

pt和px的换算公式可以根据pt的定义得出:

pt=1/72(英寸), px=1/dpi(英寸)

因此 pt=px*dpi/72

以Windows下的96dpi来计算，pt=px*72/96=px*3/4

字号	pt	px	em
初号	42pt	56px	3.5em
小初	36pt	48px	3em
	34pt	45px	2.75em
	32pt	42px	2.55em
	30pt	40px	2.45em
	29pt	38px	2.35em
	28pt	37px	2.3em
	27pt	36px	2.25em
一号	26pt	35px	2.2em
	25pt	34px	2.125em
小一	24pt	32px	2em
二号	22pt	29px	1.8em
	20pt	26px	1.6em
小二	18pt	24px	1.5em
	17pt	23px	1.45em
三号	16pt	22px	1.4em
小三	15pt	21px	1.3em
	14.5pt	20px	1.25em
四号	14pt	19px	1.2em
	13.5pt	18px	1.125em
	13pt	17px	1.05em
小四	12pt	16px	1em
	11pt	15px	0.95em
五号	10.5pt	14px	0.875em
	10pt	13px	0.8em
小五	9pt	12px	0.75em
	8pt	11px	0.7em
六号	7.5pt	10px	0.625em
	7pt	9px	0.55em
小六	6.5pt	8px	0.5em
七号	5.5pt	7px	0.4375em
八号	5pt	6px	0.375em

px、em、rem区别

PX

px 像素（Pixel）。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。

PX特点

1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

EM

em 是基于基数（比如：1.5em）来计算出来的相对字体大小。

em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

键盘快捷键

键盘快捷键就是使用键盘上某一个或某几个键的组合完成一条功能命令。

通过使用键盘快捷键可以节省时间。

通过键盘快捷键可以提高操作速度。

Windows 和 Mac 的键盘快捷键

在现代操作系统中和计算机软件程序中，键盘快捷键经常被使用。

使用键盘快捷键能帮您节省很多时间。

基本的快捷键

描述	Windows	Mac OS
编辑菜单	Alt + E	Ctrl + F2 + F
文件菜单	Alt + F	Ctrl + F2 + E
视图菜单	Alt + V	Ctrl + F2 + V
全选文本	Ctrl + A	Cmd + A
复制文本	Ctrl + C	Cmd + C
查找文本	Ctrl + F	Cmd + F
查找替换文本	Ctrl + H	Cmd + F
新建文档	Ctrl + N	Cmd + N
打开文件	Ctrl + O	Cmd + O
打印选项	Ctrl + P	Cmd + P
保存文件	Ctrl + S	Cmd + S
粘贴文本	Ctrl + V	Cmd + V
剪切文本	Ctrl + X	Cmd + X
重做文本	Ctrl + Y	Shift + Cmd + Z
撤销文本	Ctrl + Z	Cmd + Z

文本编辑

描述	Windows	Mac OS
光标移动
将文本插入光标向右移动或者移动到下一行行首	Right Arrow	Right Arrow
将文本插入光标向左移动或者移动到上一行行尾	Left Arrow	Left Arrow
将文本插入光标向上移动一行	Up Arrow	Up Arrow
将文本插入光标向下移动一行	Down Arrow	Down Arrow
将文本插入光标移动到当前行的行首	Home	Cmd + Left Arrow
将文本插入光标移动到当前行的行尾	End	Cmd + Right Arrow
将文本插入光标移动到文档的开头	Ctrl + Home	Cmd + Up Arrow
将文本插入光标移动到文档的结尾	Ctrl + End	Cmd + Down Arrow
将文本插入光标移动到上一个文本框	Page Up	Fn + Up Arrow
将文本插入光标移动到下一个文本框	Page Down	Fn + Down Arrow
将文本插入光标向左移动到前一个词的开头	Ctrl + Left Arrow	Option + Left Arrow
将文本插入光标向右移动到后一个词的开头	Ctrl + Right Arrow	Option + Right Arrow
将文本插入光标移动到行首	Ctrl + Up Arrow	Cmd + Left Arrow
将文本插入光标移动到行尾	Ctrl + Down Arrow	Cmd + Right Arrow

文本选择
选择文本插入光标左边的字符	Shift + Left Arrow	Shift + Left Arrow
选择文本插入光标右边的字符	Shift + Right Arrow	Shift + Right Arrow
向上选择一行文本	Shift + Up Arrow	Shift + Up Arrow
向下选择一行文本	Shift + Down Arrow	Shift + Down Arrow
选择文本插入光标左边的字	Shift + Ctrl + Left	Shift + Opt + Left
选择文本插入光标右边的字	Shift + Ctrl + Right	Shift + Opt + Right
向左选择一段文本	Shift + Ctrl + Up	Shift + Opt + Up
向右选择一段文本	Shift + Ctrl + Down	Shift + Opt + Down
选择文本插入光标与当前行行首之间的文本	Shift + Home	Cmd + Shift + Left Arrow
选择文本插入光标与当前行行尾之间的文本	Shift + End	Cmd + Shift + Right Arrow
选择文本插入光标与文档开头之间的文本	Shift + Ctrl + Home	Cmd + Shift + Up Arrow or Cmd + Shift + Fn + Left Arrow
选择文本插入光标与文档结尾之间的文本	Shift + Ctrl + End	Cmd + Shift + Down Arrow or Cmd + Shift + Fn + Right Arrow
向上选择一个文本框	Shift + Page Up	Shift + Fn + Up Arrow
向下选择一个文本框	Shift + Page Down	Shift + Fn + Down Arrow
全选文本	Ctrl + A	Cmd + A
查找文本	Ctrl + F	Cmd + F

文本排版
将所选文本设置为粗体	Ctrl + B	Cmd + B
将所选文本设置为斜体	Ctrl + I	Cmd + I
将所选文本加下划线	Ctrl + U	Cmd + U
将所选文本设置为上标	Ctrl + Shift + =	Cmd + Shift + =
将所选文本设置为下标	Ctrl + =	Cmd + =

文本编辑
删除文本插入光标左边的字符	Backspace	Backspace
删除文本插入光标右边的字符	Delete	Fn + Backspace
删除文本插入光标右边的字	Ctrl + Del	Cmd + Backspace
删除文本插入光标左边的字	Ctrl + Backspace	Cmd + Fn + Backspace
增加缩进量	Tab	Tab
减少缩进量	Shift + Tab	Shift + Tab
复制文本	Ctrl + C	Cmd + C
查找替换文本	Ctrl + H	Cmd + F
粘贴文本	Ctrl + V	Cmd + V
剪切文本	Ctrl + X	Cmd + X
重做文本	Ctrl + Y	Shift + Cmd + Z
撤销文本	Ctrl + Z	Cmd + Z

Web 浏览器

描述	Windows	Mac OS
Navigation
向下滚动框	Space or Page Down	Space or Fn + Down Arrow
向上滚动框	Shift + Space or Page Up	Shift + Space or Fn + Up Arrow
定位到页面底部	End	Cmd + Down Arrow
定位到页面头部	Home	Cmd + Up Arrow
回退	Alt + Left Arrow or Backspace	Cmd + Left Arrow
前进	Alt + Right Arrow or Shift + Backspace	Cmd + Right Arrow
刷新网页	F5	Cmd + R
刷新网页（无缓存）	Ctrl + F5	Cmd + Shift + R
停止	Esc	Esc
全屏切换	F11	Cmd + Shift + F
放大	Ctrl + +	Cmd + +
缩小	Ctrl + -	Cmd + -
重置 100% （默认）	Ctrl + 0	Cmd + 0
打开主页	Alt + Home	Option + Home or Option + Fn + Left Arrow
查找文本	Ctrl + F	Cmd + F

标签/窗口管理
打开一个新的标签页	Ctrl + T	Cmd + T
关闭当前标签页	Ctrl + W	Cmd + W
关闭所有标签页	Ctrl + Shift + W	Cmd + Q
关闭除当前标签页以外的其它标签页	Ctrl + Alt + F4	Cmd + Opt + W
定位到下一个标签页	Ctrl + Tab	Control + Tab or Cmd + Shift + Right Arrow
定位到上一个标签页	Ctrl + Shift + Tab	Shift + Control + Tab or Cmd + Shift + Left Arrow
定位到指定编号的标签页	Ctrl + 1-8	Cmd + 1-8
定位到最后一个标签页	Ctrl + 9	Cmd + 9
重新打开最后一个关闭的标签页	Ctrl + Shift + T	Cmd + Shift + T
打开一个新窗口	Ctrl + N	Cmd + N
关闭当前窗口	Alt + F4	Cmd + W
定位到下一个窗口	Alt + Tab	Cmd + Tab
定位到上一个窗口	Alt + Shift + Tab	Cmd + Shift + Tab
重新打开最后一个关闭的窗口	Ctrl + Shift + N
在背景的标签页中打开链接	Ctrl + Click	Cmd + Click
在前景的标签页中打开链接	Ctrl + Shift + Click	Cmd + Shift + Click
打印当前网页	Ctrl + P	Cmd + P
保存当前网页	Ctrl + S	Cmd + S

地址栏
在工具栏、搜索栏和页面元素间进行循环定位	Tab	Tab
定位到浏览器的地址栏	Ctrl + L or Alt + D	Cmd + L
聚焦并选中浏览器的搜索栏	Ctrl + E	Cmd + E / Cmd + K
在新的标签页打开地址栏位置	Alt + Enter	Opt + Enter
显示一系列之前访问过的地址	F4
在地址栏输入文本的开头增加"www."，结尾增加".com"。（比如，地址栏输入"baidu"，然后按下 Ctrl + Enter 键，即打开"www.baidu.com"。）	Ctrl + Enter	Cmd + Enter or Control + Enter

书签
打开书签菜单	Ctrl + B	Cmd + B
将当前页加为书签	Ctrl + D	Cmd + Opt + B or Cmd + Shift + B
打开浏览历史记录	Ctrl + H	Cmd + Shift + H or Cmd + Y
打开下载历史记录	Ctrl + J	Cmd + J or Cmd + Shift + J

屏幕截图

描述	Windows	Mac OS
将整个屏幕的截图保存为文件		Cmd + Shift + 3
复制整个屏幕的截图到剪贴板	PrtScr (Print Screen) or Ctrl + PrtScr	Cmd + Ctrl + Shift + 3
将窗口截图保存为文件		Cmd + Shift + 4, then Space
复制窗口截图到剪贴板	Alt + PrtScr	Cmd + Ctrl + Shift + 4, then Space
复制选定区域截图到剪贴板		Cmd + Ctrl + Shift + 4
将选定区域截图保存为文件		Cmd + Shift + 4

注释：由于不同的键盘设置，一些快捷键可能并不适用于所有用户。

扩展阅读：电脑快捷键大全

HTML 参考手册- (HTML5 标准)

按字母顺序排列

New : HTML5新标签

标签	描述
<!--...-->	定义注释
<!DOCTYPE>	定义文档类型
<a>	定义超文本链接
<abbr>	定义缩写
<acronym>	定义只取首字母的缩写，不支持HTML5
<address>	定义文档作者或拥有者的联系信息
<applet>	定义嵌入的 applet。HTML5中不支持使用。
<area>	定义图像映射内部的区域
<article>New	定义一个文章区域
<aside>New	定义页面的侧边栏内容
<audio>New	定义音频内容
<b>	定义文本粗体
<base>	定义页面中所有链接的默认地址或默认目标。
<basefont>	定义页面中文本的默认字体、颜色或尺寸。HTML5不支持使用。
<bdi>New	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo>	定义文字方向
<big>	定义大号文本，HTML5不支持使用。
<blockquote>	定义长的引用
<body>	定义文档的主体
<br>	定义换行
<button>	定义一个点击按钮
<canvas>New	定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption>	定义表格标题
<center>	定义居中文本。HTML5不支持使用。
<cite>	定义引用(citation)
<code>	定义计算机代码文本
<col>	定义表格中一个或多个列的属性值
<colgroup>	定义表格中供格式化的列组
<command>New	定义命令按钮，比如单选按钮、复选框或按钮
<datalist>New	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<dd>	定义定义列表中项目的描述
<del>	定义被删除文本
<details>New	用于描述文档或文档某个部分的细节
<dfn>	定义定义项目
<dialog>New	定义对话框，比如提示框
<dir>	定义目录列表。HTML5不支持使用。
<div>	定义文档中的节
<dl>	定义列表详情
<dt>	定义列表中的项目
<em>	定义强调文本
<embed>New	定义嵌入的内容，比如插件。
<fieldset>	定义围绕表单中元素的边框
<figcaption>New	定义<figure> 元素的标题
<figure>New	规定独立的流内容（图像、图表、照片、代码等等）。
<font>	定义文字的字体、尺寸和颜色。HTML5不支持使用。
<footer>New	定义 section 或 document 的页脚。
<form>	定义了HTML文档的表单
<frame>	定义框架集的窗口或框架
<frameset>	定义框架集
<h1> to <h6>	定义 HTML 标题
<head>	定义关于文档的信息
<header>New	定义了文档的头部区域
<hr>	定义水平线
<html>	定义 HTML 文档
<i>	定义斜体字
<iframe>	定义内联框架
<img>	定义图像
<input>	定义输入控件
<ins>	定义被插入文本
<kbd>	定义键盘文本
<keygen>New	规定用于表单的密钥对生成器字段。
<label>	定义 input 元素的标注
<legend>	定义 fieldset 元素的标题。
<li>	定义列表的项目
<link>	定义文档与外部资源的关系
<map>	定义图像映射
<mark>New	定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<menu>	定义菜单列表。HTML5不支持使用。
<meta>	定义关于 HTML 文档的元信息。
<meter>New	定义度量衡。仅用于已知最大和最小值的度量。
<nav>New	定义导航链接的部分
<noframes>	定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<object>	定义内嵌对象
<ol>	定义有序列表。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<output>New	定义不同类型的输出，比如脚本的输出。
<p>	定义段落。
<param>	定义对象的参数。
<pre>	定义预格式文本。
<progress>New	定义运行中的进度（进程）。
<q>	定义短的引用。
<rp>New	<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New	<rt> 标签定义字符（中文注音或字符）的解释或发音。
<ruby>New	<ruby> 标签定义 ruby 注释（中文注音或字符）。
<s>	不赞成使用。定义加删除线的文本。
<samp>	定义计算机代码样本。
<script>	定义客户端脚本。
<section>New	<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<select>	定义选择列表（下拉列表）。
<small>	定义小号文本。
<source>New	<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<span>	定义文档中的节。
<strike>	HTML5不支持，不赞成使用。定义加删除线文本。
<strong>	定义强调文本。
<style>	定义文档的样式信息。
<sub>	定义下标文本。
<summary>New	<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<sup>	定义上标文本。
<table>	定义表格。
<tbody>	定义表格中的主体内容。
<td>	定义表格中的单元。
<textarea>	定义多行的文本输入控件。
<tfoot>	定义表格中的表注内容（脚注）。
<th>	定义表格中的表头单元格。
<thead>	定义表格中的表头内容。
<time>New	定义日期或时间，或者两者。
<title>	定义文档的标题。
<tr>	定义表格中的行。
<track>New	<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt>	定义打字机文本。
<u>	不赞成使用。定义下划线文本。
<ul>	定义无序列表。
<var>	定义文本的变量部分。
<video>New	<video> 标签定义视频，比如电影片段或其他视频流。
<wbr>New	规定在文本中的何处适合添加换行符。

HTML 参考手册- (HTML5 标准)

功能排序

New : HTML5 新标签

标签	描述
基础
<!DOCTYPE>	定义文档类型。
<html>	定义一个 HTML 文档
<title>	为文档定义一个标题
<body>	定义文档的主体
<h1> to <h6>	定义 HTML 标题
<p>	定义一个段落
<br>	定义简单的折行。
<hr>	定义水平线。
<!--...-->	定义一个注释
格式
<acronym>	HTML5不再支持。定义只取首字母的缩写。
<abbr>	定义一个缩写。
<address>	定义文档作者或拥有者的联系信息。
<b>	定义粗体文本。
<bdi>New	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo>	定义文本的方向。
<big>	HTML5不再支持。定义大号文本。
<blockquote>	定义块引用。
<center>	HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。
<cite>	定义引用(citation)。
<code>	定义计算机代码文本。
<del>	定义被删除文本。
<dfn>	定义定义项目。
<em>	定义强调文本。
<font>	HTML5不再支持。 HTML 4.01 已废弃。定义文本的字体、尺寸和颜色
<i>	定义斜体文本。
<ins>	定义被插入文本。
<kbd>	定义键盘文本。
<mark>New	定义带有记号的文本。
<meter>New	定义度量衡。仅用于已知最大和最小值的度量。
<pre>	定义预格式文本
<progress>New	定义运行中的任务进度（进程）。
<q>	定义短的引用。
<rp>New	定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New	定义字符（中文注音或字符）的解释或发音。
<ruby>New	定义 ruby 注释（中文注音或字符）。
<s>	定义加删除线的文本。
<samp>	定义计算机代码样本。
<small>	定义小号文本。
<strike>	HTML5不再支持。 HTML 4.01 已废弃。定义加删除线的文本。
<strong>	定义语气更为强烈的强调文本。
<sub>	定义下标文本。
<sup>	定义上标文本。
<time>New	定义一个日期/时间
<tt>	HTML5不再支持。定义打字机文本。
<u>	定义下划线文本。
<var>	定义文本的变量部分。
<wbr>New	规定在文本中的何处适合添加换行符。
表单
<form>	定义一个 HTML 表单，用于用户输入。
<input>	定义一个输入控件
<textarea>	定义多行的文本输入控件。
<button>	定义按钮。
<select>	定义选择列表（下拉列表）。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<label>	定义 input 元素的标注。
<fieldset>	定义围绕表单中元素的边框。
<legend>	定义 fieldset 元素的标题。
<datalist>New	规定了 input 元素可能的选项列表。
<keygen>New	规定用于表单的密钥对生成器字段。
<output>New	定义一个计算的结果
框架
<frame>	HTML5不再支持。定义框架集的窗口或框架。
<frameset>	HTML5不再支持。定义框架集。
<noframes>	HTML5不再支持。定义针对不支持框架的用户的替代内容。
<iframe>	定义内联框架。
图像
<img>	定义图像。
<map>	定义图像映射。
<area>	定义图像地图内部的区域。
<canvas>New	通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<figcaption>New	定义一个 caption for a <figure> element
<figure>New	figure 标签用于对元素进行组合。
Audio/Video
<audio>New	定义声音，比如音乐或其他音频流。
<source>New	定义media元素 (<video> 和 <audio>)的媒体资源。media
<track>New	为媒体(<video> 和 <audio>)元素定义外部文本轨道。
<video>New	定义一个音频或者视频
链接
<a>	定义一个链接
<link>	定义文档与外部资源的关系。
<nav>New	定义导航链接
列表
<ul>	定义一个无序列表
<ol>	定义一个有序列表
<li>	定义一个列表项
<dir>	HTML5不再支持。 HTML 4.01 已废弃。定义目录列表。
<dl>	定义一个定义列表
<dt>	定义一个定义定义列表中的项目。
<dd>	定义定义列表中项目的描述。
<menu>	定义菜单列表。
<command>New	定义用户可能调用的命令（比如单选按钮、复选框或按钮）。
表格
<table>	定义一个表格
<caption>	定义表格标题。
<th>	定义表格中的表头单元格。
<tr>	定义表格中的行。
<td>	定义表格中的单元。
<thead>	定义表格中的表头内容。
<tbody>	定义表格中的主体内容。
<tfoot>	定义表格中的表注内容（脚注）。
<col>	定义表格中一个或多个列的属性值。
<colgroup>	定义表格中供格式化的列组。
样式/节
<style>	定义文档的样式信息。
<div>	定义文档中的节。
<span>	定义文档中的节。
<header>New	定义一个文档头部部分
<footer>New	定义一个文档底部
<section>New	定义了文档的某个区域
<article>New	定义一个文章内容
<aside>New	定义其所处内容之外的内容。
<details>New	定义了用户可见的或者隐藏的需求的补充细节。
<dialog>New	定义一个对话框或者窗口
<summary>New	定义一个可见的标题。当用户点击标题时会显示出详细信息。
元信息
<head>	定义关于文档的信息
<meta>	定义关于 HTML 文档的元信息。
<base>	定义页面中所有链接的默认地址或默认目标。
<basefont>	HTML5不再支持。 HTML 4.01 已废弃。定义页面中文本的默认字体、颜色或尺寸。
程序
<script>	定义客户端脚本。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<applet>	HTML5不再支持。 HTML 4.01 已废弃。定义嵌入的 applet。
<embed>New	定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
<object>	定义嵌入的对象。
<param>	定义对象的参数。

HTML 全局属性

HTML 元素的意义与语境通过属性可以通过 HTML 属性来描述。

HTML 中的全局属性对任何 HTML 元素有效！

New : HTML5 新属性。

属性	描述
accesskey	设置访问元素的键盘快捷键。
class	规定元素的类名（classname）
contenteditableNew	规定是否可编辑元素的内容。
contextmenuNew	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*New	用于存储页面的自定义数据
dir	设置元素中内容的文本方向。
draggableNew	指定某个元素是否可以拖动
dropzoneNew	指定是否将数据复制，移动，或链接，或删除
hiddenNew	hidden 属性规定对元素进行隐藏。
id	规定元素的唯一 id
lang	设置元素中内容的语言代码。
spellcheckNew	检测元素是否拼写错误
style	规定元素的行内样式（inline style）
tabindex	设置元素的 Tab 键控制次序。
title	规定元素的额外信息（可在工具提示中显示）
translateNew	指定是否一个元素的值在页面载入时是否需要翻译

HTML 事件属性

全局事件属性

HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

如果你想学习更多关于事件属性，请访问 JavaScript 教程

下面的表格提供了标准的事件属性，可以把它们插入 HTML/XHTML 元素中，以定义事件行为。

New : HTML5新增属性事件。

窗口事件属性（Window Event Attributes）

由窗口触发该事件 (适用于标签):

属性	值	描述
onafterprintNew	script	在打印文档之后运行脚本
onbeforeprintNew	script	在文档打印之前运行脚本
onbeforeonloadNew	script	在文档加载之前运行脚本
onblur	script	当窗口失去焦点时运行脚本
onerrorNew	script	当错误发生时运行脚本
onfocus	script	当窗口获得焦点时运行脚本
onhaschangeNew	script	当文档改变时运行脚本
onload	script	当文档加载时运行脚本
onmessageNew	script	当触发消息时运行脚本
onofflineNew	script	当文档离线时运行脚本
ononlineNew	script	当文档上线时运行脚本
onpagehideNew	script	当窗口隐藏时运行脚本
onpageshowNew	script	当窗口可见时运行脚本
onpopstateNew	script	当窗口历史记录改变时运行脚本
onredoNew	script	当文档执行再执行操作（redo）时运行脚本
onresizeNew	script	当调整窗口大小时运行脚本
onstorageNew	script	当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
onundoNew	script	当文档执行撤销时运行脚本
onunloadNew	script	当用户离开文档时运行脚本

表单事件(Form Events)

表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内):

属性	值	描述
onblur	script	当元素失去焦点时运行脚本
onchange	script	当元素改变时运行脚本
oncontextmenuNew	script	当触发上下文菜单时运行脚本
onfocus	script	当元素获得焦点时运行脚本
onformchangeNew	script	当表单改变时运行脚本
onforminputNew	script	当表单获得用户输入时运行脚本
oninputNew	script	当元素获得用户输入时运行脚本
oninvalidNew	script	当元素无效时运行脚本
onreset	script	当表单重置时运行脚本。HTML 5 不支持。
onselect	script	当选取元素时运行脚本
onsubmit	script	当提交表单时运行脚本

键盘事件（Keyboard Events）

属性	值	描述
onkeydown	script	当按下按键时运行脚本
onkeypress	script	当按下并松开按键时运行脚本
onkeyup	script	当松开按键时运行脚本

鼠标事件（Mouse Events）

通过鼠标触发事件, 类似用户的行为:

属性	值	描述
onclick	script	当单击鼠标时运行脚本
ondblclick	script	当双击鼠标时运行脚本
ondragNew	script	当拖动元素时运行脚本
ondragendNew	script	当拖动操作结束时运行脚本
ondragenterNew	script	当元素被拖动至有效的拖放目标时运行脚本
ondragleaveNew	script	当元素离开有效拖放目标时运行脚本
ondragoverNew	script	当元素被拖动至有效拖放目标上方时运行脚本
ondragstartNew	script	当拖动操作开始时运行脚本
ondropNew	script	当被拖动元素正在被拖放时运行脚本
onmousedown	script	当按下鼠标按钮时运行脚本
onmousemove	script	当鼠标指针移动时运行脚本
onmouseout	script	当鼠标指针移出元素时运行脚本
onmouseover	script	当鼠标指针移至元素之上时运行脚本
onmouseup	script	当松开鼠标按钮时运行脚本
onmousewheelNew	script	当转动鼠标滚轮时运行脚本
onscrollNew	script	当滚动元素的滚动条时运行脚本

多媒体事件(Media Events)

通过视频（videos），图像（images）或者音频（audio）触发该事件，多应用于HTML媒体元素比如

属性	值	描述
onabort	script	当发生中止事件时运行脚本
oncanplayNew	script	当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythroughNew	script	当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchangeNew	script	当媒介长度改变时运行脚本
onemptiedNew	script	当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
onendedNew	script	当媒介已抵达结尾时运行脚本
onerrorNew	script	当在元素加载期间发生错误时运行脚本
onloadeddataNew	script	当加载媒介数据时运行脚本
onloadedmetadataNew	script	当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
onloadstartNew	script	当浏览器开始加载媒介数据时运行脚本
onpauseNew	script	当媒介数据暂停时运行脚本
onplayNew	script	当媒介数据将要开始播放时运行脚本
onplayingNew	script	当媒介数据已开始播放时运行脚本
onprogressNew	script	当浏览器正在取媒介数据时运行脚本
onratechangeNew	script	当媒介数据的播放速率改变时运行脚本
onreadystatechangeNew	script	当就绪状态（ready-state）改变时运行脚本
onseekedNew	script	当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
onseekingNew	script	当媒介元素的定位属性为真且定位已开始时运行脚本
onstalledNew	script	当取回媒介数据过程中（延迟）存在错误时运行脚本
onsuspendNew	script	当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdateNew	script	当媒介改变其播放位置时运行脚本
onvolumechangeNew	script	当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaitingNew	script	当媒介已停止播放但打算继续播放时运行脚本

其他事件

属性	值	描述
onshowNew	script	当元素在上下文显示时触发
ontoggleNew	script	当用户打开或关闭元素时触发

HTML5 <canvas> 参考手册

描述

HTML5 <获得用于在画布上绘图的对象获得用于在画布上绘图的对象> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

本手册提供完整的 getContext("2d") 对象的属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签的属性及方法。

注意:Internet Explorer 8 及更早的IE版本不支持 <canvas> 元素。

颜色、样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式。
strokeStyle	设置或返回用于笔触的颜色、渐变或模式。
shadowColor	设置或返回用于阴影的颜色。
shadowBlur	设置或返回用于阴影的模糊级别。
shadowOffsetX	设置或返回阴影与形状的水平距离。
shadowOffsetY	设置或返回阴影与形状的垂直距离。

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）。
createPattern()	在指定的方向上重复指定的元素。
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）。
addColorStop()	规定渐变对象中的颜色和停止位置。

线条样式

属性	描述
lineCap	设置或返回线条的结束端点样式。
lineJoin	设置或返回两条线相交时，所创建的拐角类型。
lineWidth	设置或返回当前的线条宽度。
miterLimit	设置或返回最大斜接长度。

矩形

方法	描述
rect()	创建矩形。
fillRect()	绘制"被填充"的矩形。
strokeRect()	绘制矩形（无填充）。
clearRect()	在给定的矩形内清除指定的像素。

路径

方法	描述
fill()	填充当前绘图（路径）。
stroke()	绘制已定义的路径。
beginPath()	起始一条路径，或重置当前路径。
moveTo()	把路径移动到画布中的指定点，不创建线条。
closePath()	创建从当前点回到起始点的路径。
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条。
clip()	从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo()	创建二次贝塞尔曲线。
bezierCurveTo()	创建三次贝塞尔曲线。
arc()	创建弧/曲线（用于创建圆形或部分圆）。
arcTo()	创建两切线之间的弧/曲线。
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false。

转换

方法	描述
scale()	缩放当前绘图至更大或更小。
rotate()	旋转当前绘图。
translate()	重新映射画布上的 (0,0) 位置。
transform()	替换绘图的当前转换矩阵。
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()。

文本

属性	描述
font	设置或返回文本内容的当前字体属性。
textAlign	设置或返回文本内容的当前对齐方式。
textBaseline	设置或返回在绘制文本时使用的当前文本基线。

方法	描述
fillText()	在画布上绘制"被填充的"文本。
strokeText()	在画布上绘制文本（无填充）。
measureText()	返回包含指定文本宽度的对象。

图像绘制

方法	描述
drawImage()	向画布上绘制图像、画布或视频。

像素操作

属性	描述
width	返回 ImageData 对象的宽度。
height	返回 ImageData 对象的高度。
data	返回一个对象，其包含指定的 ImageData 对象的图像数据。

方法	描述
createImageData()	创建新的、空白的 ImageData 对象。
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上。

合成

属性	描述
globalAlpha	设置或返回绘图的当前 alpha 或透明值。
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上。

其他

方法	描述
save()	保存当前环境的状态。
restore()	返回之前保存过的路径状态和属性。
createEvent()	创建新的 Event 对象
getContext()	获得用于在画布上绘图的对象
toDataURL()	导出在 canvas 元素上绘制的图像

HTML 音频/视频 DOM 参考手册

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。

这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。

HTML 音频/视频方法

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道。
canPlayType()	检测浏览器是否能播放指定的音频/视频类型。
load()	重新加载音频/视频元素。
play()	开始播放音频/视频。
pause()	暂停当前播放的音频/视频。

HTML 音频/视频属性

属性	描述
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	设置或返回音频/视频的音量。

HTML 音频/视频事件

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

HTML 元素 - 有效 DOCTYPES

下面的表格列出了所有的 HTML5/HTML 4.01/XHTML 元素，以及它们会出现在什么文档类型 (!DOCTYPE) 中：

		HTML 4.01 / XHTML 1.0
Tag	HTML5	Transitional	Strict	Frameset	XHTML 1.1
<a>	Yes	Yes	Yes	Yes	Yes
<abbr>	Yes	Yes	Yes	Yes	Yes
<acronym>	No	Yes	Yes	Yes	Yes
<address>	Yes	Yes	Yes	Yes	Yes
<applet>	No	Yes	No	Yes	No
<area>	Yes	Yes	Yes	Yes	No
<article>	Yes	No	No	No	No
<aside>	Yes	No	No	No	No
<audio>	Yes	No	No	No	No
<b>	Yes	Yes	Yes	Yes	Yes
<base>	Yes	Yes	Yes	Yes	Yes
<basefont>	No	Yes	No	Yes	No
<bdi>	Yes	No	No	No	No
<bdo>	Yes	Yes	Yes	Yes	No
<big>	No	Yes	Yes	Yes	Yes
<blockquote>	Yes	Yes	Yes	Yes	Yes
<body>	Yes	Yes	Yes	Yes	Yes
<br>	Yes	Yes	Yes	Yes	Yes
<button>	Yes	Yes	Yes	Yes	Yes
<canvas>	Yes	No	No	No	No
<caption>	Yes	Yes	Yes	Yes	Yes
<center>	No	Yes	No	Yes	No
<cite>	Yes	Yes	Yes	Yes	Yes
<code>	Yes	Yes	Yes	Yes	Yes
<col>	Yes	Yes	Yes	Yes	No
<colgroup>	Yes	Yes	Yes	Yes	No
<command>	Yes	No	No	No	No
<datalist>	Yes	No	No	No	No
<dd>	Yes	Yes	Yes	Yes	Yes
<del>	Yes	Yes	Yes	Yes	No
<details>	Yes	No	No	No	No
<dfn>	Yes	Yes	Yes	Yes	Yes
<dir>	No	Yes	No	Yes	No
<div>	Yes	Yes	Yes	Yes	Yes
<dl>	Yes	Yes	Yes	Yes	Yes
<dt>	Yes	Yes	Yes	Yes	Yes
<em>	Yes	Yes	Yes	Yes	Yes
<embed>	Yes	No	No	No	No
<fieldset>	Yes	Yes	Yes	Yes	Yes
<figcaption>	Yes	No	No	No	No
<figure>	Yes	No	No	No	No
<font>	No	Yes	No	Yes	No
<footer>	Yes	No	No	No	No
<form>	Yes	Yes	Yes	Yes	Yes
<frame>	No	No	No	Yes	No
<frameset>	No	No	No	Yes	No
<h1> to <h6>	Yes	Yes	Yes	Yes	Yes
<head>	Yes	Yes	Yes	Yes	Yes
<header>	Yes	No	No	No	No
<hgroup>	Yes	No	No	No	No
<hr>	Yes	Yes	Yes	Yes	Yes
<html>	Yes	Yes	Yes	Yes	Yes
<i>	Yes	Yes	Yes	Yes	Yes
<iframe>	Yes	Yes	No	Yes	No
<img>	Yes	Yes	Yes	Yes	Yes
<input>	Yes	Yes	Yes	Yes	Yes
<ins>	Yes	Yes	Yes	Yes	No
<kbd>	Yes	Yes	Yes	Yes	Yes
<keygen>	Yes	No	No	No	No
<label>	Yes	Yes	Yes	Yes	Yes
<legend>	Yes	Yes	Yes	Yes	Yes
<li>	Yes	Yes	Yes	Yes	Yes
<link>	Yes	Yes	Yes	Yes	Yes
<map>	Yes	Yes	Yes	Yes	No
<mark>	Yes	No	No	No	No
<menu>	Yes	Yes	No	Yes	No
<meta>	Yes	Yes	Yes	Yes	Yes
<meter>	Yes	No	No	No	No
<nav>	Yes	No	No	No	No
<noframes>	No	Yes	No	Yes	No
<noscript>	Yes	Yes	Yes	Yes	Yes
<object>	Yes	Yes	Yes	Yes	Yes
<ol>	Yes	Yes	Yes	Yes	Yes
<optgroup>	Yes	Yes	Yes	Yes	Yes
<option>	Yes	Yes	Yes	Yes	Yes
<output>	Yes	No	No	No	No
<p>	Yes	Yes	Yes	Yes	Yes
<param>	Yes	Yes	Yes	Yes	Yes
<pre>	Yes	Yes	Yes	Yes	Yes
<progress>	Yes	No	No	No	No
<q>	Yes	Yes	Yes	Yes	Yes
<rp>	Yes	No	No	No	No
<rt>	Yes	No	No	No	No
<ruby>	Yes	No	No	No	No
<s>	Yes	Yes	No	Yes	No
<samp>	Yes	Yes	Yes	Yes	Yes
<script>	Yes	Yes	Yes	Yes	Yes
<section>	Yes	No	No	No	No
<select>	Yes	Yes	Yes	Yes	Yes
<small>	Yes	Yes	Yes	Yes	Yes
<source>	Yes	No	No	No	No
<span>	Yes	Yes	Yes	Yes	Yes
<strike>	No	Yes	No	Yes	No
<strong>	Yes	Yes	Yes	Yes	Yes
<style>	Yes	Yes	Yes	Yes	Yes
<sub>	Yes	Yes	Yes	Yes	Yes
<summary>	Yes	No	No	No	No
<sup>	Yes	Yes	Yes	Yes	Yes
<table>	Yes	Yes	Yes	Yes	Yes
<tbody>	Yes	Yes	Yes	Yes	No
<td>	Yes	Yes	Yes	Yes	Yes
<textarea>	Yes	Yes	Yes	Yes	Yes
<tfoot>	Yes	Yes	Yes	Yes	No
<th>	Yes	Yes	Yes	Yes	Yes
<thead>	Yes	Yes	Yes	Yes	No
<time>	Yes	No	No	No	No
<title>	Yes	Yes	Yes	Yes	Yes
<tr>	Yes	Yes	Yes	Yes	Yes
<track>	Yes	No	No	No	No
<tt>	No	Yes	Yes	Yes	Yes
<u>	No	Yes	No	Yes	No
<ul>	Yes	Yes	Yes	Yes	Yes
<var>	Yes	Yes	Yes	Yes	Yes
<video>	Yes	No	No	No	No
<wbr>	Yes	No	No	No	No

HTML 颜色名

目前所有浏览器都支持以下颜色名。

141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。下表列出了所有颜色的值，包括十六进制值。

Remark 提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。：

按颜色名排序

按十六进制的值排序

单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。

Color Name	HEX	Color
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4
Black	#000000
BlanchedAlmond	#FFEBCD
Blue	#0000FF
BlueViolet	#8A2BE2
Brown	#A52A2A
BurlyWood	#DEB887
CadetBlue	#5F9EA0
Chartreuse	#7FFF00
Chocolate	#D2691E
Coral	#FF7F50
CornflowerBlue	#6495ED
Cornsilk	#FFF8DC
Crimson	#DC143C
Cyan	#00FFFF
DarkBlue	#00008B
DarkCyan	#008B8B
DarkGoldenRod	#B8860B
DarkGray	#A9A9A9
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkMagenta	#8B008B
DarkOliveGreen	#556B2F
DarkOrange	#FF8C00
DarkOrchid	#9932CC
DarkRed	#8B0000
DarkSalmon	#E9967A
DarkSeaGreen	#8FBC8F
DarkSlateBlue	#483D8B
DarkSlateGray	#2F4F4F
DarkTurquoise	#00CED1
DarkViolet	#9400D3
DeepPink	#FF1493
DeepSkyBlue	#00BFFF
DimGray	#696969
DodgerBlue	#1E90FF
FireBrick	#B22222
FloralWhite	#FFFAF0
ForestGreen	#228B22
Fuchsia	#FF00FF
Gainsboro	#DCDCDC
GhostWhite	#F8F8FF
Gold	#FFD700
GoldenRod	#DAA520
Gray	#808080
Green	#008000
GreenYellow	#ADFF2F
HoneyDew	#F0FFF0
HotPink	#FF69B4
IndianRed	#CD5C5C
Indigo	#4B0082
Ivory	#FFFFF0
Khaki	#F0E68C
Lavender	#E6E6FA
LavenderBlush	#FFF0F5
LawnGreen	#7CFC00
LemonChiffon	#FFFACD
LightBlue	#ADD8E6
LightCoral	#F08080
LightCyan	#E0FFFF
LightGoldenRodYellow	#FAFAD2
LightGray	#D3D3D3
LightGreen	#90EE90
LightPink	#FFB6C1
LightSalmon	#FFA07A
LightSeaGreen	#20B2AA
LightSkyBlue	#87CEFA
LightSlateGray	#778899
LightSteelBlue	#B0C4DE
LightYellow	#FFFFE0
Lime	#00FF00
LimeGreen	#32CD32
Linen	#FAF0E6
Magenta	#FF00FF
Maroon	#800000
MediumAquaMarine	#66CDAA
MediumBlue	#0000CD
MediumOrchid	#BA55D3
MediumPurple	#9370DB
MediumSeaGreen	#3CB371
MediumSlateBlue	#7B68EE
MediumSpringGreen	#00FA9A
MediumTurquoise	#48D1CC
MediumVioletRed	#C71585
MidnightBlue	#191970
MintCream	#F5FFFA
MistyRose	#FFE4E1
Moccasin	#FFE4B5
NavajoWhite	#FFDEAD
Navy	#000080
OldLace	#FDF5E6
Olive	#808000
OliveDrab	#6B8E23
Orange	#FFA500
OrangeRed	#FF4500
Orchid	#DA70D6
PaleGoldenRod	#EEE8AA
PaleGreen	#98FB98
PaleTurquoise	#AFEEEE
PaleVioletRed	#DB7093
PapayaWhip	#FFEFD5
PeachPuff	#FFDAB9
Peru	#CD853F
Pink	#FFC0CB
Plum	#DDA0DD
PowderBlue	#B0E0E6
Purple	#800080
Red	#FF0000
RosyBrown	#BC8F8F
RoyalBlue	#4169E1
SaddleBrown	#8B4513
Salmon	#FA8072
SandyBrown	#F4A460
SeaGreen	#2E8B57
SeaShell	#FFF5EE
Sienna	#A0522D
Silver	#C0C0C0
SkyBlue	#87CEEB
SlateBlue	#6A5ACD
SlateGray	#708090
Snow	#FFFAFA
SpringGreen	#00FF7F
SteelBlue	#4682B4
Tan	#D2B48C
Teal	#008080
Thistle	#D8BFD8
Tomato	#FF6347
Turquoise	#40E0D0
Violet	#EE82EE
Wheat	#F5DEB3
White	#FFFFFF
WhiteSmoke	#F5F5F5
Yellow	#FFFF00
YellowGreen	#9ACD32

//www.51coolma.cn/tools/index?name=cpicker

//www.51coolma.cn/tools/index?name=colors_mixer

HTML 字符集

如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。浏览器使用您指定的字符集来解码 HTML 文件，从而避免产生乱码。

万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。

完整的 ASCII 参考手册。

由于很多国家使用的字符并不属于 ASCII，现代浏览器的默认字符集是 ISO-8859-1。

完整的 ISO-8859-1 参考手册。

如果网页使用不同于 ISO-8859-1 的字符集，就应该在标签进行指定。

ISO 字符集

ISO 字符集是国际标准组织 (ISO) 针对不同的字母表/语言定义的标准字符集。

ISO-8859-1 是大多数浏览器默认的字符集。

下面列出了世界各地使用的不同字符集：

字符集	描述	使用范围
ISO-8859-1	Latin alphabet part 1	北美、西欧、拉丁美洲、加勒比海、加拿大、非洲
ISO-8859-2	Latin alphabet part 2	东欧
ISO-8859-3	Latin alphabet part 3	SE Europe、世界语、其他杂项
ISO-8859-4	Latin alphabet part 4	斯堪的纳维亚/波罗的海（以及其他没有包括在 ISO-8859-1 中的部分）
ISO-8859-5	Latin/Cyrillic part 5	使用古代斯拉夫语字母表的语言，比如保加利亚语、白俄罗斯文、俄罗斯语、马其顿语
ISO-8859-6	Latin/Arabic part 6	使用阿拉伯字母的语言
ISO-8859-7	Latin/Greek part 7	现代希腊语，以及由希腊语衍生的数学符号
ISO-8859-8	Latin/Hebrew part 8	使用希伯来语的语言
ISO-8859-9	Latin 5 part 9	土耳其语。除了土耳其字符取代了冰岛文字，其它与 ISO-8859-1 相同。
ISO-8859-10	Latin 6	拉普兰语、日耳曼语、爱斯基摩北欧语
ISO-8859-15	Latin 9 (aka Latin 0)	与 ISO 8859-1 类似，欧元符号和其他一些字符取代了一些较少使用的符号
ISO-2022-JP	Latin/Japanese part 1	日本语
ISO-2022-JP-2	Latin/Japanese part 2	日本语
ISO-2022-KR	Latin/Korean part 1	韩语

Unicode 标准

由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。

Unicode 标准涵盖了世界上的所有字符、标点和符号。

不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。

也就是说，Unicode 标准将所有的字符包含在一个集合里，计算机只要支持这一个字符集，就能显示所有的字符，不会出现乱码。

Unicode 标准从 0 开始，为每个符号指定一个编号，叫做"码点"（code point）。

Unicode 联盟

Unicode 联盟开发了 Unicode 标准。他们的目标是用标准的 Unicode 转换格式 (UTF) 来取代现有的字符集。

Unicode 标准已经获得了成功，在 XML、Java、ECMAScript (JavaScript)、LDAP、CORBA 3.0、WML 中，Unicode 已经得到了实现。在许多操作系统以及所有的现代浏览器中，Unicode 同样得到了支持。

Unicode 联盟与领导性的标准发展组织进行合作，比如 ISO、W3C 以及 ECMA。

Unicode 可以被不同的字符集兼容。最常用的编码方式是 UTF-8 和 UTF-16：

字符集	描述
UTF-8	UTF8 中的字符可以是 1-4 个字节长。UTF-8 可以表示 Unicode 标准中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是网页和电子邮件的首选编码。
UTF-16	16 比特的 Unicode 转换格式是一种 Unicode 可变字符编码，能够对全部 Unicode 指令表进行编码。UTF-16 主要被用于操作系统和环境中，比如微软的 Windows 2000/XP/2003/Vista/CE 以及 Java 和 .NET 字节代码环境。

提示： 最前面的 256 个 Unicode 字符集字符对应于 256 个 ISO-8859-1 字符。

提示： 所有 HTML 4 处理器均已支持 UTF-8，而所有 XHTML 和 XML 处理器支持 UTF-8 和 UTF-16！

HTML ASCII 参考手册

ASCII 字符集被用于因特网上不同计算机间传输信息。

ASCII 字符集

ASCII ，它的全称是"美国信息交换标准代码"。它设计于60年代早期，是计算机和诸如打印机、磁带驱动器之类的硬件设备的标准字符集。

ASCII 是 7 比特字符集，包含了 128 个不同的字符值。

ASCII 支持 0-9 的数字，A-Z大写和小写英文字母，以及一些特殊字符。

被广泛使用于现代计算机、HTML和因特网上的字符集都是基于 ASCII 。

以下表格列举了128个 ASCII 字符以及对应的 HTML 实体编码。

ASCII 可印刷字符

字符集	编号	描述
	32	空格
!	33	exclamation mark
"	34	quotation mark
#	35	number sign
$	36	dollar sign
%	37	percent sign
&	38	ampersand
'	39	apostrophe
(	40	left parenthesis
)	41	right parenthesis
*	42	asterisk
+	43	plus sign
,	44	comma
-	45	hyphen
.	46	period
/	47	slash
0	48	digit 0
1	49	digit 1
2	50	digit 2
3	51	digit 3
4	52	digit 4
5	53	digit 5
6	54	digit 6
7	55	digit 7
8	56	digit 8
9	57	digit 9
:	58	colon
;	59	semicolon
<	60	less-than
=	61	equals-to
>	62	greater-than
?	63	question mark
@	64	at sign
A	65	uppercase A
B	66	uppercase B
C	67	uppercase C
D	68	uppercase D
E	69	uppercase E
F	70	uppercase F
G	71	uppercase G
H	72	uppercase H
I	73	uppercase I
J	74	uppercase J
K	75	uppercase K
L	76	uppercase L
M	77	uppercase M
N	78	uppercase N
O	79	uppercase O
P	80	uppercase P
Q	81	uppercase Q
R	82	uppercase R
S	83	uppercase S
T	84	uppercase T
U	85	uppercase U
V	86	uppercase V
W	87	uppercase W
X	88	uppercase X
Y	89	uppercase Y
Z	90	uppercase Z
[	91	left square bracket
	92	backslash
]	93	right square bracket
^	94	caret
_	95	underscore
`	96	grave accent
a	97	lowercase a
b	98	lowercase b
c	99	lowercase c
d	100	lowercase d
e	101	lowercase e
f	102	lowercase f
g	103	lowercase g
h	104	lowercase h
i	105	lowercase i
j	106	lowercase j
k	107	lowercase k
l	108	lowercase l
m	109	lowercase m
n	110	lowercase n
o	111	lowercase o
p	112	lowercase p
q	113	lowercase q
r	114	lowercase r
s	115	lowercase s
t	116	lowercase t
u	117	lowercase u
v	118	lowercase v
w	119	lowercase w
x	120	lowercase x
y	121	lowercase y
z	122	lowercase z
{	123	left curly brace
\|	124	vertical bar
}	125	right curly brace
~	126	tilde

ASCII 设备控制字符

ASCII 设备控制字符最初被设计为用来控制诸如打印机和磁带驱动器之类的硬件设备。

在HTML文档中这些代码不会起任何作用。

字符	编号	描述
NUL	00	null character
SOH	01	start of header
STX	02	start of text
ETX	03	end of text
EOT	04	end of transmission
ENQ	05	enquiry
ACK	06	acknowledge
BEL	07	bell (ring)
BS	08	backspace
HT	09	horizontal tab
LF	10	line feed
VT	11	vertical tab
FF	12	form feed
CR	13	carriage return
SO	14	shift out
SI	15	shift in
DLE	16	data link escape
DC1	17	device control 1
DC2	18	device control 2
DC3	19	device control 3
DC4	20	device control 4
NAK	21	negative acknowledge
SYN	22	synchronize
ETB	23	end transmission block
CAN	24	cancel
EM	25	end of medium
SUB	26	substitute
ESC	27	escape
FS	28	file separator
GS	29	group separator
RS	30	record separator
US	31	unit separator

DEL	127	delete (rubout)

HTML ISO-8859-1 参考手册

现代的浏览器支持的字符集：

ISO-8859-1

ISO-8859-1 是大多数浏览器默认的字符集。

ISO-8859-1 是单字节编码，它向下兼容 ASCII。

ISO-8859-1 的较低部分（从 1 到 127 之间的代码）是最初的 ASCII 字符集（0-9 的数字，大写和小写英文字母表，以及一些特殊字符）。

ISO-8859-1 的较高部分（从 160 到 255 之间的代码）包含了一些西欧国家使用的字符和一些被广泛使用的特殊字符，它们全都有实体名称。

这些符号中的大多数都可以在不进行实体引用的情况下使用，但是实体名称或实体编号为那些不容易通过键盘键入的符号提供了表达的方法。

提示：实体名称对大小写敏感。

HTML 预留字符

HTML 和 XHTML 预留了一些字符。比如，您不能使用包含这些字符的文本，因为浏览器可能会误以为是 HTML 标签。

HTML 和 XHTML 中央处理器必须识别以下表格所列举的五种特殊字符：

字符	实体编号	实体名称	描述
"	"	"	双引号
'	'	'	单引号
&	&	&	&(表示and的符号)
<	<	<	小于号
>	>	>	大于号

注释： 实体名称对大小写敏感！

ISO 8859-1 符号实体

字符	实体编号	实体名称	描述
			空格
¡	¡	¡	inverted exclamation mark
¢	¢	¢	cent
£	£	£	pound
¤	¤	¤	currency
¥	¥	¥	yen
¦	¦	¦	broken vertical bar
§	§	§	section
¨	¨	¨	spacing diaeresis
©	©	©	copyright
ª	ª	ª	feminine ordinal indicator
«	«	«	angle quotation mark (left)
¬	¬	¬	negation
			soft hyphen
®	®	®	registered trademark
¯	¯	¯	spacing macron
°	°	°	degree
±	±	±	plus-or-minus
²	²	²	superscript 2
³	³	³	superscript 3
´	´	´	spacing acute
µ	µ	µ	micro
¶	¶	¶	paragraph
·	·	·	middle dot
¸	¸	¸	spacing cedilla
¹	¹	¹	superscript 1
º	º	º	masculine ordinal indicator
»	»	»	angle quotation mark (right)
¼	¼	¼	fraction 1/4
½	½	½	fraction 1/2
¾	¾	¾	fraction 3/4
¿	¿	¿	inverted question mark
×	×	×	multiplication
÷	÷	÷	division

ISO 8859-1 字符实体

字符	实体编号	实体名称	描述
À	À	À	capital a, grave accent
Á	Á	Á	capital a, acute accent
Â	Â	Â	capital a, circumflex accent
Ã	Ã	Ã	capital a, tilde
Ä	Ä	Ä	capital a, umlaut mark
Å	Å	Å	capital a, ring
Æ	Æ	Æ	capital ae
Ç	Ç	Ç	capital c, cedilla
È	È	È	capital e, grave accent
É	É	É	capital e, acute accent
Ê	Ê	Ê	capital e, circumflex accent
Ë	Ë	Ë	capital e, umlaut mark
Ì	Ì	Ì	capital i, grave accent
Í	Í	Í	capital i, acute accent
Î	Î	Î	capital i, circumflex accent
Ï	Ï	Ï	capital i, umlaut mark
Ð	Ð	Ð	capital eth, Icelandic
Ñ	Ñ	Ñ	capital n, tilde
Ò	Ò	Ò	capital o, grave accent
Ó	Ó	Ó	capital o, acute accent
Ô	Ô	Ô	capital o, circumflex accent
Õ	Õ	Õ	capital o, tilde
Ö	Ö	Ö	capital o, umlaut mark
Ø	Ø	Ø	capital o, slash
Ù	Ù	Ù	capital u, grave accent
Ú	Ú	Ú	capital u, acute accent
Û	Û	Û	capital u, circumflex accent
Ü	Ü	Ü	capital u, umlaut mark
Ý	Ý	Ý	capital y, acute accent
Þ	Þ	Þ	capital THORN, Icelandic
ß	ß	ß	small sharp s, German
à	à	à	small a, grave accent
á	á	á	small a, acute accent
â	â	â	small a, circumflex accent
ã	ã	ã	small a, tilde
ä	ä	ä	small a, umlaut mark
å	å	å	small a, ring
æ	æ	æ	small ae
ç	ç	ç	small c, cedilla
è	è	è	small e, grave accent
é	é	é	small e, acute accent
ê	ê	ê	small e, circumflex accent
ë	ë	ë	small e, umlaut mark
ì	ì	ì	small i, grave accent
í	í	í	small i, acute accent
î	î	î	small i, circumflex accent
ï	ï	ï	small i, umlaut mark
ð	ð	ð	small eth, Icelandic
ñ	ñ	ñ	small n, tilde
ò	ò	ò	small o, grave accent
ó	ó	ó	small o, acute accent
ô	ô	ô	small o, circumflex accent
õ	õ	õ	small o, tilde
ö	ö	ö	small o, umlaut mark
ø	ø	ø	small o, slash
ù	ù	ù	small u, grave accent
ú	ú	ú	small u, acute accent
û	û	û	small u, circumflex accent
ü	ü	ü	small u, umlaut mark
ý	ý	ý	small y, acute accent
þ	þ	þ	small thorn, Icelandic
ÿ	ÿ	ÿ	small y, umlaut mark

ISO-8859-1 与 Latin1 的关系

ISO-8859-1 的别名是 Latin1，有些环境下写作 Latin-1。

HTML 符号实体参考手册

HTML 符号实体

如果我们希望浏览器正确地显示在 HTML 中预留的字符，我们必须在 HTML 源码中插入字符实体。

字符实体有三部分：一个和号 ‘&’ 和一个实体名称（或者一个 ‘#’ 和一个实体编号），以及一个分号‘;’。

本字符实体参考手册包括了数学符号、希腊字符、各种箭头记号、科技符号以及形状。

注释： 实体名称对大小写敏感。

HTML 支持的数学符号

字符	实体编号	实体名称	描述
∀	∀	∀	for all
∂	∂	∂	part
∃	∃	∃	exists
∅	∅	∅	empty
∇	∇	∇	nabla
∈	∈	∈	isin
∉	∉	∉	notin
∋	∋	&ni;	ni
∏	∏	∏	prod
∑	∑	∑	sum
−	−	−	minus
∗	∗	&lowast;	lowast
√	√	√	square root
∝	∝	&prop;	proportional to
∞	∞	∞	infinity
∠	∠	&ang;	angle
∧	∧	&and;	and
∨	∨	&or;	or
∩	∩	∩	cap
∪	∪	∪	cup
∫	∫	∫	integral
∴	∴	&there4;	therefore
∼	∼	&sim;	similar to
≅	≅	&cong;	congruent to
≈	≈	≈	almost equal
≠	≠	≠	not equal
≡	≡	&equiv;	equivalent
≤	≤	≤	less or equal
≥	≥	≥	greater or equal
⊂	⊂	⊂	subset of
⊃	⊃	⊃	superset of
⊄	⊄	&nsub;	not subset of
⊆	⊆	&sube;	subset or equal
⊇	⊇	&supe;	superset or equal
⊕	⊕	&oplus;	circled plus
⊗	⊗	&otimes;	circled times
⊥	⊥	&perp;	perpendicular
⋅	⋅	⋅	dot operator

HTML 支持的希腊字母

字符	实体编号	实体名称	描述
Α	Α	Α	Alpha
Β	Β	Β	Beta
Γ	Γ	Γ	Gamma
Δ	Δ	Δ	Delta
Ε	Ε	Ε	Epsilon
Ζ	Ζ	Ζ	Zeta
Η	Η	Η	Eta
Θ	Θ	Θ	Theta
Ι	Ι	Ι	Iota
Κ	Κ	Κ	Kappa
Λ	Λ	Λ	Lambda
Μ	Μ	Μ	Mu
Ν	Ν	Ν	Nu
Ξ	Ξ	Ξ	Xi
Ο	Ο	Ο	Omicron
Π	Π	Π	Pi
Ρ	Ρ	Ρ	Rho
	undefined		Sigmaf
Σ	Σ	Σ	Sigma
Τ	Τ	Τ	Tau
Υ	Υ	Υ	Upsilon
Φ	Φ	Φ	Phi
Χ	Χ	Χ	Chi
Ψ	Ψ	Ψ	Psi
Ω	Ω	Ω	Omega

α	α	α	alpha
β	β	β	beta
γ	γ	γ	gamma
δ	δ	δ	delta
ε	ε	ε	epsilon
ζ	ζ	ζ	zeta
η	η	η	eta
θ	θ	θ	theta
ι	ι	ι	iota
κ	κ	κ	kappa
λ	λ	λ	lambda
μ	μ	μ	mu
ν	ν	ν	nu
ξ	ξ	ξ	xi
ο	ο	ο	omicron
π	π	π	pi
ρ	ρ	ρ	rho
ς	ς	&sigmaf;	sigmaf
σ	σ	σ	sigma
τ	τ	τ	tau
υ	υ	υ	upsilon
φ	φ	φ	phi
χ	χ	χ	chi
ψ	ψ	ψ	psi
ω	ω	ω	omega

ϑ	ϑ	&thetasym;	theta symbol
ϒ	ϒ	&upsih;	upsilon symbol
ϖ	ϖ	ϖ	pi symbol

HTML 支持的其他实体

字符	实体编号	实体名称	描述
Œ	Œ	&OElig;	capital ligature OE
œ	œ	&oelig;	small ligature oe
Š	Š	&Scaron;	capital S with caron
š	š	&scaron;	small S with caron
Ÿ	Ÿ	&Yuml;	capital Y with diaeres
ƒ	ƒ	&fnof;	f with hook
ˆ	ˆ	&circ;	modifier letter circumflex accent
˜	˜	&tilde;	small tilde
		&ensp;	en space
		&emsp;	em space
			thin space
‌	‌	&zwnj;	zero width non-joiner
‍	‍	&zwj;	zero width joiner
‎	‎	&lrm;	left-to-right mark
‏	‏	&rlm;	right-to-left mark
–	–	–	en dash
—	—	—	em dash
'	‘	‘	left single quotation mark
'	’	’	right single quotation mark
‚	‚	&sbquo;	single low-9 quotation mark
"	“	“	left double quotation mark
"	”	”	right double quotation mark
„	„	&bdquo;	double low-9 quotation mark
†	†	&dagger;	dagger
‡	‡	&Dagger;	double dagger
•	•	•	bullet
…	…	…	horizontal ellipsis
‰	‰	&permil;	per mille
′	′	′	minutes
″	″	″	seconds
‹	‹	&lsaquo;	single left angle quotation
›	›	&rsaquo;	single right angle quotation
‾	‾	&oline;	overline
€	€	€	euro
™	™ or	™	trademark
←	←	←	left arrow
↑	↑	↑	up arrow
→	→	→	right arrow
↓	↓	↓	down arrow
↔	↔	↔	left right arrow
↵	↵	&crarr;	carriage return arrow
⌈	⌈	&lceil;	left ceiling
⌉	⌉	&rceil;	right ceiling
⌊	⌊	&lfloor;	left floor
⌋	⌋	&rfloor;	right floor
◊	◊	&loz;	lozenge
♠	♠	&spades;	spade
♣	♣	&clubs;	club
♥	♥	&hearts;	heart
♦	♦	&diams;	diamond

HTML URL 编码参考手册

URL 编码会将字符转换为可通过因特网传输的格式。

URL - 统一资源定位器

Web 浏览器通过 URL 从 web 服务器请求页面。

URL 是网页的地址，比如： http://www.51coolma.cn。

URL 编码

URL 只能使用 ASCII 字符集来通过因特网进行发送。

由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

尝试一下

如果您点击下面的"提交"按钮，浏览器会在发送输入之前对其进行 URL 编码。服务器上的页面会显示出接收到的输入。

试着输入一些其他字符，然后再次点击提交按钮。

URL 编码函数

JavaScript、PHP、ASP 都提供了对字符串进行 URL 编码的函数。

JavaScript 中使用 encodeURI() 函数，PHP 中使用 rawurlencode() 函数，ASP 中使用 Server.URLEncode() 函数。

点击"URL 编码"按钮，看看 JavaScript 函数是怎么对文本进行编码的。

注释：JavaScript 函数将空格编码成 %20 。

URL 编码参考手册

ASCII 字符	URL-编码
space	%20
!	%21
"	%22
#	%23
$	%24
%	%25
&	%26
'	%27
(	%28
)	%29
*	%2A
+	%2B
,	%2C
-	%2D
.	%2E
/	%2F
0	%30
1	%31
2	%32
3	%33
4	%34
5	%35
6	%36
7	%37
8	%38
9	%39
:	%3A
;	%3B
<	%3C
=	%3D
>	%3E
?	%3F
@	%40
A	%41
B	%42
C	%43
D	%44
E	%45
F	%46
G	%47
H	%48
I	%49
J	%4A
K	%4B
L	%4C
M	%4D
N	%4E
O	%4F
P	%50
Q	%51
R	%52
S	%53
T	%54
U	%55
V	%56
W	%57
X	%58
Y	%59
Z	%5A
[	%5B
	%5C
]	%5D
^	%5E
_	%5F
`	%60
a	%61
b	%62
c	%63
d	%64
e	%65
f	%66
g	%67
h	%68
i	%69
j	%6A
k	%6B
l	%6C
m	%6D
n	%6E
o	%6F
p	%70
q	%71
r	%72
s	%73
t	%74
u	%75
v	%76
w	%77
x	%78
y	%79
z	%7A
{	%7B
\|	%7C
}	%7D
~	%7E
	%7F
`	%80
	%81
‚	%82
ƒ	%83
„	%84
…	%85
†	%86
‡	%87
ˆ	%88
‰	%89
Š	%8A
‹	%8B
Œ	%8C
	%8D
Ž	%8E
	%8F
	%90
'	%91
'	%92
"	%93
"	%94
•	%95
–	%96
—	%97
˜	%98
™	%99
š	%9A
›	%9B
œ	%9C
	%9D
ž	%9E
Ÿ	%9F
	%A0
¡	%A1
¢	%A2
£	%A3
¤	%A4
¥	%A5
¦	%A6
§	%A7
¨	%A8
©	%A9
ª	%AA
«	%AB
¬	%AC
	%AD
®	%AE
¯	%AF
°	%B0
±	%B1
²	%B2
³	%B3
´	%B4
µ	%B5
¶	%B6
·	%B7
¸	%B8
¹	%B9
º	%BA
»	%BB
¼	%BC
½	%BD
¾	%BE
¿	%BF
À	%C0
Á	%C1
Â	%C2
Ã	%C3
Ä	%C4
Å	%C5
Æ	%C6
Ç	%C7
È	%C8
É	%C9
Ê	%CA
Ë	%CB
Ì	%CC
Í	%CD
Î	%CE
Ï	%CF
Ð	%D0
Ñ	%D1
Ò	%D2
Ó	%D3
Ô	%D4
Õ	%D5
Ö	%D6
×	%D7
Ø	%D8
Ù	%D9
Ú	%DA
Û	%DB
Ü	%DC
Ý	%DD
Þ	%DE
ß	%DF
à	%E0
á	%E1
â	%E2
ã	%E3
ä	%E4
å	%E5
æ	%E6
ç	%E7
è	%E8
é	%E9
ê	%EA
ë	%EB
ì	%EC
í	%ED
î	%EE
ï	%EF
ð	%F0
ñ	%F1
ò	%F2
ó	%F3
ô	%F4
õ	%F5
ö	%F6
÷	%F7
ø	%F8
ù	%F9
ú	%FA
û	%FB
ü	%FC
ý	%FD
þ	%FE
ÿ	%FF

URL 编码参考手册

ASCII 设备控制字符最初被设计为用来控制诸如打印机和磁带驱动器之类的硬件设备。在URL中这些字符不会起任何作用。

ASCII 字符	描述	URL-编码
NUL	null character	%00
SOH	start of header	%01
STX	start of text	%02
ETX	end of text	%03
EOT	end of transmission	%04
ENQ	enquiry	%05
ACK	acknowledge	%06
BEL	bell (ring)	%07
BS	backspace	%08
HT	horizontal tab	%09
LF	line feed	%0A
VT	vertical tab	%0B
FF	form feed	%0C
CR	carriage return	%0D
SO	shift out	%0E
SI	shift in	%0F
DLE	data link escape	%10
DC1	device control 1	%11
DC2	device control 2	%12
DC3	device control 3	%13
DC4	device control 4	%14
NAK	negative acknowledge	%15
SYN	synchronize	%16
ETB	end transmission block	%17
CAN	cancel	%18
EM	end of medium	%19
SUB	substitute	%1A
ESC	escape	%1B
FS	file separator	%1C
GS	group separator	%1D
RS	record separator	%1E
US	unit separator	%1F

HTML 语言代码参考手册

ISO 语言代码

HTML 的 lang 属性可用于声明网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。

例如：谷歌浏览器可以根据您的代码 <html lang="en"> 就会知道您的网页是英文页面，则会询问是否需要翻译成中文。

根据 W3C 推荐标准，您应该通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明，比如：

在 XHTML 中，采用如下方式在 <html> 标签中对语言进行声明：

ISO 639-1 语言代码

ISO 639-1 主要是用于术语、辞书编纂和语言学，也适用于任何需要以2字母代码形式表示语种的工作领域（尤其是计算机系统）。

ISO 639-1 为各种语言定义了缩略词。您可以在 HTML 和 XHTML 中的 lang 和 xml:lang 属性中使用它们。更多详细信息，您可以参考 HTTP 接口设计指北。

语言	ISO 代码
Abkhazian	ab
Afar	aa
Afrikaans	af
Albanian	sq
Amharic	am
Arabic	ar
Aragonese	an
Armenian	hy
Assamese	as
Aymara	ay
Azerbaijani	az
Bashkir	ba
Basque	eu
Bengali (Bangla)	bn
Bhutani	dz
Bihari	bh
Bislama	bi
Breton	br
Bulgarian	bg
Burmese	my
Byelorussian (Belarusian)	be
Cambodian	km
Catalan	ca
Cherokee
Chewa	ny
Chinese (简体)	zh
Chinese (繁体)	zh
Corsican	co
Croatian	hr
Czech	cs
Danish	da
Divehi	dv
Dutch	nl
Edo
English	en
Esperanto	eo
Estonian	et
Faeroese	fo
Farsi	fa
Fiji	fj
Finnish	fi
Flemish
French	fr
Frisian	fy
Fulfulde
Galician	gl
Gaelic (Scottish)	gd
Gaelic (Manx)	gv
Georgian	ka
German	de
Greek	el
Greenlandic	kl
Guarani	gn
Gujarati	gu
Haitian Creole	ht
Hausa	ha
Hawaiian
Hebrew	he, iw
Hindi	hi
Hungarian	hu
Ibibio
Icelandic	is
Ido	io
Igbo	ig
Indonesian	id, in
Interlingua	ia
Interlingue	ie
Inuktitut	iu
Inupiak	ik
Irish	ga
Italian	it
Japanese	ja
Javanese	jv
Kannada	kn
Kanuri	kr
Kashmiri	ks
Kazakh	kk
Kinyarwanda (Ruanda)	rw
Kirghiz	ky
Kirundi (Rundi)	rn
Konkani
Korean	ko
Kurdish	ku
Laothian	lo
Latin	la
Latvian (Lettish)	lv
Limburgish ( Limburger)	li
Lingala	ln
Lithuanian	lt
Macedonian	mk
Malagasy	mg
Malay	ms
Malayalam	ml

Maltese	mt
Maori	mi
Marathi	mr
Moldavian	mo
Mongolian	mn
Nauru	na
Nepali	ne
Norwegian	no
Occitan	oc
Oriya	or
Oromo (Afaan Oromo)	om
Papiamentu
Pashto (Pushto)	ps
Polish	pl
Portuguese	pt
Punjabi	pa
Quechua	qu
Rhaeto-Romance	rm
Romanian	ro
Russian	ru
Sami (Lappish)
Samoan	sm
Sangro	sg
Sanskrit	sa
Serbian	sr
Serbo-Croatian	sh
Sesotho	st
Setswana	tn
Shona	sn
Sichuan Yi	ii
Sindhi	sd
Sinhalese	si
Siswati	ss
Slovak	sk
Slovenian	sl
Somali	so
Spanish	es
Sundanese	su
Swahili (Kiswahili)	sw
Swedish	sv
Syriac
Tagalog	tl
Tajik	tg
Tamazight
Tamil	ta
Tatar	tt
Telugu	te
Thai	th
Tibetan	bo
Tigrinya	ti
Tonga	to
Tsonga	ts
Turkish	tr
Turkmen	tk
Twi	tw
Uighur	ug
Ukrainian	uk
Urdu	ur
Uzbek	uz
Venda	ve
Vietnamese	vi
Volapük	vo
Wallon	wa
Welsh	cy
Wolof	wo
Xhosa	xh
Yi
Yiddish	yi, ji
Yoruba	yo
Zulu	zu

HTTP 状态消息

当浏览器从 web 服务器请求服务时，可能会发生错误。

因此，我们使用3位数字代码 HTTP 状态码（HTTP Status Code）来表示 HTTP 响应状态。

以下列举了有可能会返回的一系列 HTTP 状态消息（您也可以参考本站的状态码部分的内容）：

1xx: 信息

该状态码属于临时响应类型，代表请求已被接受，需要继续处理。

该类状态码只包含状态行和某些可选的响应头信息，并以空行结束。

消息：	描述：
100 Continue	服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
101 Switching Protocols	服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。
103 Checkpoint	用于 PUT 或者 POST 请求恢复失败时的恢复请求建议。

2xx: 成功

该类型的状态码，表示请求已成功被服务器接收、理解、并接受。

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

3xx: 重定向

该类状态码完成请求的要求是需要客户端采取进一步的操作。它通常用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。

消息：	描述：
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 Switch Proxy	目前已不再使用，但是代码依然被保留。
307 Temporary Redirect	被请求的页面已经临时移至新的 URL 。
308 Resume Incomplete	用于 PUT 或者 POST 请求恢复失败时的恢复请求建议。

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-URI Too Long	由于 URL 太长，服务器不会接受请求。当 POST 请求被转换为带有很长的查询信息的 GET 请求时，就会发生这种情况。
415 Unsupported Media Type	由于媒介类型不被支持，服务器不会接受请求。
416 Requested Range Not Satisfiable	客户端请求部分文档，但是服务器不能提供被请求的部分。
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协议版本。
511 Network Authentication Required	用户需要提供身份验证来获取网络访问入口。

HTTP 方法：GET 对比 POST

HTTP 定义了与服务器交互的不同方法，两种最常用的 HTTP 方法是：GET 和 POST。

什么是 HTTP ？

超文本传输协议（HTTP）的设计目的是保证客户端与服务器之间的通信。

HTTP 的工作方式是客户端与服务器之间的请求-应答协议。客户端是终端用户，服务器端是网站。

web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

有关 HTTP 的更多内容，您可以参考本站的 HTTP 教程！

两种 HTTP 请求方法：GET 和 POST

在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。

GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。

GET 方法

请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：

/test/demo_form.php?name1=value1&name2=value2

有关 GET 请求的其他一些注释：

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据

POST 方法

请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：

POST /test/demo_form.php HTTP/1.1
Host: 51coolma.cn
name1=value1&name2=value2

有关 POST 请求的其他一些注释：

POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

比较 GET 与 POST

下面的表格比较了两种 HTTP 方法：GET 和 POST。

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

其他 HTTP 请求方法

下面的表格列出了其他一些 HTTP 请求方法：

方法	描述
HEAD	与 GET 相同，但只返回 HTTP 报头，不返回文档主体。
PUT	上传指定的 URI 表示。
DELETE	删除指定资源。
OPTIONS	返回服务器支持的 HTTP 方法。
CONNECT	把请求连接转换到透明的 TCP/IP 通道。

Px、Em 换算工具

以下工具提供了 em 和 px 的换算工具。

第一个输入框：设置了网页默认的字体像素 (通常 16px)
第二个输入框：输入像素值，可以将 px 换算为 em。
第三个输入框：输入em（相对长度单位）值，可以将 em 换算为 px

设置默认的像素大小:
px

PX 换算为 EM:
px
EM 换算为 PX:
em
换算结果:

文本字体大小

下表列出了在网页字体默认值为 16px 时， px 和 em 及网页字体百分比的换算数据。

px	em	百分比
6px	0.3750em	37.50%
8px	0.5000em	50.00%
10px	0.6250em	62.50%
12px	0.7500em	75.00%
14px	0.8750em	87.50%
16px	1.0000em	100.00%
18px	1.1250em	112.50%
20px	1.2500em	125.00%
22px	1.3750em	137.50%
24px	1.5000em	150.00%
25px	1.5625em	156.25%

pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。

字号：是中文字库中特有的一种单位，以中文代号表示特定的磅值pt，便于记忆、表述。

pt和px的换算公式可以根据pt的定义得出:

pt=1/72(英寸), px=1/dpi(英寸)

因此 pt=px*dpi/72

以Windows下的96dpi来计算，pt=px*72/96=px*3/4

字号	pt	px	em
初号	42pt	56px	3.5em
小初	36pt	48px	3em
	34pt	45px	2.75em
	32pt	42px	2.55em
	30pt	40px	2.45em
	29pt	38px	2.35em
	28pt	37px	2.3em
	27pt	36px	2.25em
一号	26pt	35px	2.2em
	25pt	34px	2.125em
小一	24pt	32px	2em
二号	22pt	29px	1.8em
	20pt	26px	1.6em
小二	18pt	24px	1.5em
	17pt	23px	1.45em
三号	16pt	22px	1.4em
小三	15pt	21px	1.3em
	14.5pt	20px	1.25em
四号	14pt	19px	1.2em
	13.5pt	18px	1.125em
	13pt	17px	1.05em
小四	12pt	16px	1em
	11pt	15px	0.95em
五号	10.5pt	14px	0.875em
	10pt	13px	0.8em
小五	9pt	12px	0.75em
	8pt	11px	0.7em
六号	7.5pt	10px	0.625em
	7pt	9px	0.55em
小六	6.5pt	8px	0.5em
七号	5.5pt	7px	0.4375em
八号	5pt	6px	0.375em

px、em、rem区别

PX

px 像素（Pixel）。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。

PX特点

1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

EM

em 是基于基数（比如：1.5em）来计算出来的相对字体大小。

em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

REM

p {font-size:14px; font-size:.875rem;}

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

键盘快捷键

键盘快捷键就是使用键盘上某一个或某几个键的组合完成一条功能命令。

通过使用键盘快捷键可以节省时间。

通过键盘快捷键可以提高操作速度。

Windows 和 Mac 的键盘快捷键

在现代操作系统中和计算机软件程序中，键盘快捷键经常被使用。

使用键盘快捷键能帮您节省很多时间。

基本的快捷键

描述	Windows	Mac OS
编辑菜单	Alt + E	Ctrl + F2 + F
文件菜单	Alt + F	Ctrl + F2 + E
视图菜单	Alt + V	Ctrl + F2 + V
全选文本	Ctrl + A	Cmd + A
复制文本	Ctrl + C	Cmd + C
查找文本	Ctrl + F	Cmd + F
查找替换文本	Ctrl + H	Cmd + F
新建文档	Ctrl + N	Cmd + N
打开文件	Ctrl + O	Cmd + O
打印选项	Ctrl + P	Cmd + P
保存文件	Ctrl + S	Cmd + S
粘贴文本	Ctrl + V	Cmd + V
剪切文本	Ctrl + X	Cmd + X
重做文本	Ctrl + Y	Shift + Cmd + Z
撤销文本	Ctrl + Z	Cmd + Z

文本编辑

描述	Windows	Mac OS
光标移动
将文本插入光标向右移动或者移动到下一行行首	Right Arrow	Right Arrow
将文本插入光标向左移动或者移动到上一行行尾	Left Arrow	Left Arrow
将文本插入光标向上移动一行	Up Arrow	Up Arrow
将文本插入光标向下移动一行	Down Arrow	Down Arrow
将文本插入光标移动到当前行的行首	Home	Cmd + Left Arrow
将文本插入光标移动到当前行的行尾	End	Cmd + Right Arrow
将文本插入光标移动到文档的开头	Ctrl + Home	Cmd + Up Arrow
将文本插入光标移动到文档的结尾	Ctrl + End	Cmd + Down Arrow
将文本插入光标移动到上一个文本框	Page Up	Fn + Up Arrow
将文本插入光标移动到下一个文本框	Page Down	Fn + Down Arrow
将文本插入光标向左移动到前一个词的开头	Ctrl + Left Arrow	Option + Left Arrow
将文本插入光标向右移动到后一个词的开头	Ctrl + Right Arrow	Option + Right Arrow
将文本插入光标移动到行首	Ctrl + Up Arrow	Cmd + Left Arrow
将文本插入光标移动到行尾	Ctrl + Down Arrow	Cmd + Right Arrow

文本选择
选择文本插入光标左边的字符	Shift + Left Arrow	Shift + Left Arrow
选择文本插入光标右边的字符	Shift + Right Arrow	Shift + Right Arrow
向上选择一行文本	Shift + Up Arrow	Shift + Up Arrow
向下选择一行文本	Shift + Down Arrow	Shift + Down Arrow
选择文本插入光标左边的字	Shift + Ctrl + Left	Shift + Opt + Left
选择文本插入光标右边的字	Shift + Ctrl + Right	Shift + Opt + Right
向左选择一段文本	Shift + Ctrl + Up	Shift + Opt + Up
向右选择一段文本	Shift + Ctrl + Down	Shift + Opt + Down
选择文本插入光标与当前行行首之间的文本	Shift + Home	Cmd + Shift + Left Arrow
选择文本插入光标与当前行行尾之间的文本	Shift + End	Cmd + Shift + Right Arrow
选择文本插入光标与文档开头之间的文本	Shift + Ctrl + Home	Cmd + Shift + Up Arrow or Cmd + Shift + Fn + Left Arrow
选择文本插入光标与文档结尾之间的文本	Shift + Ctrl + End	Cmd + Shift + Down Arrow or Cmd + Shift + Fn + Right Arrow
向上选择一个文本框	Shift + Page Up	Shift + Fn + Up Arrow
向下选择一个文本框	Shift + Page Down	Shift + Fn + Down Arrow
全选文本	Ctrl + A	Cmd + A
查找文本	Ctrl + F	Cmd + F

文本排版
将所选文本设置为粗体	Ctrl + B	Cmd + B
将所选文本设置为斜体	Ctrl + I	Cmd + I
将所选文本加下划线	Ctrl + U	Cmd + U
将所选文本设置为上标	Ctrl + Shift + =	Cmd + Shift + =
将所选文本设置为下标	Ctrl + =	Cmd + =

文本编辑
删除文本插入光标左边的字符	Backspace	Backspace
删除文本插入光标右边的字符	Delete	Fn + Backspace
删除文本插入光标右边的字	Ctrl + Del	Cmd + Backspace
删除文本插入光标左边的字	Ctrl + Backspace	Cmd + Fn + Backspace
增加缩进量	Tab	Tab
减少缩进量	Shift + Tab	Shift + Tab
复制文本	Ctrl + C	Cmd + C
查找替换文本	Ctrl + H	Cmd + F
粘贴文本	Ctrl + V	Cmd + V
剪切文本	Ctrl + X	Cmd + X
重做文本	Ctrl + Y	Shift + Cmd + Z
撤销文本	Ctrl + Z	Cmd + Z

Web 浏览器

描述	Windows	Mac OS
Navigation
向下滚动框	Space or Page Down	Space or Fn + Down Arrow
向上滚动框	Shift + Space or Page Up	Shift + Space or Fn + Up Arrow
定位到页面底部	End	Cmd + Down Arrow
定位到页面头部	Home	Cmd + Up Arrow
回退	Alt + Left Arrow or Backspace	Cmd + Left Arrow
前进	Alt + Right Arrow or Shift + Backspace	Cmd + Right Arrow
刷新网页	F5	Cmd + R
刷新网页（无缓存）	Ctrl + F5	Cmd + Shift + R
停止	Esc	Esc
全屏切换	F11	Cmd + Shift + F
放大	Ctrl + +	Cmd + +
缩小	Ctrl + -	Cmd + -
重置 100% （默认）	Ctrl + 0	Cmd + 0
打开主页	Alt + Home	Option + Home or Option + Fn + Left Arrow
查找文本	Ctrl + F	Cmd + F

标签/窗口管理
打开一个新的标签页	Ctrl + T	Cmd + T
关闭当前标签页	Ctrl + W	Cmd + W
关闭所有标签页	Ctrl + Shift + W	Cmd + Q
关闭除当前标签页以外的其它标签页	Ctrl + Alt + F4	Cmd + Opt + W
定位到下一个标签页	Ctrl + Tab	Control + Tab or Cmd + Shift + Right Arrow
定位到上一个标签页	Ctrl + Shift + Tab	Shift + Control + Tab or Cmd + Shift + Left Arrow
定位到指定编号的标签页	Ctrl + 1-8	Cmd + 1-8
定位到最后一个标签页	Ctrl + 9	Cmd + 9
重新打开最后一个关闭的标签页	Ctrl + Shift + T	Cmd + Shift + T
打开一个新窗口	Ctrl + N	Cmd + N
关闭当前窗口	Alt + F4	Cmd + W
定位到下一个窗口	Alt + Tab	Cmd + Tab
定位到上一个窗口	Alt + Shift + Tab	Cmd + Shift + Tab
重新打开最后一个关闭的窗口	Ctrl + Shift + N
在背景的标签页中打开链接	Ctrl + Click	Cmd + Click
在前景的标签页中打开链接	Ctrl + Shift + Click	Cmd + Shift + Click
打印当前网页	Ctrl + P	Cmd + P
保存当前网页	Ctrl + S	Cmd + S

地址栏
在工具栏、搜索栏和页面元素间进行循环定位	Tab	Tab
定位到浏览器的地址栏	Ctrl + L or Alt + D	Cmd + L
聚焦并选中浏览器的搜索栏	Ctrl + E	Cmd + E / Cmd + K
在新的标签页打开地址栏位置	Alt + Enter	Opt + Enter
显示一系列之前访问过的地址	F4
在地址栏输入文本的开头增加"www."，结尾增加".com"。（比如，地址栏输入"baidu"，然后按下 Ctrl + Enter 键，即打开"www.baidu.com"。）	Ctrl + Enter	Cmd + Enter or Control + Enter

书签
打开书签菜单	Ctrl + B	Cmd + B
将当前页加为书签	Ctrl + D	Cmd + Opt + B or Cmd + Shift + B
打开浏览历史记录	Ctrl + H	Cmd + Shift + H or Cmd + Y
打开下载历史记录	Ctrl + J	Cmd + J or Cmd + Shift + J

屏幕截图

描述	Windows	Mac OS
将整个屏幕的截图保存为文件		Cmd + Shift + 3
复制整个屏幕的截图到剪贴板	PrtScr (Print Screen) or Ctrl + PrtScr	Cmd + Ctrl + Shift + 3
将窗口截图保存为文件		Cmd + Shift + 4, then Space
复制窗口截图到剪贴板	Alt + PrtScr	Cmd + Ctrl + Shift + 4, then Space
复制选定区域截图到剪贴板		Cmd + Ctrl + Shift + 4
将选定区域截图保存为文件		Cmd + Shift + 4

注释：由于不同的键盘设置，一些快捷键可能并不适用于所有用户。

扩展阅读：电脑快捷键大全

HTML <!DOCTYPE> 声明

DOCTYPE 是 document type(文档类型)的简写。

！DOCTYPE 是一个文档类型标记，是一种标准通用标记语言的文档类型声明，在 web 设计中用来说明你用的 XHTML 或者 HTML 是什么版本。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>

<body>
文档内容......
</body>

</html>

尝试一下 »

浏览器支持

所有主流浏览器都支持<!DOCTYPE> 声明。

标签定义及使用说明

<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html> 标签之前。

<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

在 HTML 4.01 中， <!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。

HTML5 不是基于 SGML，因此不要求引用 DTD。

提示：总是给您的 HTML 文档添加<!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。

提示：这里提供了有关于 DTD 的更多详细介绍：DTD 简介！

HTML 4.01 与 HTML5之间的差异

HTML 4.01 规定了三种不同的<!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。 HTML5 中仅规定了一种：

<!DOCTYPE html>

HTML 元素和 Doctypes

参阅HTML 元素与合法的 Doctype，看看每一个 HTML 元素都出现在哪一种 Doctype 中。

提示和注释

注释： <!DOCTYPE> 标签没有结束标签。

提示： <!DOCTYPE> 声明不区分大小写。

提示：使用 W3C 的验证检查您是否编写了一个带有正确 DTD 的合法的 HTML / XHTML 文档！

常见的 DOCTYPE 声明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

扩展阅读：XHTML DTD三种文件类型声明

HTML <track> kind 属性

HTML track 标签参考手册 HTML <track> 标签

kind 属性值用来放置 <track> 标签给媒体元素添加的数据的类型，属性值可以是 subtitles、captions、descriptions、chapters 或 metadata，请参考下述示例：

实例

带有两个字幕轨道的 video 元素：

浏览器支持

Internet Explorer 10, Opera, 和 Chrome 支持 kind 属性。

定义和用法

kind 属性规定轨道的种类。

HTML 4.01 与 HTML5之间的差异

<track> 标签是 HTML5 新标签。

语法

属性值

值	描述
captions	该轨道定义将在播放器中显示的简短说明。
chapters	该轨道定义章节，用于导航媒介资源。
descriptions	该轨道定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见。
metadata	该轨道定义脚本使用的内容。
subtitles	该轨道定义字幕，用于在视频中显示字幕。

HTML track 标签参考手册 HTML <track> 标签

HTML DOM 参考手册：HTML DOM Track kind 属性

HTML <video> autoplay 属性

HTML video 标签参考手册 HTML <video> 标签

autoplay 属性表示只要网页中的视频加载完成就会开始自动播放视频，请参考如下示例：

实例

设置为自动播放的 video 元素：

<video controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 autoplay 属性。

注意： Internet Explorer 8 及更早IE版本不支持 <video> 标签。

定义和用法

autoplay 属性是 boolean(布尔) 属性。

autoplay 属性规定一旦视频就绪马上开始播放。如果设置了该属性，视频将自动播放。

注意：在<video>标签中 preload 属性与 autoplay 属性相排斥，如果视频之前设置了 autoplay 属性，再设置 preload 属性，则 preload 属性将失效。

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

HTML 与 XHTML之间的区别

在 XHTML 中, 属性不允许简写，autoplay 属性必须定义为： <video autoplay="autoplay">。

语法

HTML <video> 标签

HTML DOM 参考手册：Video autoplay 属性

HTML <video> controls 属性

HTML video 标签参考手册 HTML <video> 标签

当使用 <video> 属性时，需要给添加的视频添加一个实现播放的控件，该控件使用 controls 属性实现，controls 属性设置或返回浏览器应当显示标准的视频控件，您可以在下述示例中删除代码中的controls属性，比较运行结果发生的变化：

实例

带有浏览器默认控件的 <video> 元素：

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 controls 属性。

注意： Internet Explorer 8 及更早IE版本不支持 <video> 标签。

定义和用法

controls 属性是一个 boolean(布尔) 属性。

controls 属性规定浏览器应该为视频提供播放控件。

如果设置了该属性，则规定不存在作者设置的脚本控件。

浏览器控件应该包括：

播放
暂停
定位
音量
全屏切换
字幕（如果可用）
音轨（如果可用）

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

HTML 与 XHTML 之间的区别

在 XHTML中, 属性不允许简写，controls 属性必须定义为： <video controls="controls">。

语法

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video controls 属性

HTML <track> label 属性

HTML track 标签参考手册 HTML <track> 标签

在 <track> 标签中，label 属性用于在列出可用的text tracks时，给浏览器使用的text track的标题，这种标题是使用者可读的，请参考下述示例：

实例

带有两个字幕轨道的 video 元素：

浏览器支持

Internet Explorer 10, Opera, 和 Chrome 支持 label 属性。

定义和用法

label 属性规定了文本轨迹的标题。

例如，当用户选择字幕轨道时，标题会显示出来。

HTML 4.01 与 HTML5之间的差异

<track> 标签是 HTML5 新标签。

语法

属性值

值	描述
label	规定轨道的标题。

HTML <track> 标签

HTML <video> height 属性

HTML video 标签参考手册 HTML <video> 标签

height 属性用来指定指定网页中视频的高度，您可以调整下述示例中代码的 height 属性来熟练使用该属性：

实例

具有指定高度和宽度的视频：

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 height 属性。

注意： Internet Explorer 8 及更早IE版本不支持 <video> 标签。

定义和用法

height 属性指定视频播放器的高度，以像素计。

提示： 规定视频的高度和宽度是一个好习惯。如果设置这些属性，在页面加载时会为视频预留出空间。如果没有设置这些属性，那么浏览器就无法预先确定视频的尺寸，这样就无法为视频保留合适的空间。结果是，在页面加载的过程中，其布局也会产生变化。

注意： 请勿通过 height 和 width 属性来缩放视频！通过 height 和 width 属性来缩小视频，只会迫使用户下载原始的视频（即使在页面上它看起来较小）。正确的方法是在网页上使用该视频前，使用软件对视频进行压缩。

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

语法

属性值

值	描述
pixels	以像素计的高度值（比如 "100px" 或 100）。

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video height 属性

HTML <track> src 属性

HTML track 标签参考手册 HTML <track> 标签

<track> 标签中的 src 属性用来表示track的地址，该属性必须定义。

实例

带有两个字幕轨道的 video 元素：

浏览器支持

Internet Explorer 10, Opera, 和 Chrome 支持 src 属性。

定义和用法

src 属性规定轨道的 url。

HTML 4.01 与 HTML5之间的差异

<track> 标签是 HTML5 的新标签。

语法

属性值

值	描述
URL	规定轨道的 url。

HTML <track> 标签

HTML DOM 参考手册：HTML DOM Track src 属性

HTML <video> loop 属性

HTML video 标签参考手册 HTML <video> 标签

loop 属性设置或返回音频/视频是否应该在结束时再次播放。

实例

设置为循环播放的 video 元素：

<video controls loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 loop 属性。

注意： Internet Explorer 8 及更早IE版本不支持<video> 标签。

定义和用法

loop 属性是一个 boolean（布尔）属性。

loop 属性规定当视频结束后将重新开始播放。

如果设置该属性，则视频将循环播放。

HTML 4.01 与 HTML5之间的差异

<video> 标签是HTML5新标签。

HTML 与 XHTML 之间的区别

在 XHTML 中, 属性不允许简写， loop 属性必须定义为 <video loop="loop">。

语法

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video loop 属性

HTML <track> srclang 属性

HTML track 标签参考手册 HTML <track> 标签

srclang 属性用来定义 track 使用的语言，请参考下述的示例：

实例

带有两个字幕轨道的 video 元素：

浏览器支持

Internet Explorer 10, Opera, 和Chrom 支持 srclang 属性。

定义和用法

srclang 属性定义轨道的语言。

如果 kind 属性的值是 "subtitles"，则 srclang 属性是必需的。

提示： 如需查看所有可用的语言代码，请访问我们的语言代码参考手册。

HTML 4.01 与 HTML5之间的差异

<track> 标签是 HTML5 新标签。

语法

属性值

值	描述
language_code	双字母的语言代码，规定轨道的语言。

HTML <track> 标签

HTML DOM 参考手册：HTML DOM Track srclang 属性

HTML <video> muted 属性

HTML video 标签参考手册 HTML <video> 标签

muted 属性用来表示网页中的音频是否静音，如果设置，音频将被初始化为静音；其默认值为false，表示播放视频时将播放音频。在下述的例子中我们将视频设置为静音播放：

实例

关闭视频的声音：

<video controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 6 支持 muted 属性。

注意： Internet Explorer 9 及更早IE版本不支持<video> 的 muted 属性。

定义和用法

muted 属性是一个 boolean(布尔) 属性。

muted 属性设置或返回音频/视频是否应该被静音（关闭声音）。

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

HTML 与 XHTML 之间的区别

在 XHTML 中, 属性不允许简写， muted 属性必须定义为 <video muted="muted">。

语法

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video muted 属性

HTML <tr> align 属性

HTML tr 标签参考手册 HTML <tr> 标签

在 <tr> 标签中 align 属性用于设置文本的水平对齐的方式，可取值为：left、right、center、justify和char。

实例

带有居中对齐行的 HTML 表格：

<table width="100%" border="1">
<tr align="center">
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr align="center">
    <td>January</td>
    <td>$100</td>
</tr>
</table>

尝试一下 »

浏览器支持

所有主流浏览器都支持 align 属性。

注意：几乎没有浏览器能够正确地处理 "char" 值。

注意：IE 无法正确地处理 "justify" 值，IE 会以居中的方式进行处理。

定义和用法

HTML5 不支持 <tr> align 属性。请使用 CSS 代替。

align 属性规定表格行中的内容的水平对齐方式。

语法

属性值

值	描述
left	左对齐内容（<td> 元素的默认值）。
right	右对齐内容。
center	居中对齐内容（<th> 元素的默认值）。
justify	对行进行伸展，这样每行都可以有相等的宽度（就像在报纸和杂志中）。
char	将内容对准指定字符。

HTML <tr> 标签

HTML <video> poster 属性

HTML video 标签参考手册 HTML <video> 标签

当使用了 <video>标签的 poster 属性，则页面中将显示您设置的图像，即一个带有预览图的视频播放器，请参考下述示例：

实例

带有预览图的视频播放器：

<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 poster 属性。

注意： Internet Explorer 8 及更早IE版本不支持 <video> 标签。

定义和用法

poster 属性指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

HTML 4.01 与 HTML5之间的差异

<video> 标签是HTML5新标签。

语法

属性值

值

描述

URL

指定图片文件的URL。

可能值：

绝对URL - 指向另外一个站点URL (如：href="http://www.example.com/poster.jpg" rel="external nofollow" target="_blank" )
相对URL - 指向同个站点的URL (如： href="poster.jpg")

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video poster 属性

HTML <tr> bgcolor 属性

HTML tr 标签参考手册 HTML <tr> 标签

在建立表格时，如果您需要为表格中的行添加背景颜色，那么可以使用 bgcolor 属性，下述的例子为表格的第一行添加了背景颜色，您可以尝试为该表格的第二行添加背景色（参考本手册的 HTML 颜色名一节）：

实例

给第一个表格行添加背景颜色：

<table border="1">
<tr bgcolor="#FF0000">
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
</table>

尝试一下 »

浏览器支持

所有主流浏览器都支持 bgcolor 属性。

定义和用法

HTML5 不支持 <tr> bgcolor 属性。请使用 CSS 代替。

在 HTML 4.01 中，<tr> 的 bgcolor 属性已废弃。

bgcolor 属性规定表格行的背景颜色。

兼容性注释

在 HTML 4.01 中，<tr> 的 bgcolor 属性已废弃。请使用 CSS 代替。

CSS 语法：<tr style="background-color:red">

CSS实例：给表格行添加背景颜色

在我们的 CSS 教程中，您可以找到更多有关background-color 属性的细节。

语法

属性值

值	描述
color_name	规定颜色值为颜色名称的背景颜色（比如 "red"）。
hex_number	规定颜色值为十六进制值的背景颜色（比如 "#ff0000"）。
rgb_number	规定颜色值为 rgb 代码的背景颜色（比如 "rgb(255,0,0)"）。

HTML <tr> 标签

HTML <video> preload 属性

HTML video 标签参考手册 HTML <video> 标签

preload 属性表示是否在完成页面加载后，载入视频，可选的三个取值为：none、metadata、auto，请参考下述例子：

实例

页面加载时视频不应该被载入：

<video controls preload="none">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

除了Internet Explorer，所有主流浏览器都支持 preload 属性。

定义和用法

preload 属性规定是否在页面加载后载入视频。

如果设置了 autoplay 属性，则忽略该属性。

注意： 如果使用 autoplay 属性 preload 将被忽略。

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

语法

属性值

值	描述
auto	指示一旦页面加载，则开始加载音频/视频。
metadata	指示当页面加载后仅加载音频/视频的元数据。
none	指示页面加载后不应加载音频/视频。

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video preload 属性

HTML <tr> char 属性

HTML tr 标签参考手册 HTML <tr> 标签

char 属性可以规定表格行中的内容需要根据哪个字符来实现对齐，请参考下述示例：

实例

把第二行和第三行的内容与 "." 字符对齐：

<table border="1">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr align="char" char=".">
    <td>January</td>
    <td>$100.00</td>
</tr>
<tr align="char" char=".">
    <td>February</td>
    <td>$10.00</td>
</tr>
</table>

尝试一下 »

浏览器支持

几乎所有的主流浏览器都不支持 char 属性。

定义和用法

HTML5 不支持 <tr> char 属性。

char 属性规定表格行中的内容相对某个字符的对齐方式。

仅当 align 属性设置为 "char" 时，才能使用 char 属性。

char 属性的默认值是当前页面语言的小数点字符。

语法

属性值

值	描述
character	规定将内容与之对齐的字符。

HTML <tr> 标签

HTML <video> src 属性

HTML video 标签参考手册 HTML <video> 标签

src 属性用来放置您需要播放的视频的路径来源，如下示例：

实例

播放一个视频：

<video src="movie.ogg" controls>
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 src 属性。但是定义的文件格式并不是所有浏览器都支持。

注意： Internet Explorer 8 及更早IE版本不支持 <video> 标签。

定义和用法

src 属性指定 video 文件的本地路径(URL) 。

以上实例使用了 Ogg 文件, 该使用可正常显示于 Firefox, Opera 和 Chrome。

如果需要在 Internet Explorer 和 Safari 播放视频, 必须使用 MPEG4 文件。

如果想在所有浏览器播放视频文件 - 可在 <video> 元素总使用 <source> 元素。 <source> 元素可以链接到不同的视频文件。浏览器将使用第一个可识别的格式：

实例

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

语法

属性值

值

描述

URL

视频文件的 URL。

可能的值：

绝对 URL - 指向另一个站点（比如 href="http://www.example.com/song.ogg" rel="external nofollow" target="_blank" ）
相对 URL - 指向网站内的文件（比如 href="song.ogg"）

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video src 属性

HTML <tr> charoff 属性

HTML tr 标签参考手册 HTML <tr> 标签

当使用 char 属性为网页表格中的行设置了应该相对于哪个字符对齐后，您可以使用 charoff 属性设置对齐偏移量，如下述示例所示，它将表格内第二行和第三行的内容与 "." 字符向右两个字符的位置对齐：

实例

把第二行和第三行的内容与 "." 字符向右两个字符的位置对齐：

<table border="1">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr align="char" char="." charoff="2">
    <td>January</td>
    <td>$100.00</td>
</tr>
    <tr align="char" char="." charoff="2">
    <td>February</td>
    <td>$10.00</td>
</tr>
</table>

尝试一下 »

浏览器支持

几乎所有的主流浏览器都不支持 charoff 属性。

定义和用法

HTML5 不支持 <tr> charoff 属性。

charoff 属性规定内容相对于由 char 属性规定的字符的对齐偏移量。

仅当 align 属性设置为 "char" 且已设置 char 属性时，才能使用 charoff 属性。

语法

属性值

值	描述
number	规定对齐方式。正数规定向字符的右边对齐。负数规定向字符的左边对齐。

HTML <tr> 标签

HTML <video> width 属性

HTML video 标签参考手册 HTML <video> 标签

width 属性用于设置视频显示区域的宽度，如下示例：

实例

具有指定高度和宽度的视频：

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 width 属性。

注意： Internet Explorer 8 及更早IE版本不支持 <video> 标签。

定义和用法

width 属性指定视频播放器的宽度。

注意：请勿通过 height 和 width 属性来缩放视频！通过 height 和 width 属性来缩小视频，只会迫使用户下载原始的视频（即使在页面上它看起来较小）。正确的方法是在网页上使用该视频前，使用软件对视频进行压缩。

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

语法

属性值

值	描述
pixels	以像素计的宽度值（比如 "100px" 或 100）。

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video width 属性

HTML <tr> valign 属性

HTML tr 标签参考手册 HTML <tr> 标签

valign 属性用来定义表格中的行应该以哪种垂直方式对齐，比如，在下面的示例中，我们将表格中的第一行以垂直居中的方式对齐，而第二行实现了垂直下对齐：

实例

带有不同垂直对齐行的 HTML 表格：

<table border="1" style="height:200px">
<tr valign="middle">
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr valign="bottom">
    <td>January</td>
    <td>$100</td>
</tr>
</table>

尝试一下 »

浏览器支持

所有主流浏览器都支持 valign 属性。

定义和用法

HTML5 不支持 <tr> valign 属性。请使用 CSS 代替。

valign 属性规定表格行中的内容的垂直对齐方式。

语法

属性值

值	描述
top	对内容进行上对齐。
middle	对内容进行居中对齐（默认值）。
bottom	对内容进行下对齐。
baseline	与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。请看下面的图示。

当文本的字号不同时，bottom vs. baseline 图示：

bottom valign="bottom"

valign="baseline"

HTML <tr> 标签

HTML DOM 参考手册：HTML DOM tr vAlign 属性

HTML <track> default 属性

HTML track 标签参考手册 HTML <track> 标签

default 属性定义了 video 元素中默认使用的 track，如果您有更好的 track 选择，则为其设置 default 属性，每个媒体元素里面只有一个 track 元素可以有这个属性。

实例

下面是一个 video 元素，其中的两个字幕之一是默认的：

浏览器支持

Internet Explorer 10, Opera, 和 Chrome 支持 default 属性。

定义和用法

default 属性是一个 boolean（布尔）属性。

如果使用 default 属性，则规定应该使用该轨道，假如用户没有选择其他轨道的话。

HTML 4.01 与 HTML5之间的差异

<track> 标签是 HTML5 新标签。

HTML 与 XHTML之间的差异

在 XHTML 中, 属性不允许简介， default 属性必须定义为： <track default="default" />。

语法

HTML <track> 标签

HTML DOM 参考手册：HTML DOM Track default 属性

HTML <tbody> valign 属性

HTML tbody 标签参考手册 HTML <tbody> 标签

valign 属性规定单元格中内容的垂直排列方式，请参考下述示例：

实例

把 <tbody> 元素中的内容垂直对齐到底部：

<table border="1" width="100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody valign="bottom">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

尝试一下 »

浏览器支持

所有主流浏览器都支持 valign 属性。

定义和用法

HTML5 不支持 <tbody> valign 属性。请使用 CSS 代替。

valign 属性规定 <tbody> 元素中的内容的垂直对齐方式。

语法

属性值

值	描述
top	对内容进行上对齐。
middle	对内容进行居中对齐（默认值）。
bottom	对内容进行下对齐。
baseline	与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。请看下面的图示。

当文本的字号不同时，bottom vs. baseline 图示：

valign 属性 valign="bottom"

valign 属性 valign="baseline"

HTML <tbody> 标签

HTML <script> src 属性

HTML script 标签参考手册 HTML <script> 标签

您不需要在 HTML 中重复编写相同的脚本文件，可以在单独的文件中创建 JavaScript，保存后使用 src 属性引用即可，请参考下面的例子：

实例

指向一个外部 JavaScript 文件：

尝试一下 »

浏览器支持

所有主流浏览器都支持 src 属性。

定义和用法

src 属性规定外部脚本文件的 URL。

如果您希望在网站中的多个页面上运行相同的 JavaScript，就应该创建外部 JavaScript 文件，而不是重复编写相同的脚本。把脚本文件以 .js 扩展名进行保存，然后在 <script> 标签中使用 src 属性引用它。

注意：外部脚本文件不能包含 <script> 标签。

注意：正确地引用您写入脚本的外部脚本文件。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
URL	外部脚本文件的 URL。可能的值：绝对 URL - 指向另一个网站（比如 src="http://www.example.com/example.js" rel="external nofollow" ）相对 URL - 指向网站内的一个文件（比如 src="/scripts/example.js"）

HTML <script> 标签

HTML DOM 参考手册：HTML DOM Script src 属性

HTML <tbody> charoff 属性

HTML tbody 标签参考手册 HTML <tbody> 标签

<tbody> 元素中的 charoff 属性用于指定使用 char 属性相对于某个字符对齐后的偏移量，请参考下述示例：

实例

把 <tbody> 元素中的内容与字符 "." 向右两个字符的位置对齐：

<table border="1"width="100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody align="char" char="." charoff="2">
<tr>
<td>January</td>
<td>$100.00</td>
</tr>
<tr>
<td>February</td>
<td>$80.00</td>
</tr>
</tbody>
</table>

尝试一下 »

浏览器支持

注意：几乎所有的主流浏览器都不支持 charoff 属性。

定义和用法

HTML5 不支持 <tbody> charoff 属性。

charoff 属性规定 <tbody> 元素中的内容相对于由 char 属性规定的字符的对齐偏移量。

仅当 align 属性设置为 "char" 且已设置 char 属性时，才能使用 charoff 属性。

语法

属性值

值	描述
number	规定对齐方式。正数规定向字符的右边对齐。负数规定向字符的左边对齐。

HTML <tbody> 标签

HTML <script> type 属性

HTML script 标签参考手册 HTML <script> 标签

type 属性给出脚本的语言或数据的格式。如果该属性存在，则其值必须是有效的MIME类型。

实例

带有指定 type 属性的脚本：

尝试一下 »

浏览器支持

所有主流浏览器都支持 type 属性。

定义和用法

type 属性规定脚本的 MIME 类型。

type 属性标识 <script> 与 </script> 标签之间的内容。

MIME 类型包括两部分：media type 和 subtype。对于 JavaScript，MIME 类型是 "text/javascript"。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，type 属性不再是必需的。默认值是 "text/javascript"。

语法

属性值

值

描述

MIME_type

规定脚本的 MIME 类型。

一些常用的值：

text/javascript （默认）
text/ecmascript
application/ecmascript
application/javascript
text/vbscript

请参阅IANA MIME 类型，获得标准 MIME 类型的完整列表。

HTML <script> 标签

HTML DOM 参考手册：HTML DOM Script type 属性

HTML <tbody> char 属性

HTML tbody 标签参考手册 HTML <tbody> 标签

char 属性用来指定 <tbody> 标签内的元素该以哪个字符对齐，请参考下述例子：

实例

把 <tbody> 元素中的内容与字符 "." 对齐：

<table border="1"width="100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody align="char" char=".">
<tr>
<td>January</td>
<td>$100.00</td>
</tr>
<tr>
<td>February</td>
<td>$80.00</td>
</tr>
</tbody>
</table>

尝试一下 »

浏览器支持

注意：几乎所有的主流浏览器都不支持 char 属性。

定义和用法

HTML5 不支持 <tbody> char 属性。

char 属性规定 <tbody> 元素中的内容相对某个字符的对齐方式。

仅当 align 属性设置为 "char" 时，才能使用 char 属性。

char 属性的默认值是当前页面语言的小数点字符。

语法

属性值

值	描述
character	规定将内容与之对齐的字符。

HTML <tbody> 标签

HTML <q> cite 属性

HTML q 标签参考手册 HTML <q> 标签

cite 属性定义了文档引用的来源，请参考下述示例：

实例

规定引用的来源 URL：

<p>WWF's goal is to:
<q cite="http://www.wwf.org">
Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

尝试一下 »

浏览器支持

cite 属性在普通的 Web 浏览器中没有视觉效果，但可以通过屏幕阅读器使用。

定义和用法

cite 属性规定引用的来源 URL。

提示：该属性的值是一个包含在引号中并指向联机文档的 URL，以及（如果有可能的话）引用在该文档中的确切位置。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
URL	规定引用的来源 URL。可能的值：绝对 URL - 指向另一个网站（比如 href="http://www.example.com/page.htm" rel="external nofollow" target="_blank" ）相对 URL - 指向网站内的一个文件（比如 href="page.htm"）

HTML <q> 标签

HTML <tbody> align 属性

HTML tbody 标签参考手册 HTML <tbody> 标签

<tbody> 标签的 align 属性用于规定表格主体中的内容在水平方向上的对齐方式，请参考下述示例：

实例

向右对齐 <tbody> 元素中的内容：

<table border="1"width="100%">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody align="right">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

尝试一下 »

浏览器支持

所有主流浏览器都支持 align 属性。

注意：IE 无法正确地处理 "justify" 值，IE 会以居中的方式进行处理。

注意：几乎没有浏览器能够正确地处理 "char" 值。

定义和用法

HTML5 不支持 <tbody> align 属性。请使用 CSS 代替。

align 属性规定 <tbody> 元素中的内容的水平对齐方式。

语法

属性值

值	描述
left	左对齐内容（表格数据的默认值）。
right	右对齐内容。
center	居中对齐内容（th 元素的默认值）。
justify	对行进行伸展，这样每行都可以有相等的宽度（就像在报纸和杂志中）。
char	将内容对准指定字符。

HTML <tbody> 标签

HTML <ol> compact 属性

HTML ol 标签参考手册 HTML <ol> 标签

在 HTML 的有序列列表中使用 compact 属性可以让列表内容的显示看起来更小巧。

实例

在有序的 HTML 列表中使用 compact 属性：

尝试一下 »

浏览器支持

注意：几乎所有的主流浏览器都不支持 compact 属性。

定义和用法

HTML5 不支持 <ol> compact 属性。请使用 CSS 代替。

在 HTML 4.01 中，<ol> 的 compact 属性已废弃。

compact 属性是一个布尔属性。

compact 属性规定列表的显示效果应该比正常情况更小巧，通过缩小行间距和列表的缩进。

兼容性注释

在 HTML 4.01 中，<ol> 的 compact 属性已废弃，请使用 CSS 代替。

CSS 语法：<ol style="line-height: 80%">

CSS实例：缩小列表中的行高

在我们的 CSS 教程中，您可以找到更多有关 line-height 属性的细节。

HTML 与 XHTML 之间的差异

在 XHTML 中，禁止属性最小化，compact 属性必须定义为 <ol compact="compact">。

语法

HTML <ol> 标签

HTML <style> media 属性

HTML style 标签参考手册 HTML <style> 标签

media 属性用来指定设置的CSS样式或外部样式文件应用到目标媒介。

针对两种不同媒介类型（屏幕和打印）的两个不同的样式表：

尝试一下 »

浏览器支持

所有主流浏览器都支持 media 属性。

定义和用法

media 属性规定目前资源是为何种媒介/设备优化的。

该属性大多用在为不同媒介类型规定不同样式的 CSS 样式表。

提示：该属性可以接受多个值。如果需要在一个 style 元素中定义一个以上的媒介类型，请使用逗号来分隔要使用的媒介类型，例如：<style type="text/css" media="screen,projection">。

HTML 4.01 与 HTML5之间的差异

无。

语法

可能的运算符

值	描述
and	规定 AND 操作符。
not	规定 NOT 操作符。
,	规定 OR 操作符。

设备

值	描述
all	默认。适应所有设备。
aural	语音合成器。
braille	盲人用点字法反馈设备。
handheld	手持设备（小屏幕、有限的带宽）。
projection	放映机。
print	打印预览模式 / 打印页。
screen	计算机屏幕（默认值）。
tty	电传打字机以及使用等宽字符网格的类似媒介。
tv	电视类型设备（低分辨率、有限的屏幕翻滚能力）。

值

值	描述
width	规定目标显示区域的宽度。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (min-width:500px)"
height	规定目标显示区域的高度。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (max-height:700px)"
device-width	规定目标显示器/纸张的宽度。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (device-width:500px)"
device-height	规定目标显示器/纸张的高度。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (device-height:500px)"
orientation	规定目标显示器/纸张的方向。可能的值："portrait" or "landscape" 例子：media="all and (orientation: landscape)"
aspect-ratio	规定目标显示区域的宽度/高度比可使用 "min-" 和 "max-" 前缀。例子：media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	规定目标显示器/纸张的 device-width/device-height 比率可使用 "min-" 和 "max-" 前缀。例子：media="screen and (aspect-ratio:16/9)"
color	规定目标显示器的 bits/color 可使用 "min-" 和 "max-" 前缀。例子：media="screen and (color:3)"
color-index	规定目标显示器可以处理的颜色数。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (min-color-index:256)"
monochrome	规定单色帧缓冲中的 bits/pixel。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (monochrome:2)"
resolution	规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。可使用 "min-" 和 "max-" 前缀。例子：media="print and (resolution:300dpi)"
scan	规定 tv 显示器的扫描方式。可能的值："progressive" 和 "interlace"。例子：media="tv and (scan:interlace)"
grid	规定输出设备是否是网格或位图。可能的值："1" 为网格，否则为 "0"。例子：media="handheld and (grid:1)"

HTML <style> 标签

HTML <ol> reversed 属性

HTML ol 标签参考手册 HTML <ol> 标签

正常情况下HTML的有序列表是升序排列的，但是您可以使用 reversed 属性对有序列表进行降序，请参考下述例子：

实例

对列表顺序进行降序：

尝试一下 »

浏览器支持

目前只有 Chrome 和 Safari 6 支持 reversed 属性。

定义和用法

reversed 属性是一个布尔属性。

reversed 属性规定列表顺序为降序 (9, 8, 7...)，而不是升序 (1, 2, 3...)。

HTML 4.01 与 HTML5之间的差异

reversed 属性是 HTML5 中的新属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，禁止属性最小化，reversed 属性必须定义为 <ol reversed="reversed">。

语法

HTML <ol> 标签

参考手册

HTML DOM 参考手册：HTML DOM Ol reversed 属性

HTML <style> scoped 属性

HTML style 标签参考手册 HTML <style> 标签

在<style>标签中使用 scoped 属性会限制样式只影响 <style> 标签的父元素和它所有的后代元素。

实例

使用 scope 属性描述 <div> 元素的样式：

<div>
<style type="text/css" scoped>
h1 {color:red;}
p {color:blue;}
</style>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</div>

尝试一下 »

浏览器支持

只有 Firefox属性支持 scoped 属性。

定义和用法

scoped 属性是一个布尔属性。

如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。

HTML 4.01 与 HTML5之间的差异

scoped 属性是 HTML5 中的新属性。

HTML 与 XHTML 之间的差异

在 XHTML 中, 属性是不允许简写的，scoped 属性必须定义为：<style scoped="scoped" />。

语法

HTML <style> 标签

HTML <ol> start 属性

HTML ol 标签参考手册 HTML <ol> 标签

start 属性可以让您自定义HTML有序列表的起始序数，请参考下述示例：

实例

从 "50" 开始的有序列表：

尝试一下 »

浏览器支持

所有主流浏览器都支持 start 属性。

定义和用法

start 属性规定有序列表中第一个列表项目的开始值。

注释：目前，仍然没有 start 属性的 CSS 替代方案。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，不再反对使用 <ol> 元素的 start 属性。

语法

属性值

值	描述
number	规定有序列表中第一个列表项目的开始值。

HTML <ol> 标签

HTML DOM 参考手册：HTML DOM Ol start 属性

HTML <style> type 属性

HTML style 标签参考手册 HTML <style> 标签

通过 type 属性设置HTML样式表的 MIME 类型，请参考下述示例：

实例

在 <style> 标签中使用 type 属性：

尝试一下 »

浏览器支持

所有主流浏览器都支持 type 属性。

定义和用法

必需的 type 属性规定样式表的 MIME 类型。

type 属性指示 <style> 与 </style> 标签之间的内容。

值 "text/css" 指示内容是标准的 CSS。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中, type 属性不再是必须的。默认值为"text/css"。

语法

属性值

值	描述
MIME_type	样式表的 MIME 类型。目前，唯一可能的值是 "text/css"。查看完整标准 MIME 类型列表 IANA MIME 类型。

HTML <style> 标签

HTML <ol> type 属性

HTML ol 标签参考手册 HTML <ol> 标签

type 属性用来规定HTML有序列表中序号的类型，包括大小写字母、阿拉伯数字和大小写罗马数字，请参考下述示例：

实例

带有大写罗马数字的有序列表：

尝试一下 »

浏览器支持

所有主流浏览器都支持 type 属性。

定义和用法

type 属性规定列表中要使用的标记类型（字母或数字）。

提示：您可以使用 CSS 来代替 type 属性，在我们的 CSS 教程中，您可以找到更多有关 list-style-type 属性的细节。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，不再反对使用 <ol> 元素的 type 属性。

语法

属性值

值	描述
1	默认。十进制数字 (1, 2, 3, 4)。
a	字母顺序的有序列表，小写 (a, b, c, d)。
A	字母顺序的有序列表，大写 (A, B, C, D)。
i	罗马数字，小写 (i, ii, iii, iv)。
I	罗马数字，大写 (I, II, III, IV)。

HTML <ol> 标签

HTML DOM 参考手册：HTML DOM Ol type 属性

HTML <script> async 属性

HTML script 标签参考手册 HTML <script> 标签

实例

一旦脚本可用，则会异步运行：

尝试一下 »

浏览器支持

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 async 属性。

注意：Internet Explorer 9 及之前的版本不支持 <script> 标签的 async 属性。

定义和用法

async 属性是一个布尔属性。

async 属性一旦脚本可用，则会异步执行。

注意：async 属性仅适用于外部脚本（只有在使用 src 属性时）。

注意：有多种执行外部脚本的方法：

如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

HTML 4.01 与 HTML5之间的差异

async 属性是 HTML5 中的新属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，禁止属性最小化，async 属性必须定义为 <script async="async">。

语法

HTML <script> 标签

HTML DOM 参考手册：HTML DOM Script async 属性

HTML <script> charset 属性

HTML script 标签参考手册 HTML <script> 标签

charset 属性您需要在外部文件中使用的字符编码，请参考下述例子：

实例

字符集为 UTF-8 的外部 JavaScript：

尝试一下 »

浏览器支持

所有主流浏览器都支持 charset 属性。

定义和用法

charset 属性规定在外部脚本文件中使用的字符编码。

当外部脚本文件中的字符编码与 HTML 文档中的编码不同时，会用到 charset 属性。

提示：charset 属性与 src 属性一起使用，告诉浏览器用来编码的字符集。它的值是任何一个 ISO 标准字符集编码的名称。

提示和注释

注意：charset 属性仅适用于外部脚本（只有在使用 src 属性时）。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值

描述

charset

规定外部脚本文件的字符编码。

一些常用的值：

"ISO-8859-1" - 拉丁字母表的标准编码
"UTF-8" - Unicode 字符编码。与 ASCII 兼容

请参阅我们的字符集参考手册，获得完整的字符集列表。

HTML <script> 标签

HTML <script> defer 属性

HTML script 标签参考手册 HTML <script> 标签

defer 属性规定应该等待所有HTML文档解析完成以后，再判断js脚本是否执行，请参考下述例子：

实例

页面已加载后才会运行脚本：

尝试一下 »

浏览器支持

所有主流浏览器都支持 defer 属性。

定义和用法

defer 属性是一个布尔属性。

defer 属性规定当页面已完成加载后，才会执行脚本。

注意：defer 属性仅适用于外部脚本（只有在使用 src 属性时）。

注意：有多种执行外部脚本的方法：

如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

提示：如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

HTML 4.01 与 HTML5之间的差异

无。

HTML 与 XHTML 之间的差异

在 XHTML 中，禁止属性最小化，defer 属性必须定义为 <script defer="defer">。

语法

HTML <script> 标签

HTML DOM 参考手册：HTML DOM Script defer 属性

HTML <embed> height 属性

HTML embed 标签参考手册 HTML <embed> 标签

height 属性规定在 <embed> 标签中嵌入的插件的高度，请参考下述示例：

实例

一个高度和宽度为 200 像素的 flash 动画：

尝试一下 »

浏览器支持

所有主流浏览器都支持 height 属性。

定义和用法

height 属性规定被嵌入内容的高度，以像素计。

HTML 4.01 与 HTML5之间的差异

语法

属性值

值	描述
pixels	规定被嵌入内容的高度，以像素计（比如 height="100"）。

HTML <embed> 标签

HTML DOM 参考手册：HTML DOM Embed height 属性

HTML <button> formaction 属性

HTML button 标签参考手册 HTML <button> 标签

当您使用 formaction 属性时，表单的提交地址将使用属性本身的值，而不是<form>标签的 action 属性的值，请参考下述示例：

实例

带有两个提交按钮的表单（带有不同的 action），第一个提交按钮将表单数据提交到 "demo_form.html", 第二个提交按钮将表单数据提交到 "demo_admin.html"：

<form action="demo_form.html" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit">提交</button><br>
<button type="submit" formaction="demo_admin.html">提交</button>
</form>

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 支持 formaction 属性。

注意： Internet Explorer 9 及更早IE版本不支持 formaction 属性。

定义和用法

formaction 属性覆盖 form 元素的 action 属性。

该属性与 type="submit" 配合使用。

HTML 4.01 与 HTML5之间的差异

formaction 属性是 HTML 5 中的新属性。

语法

属性值

值	描述
URL	规定将表单数据发送到的地址。可能值：绝对 URL - 完整的页面URL地址(如：href="http://www.example.com/formresult.html" rel="external nofollow" target="_blank" ) 相对 URL 地址 -指向当前网站的一个文件(如：href="formresult.html")

HTML <button> 标签

HTML <basefont> face 属性

HTML basefont 标签参考手册 HTML <basefont> 标签

face 属性用于指定HTML文档文本默认使用的字体，该属性可以包含多个字体名称，取值时使用浏览器支持的首个字体。

实例

规定页面上的默认字体字体：

<head>
<basefont face="courier, serif" />
</head>

<body>
<h1>这是一个标题。</h1>
<p>这是一个段落。</p>
</body>

尝试一下 »

浏览器支持

只有Internet Explorer 9 及更早IE版本支持 face 属性。

定义和用法

HTML5 不支持 <basefont> 标签。请使用CSS 替代。

<basefont> 的 face 属性在HTML 4.01中已废弃。

face 属性规定文档中文本的默认字体。

提示：如果所有列出的字体本地系统都未安装，浏览器默认使用该系统上的定比或者定宽字体。

兼容性注释

在 HTML 4.01 中，不赞成使用 basefont 元素的 face 属性；在 XHTML 1.0 Strict DTD 中，不支持 basefont 元素的 face 属性。

CSS 语法(<head> 部分): <style>body{font-family: courier, serif}</style>

CSS 实例：为页面规定默认文本字体

在我们的 CSS 教程中，您可以找到更多有关font-family 属性的细节。

语法

属性值

值	描述
font_family	规定文本的字体。如需规定若干字体的优先表，请使用逗号将字体名称分开（比如 <basefont face="verdana,arial,sans-serif" />）。

HTML <basefont> 标签

HTML <embed> src 属性

HTML embed 标签参考手册 HTML <embed> 标签

src 属性定义了 <embed> 标签中嵌入的多媒体插件的地址来源，使用方法请参考以下示例：

实例

一个嵌入的 flash 动画：

尝试一下 »

浏览器支持

所有主流浏览器都支持 src 属性。

定义和用法

src 属性规定要嵌入的外部文件的地址。

HTML 4.01 与 HTML5之间的差异

语法

属性值

值	描述
URL	规定要嵌入的外部文件的地址。可能的值：绝对 URL - 指向另一个网站（比如 href="http://www.example.com/hello.swf" rel="external nofollow" target="_blank" ）相对 URL - 指向网站内的一个文件（比如 href="hello.swf"）

HTML <embed> 标签

HTML DOM 参考手册：HTML DOM Embed src 属性

HTML <button> formenctype 属性

HTML button 标签参考手册 HTML <button> 标签

如果您在使用<button>标签时使用了 formenctype 属性，那么它的值将覆盖 <form> 标签的 enctype 属性值：

实例

带有两个提交按钮的表单（带有不同的编码方式），第一个提交按钮使用默认字符编码提交表单数据，第二个提交按钮不使用字符编码提交表单数据：

<form action="demo_post_enctype.asp" method="post">
Name: <input type="text" name="fname" value="Ståle Refsnes"><br>
<button type="submit" >使用编码提交</button>
<button type="submit" formenctype="text/plain">不使用编码提交</button>
</form>

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 支持 formenctype属性。

注意： Internet Explorer 9 及更早IE版本不支持 formenctype属性。

定义和用法

formenctype 属性覆盖 form 元素的 enctype 属性。

该属性与 type="submit" 配合使用。

HTML 4.01 与 HTML 5 之间的差异

formenctype 属性是 HTML 5 中的新属性。

语法

属性值

值	描述
application/x-www-form-urlencoded	在发送前对所有字符进行编码（默认）。
multipart/form-data	不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain	将空格转换为 "+" 符号，但不编码特殊字符。

HTML button 标签参考手册 HTML <button> 标签

HTML <embed> type 属性

HTML embed 标签参考手册 HTML <embed> 标签

type 属性规定 <embed> 标签内使用的嵌入的内容的 MIME 类型，请参考下述示例：

实例

一个嵌入的带 MIME 类型的 flash 动画：

尝试一下 »

浏览器支持

所有主流浏览器都支持 type 属性。

定义和用法

type 属性规定被嵌入内容的 MIME 类型。

HTML 4.01 与 HTML5之间的差异

语法

属性值

值	描述
MIME_type	被嵌入内容的 MIME 类型。请参阅 IANA MIME 类型，获得标准 MIME 类型的完整列表。

HTML <embed> 标签

HTML DOM 参考手册：HTML DOM Embed type 属性

HTML <button> formmethod 属性

HTML button 标签参考手册 HTML <button> 标签

formmethod 属性定义通过哪种方式发送 form-data，它将覆盖 <form> 标签中的 method 属性，请参考下述示例：

实例

带有两个提交按钮的表单，第一个提交按钮使用 method="get" 提交表单数据，第二个提交按钮使用 method="post" 提交表单数据：

<form action="demo_form.html" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit">提交</button>
<button type="submit" formmethod="post" formaction="demo_post.html">
使用 POST 提交</button>
</form>

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 支持 formmethod 属性。

注意：Internet Explorer 9 及更早IE版本不支持 formmethod 属性。

定义和用法

formmethod 属性制定发送表单数据使用的 HTTP 方法。formmethod 属性覆盖 form 元素的 method 属性。

formmethod 属性需与 type="submit" 配合使用。

可以通过以下方式发送 form-data ：

以 URL 变量 (使用 method="get") 的形式来发送
以 HTTP post (使用 method="post") 的形式来发送

使用 "get" 方法:

表单数据在URL中以 name/value 对出现。
get传送的数据量较小，不能大于2KB，这主要是因为受URL长度限制。
不要使用 "get" 方法传送敏感信息！(密码或者敏感信息会出现在浏览器的地址栏中)

使用 "post" 方法:

以 HTTP post 形式发送表单数据。
比 "get" 方法更强大更安全。
没有大小限制

HTML 4.01 与 HTML5之间的差异

formmethod 属性是 HTML 5 中的新属性。

语法

属性值

值	描述
get	向 URL 追加表单数据（form-data）：URL?name=value&name=value
post	以 HTTP post 事务的形式发送表单数据（form-data）

HTML <button> 标签

HTML <basefont> size 属性

HTML basefont 标签参考手册 HTML <basefont> 标签

size 属性定义了HTML文档的字体大小，取值可以是数值或者相对值，值域为1～7，1最小，默认值为3，请参考下述示例：

实例

规定页面上的默认字体大小：

<head>
<basefont size="7" />
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>

尝试一下 »

浏览器支持

除了 Internet Explorer9.0 及更早IE版本，其他浏览器都不支持 size 属性。

定义和用法

HTML5 已不再支持 <basefont> 标签。请使用CSS替代。

<basefont> 的 size 属性在HTML 4.01中已废弃。

size 属性规定文档中文本的默认大小（字号）。

兼容性注释

在 HTML 4.01 中，不赞成使用 basefont 元素的 face 属性；在 XHTML 1.0 Strict DTD 中，不支持 basefont 元素的 face 属性。

CSS 语法 (<head> 部分): <style>body{font-size: 10px}</style>

CSS 实例：为页面规定默认文本字体

在我们的 CSS 教程中，您可以找到更多有关 font-family 属性的细节。

语法

属性值

值	描述
font_family	规定文本的字体。如需规定若干字体的优先表，请使用逗号将字体名称分开（比如 <basefont face="verdana,arial,sans-serif" />）。

HTML <basefont> 标签

HTML <embed> width 属性

HTML embed 标签参考手册 HTML <embed> 标签

width 属性用于设置 <embed> 标签中插入的内容的宽度，请参考下述示例：

实例

一个高度和宽度为 200 像素的 flash 动画：

尝试一下 »

浏览器支持

所有主流浏览器都支持 width 属性。

定义和用法

width 属性规定被嵌入内容的宽度，以像素计。

HTML 4.01 与 HTML5之间的差异

语法

属性值

值	描述
pixels	规定被嵌入内容的宽度，以像素计（比如 width="100"）。

HTML <embed> 标签

HTML DOM 参考手册：HTML DOM Embed width 属性

HTML <button> formnovalidate 属性

HTML button 标签参考手册 HTML <button> 标签

使用 formnovalidate 属性将停止进行对表单的验证，请参考下述示例：

实例

带有两个提交按钮的表单（进行验证或不进行验证），第一个提交按钮提交数据时带有默认的表单验证，第二个提交按钮提交数据时不进行表单验证：

<form action="demo_form.html" method="get">
E-mail: <input type="email" name="userid"><br>
<button type="submit">提交</button><br>
<button type="submit" formnovalidate>不验证提交</button>
</form>

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Opera, Chrome支持 formmethod 属性。

注意： Safari、Internet Explorer 9 及更早IE版本不支持 formmethod 属性。

定义和用法

formnovalidate 属性是一个 boolean（布尔）属性。

如果使用该属性，则提交表单时按钮不会执行验证过程。formnovalidate 属性覆盖表单的 novalidate 属性。

该属性与 type="submit" 配合使用。

HTML 4.01 与 HTML5之间的差异

formnovalidate 属性是 HTML 5 中的新属性。

HTML 与 XHTML之间的差异

在 XHTML中, 属性不允许简写, formnovalidate 属性必须定义为 <button type="submit" formnovalidate="formnovalidate">.

语法

HTML <button> 标签

HTML <meta> charset 属性

HTML meta 标签参考手册 HTML <meta> 标签

实例

规定 HTML 文档的字符编码：

尝试一下 »

浏览器支持

所有主流浏览器都支持 charset 属性。

定义和用法

charset 属性规定 HTML 文档的字符编码。

提示：charset 属性可以通过任意元素上的 lang 属性来重写。

HTML 4.01 与 HTML5之间的差异

charset 属性是 HTML5 中的新属性，且替换了：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

仍然允许使用 http-equiv 属性来规定字符集，但是使用新方法可以减少代码量。

语法

属性值

值

描述

character_set

规定 HTML 文档的字符编码。

常用的值：

UTF-8 - Unicode 字符编码
ISO-8859-1 - 拉丁字母表的字符编码

在理论上，可以使用任何字符编码，但并不是所有浏览器都能够理解它们。某种字符编码使用的范围越广，浏览器就越有可能理解它。

如需查看所有可用的字符编码，请访问 IANA 字符集。

HTML <meta> 标签

HTML <dir> compact 属性

HTML dir 标签参考手册 HTML <dir> 标签

compact 属性的用处是改变列表显示效果——以一种更加小巧的方法显示。

实例

在目录列表中使用 compact 属性：

<dir compact>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</dir>

尝试一下 »

浏览器支持

注意： 目前所有主流浏览器都不支持 compact 属性。

定义和用法

<dir> 标签在HTML5中已不再支持。请使用 CSS 替代。

<dir> 的 compact 属性在 HTML 4.01 中已废弃。

compact 属性是一个 boolean（布尔）属性。

compact 属性规定列表呈现的效果比正常情况更小巧，这是通过减少行间距以及对列表进行缩进来实现的。

兼容性注释

<dir> 的 compact 属性在 HTML 4.01 中已废弃。请使用 CSS 替代。

CSS syntax: <dir style="line-height: 80%">

CSS 实例：缩小列表中的行高

在我们的 CSS 教程中，您可以找到更多有关line-height property属性的细节。

HTML 与 XHTML之间的差别

在 XHTML 中, 属性不允许简写, compact 属性必须定义为: <dir compact="compact">。

语法

HTML <dir> 标签

HTML <button> formtarget 属性

HTML <button> 标签

formtarget 属性可以规定提交的HTML表单在何处显示，下面的示例将详细使用该属性：

实例

两个提交按钮，第一个提交按钮使用默认 target ("_self") 提交数据，第二个提交按钮将数据提交到到新窗口(target="_blank"):

<form action="demo_form.html" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit" >提交</button>
<button type="submit" formtarget="_blank">提交到一个新窗口或选项卡</button>
</form>

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 支持 formtarget 属性。

注意： Internet Explorer 9 及更早IE版本不支持 formtarget 属性。

定义和用法

formtarget 属性指定在提交表单后在哪里显示响应。formtarget 属性覆盖表单元素的 target 属性。

该属性与 type="submit" 配合使用。

HTML 4.01 与 HTML5之间的差异

formtarget 属性是 HTML 5 中的新属性。

注意：HTML5 不支持框架和框架集。现在，parent, top 和 framename 值大多用于 iframe。

语法

属性值

值	描述
_blank	在新窗口/选项卡中将表单提交到文档。
_self	在同一框架中将表单提交到文档。（默认）
_parent	在父框架中将表单提交到文档。
_top	在整个窗口中将表单提交到文档。
framename	在指定的框架中将表单提交到文档。

HTML <button> 标签

HTML <meta> content 属性

HTML meta 标签参考手册 HTML <meta> 标签

content 属性可以使用的值依赖于 <meta> 标签中 name 和 httpEquiv 属性的值。

实例

描述 HTML 文档内的元数据：

尝试一下 »

浏览器支持

所有主流浏览器都支持 content 属性。

定义和用法

content 属性给出了与 http-equiv 或 name 属性相关的值。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
text	meta 信息的内容。

HTML <meta> 标签

HTML DOM 参考手册：HTML DOM Meta content 属性

HTML <del> cite 属性

HTML del 标签参考手册 HTML <del> 标签

cite 属性的值将指向一个URL，该URL会解释为什么文本被删除，请参考下述示例：

实例

一个删除的文本,文本的URL解释了删除的原因：

<p><del cite="del_demo_cite.htm">This text has been deleted</del></p>

尝试一下 »

浏览器支持

没有主流浏览器支持 cite 属性，但该属性可使用于屏幕阅读器。

定义和用法

cite 属性规定一个文档的 URL，该文档解释了文本被删除的原因。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
URL	引用的来源的 URL。可能的值：绝对 URL - 指向另一个站点（比如 href="http://www.example.com/song.ogg" rel="external nofollow" target="_blank" ）相对 URL - 指向网站内的文件（比如 href="song.ogg"）锚 URL - 指向页面内的一个锚（比如 href="#page"）

HTML <del> 标签

HTML <meta> http-equiv 属性

HTML meta 标签参考手册 HTML <meta> 标签

http-equiv 属性在 <meta> 标签相当于HTTP的头文件，向浏览器传递有用的信息，该属性使用的变量的值会在 content 属性中规定，请参考下述示例：

实例

每隔 30 秒刷新一次文档：

尝试一下 »

浏览器支持

所有主流浏览器都支持 http-equiv 属性。

定义和用法

http-equiv 属性提供了 content 属性的信息/值的 HTTP 头。

http-equiv 属性可用于模拟一个 HTTP 响应头。

HTML 4.01 与 HTML5之间的差异

使用 http-equiv 已经不是规定 HTML 文档的字符集的唯一方式：

HTML 4.01：<meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5：<meta charset="UTF-8">

语法

属性值

值

描述

content-type

规定文档的字符编码。

实例：

default-style

规定要使用的预定义的样式表。

实例：

注释：上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。

refresh

定义文档自动刷新的时间间隔。

实例：

注释：值 "refresh" 应该慎重使用，因为它会使得页面不受用户控制。在W3C's Web 内容可访问性指南中使用 "refresh" 会到导致失败。

HTML <meta> 标签

HTML DOM 参考手册：HTML DOM Meta httpEquiv 属性

HTML <button> name 属性

HTML button 标签参考手册 HTML <button> 标签

name 属性设置HTML中按钮的名称，用来提交某些值，请参考下文以了解该属性的详细使用情况。

实例

两个按钮带有相同的名称，在单击它们时提交不同的值：

<form action="demo_form.html" method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="HTML">HTML</button>
<button name="subject" type="submit" value="CSS">CSS</button>
</form>

尝试一下 »

浏览器支持

所有主流浏览器都支持 name 属性。

定义和用法

name 属性为按钮规定名称。

name 属性用于在 JavaScript 中对元素进行引用，或者在表单提交之后，对表单数据进行引用。

提示： 不同的 button 元素可以共享相同的名称。这就允许您标记带有相同名称的若干按钮，以便在表单中使用时能够提交不同的值。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
name	规定按钮的名称。

HTML <button> 标签

HTML DOM 参考手册：HTML DOM Button name 属性

HTML <del> datetime 属性

HTML del 标签参考手册 HTML <del> 标签

当HTML页面中有使用 <del> 标签删除的文本的时候，可以使用 datetime 属性设置文本删除的日期与时间。

实例

一个段落，带有时间和日期的文本已被删除：

<p>
<del datetime="2011-11-15T22:55:03Z">这是一个被删除了的文本</del>
</p>

尝试一下 »

浏览器支持

没有主流浏览器支持 datetime 属性,但它可以被屏幕阅读器解读。

定义和用法

datetime 属性规定文本被删除的日期和时间。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值

描述

YYYY-MM-DDThh:mm:ssTZD

文本被删除的日期和时间。

组件解释：

YYYY - 年（例如 2009）
MM - 月（例如 01 for January）
DD - 月中的日（例如 08）
T - 必需的分隔符
hh - 小时（例如 22 for 10.00pm）
mm - 分钟（例如 55）
ss - 秒（例如 03）
TZD - 时区标志符（Z 表示祖鲁，同时也是格林威治时间）

HTML <del> 标签

HTML <meta> name 属性

HTML meta 标签参考手册 HTML <meta> 标签

name 属性定义了HTML文档的描述、关键词和作者，对应于 content 属性，请参考下述示例：

实例

使用 name 属性来定义一个 HTML 文档的描述、关键词、作者：

尝试一下 »

浏览器支持

所有主流浏览器都支持 name 属性。

name 属性规定元数据的名称。 specifies the name for the metadata.

name 属性规定 content 属性的信息/值的名称。

注意：如果设置了 http-equiv 属性，则不应该设置 name 属性。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
application-name	规定页面所代表的 Web 应用程序的名称。
author	规定文档的作者的名字。实例：<meta name="author" content="Hege Refsnes">
description	规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。实例：<meta name="description" content="Free web tutorials">
generator	规定用于生成文档的一个软件包（不用于手写页面）。实例：<meta name="generator" content="FrontPage 4.0">
keywords	规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）。提示：总是规定关键词（对于搜索引擎进行页面分类是必要的）。实例：<meta name="keywords" content="HTML, meta tag, tag reference">

HTML <meta> 标签

HTML DOM 参考手册：HTML DOM Meta name 属性

HTML <button> type 属性

HTML button 标签参考手册 HTML <button> 标签

type 属性用来定义 HTML 文档中按钮的类型，请参考下述示例：

实例

两个 button 元素，一个是提交按钮，另一个是重置按钮：

<form action="demo_form.html" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit" value="提交">提交</button>
<button type="reset" value="重置">重置</button>
</form>

尝试一下 »

浏览器支持

所有主流浏览器都支持 type 属性。

定义和用法

type 属性规定按钮的类型。

提示： 请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

HTML 4.01 与 HTML5之间的差异

NONE.

语法

属性值

值	描述
submit	该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。
button	该按钮是可点击的按钮（Internet Explorer 的默认值）。
reset	该按钮是重置按钮（清除表单数据）。

HTML <button> 标签

HTML DOM 参考手册：HTML DOM Button type 属性

HTML <button> autofocus 属性

HTML button 标签参考手册 HTML <button> 标签

设置了 autofocus 属性的按钮，将在页面加载后自动获取焦点，请参考下述示例：

实例

按钮使用 autofocus 属性:

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Chrome, 和 Safari 支持autofocus 属性。

注意： Internet Explorer 9 以及更早IE版本不支持 autofocus 属性。

定义和用法

autofocus 属性是一个 boolean(布尔) 属性。

autofocus 属性规定当页面加载时按钮应当自动地获得焦点。

提示：

HTML 4.01 与 HTML5之间的差异

autofocus 属性是 HTML5 <button> 标签的新属性。

HTML 与 XHTML之间的差异

在 XHTML 中, 不允许属性简写,autofocus 属性必须定义为 <button autofocus="autofocus">。

语法

HTML <button> 标签

HTML <button> value 属性

HTML button 标签参考手册 HTML <button> 标签

value 属性用于设置HTML表单按钮的初始值，如下面的参考示例，我们设置了两个带有不同初始值的

实例

两个按钮带有相同的名称，在单击它们时提交不同的值：

<form action="demo_form.html"method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="fav_HTML">HTML</button>
<button name="subject" type="submit" value="fav_CSS">CSS</button>
</form>

尝试一下 »

浏览器支持

所有主流浏览器都支持 value 属性。

重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

定义和用法

value 属性规定了 <form> 中 <button> 的初始值。

注意： 在表单中，如果按钮作为表单数据提交，只有表单的value值会被提交。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
value	按钮的初始值。

HTML <button> 标签

HTML DOM 参考手册：HTML DOM Button value 属性

HTML <meta> scheme 属性

HTML meta 标签参考手册 HTML <meta> 标签

scheme 属性定义了content 属性中的值的格式，请参考下述示例：

实例

使用 scheme 属性来定义 content 属性的格式：

尝试一下 »

浏览器支持

所有主流浏览器都支持 scheme 属性。

定义和用法

HTML5 不支持 <meta> scheme 属性。

scheme 属性规定用于翻译 content 属性的值的方案（格式或 URI）。

语法

属性值

值	描述
format/URI	定义 content 属性内的值的格式（或指向一个包含信息的 URI）。

HTML <meta> 标签

HTML DOM 参考手册：HTML DOM Meta scheme 属性

HTML <button> disabled 属性

HTML button 标签参考手册 HTML <button> 标签

disabled 属性用来控制HTML文档中的按钮是否可交互，它是boolean类型的值，您可以参考下述的示例：

实例

禁用一个按钮:

尝试一下 »

浏览器支持

所有主流浏览器都支持 disabled 属性

定义和用法

disabled 属性是一个 boolean(布尔) 属性。

如果使用该属性，则会禁用按钮。

被禁用的按钮是无法使用和无法点击的。

可以对 disabled 属性进行设置，使用户在满足某些条件时（比如选中复选框，等等）才能点击按钮。然后，可使用 JavaScript 来删除 disabled 属性，使该按钮变为可用的状态。

HTML 4.01 与 HTML5之间的差异

无。

HTML 与 XHTML之间的差异

在 XHTML 中, 属性不允许简写, disabled 属性必须定义为 <button disabled="disabled">。

语法

HTML <button> 标签

HTML DOM 参考手册：HTML DOM Button disabled 属性

HTML <menu> label 属性

HTML menu 标签参考手册 HTML <menu> 标签

label 属性规定了菜单的可见标签，请参考下述示例：

实例

带有两个菜单按钮（"File" 和 "Edit"）的工具栏，每个按钮都是一个带有一系列选项的下拉菜单：

<menu type="toolbar">
<li>
<menu label="File">
<button type="button" onclick="file_new()">New...</button>
<button type="button" onclick="file_open()">Open...</button>
<button type="button" onclick="file_save()">Save</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="edit_cut()">Cut</button>
<button type="button" onclick="edit_copy()">Copy</button>
<button type="button" onclick="edit_paste()">Paste</button>
</menu>
</li>
</menu>

尝试一下 »

浏览器支持

目前几乎没有主流浏览器支持 label 属性。

定义和用法

label 属性规定了菜单的可见标签。

label 属性通常用于显示菜单内嵌套的菜单标签。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，重定义了 <menu> 元素，且新增了 label 属性。

语法

属性值

值	描述
text	规定菜单的可见标签。

HTML <menu> 标签

HTML <button> form 属性

HTML button 标签参考手册 HTML <button> 标签

form 属性可以规定 <button> 元素属于哪个表单，请参考下述示例：

实例

位于表单之外的提交按钮(但是仍然是表单中的一部分)：

<form action="demo_form.html" method="get" id="nameform">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
</form>

<p>下面的按钮是在表单元素外，但仍是表单的一部分</P>

<button type="submit" form="nameform" value="提交">提交</button>

尝试一下 »

浏览器支持

除了Internet Explorer浏览器，其他主流浏览器都支持 form 属性。

定义和用法

form 属性规定按钮属于一个或多个表单。

提示：form 属性的值必须是按钮所属表单<form>的 id。

提示：如需引用一个以上的表单，请使用空格分隔的列表。

HTML 4.01 与 HTML5之间的差异

form 属性是HTML5的新属性。

语法

属性值

值	描述
form_id	按钮所属表单的 id。如需引用一个以上的表单，请使用空格分隔的列表。

HTML <button> 标签

HTML DOM 参考手册：HTML DOM Button form 属性

HTML <menu> type 属性

HTML menu 标签参考手册 HTML <menu> 标签

type 属性用于定义 <menu> 的类型，请参考下述例子，在此例中定义了一个“toolbar”类型的菜单：

实例

带有两个菜单按钮（"File" 和 "Edit"）的工具栏，每个按钮都是一个带有一系列选项的下拉菜单：

尝试一下 »

浏览器支持

目前几乎没有主流浏览器支持 type 属性。

定义和用法

type 属性规定菜单的类型。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，重定义了 <menu> 元素，且新增了 type 属性。

语法

属性值

值	描述
list	默认。规定一个列表菜单。一个用户可执行或激活的命令列表（li 元素）。
context	规定一个上下文菜单。菜单必须在用户与命令进行交互之前被激活。
toolbar	规定一个工具栏菜单。主动式命令，允许用户立即与命令进行交互。

HTML <menu> 标签

HTML <basefont> color 属性

HTML basefont 标签参考手册 HTML <basefont> 标签

color 属性规定HTML页面上文本的默认的颜色，用法如下示例所示：

实例

Specify a default font-color for text on page:

<head>
<basefont color="red" />
</head>

<body>
<h1>这是一个标题。</h1>
<p>这是一个段落。</p>
</body>

尝试一下 »

浏览器支持

只有Internet Explorer 9 及更早IE版本支持 color 属性。

定义和用法

HTML5 不再支持 <basefont> 标签。请使用 CSS 来设置。

<basefont> 的 color 属性在HTML 4.01中已废弃。

color 属性规定文档中文本的默认颜色。

兼容性注释

在 HTML 4.01 中，不赞成使用 basefont 元素的 color 属性；在 XHTML 1.0 Strict DTD 中，不支持 basefont 元素的 color 属性。

CSS 语法(在 <head> 部分): <style>body{color:red}</style>

CSS 实例：为页面规定默认文本颜色

在我们的 CSS 教程中，您可以找到更多有关文本 color 属性的细节。

语法

属性值

值	描述
color_name	规定颜色值为颜色名称的字体颜色（比如 "red"）。
hex_number	规定颜色值为十六进制值的字体颜色（比如 "#ff0000"）。
rgb_number	规定颜色值为 rgb 代码的字体颜色（比如 "rgb(255,0,0)"）。

HTML <basefont> 标签

HTML <map> name 属性

HTML map 标签参考手册 HTML <map> 标签

<map> 标签的 name 属性的值是图像映射使用的名称，请参考下述示例：

实例

带有可点击区域的图像映射：

尝试一下 »

浏览器支持

所有主流浏览器都支持 name 属性。

定义和用法

name 属性是必需的，规定图像映射的名称。

name 属性与 <img> 标签的 usemap 属性相关联，以创建图像与映射之间的关系。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
mapname	图像映射的名称。

HTML <map> 标签

HTML DOM 参考手册：HTML DOM Map name 属性

HTML <fieldset> disabled 属性

HTML fieldset 标签参考手册 HTML <fieldset> 标签

如果一组表单元素使用了 disabled 属性，则这组表单元素将被禁用，请参考下述的示例：

实例

禁用一组相关的表单元素：

尝试一下 »

浏览器支持

除了 Internet Explorer 和 Safari，其他主流浏览器都支持 disabled 属性。

定义和用法

disabled 属性是一个布尔属性。

disabled 属性规定应该禁用一组表单元素（一个 fieldset）。

被禁用的 fieldset 不可用，也不可点击。

可以对 disabled 属性进行设置，使用户在满足某些条件时（比如选中复选框，等等）才能使用输入字段。然后，可使用 JavaScript 来删除 disabled 值，使该 fieldset 变为可用的状态。

HTML 4.01 与 HTML5之间的差异

disabled 属性是 <fieldset> 标签在 HTML5 中的新属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，禁止属性最小化，disabled 属性必须定义为 <fieldset disabled="disabled">。

语法

HTML <fieldset> 标签

HTML DOM 参考手册：HTML DOM Fieldset disabled 属性

HTML <fieldset> form 属性

HTML fieldset 标签参考手册 HTML <fieldset> 标签

form 属性定义属于 fieldset 的表单，请参考下述示例：

实例

位于 form 表单外的 <fieldset> 元素（但仍然属于 form 表单的一部分）：

<form action="demo-form.php" method="get" id="form1">
你喜欢的颜色是什么？<input type="text" name="fav_color"><br>
<input type="submit">
</form>

<fieldset form="form1">
姓名: <input type="text" name="username"><br>
邮箱: <input type="text" name="usermail"><br>
</fieldset>

尝试一下 »

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前，只有 Opera 支持 form 属性。

定义和用法

form 属性规定 fieldset 所属的一个或多个表单。

提示：form 属性的值必须是所属表单的 id。

提示：如需引用一个以上的表单，请使用空格分隔的列表。

HTML 4.01 与 HTML5之间的差异

form 属性是 HTML5 中的新属性。

语法

属性值

值	描述
form_id	规定 fieldset 所属的一个或多个表单 id 的空格分隔列表。

HTML fieldset 标签参考手册 HTML <fieldset> 标签

HTML DOM 参考手册：HTML DOM Fieldset form 属性

HTML <fieldset> name 属性

HTML fieldset 标签参考手册 HTML <fieldset> 标签

name 属性用于定义 fieldset 的名称。

实例

带有 name 属性的 <fieldset>：

尝试一下 »

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

除了 Internet Explorer，其他主流浏览器都支持 name 属性。

定义和用法

name 属性规定 fieldset 的名称。

name 属性用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据。

HTML 4.01 与 HTML5之间的差异

属性是 <fieldset> 标签在 HTML5 中的新属性。

语法

属性值

值	描述
name	规定 fieldset 的名称。

HTML fieldset 标签参考手册 HTML <fieldset> 标签

HTML DOM 参考手册：HTML DOM Fieldset name 属性

HTML <!DOCTYPE> 声明

DOCTYPE 是 document type(文档类型)的简写。

！DOCTYPE 是一个文档类型标记，是一种标准通用标记语言的文档类型声明，在 web 设计中用来说明你用的 XHTML 或者 HTML 是什么版本。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>

<body>
文档内容......
</body>

</html>

尝试一下 »

浏览器支持

所有主流浏览器都支持<!DOCTYPE> 声明。

标签定义及使用说明

<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html> 标签之前。

<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

HTML5 不是基于 SGML，因此不要求引用 DTD。

提示：总是给您的 HTML 文档添加<!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。

提示：这里提供了有关于 DTD 的更多详细介绍：DTD 简介！

HTML 4.01 与 HTML5之间的差异

HTML 4.01 规定了三种不同的<!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。 HTML5 中仅规定了一种：

<!DOCTYPE html>

HTML 元素和 Doctypes

参阅HTML 元素与合法的 Doctype，看看每一个 HTML 元素都出现在哪一种 Doctype 中。

提示和注释

注释： <!DOCTYPE> 标签没有结束标签。

提示： <!DOCTYPE> 声明不区分大小写。

提示：使用 W3C 的验证检查您是否编写了一个带有正确 DTD 的合法的 HTML / XHTML 文档！

常见的 DOCTYPE 声明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

扩展阅读：XHTML DTD三种文件类型声明

HTML <track> kind 属性

HTML track 标签参考手册 HTML <track> 标签

kind 属性值用来放置 <track> 标签给媒体元素添加的数据的类型，属性值可以是 subtitles、captions、descriptions、chapters 或 metadata，请参考下述示例：

实例

带有两个字幕轨道的 video 元素：

浏览器支持

Internet Explorer 10, Opera, 和 Chrome 支持 kind 属性。

定义和用法

kind 属性规定轨道的种类。

HTML 4.01 与 HTML5之间的差异

<track> 标签是 HTML5 新标签。

语法

属性值

值	描述
captions	该轨道定义将在播放器中显示的简短说明。
chapters	该轨道定义章节，用于导航媒介资源。
descriptions	该轨道定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见。
metadata	该轨道定义脚本使用的内容。
subtitles	该轨道定义字幕，用于在视频中显示字幕。

HTML track 标签参考手册 HTML <track> 标签

HTML DOM 参考手册：HTML DOM Track kind 属性

HTML <video> autoplay 属性

HTML video 标签参考手册 HTML <video> 标签

autoplay 属性表示只要网页中的视频加载完成就会开始自动播放视频，请参考如下示例：

实例

设置为自动播放的 video 元素：

<video controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 autoplay 属性。

注意： Internet Explorer 8 及更早IE版本不支持 <video> 标签。

定义和用法

autoplay 属性是 boolean(布尔) 属性。

autoplay 属性规定一旦视频就绪马上开始播放。如果设置了该属性，视频将自动播放。

注意：在<video>标签中 preload 属性与 autoplay 属性相排斥，如果视频之前设置了 autoplay 属性，再设置 preload 属性，则 preload 属性将失效。

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

HTML 与 XHTML之间的区别

在 XHTML 中, 属性不允许简写，autoplay 属性必须定义为： <video autoplay="autoplay">。

语法

HTML <video> 标签

HTML DOM 参考手册：Video autoplay 属性

HTML <video> controls 属性

HTML video 标签参考手册 HTML <video> 标签

实例

带有浏览器默认控件的 <video> 元素：

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 controls 属性。

注意： Internet Explorer 8 及更早IE版本不支持 <video> 标签。

定义和用法

controls 属性是一个 boolean(布尔) 属性。

controls 属性规定浏览器应该为视频提供播放控件。

如果设置了该属性，则规定不存在作者设置的脚本控件。

浏览器控件应该包括：

播放
暂停
定位
音量
全屏切换
字幕（如果可用）
音轨（如果可用）

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

HTML 与 XHTML 之间的区别

在 XHTML中, 属性不允许简写，controls 属性必须定义为： <video controls="controls">。

语法

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video controls 属性

HTML <track> label 属性

HTML track 标签参考手册 HTML <track> 标签

在 <track> 标签中，label 属性用于在列出可用的text tracks时，给浏览器使用的text track的标题，这种标题是使用者可读的，请参考下述示例：

实例

带有两个字幕轨道的 video 元素：

浏览器支持

Internet Explorer 10, Opera, 和 Chrome 支持 label 属性。

定义和用法

label 属性规定了文本轨迹的标题。

例如，当用户选择字幕轨道时，标题会显示出来。

HTML 4.01 与 HTML5之间的差异

<track> 标签是 HTML5 新标签。

语法

属性值

值	描述
label	规定轨道的标题。

HTML <track> 标签

HTML <video> height 属性

HTML video 标签参考手册 HTML <video> 标签

height 属性用来指定指定网页中视频的高度，您可以调整下述示例中代码的 height 属性来熟练使用该属性：

实例

具有指定高度和宽度的视频：

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 height 属性。

注意： Internet Explorer 8 及更早IE版本不支持 <video> 标签。

定义和用法

height 属性指定视频播放器的高度，以像素计。

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

语法

属性值

值	描述
pixels	以像素计的高度值（比如 "100px" 或 100）。

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video height 属性

HTML <track> src 属性

HTML track 标签参考手册 HTML <track> 标签

<track> 标签中的 src 属性用来表示track的地址，该属性必须定义。

实例

带有两个字幕轨道的 video 元素：

浏览器支持

Internet Explorer 10, Opera, 和 Chrome 支持 src 属性。

定义和用法

src 属性规定轨道的 url。

HTML 4.01 与 HTML5之间的差异

<track> 标签是 HTML5 的新标签。

语法

属性值

值	描述
URL	规定轨道的 url。

HTML <track> 标签

HTML DOM 参考手册：HTML DOM Track src 属性

HTML <video> loop 属性

HTML video 标签参考手册 HTML <video> 标签

loop 属性设置或返回音频/视频是否应该在结束时再次播放。

实例

设置为循环播放的 video 元素：

<video controls loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 loop 属性。

注意： Internet Explorer 8 及更早IE版本不支持<video> 标签。

定义和用法

loop 属性是一个 boolean（布尔）属性。

loop 属性规定当视频结束后将重新开始播放。

如果设置该属性，则视频将循环播放。

HTML 4.01 与 HTML5之间的差异

<video> 标签是HTML5新标签。

HTML 与 XHTML 之间的区别

在 XHTML 中, 属性不允许简写， loop 属性必须定义为 <video loop="loop">。

语法

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video loop 属性

HTML <track> srclang 属性

HTML track 标签参考手册 HTML <track> 标签

srclang 属性用来定义 track 使用的语言，请参考下述的示例：

实例

带有两个字幕轨道的 video 元素：

浏览器支持

Internet Explorer 10, Opera, 和Chrom 支持 srclang 属性。

定义和用法

srclang 属性定义轨道的语言。

如果 kind 属性的值是 "subtitles"，则 srclang 属性是必需的。

提示： 如需查看所有可用的语言代码，请访问我们的语言代码参考手册。

HTML 4.01 与 HTML5之间的差异

<track> 标签是 HTML5 新标签。

语法

属性值

值	描述
language_code	双字母的语言代码，规定轨道的语言。

HTML <track> 标签

HTML DOM 参考手册：HTML DOM Track srclang 属性

HTML <video> muted 属性

HTML video 标签参考手册 HTML <video> 标签

实例

关闭视频的声音：

<video controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 6 支持 muted 属性。

注意： Internet Explorer 9 及更早IE版本不支持<video> 的 muted 属性。

定义和用法

muted 属性是一个 boolean(布尔) 属性。

muted 属性设置或返回音频/视频是否应该被静音（关闭声音）。

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

HTML 与 XHTML 之间的区别

在 XHTML 中, 属性不允许简写， muted 属性必须定义为 <video muted="muted">。

语法

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video muted 属性

HTML <tr> align 属性

HTML tr 标签参考手册 HTML <tr> 标签

在 <tr> 标签中 align 属性用于设置文本的水平对齐的方式，可取值为：left、right、center、justify和char。

实例

带有居中对齐行的 HTML 表格：

<table width="100%" border="1">
<tr align="center">
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr align="center">
    <td>January</td>
    <td>$100</td>
</tr>
</table>

尝试一下 »

浏览器支持

所有主流浏览器都支持 align 属性。

注意：几乎没有浏览器能够正确地处理 "char" 值。

注意：IE 无法正确地处理 "justify" 值，IE 会以居中的方式进行处理。

定义和用法

HTML5 不支持 <tr> align 属性。请使用 CSS 代替。

align 属性规定表格行中的内容的水平对齐方式。

语法

属性值

值	描述
left	左对齐内容（<td> 元素的默认值）。
right	右对齐内容。
center	居中对齐内容（<th> 元素的默认值）。
justify	对行进行伸展，这样每行都可以有相等的宽度（就像在报纸和杂志中）。
char	将内容对准指定字符。

HTML <tr> 标签

HTML <video> poster 属性

HTML video 标签参考手册 HTML <video> 标签

当使用了 <video>标签的 poster 属性，则页面中将显示您设置的图像，即一个带有预览图的视频播放器，请参考下述示例：

实例

带有预览图的视频播放器：

<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 poster 属性。

注意： Internet Explorer 8 及更早IE版本不支持 <video> 标签。

定义和用法

poster 属性指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

HTML 4.01 与 HTML5之间的差异

<video> 标签是HTML5新标签。

语法

属性值

值

描述

URL

指定图片文件的URL。

可能值：

绝对URL - 指向另外一个站点URL (如：href="http://www.example.com/poster.jpg" rel="external nofollow" target="_blank" )
相对URL - 指向同个站点的URL (如： href="poster.jpg")

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video poster 属性

HTML <tr> bgcolor 属性

HTML tr 标签参考手册 HTML <tr> 标签

实例

给第一个表格行添加背景颜色：

<table border="1">
<tr bgcolor="#FF0000">
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
</table>

尝试一下 »

浏览器支持

所有主流浏览器都支持 bgcolor 属性。

定义和用法

HTML5 不支持 <tr> bgcolor 属性。请使用 CSS 代替。

在 HTML 4.01 中，<tr> 的 bgcolor 属性已废弃。

bgcolor 属性规定表格行的背景颜色。

兼容性注释

在 HTML 4.01 中，<tr> 的 bgcolor 属性已废弃。请使用 CSS 代替。

CSS 语法：<tr style="background-color:red">

CSS实例：给表格行添加背景颜色

在我们的 CSS 教程中，您可以找到更多有关background-color 属性的细节。

语法

属性值

值	描述
color_name	规定颜色值为颜色名称的背景颜色（比如 "red"）。
hex_number	规定颜色值为十六进制值的背景颜色（比如 "#ff0000"）。
rgb_number	规定颜色值为 rgb 代码的背景颜色（比如 "rgb(255,0,0)"）。

HTML <tr> 标签

HTML <video> preload 属性

HTML video 标签参考手册 HTML <video> 标签

preload 属性表示是否在完成页面加载后，载入视频，可选的三个取值为：none、metadata、auto，请参考下述例子：

实例

页面加载时视频不应该被载入：

<video controls preload="none">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

除了Internet Explorer，所有主流浏览器都支持 preload 属性。

定义和用法

preload 属性规定是否在页面加载后载入视频。

如果设置了 autoplay 属性，则忽略该属性。

注意： 如果使用 autoplay 属性 preload 将被忽略。

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

语法

属性值

值	描述
auto	指示一旦页面加载，则开始加载音频/视频。
metadata	指示当页面加载后仅加载音频/视频的元数据。
none	指示页面加载后不应加载音频/视频。

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video preload 属性

HTML <tr> char 属性

HTML tr 标签参考手册 HTML <tr> 标签

char 属性可以规定表格行中的内容需要根据哪个字符来实现对齐，请参考下述示例：

实例

把第二行和第三行的内容与 "." 字符对齐：

尝试一下 »

浏览器支持

几乎所有的主流浏览器都不支持 char 属性。

定义和用法

HTML5 不支持 <tr> char 属性。

char 属性规定表格行中的内容相对某个字符的对齐方式。

仅当 align 属性设置为 "char" 时，才能使用 char 属性。

char 属性的默认值是当前页面语言的小数点字符。

语法

属性值

值	描述
character	规定将内容与之对齐的字符。

HTML <tr> 标签

HTML <video> src 属性

HTML video 标签参考手册 HTML <video> 标签

src 属性用来放置您需要播放的视频的路径来源，如下示例：

实例

播放一个视频：

<video src="movie.ogg" controls>
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 src 属性。但是定义的文件格式并不是所有浏览器都支持。

注意： Internet Explorer 8 及更早IE版本不支持 <video> 标签。

定义和用法

src 属性指定 video 文件的本地路径(URL) 。

以上实例使用了 Ogg 文件, 该使用可正常显示于 Firefox, Opera 和 Chrome。

如果需要在 Internet Explorer 和 Safari 播放视频, 必须使用 MPEG4 文件。

如果想在所有浏览器播放视频文件 - 可在 <video> 元素总使用 <source> 元素。 <source> 元素可以链接到不同的视频文件。浏览器将使用第一个可识别的格式：

实例

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

语法

属性值

值

描述

URL

视频文件的 URL。

可能的值：

绝对 URL - 指向另一个站点（比如 href="http://www.example.com/song.ogg" rel="external nofollow" target="_blank" ）
相对 URL - 指向网站内的文件（比如 href="song.ogg"）

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video src 属性

HTML <tr> charoff 属性

HTML tr 标签参考手册 HTML <tr> 标签

实例

把第二行和第三行的内容与 "." 字符向右两个字符的位置对齐：

尝试一下 »

浏览器支持

几乎所有的主流浏览器都不支持 charoff 属性。

定义和用法

HTML5 不支持 <tr> charoff 属性。

charoff 属性规定内容相对于由 char 属性规定的字符的对齐偏移量。

仅当 align 属性设置为 "char" 且已设置 char 属性时，才能使用 charoff 属性。

语法

属性值

值	描述
number	规定对齐方式。正数规定向字符的右边对齐。负数规定向字符的左边对齐。

HTML <tr> 标签

HTML <video> width 属性

HTML video 标签参考手册 HTML <video> 标签

width 属性用于设置视频显示区域的宽度，如下示例：

实例

具有指定高度和宽度的视频：

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

尝试一下 »

浏览器支持

所有主流浏览器都支持 width 属性。

注意： Internet Explorer 8 及更早IE版本不支持 <video> 标签。

定义和用法

width 属性指定视频播放器的宽度。

注意：请勿通过 height 和 width 属性来缩放视频！通过 height 和 width 属性来缩小视频，只会迫使用户下载原始的视频（即使在页面上它看起来较小）。正确的方法是在网页上使用该视频前，使用软件对视频进行压缩。

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 新标签。

语法

属性值

值	描述
pixels	以像素计的宽度值（比如 "100px" 或 100）。

HTML <video> 标签

HTML DOM 参考手册：HTML DOM Video width 属性

HTML <tr> valign 属性

HTML tr 标签参考手册 HTML <tr> 标签

实例

带有不同垂直对齐行的 HTML 表格：

<table border="1" style="height:200px">
<tr valign="middle">
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr valign="bottom">
    <td>January</td>
    <td>$100</td>
</tr>
</table>

尝试一下 »

浏览器支持

所有主流浏览器都支持 valign 属性。

定义和用法

HTML5 不支持 <tr> valign 属性。请使用 CSS 代替。

valign 属性规定表格行中的内容的垂直对齐方式。

语法

属性值

值	描述
top	对内容进行上对齐。
middle	对内容进行居中对齐（默认值）。
bottom	对内容进行下对齐。
baseline	与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。请看下面的图示。

当文本的字号不同时，bottom vs. baseline 图示：

bottom valign="bottom"

valign="baseline"

HTML <tr> 标签

HTML DOM 参考手册：HTML DOM tr vAlign 属性

HTML <track> default 属性

HTML track 标签参考手册 HTML <track> 标签

实例

下面是一个 video 元素，其中的两个字幕之一是默认的：

浏览器支持

Internet Explorer 10, Opera, 和 Chrome 支持 default 属性。

定义和用法

default 属性是一个 boolean（布尔）属性。

如果使用 default 属性，则规定应该使用该轨道，假如用户没有选择其他轨道的话。

HTML 4.01 与 HTML5之间的差异

<track> 标签是 HTML5 新标签。

HTML 与 XHTML之间的差异

在 XHTML 中, 属性不允许简介， default 属性必须定义为： <track default="default" />。

语法

HTML <track> 标签

HTML DOM 参考手册：HTML DOM Track default 属性

HTML <tbody> valign 属性

HTML tbody 标签参考手册 HTML <tbody> 标签

valign 属性规定单元格中内容的垂直排列方式，请参考下述示例：

实例

把 <tbody> 元素中的内容垂直对齐到底部：

尝试一下 »

浏览器支持

所有主流浏览器都支持 valign 属性。

定义和用法

HTML5 不支持 <tbody> valign 属性。请使用 CSS 代替。

valign 属性规定 <tbody> 元素中的内容的垂直对齐方式。

语法

属性值

值	描述
top	对内容进行上对齐。
middle	对内容进行居中对齐（默认值）。
bottom	对内容进行下对齐。
baseline	与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。请看下面的图示。

当文本的字号不同时，bottom vs. baseline 图示：

valign 属性 valign="bottom"

valign 属性 valign="baseline"

HTML <tbody> 标签

HTML <script> src 属性

HTML script 标签参考手册 HTML <script> 标签

您不需要在 HTML 中重复编写相同的脚本文件，可以在单独的文件中创建 JavaScript，保存后使用 src 属性引用即可，请参考下面的例子：

实例

指向一个外部 JavaScript 文件：

尝试一下 »

浏览器支持

所有主流浏览器都支持 src 属性。

定义和用法

src 属性规定外部脚本文件的 URL。

注意：外部脚本文件不能包含 <script> 标签。

注意：正确地引用您写入脚本的外部脚本文件。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
URL	外部脚本文件的 URL。可能的值：绝对 URL - 指向另一个网站（比如 src="http://www.example.com/example.js" rel="external nofollow" ）相对 URL - 指向网站内的一个文件（比如 src="/scripts/example.js"）

HTML <script> 标签

HTML DOM 参考手册：HTML DOM Script src 属性

HTML <tbody> charoff 属性

HTML tbody 标签参考手册 HTML <tbody> 标签

<tbody> 元素中的 charoff 属性用于指定使用 char 属性相对于某个字符对齐后的偏移量，请参考下述示例：

实例

把 <tbody> 元素中的内容与字符 "." 向右两个字符的位置对齐：

尝试一下 »

浏览器支持

注意：几乎所有的主流浏览器都不支持 charoff 属性。

定义和用法

HTML5 不支持 <tbody> charoff 属性。

charoff 属性规定 <tbody> 元素中的内容相对于由 char 属性规定的字符的对齐偏移量。

仅当 align 属性设置为 "char" 且已设置 char 属性时，才能使用 charoff 属性。

语法

属性值

值	描述
number	规定对齐方式。正数规定向字符的右边对齐。负数规定向字符的左边对齐。

HTML <tbody> 标签

HTML <script> type 属性

HTML script 标签参考手册 HTML <script> 标签

type 属性给出脚本的语言或数据的格式。如果该属性存在，则其值必须是有效的MIME类型。

实例

带有指定 type 属性的脚本：

尝试一下 »

浏览器支持

所有主流浏览器都支持 type 属性。

定义和用法

type 属性规定脚本的 MIME 类型。

type 属性标识 <script> 与 </script> 标签之间的内容。

MIME 类型包括两部分：media type 和 subtype。对于 JavaScript，MIME 类型是 "text/javascript"。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，type 属性不再是必需的。默认值是 "text/javascript"。

语法

属性值

值

描述

MIME_type

规定脚本的 MIME 类型。

一些常用的值：

text/javascript （默认）
text/ecmascript
application/ecmascript
application/javascript
text/vbscript

请参阅IANA MIME 类型，获得标准 MIME 类型的完整列表。

HTML <script> 标签

HTML DOM 参考手册：HTML DOM Script type 属性

HTML <tbody> char 属性

HTML tbody 标签参考手册 HTML <tbody> 标签

char 属性用来指定 <tbody> 标签内的元素该以哪个字符对齐，请参考下述例子：

实例

把 <tbody> 元素中的内容与字符 "." 对齐：

尝试一下 »

浏览器支持

注意：几乎所有的主流浏览器都不支持 char 属性。

定义和用法

HTML5 不支持 <tbody> char 属性。

char 属性规定 <tbody> 元素中的内容相对某个字符的对齐方式。

仅当 align 属性设置为 "char" 时，才能使用 char 属性。

char 属性的默认值是当前页面语言的小数点字符。

语法

属性值

值	描述
character	规定将内容与之对齐的字符。

HTML <tbody> 标签

HTML <q> cite 属性

HTML q 标签参考手册 HTML <q> 标签

cite 属性定义了文档引用的来源，请参考下述示例：

实例

规定引用的来源 URL：

<p>WWF's goal is to:
<q cite="http://www.wwf.org">
Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

尝试一下 »

浏览器支持

cite 属性在普通的 Web 浏览器中没有视觉效果，但可以通过屏幕阅读器使用。

定义和用法

cite 属性规定引用的来源 URL。

提示：该属性的值是一个包含在引号中并指向联机文档的 URL，以及（如果有可能的话）引用在该文档中的确切位置。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
URL	规定引用的来源 URL。可能的值：绝对 URL - 指向另一个网站（比如 href="http://www.example.com/page.htm" rel="external nofollow" target="_blank" ）相对 URL - 指向网站内的一个文件（比如 href="page.htm"）

HTML <q> 标签

HTML <tbody> align 属性

HTML tbody 标签参考手册 HTML <tbody> 标签

<tbody> 标签的 align 属性用于规定表格主体中的内容在水平方向上的对齐方式，请参考下述示例：

实例

向右对齐 <tbody> 元素中的内容：

尝试一下 »

浏览器支持

所有主流浏览器都支持 align 属性。

注意：IE 无法正确地处理 "justify" 值，IE 会以居中的方式进行处理。

注意：几乎没有浏览器能够正确地处理 "char" 值。

定义和用法

HTML5 不支持 <tbody> align 属性。请使用 CSS 代替。

align 属性规定 <tbody> 元素中的内容的水平对齐方式。

语法

属性值

值	描述
left	左对齐内容（表格数据的默认值）。
right	右对齐内容。
center	居中对齐内容（th 元素的默认值）。
justify	对行进行伸展，这样每行都可以有相等的宽度（就像在报纸和杂志中）。
char	将内容对准指定字符。

HTML <tbody> 标签

HTML <ol> compact 属性

HTML ol 标签参考手册 HTML <ol> 标签

在 HTML 的有序列列表中使用 compact 属性可以让列表内容的显示看起来更小巧。

实例

在有序的 HTML 列表中使用 compact 属性：

尝试一下 »

浏览器支持

注意：几乎所有的主流浏览器都不支持 compact 属性。

定义和用法

HTML5 不支持 <ol> compact 属性。请使用 CSS 代替。

在 HTML 4.01 中，<ol> 的 compact 属性已废弃。

compact 属性是一个布尔属性。

compact 属性规定列表的显示效果应该比正常情况更小巧，通过缩小行间距和列表的缩进。

兼容性注释

在 HTML 4.01 中，<ol> 的 compact 属性已废弃，请使用 CSS 代替。

CSS 语法：<ol style="line-height: 80%">

CSS实例：缩小列表中的行高

在我们的 CSS 教程中，您可以找到更多有关 line-height 属性的细节。

HTML 与 XHTML 之间的差异

在 XHTML 中，禁止属性最小化，compact 属性必须定义为 <ol compact="compact">。

语法

HTML <ol> 标签

HTML <style> media 属性

HTML style 标签参考手册 HTML <style> 标签

media 属性用来指定设置的CSS样式或外部样式文件应用到目标媒介。

针对两种不同媒介类型（屏幕和打印）的两个不同的样式表：

尝试一下 »

浏览器支持

所有主流浏览器都支持 media 属性。

定义和用法

media 属性规定目前资源是为何种媒介/设备优化的。

该属性大多用在为不同媒介类型规定不同样式的 CSS 样式表。

HTML 4.01 与 HTML5之间的差异

无。

语法

可能的运算符

值	描述
and	规定 AND 操作符。
not	规定 NOT 操作符。
,	规定 OR 操作符。

设备

值	描述
all	默认。适应所有设备。
aural	语音合成器。
braille	盲人用点字法反馈设备。
handheld	手持设备（小屏幕、有限的带宽）。
projection	放映机。
print	打印预览模式 / 打印页。
screen	计算机屏幕（默认值）。
tty	电传打字机以及使用等宽字符网格的类似媒介。
tv	电视类型设备（低分辨率、有限的屏幕翻滚能力）。

值

值	描述
width	规定目标显示区域的宽度。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (min-width:500px)"
height	规定目标显示区域的高度。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (max-height:700px)"
device-width	规定目标显示器/纸张的宽度。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (device-width:500px)"
device-height	规定目标显示器/纸张的高度。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (device-height:500px)"
orientation	规定目标显示器/纸张的方向。可能的值："portrait" or "landscape" 例子：media="all and (orientation: landscape)"
aspect-ratio	规定目标显示区域的宽度/高度比可使用 "min-" 和 "max-" 前缀。例子：media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	规定目标显示器/纸张的 device-width/device-height 比率可使用 "min-" 和 "max-" 前缀。例子：media="screen and (aspect-ratio:16/9)"
color	规定目标显示器的 bits/color 可使用 "min-" 和 "max-" 前缀。例子：media="screen and (color:3)"
color-index	规定目标显示器可以处理的颜色数。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (min-color-index:256)"
monochrome	规定单色帧缓冲中的 bits/pixel。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (monochrome:2)"
resolution	规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。可使用 "min-" 和 "max-" 前缀。例子：media="print and (resolution:300dpi)"
scan	规定 tv 显示器的扫描方式。可能的值："progressive" 和 "interlace"。例子：media="tv and (scan:interlace)"
grid	规定输出设备是否是网格或位图。可能的值："1" 为网格，否则为 "0"。例子：media="handheld and (grid:1)"

HTML <style> 标签

HTML <ol> reversed 属性

HTML ol 标签参考手册 HTML <ol> 标签

正常情况下HTML的有序列表是升序排列的，但是您可以使用 reversed 属性对有序列表进行降序，请参考下述例子：

实例

对列表顺序进行降序：

尝试一下 »

浏览器支持

目前只有 Chrome 和 Safari 6 支持 reversed 属性。

定义和用法

reversed 属性是一个布尔属性。

reversed 属性规定列表顺序为降序 (9, 8, 7...)，而不是升序 (1, 2, 3...)。

HTML 4.01 与 HTML5之间的差异

reversed 属性是 HTML5 中的新属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，禁止属性最小化，reversed 属性必须定义为 <ol reversed="reversed">。

语法

HTML <ol> 标签

参考手册

HTML DOM 参考手册：HTML DOM Ol reversed 属性

HTML <style> scoped 属性

HTML style 标签参考手册 HTML <style> 标签

在<style>标签中使用 scoped 属性会限制样式只影响 <style> 标签的父元素和它所有的后代元素。

实例

使用 scope 属性描述 <div> 元素的样式：

<div>
<style type="text/css" scoped>
h1 {color:red;}
p {color:blue;}
</style>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</div>

尝试一下 »

浏览器支持

只有 Firefox属性支持 scoped 属性。

定义和用法

scoped 属性是一个布尔属性。

如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。

HTML 4.01 与 HTML5之间的差异

scoped 属性是 HTML5 中的新属性。

HTML 与 XHTML 之间的差异

在 XHTML 中, 属性是不允许简写的，scoped 属性必须定义为：<style scoped="scoped" />。

语法

HTML <style> 标签

HTML <ol> start 属性

HTML ol 标签参考手册 HTML <ol> 标签

start 属性可以让您自定义HTML有序列表的起始序数，请参考下述示例：

实例

从 "50" 开始的有序列表：

尝试一下 »

浏览器支持

所有主流浏览器都支持 start 属性。

定义和用法

start 属性规定有序列表中第一个列表项目的开始值。

注释：目前，仍然没有 start 属性的 CSS 替代方案。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，不再反对使用 <ol> 元素的 start 属性。

语法

属性值

值	描述
number	规定有序列表中第一个列表项目的开始值。

HTML <ol> 标签

HTML DOM 参考手册：HTML DOM Ol start 属性

HTML <style> type 属性

HTML style 标签参考手册 HTML <style> 标签

通过 type 属性设置HTML样式表的 MIME 类型，请参考下述示例：

实例

在 <style> 标签中使用 type 属性：

尝试一下 »

浏览器支持

所有主流浏览器都支持 type 属性。

定义和用法

必需的 type 属性规定样式表的 MIME 类型。

type 属性指示 <style> 与 </style> 标签之间的内容。

值 "text/css" 指示内容是标准的 CSS。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中, type 属性不再是必须的。默认值为"text/css"。

语法

属性值

值	描述
MIME_type	样式表的 MIME 类型。目前，唯一可能的值是 "text/css"。查看完整标准 MIME 类型列表 IANA MIME 类型。

HTML <style> 标签

HTML <ol> type 属性

HTML ol 标签参考手册 HTML <ol> 标签

type 属性用来规定HTML有序列表中序号的类型，包括大小写字母、阿拉伯数字和大小写罗马数字，请参考下述示例：

实例

带有大写罗马数字的有序列表：

尝试一下 »

浏览器支持

所有主流浏览器都支持 type 属性。

定义和用法

type 属性规定列表中要使用的标记类型（字母或数字）。

提示：您可以使用 CSS 来代替 type 属性，在我们的 CSS 教程中，您可以找到更多有关 list-style-type 属性的细节。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，不再反对使用 <ol> 元素的 type 属性。

语法

属性值

值	描述
1	默认。十进制数字 (1, 2, 3, 4)。
a	字母顺序的有序列表，小写 (a, b, c, d)。
A	字母顺序的有序列表，大写 (A, B, C, D)。
i	罗马数字，小写 (i, ii, iii, iv)。
I	罗马数字，大写 (I, II, III, IV)。

HTML <ol> 标签

HTML DOM 参考手册：HTML DOM Ol type 属性

HTML <script> async 属性

HTML script 标签参考手册 HTML <script> 标签

实例

一旦脚本可用，则会异步运行：

尝试一下 »

浏览器支持

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 async 属性。

注意：Internet Explorer 9 及之前的版本不支持 <script> 标签的 async 属性。

定义和用法

async 属性是一个布尔属性。

async 属性一旦脚本可用，则会异步执行。

注意：async 属性仅适用于外部脚本（只有在使用 src 属性时）。

注意：有多种执行外部脚本的方法：

如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

HTML 4.01 与 HTML5之间的差异

async 属性是 HTML5 中的新属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，禁止属性最小化，async 属性必须定义为 <script async="async">。

语法

HTML <script> 标签

HTML DOM 参考手册：HTML DOM Script async 属性

HTML <script> charset 属性

HTML script 标签参考手册 HTML <script> 标签

charset 属性您需要在外部文件中使用的字符编码，请参考下述例子：

实例

字符集为 UTF-8 的外部 JavaScript：

尝试一下 »

浏览器支持

所有主流浏览器都支持 charset 属性。

定义和用法

charset 属性规定在外部脚本文件中使用的字符编码。

当外部脚本文件中的字符编码与 HTML 文档中的编码不同时，会用到 charset 属性。

提示：charset 属性与 src 属性一起使用，告诉浏览器用来编码的字符集。它的值是任何一个 ISO 标准字符集编码的名称。

提示和注释

注意：charset 属性仅适用于外部脚本（只有在使用 src 属性时）。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值

描述

charset

规定外部脚本文件的字符编码。

一些常用的值：

"ISO-8859-1" - 拉丁字母表的标准编码
"UTF-8" - Unicode 字符编码。与 ASCII 兼容

请参阅我们的字符集参考手册，获得完整的字符集列表。

HTML <script> 标签

HTML <script> defer 属性

HTML script 标签参考手册 HTML <script> 标签

defer 属性规定应该等待所有HTML文档解析完成以后，再判断js脚本是否执行，请参考下述例子：

实例

页面已加载后才会运行脚本：

尝试一下 »

浏览器支持

所有主流浏览器都支持 defer 属性。

定义和用法

defer 属性是一个布尔属性。

defer 属性规定当页面已完成加载后，才会执行脚本。

注意：defer 属性仅适用于外部脚本（只有在使用 src 属性时）。

注意：有多种执行外部脚本的方法：

如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

HTML 4.01 与 HTML5之间的差异

无。

HTML 与 XHTML 之间的差异

在 XHTML 中，禁止属性最小化，defer 属性必须定义为 <script defer="defer">。

语法

HTML <script> 标签

HTML DOM 参考手册：HTML DOM Script defer 属性

HTML <embed> height 属性

HTML embed 标签参考手册 HTML <embed> 标签

height 属性规定在 <embed> 标签中嵌入的插件的高度，请参考下述示例：

实例

一个高度和宽度为 200 像素的 flash 动画：

尝试一下 »

浏览器支持

所有主流浏览器都支持 height 属性。

定义和用法

height 属性规定被嵌入内容的高度，以像素计。

HTML 4.01 与 HTML5之间的差异

语法

属性值

值	描述
pixels	规定被嵌入内容的高度，以像素计（比如 height="100"）。

HTML <embed> 标签

HTML DOM 参考手册：HTML DOM Embed height 属性

HTML <button> formaction 属性

HTML button 标签参考手册 HTML <button> 标签

当您使用 formaction 属性时，表单的提交地址将使用属性本身的值，而不是<form>标签的 action 属性的值，请参考下述示例：

实例

带有两个提交按钮的表单（带有不同的 action），第一个提交按钮将表单数据提交到 "demo_form.html", 第二个提交按钮将表单数据提交到 "demo_admin.html"：

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 支持 formaction 属性。

注意： Internet Explorer 9 及更早IE版本不支持 formaction 属性。

定义和用法

formaction 属性覆盖 form 元素的 action 属性。

该属性与 type="submit" 配合使用。

HTML 4.01 与 HTML5之间的差异

formaction 属性是 HTML 5 中的新属性。

语法

属性值

值	描述
URL	规定将表单数据发送到的地址。可能值：绝对 URL - 完整的页面URL地址(如：href="http://www.example.com/formresult.html" rel="external nofollow" target="_blank" ) 相对 URL 地址 -指向当前网站的一个文件(如：href="formresult.html")

HTML <button> 标签

HTML <basefont> face 属性

HTML basefont 标签参考手册 HTML <basefont> 标签

face 属性用于指定HTML文档文本默认使用的字体，该属性可以包含多个字体名称，取值时使用浏览器支持的首个字体。

实例

规定页面上的默认字体字体：

<head>
<basefont face="courier, serif" />
</head>

<body>
<h1>这是一个标题。</h1>
<p>这是一个段落。</p>
</body>

尝试一下 »

浏览器支持

只有Internet Explorer 9 及更早IE版本支持 face 属性。

定义和用法

HTML5 不支持 <basefont> 标签。请使用CSS 替代。

<basefont> 的 face 属性在HTML 4.01中已废弃。

face 属性规定文档中文本的默认字体。

提示：如果所有列出的字体本地系统都未安装，浏览器默认使用该系统上的定比或者定宽字体。

兼容性注释

在 HTML 4.01 中，不赞成使用 basefont 元素的 face 属性；在 XHTML 1.0 Strict DTD 中，不支持 basefont 元素的 face 属性。

CSS 语法(<head> 部分): <style>body{font-family: courier, serif}</style>

CSS 实例：为页面规定默认文本字体

在我们的 CSS 教程中，您可以找到更多有关font-family 属性的细节。

语法

属性值

值	描述
font_family	规定文本的字体。如需规定若干字体的优先表，请使用逗号将字体名称分开（比如 <basefont face="verdana,arial,sans-serif" />）。

HTML <basefont> 标签

HTML <embed> src 属性

HTML embed 标签参考手册 HTML <embed> 标签

src 属性定义了 <embed> 标签中嵌入的多媒体插件的地址来源，使用方法请参考以下示例：

实例

一个嵌入的 flash 动画：

尝试一下 »

浏览器支持

所有主流浏览器都支持 src 属性。

定义和用法

src 属性规定要嵌入的外部文件的地址。

HTML 4.01 与 HTML5之间的差异

语法

属性值

值	描述
URL	规定要嵌入的外部文件的地址。可能的值：绝对 URL - 指向另一个网站（比如 href="http://www.example.com/hello.swf" rel="external nofollow" target="_blank" ）相对 URL - 指向网站内的一个文件（比如 href="hello.swf"）

HTML <embed> 标签

HTML DOM 参考手册：HTML DOM Embed src 属性

HTML <button> formenctype 属性

HTML button 标签参考手册 HTML <button> 标签

如果您在使用<button>标签时使用了 formenctype 属性，那么它的值将覆盖 <form> 标签的 enctype 属性值：

实例

带有两个提交按钮的表单（带有不同的编码方式），第一个提交按钮使用默认字符编码提交表单数据，第二个提交按钮不使用字符编码提交表单数据：

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 支持 formenctype属性。

注意： Internet Explorer 9 及更早IE版本不支持 formenctype属性。

定义和用法

formenctype 属性覆盖 form 元素的 enctype 属性。

该属性与 type="submit" 配合使用。

HTML 4.01 与 HTML 5 之间的差异

formenctype 属性是 HTML 5 中的新属性。

语法

属性值

值	描述
application/x-www-form-urlencoded	在发送前对所有字符进行编码（默认）。
multipart/form-data	不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain	将空格转换为 "+" 符号，但不编码特殊字符。

HTML button 标签参考手册 HTML <button> 标签

HTML <embed> type 属性

HTML embed 标签参考手册 HTML <embed> 标签

type 属性规定 <embed> 标签内使用的嵌入的内容的 MIME 类型，请参考下述示例：

实例

一个嵌入的带 MIME 类型的 flash 动画：

尝试一下 »

浏览器支持

所有主流浏览器都支持 type 属性。

定义和用法

type 属性规定被嵌入内容的 MIME 类型。

HTML 4.01 与 HTML5之间的差异

语法

属性值

值	描述
MIME_type	被嵌入内容的 MIME 类型。请参阅 IANA MIME 类型，获得标准 MIME 类型的完整列表。

HTML <embed> 标签

HTML DOM 参考手册：HTML DOM Embed type 属性

HTML <button> formmethod 属性

HTML button 标签参考手册 HTML <button> 标签

formmethod 属性定义通过哪种方式发送 form-data，它将覆盖 <form> 标签中的 method 属性，请参考下述示例：

实例

带有两个提交按钮的表单，第一个提交按钮使用 method="get" 提交表单数据，第二个提交按钮使用 method="post" 提交表单数据：

<form action="demo_form.html" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit">提交</button>
<button type="submit" formmethod="post" formaction="demo_post.html">
使用 POST 提交</button>
</form>

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 支持 formmethod 属性。

注意：Internet Explorer 9 及更早IE版本不支持 formmethod 属性。

定义和用法

formmethod 属性制定发送表单数据使用的 HTTP 方法。formmethod 属性覆盖 form 元素的 method 属性。

formmethod 属性需与 type="submit" 配合使用。

可以通过以下方式发送 form-data ：

以 URL 变量 (使用 method="get") 的形式来发送
以 HTTP post (使用 method="post") 的形式来发送

使用 "get" 方法:

表单数据在URL中以 name/value 对出现。
get传送的数据量较小，不能大于2KB，这主要是因为受URL长度限制。
不要使用 "get" 方法传送敏感信息！(密码或者敏感信息会出现在浏览器的地址栏中)

使用 "post" 方法:

以 HTTP post 形式发送表单数据。
比 "get" 方法更强大更安全。
没有大小限制

HTML 4.01 与 HTML5之间的差异

formmethod 属性是 HTML 5 中的新属性。

语法

属性值

值	描述
get	向 URL 追加表单数据（form-data）：URL?name=value&name=value
post	以 HTTP post 事务的形式发送表单数据（form-data）

HTML <button> 标签

HTML <basefont> size 属性

HTML basefont 标签参考手册 HTML <basefont> 标签

size 属性定义了HTML文档的字体大小，取值可以是数值或者相对值，值域为1～7，1最小，默认值为3，请参考下述示例：

实例

规定页面上的默认字体大小：

<head>
<basefont size="7" />
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>

尝试一下 »

浏览器支持

除了 Internet Explorer9.0 及更早IE版本，其他浏览器都不支持 size 属性。

定义和用法

HTML5 已不再支持 <basefont> 标签。请使用CSS替代。

<basefont> 的 size 属性在HTML 4.01中已废弃。

size 属性规定文档中文本的默认大小（字号）。

兼容性注释

在 HTML 4.01 中，不赞成使用 basefont 元素的 face 属性；在 XHTML 1.0 Strict DTD 中，不支持 basefont 元素的 face 属性。

CSS 语法 (<head> 部分): <style>body{font-size: 10px}</style>

CSS 实例：为页面规定默认文本字体

在我们的 CSS 教程中，您可以找到更多有关 font-family 属性的细节。

语法

属性值

值	描述
font_family	规定文本的字体。如需规定若干字体的优先表，请使用逗号将字体名称分开（比如 <basefont face="verdana,arial,sans-serif" />）。

HTML <basefont> 标签

HTML <embed> width 属性

HTML embed 标签参考手册 HTML <embed> 标签

width 属性用于设置 <embed> 标签中插入的内容的宽度，请参考下述示例：

实例

一个高度和宽度为 200 像素的 flash 动画：

尝试一下 »

浏览器支持

所有主流浏览器都支持 width 属性。

定义和用法

width 属性规定被嵌入内容的宽度，以像素计。

HTML 4.01 与 HTML5之间的差异

语法

属性值

值	描述
pixels	规定被嵌入内容的宽度，以像素计（比如 width="100"）。

HTML <embed> 标签

HTML DOM 参考手册：HTML DOM Embed width 属性

HTML <button> formnovalidate 属性

HTML button 标签参考手册 HTML <button> 标签

使用 formnovalidate 属性将停止进行对表单的验证，请参考下述示例：

实例

带有两个提交按钮的表单（进行验证或不进行验证），第一个提交按钮提交数据时带有默认的表单验证，第二个提交按钮提交数据时不进行表单验证：

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Opera, Chrome支持 formmethod 属性。

注意： Safari、Internet Explorer 9 及更早IE版本不支持 formmethod 属性。

定义和用法

formnovalidate 属性是一个 boolean（布尔）属性。

如果使用该属性，则提交表单时按钮不会执行验证过程。formnovalidate 属性覆盖表单的 novalidate 属性。

该属性与 type="submit" 配合使用。

HTML 4.01 与 HTML5之间的差异

formnovalidate 属性是 HTML 5 中的新属性。

HTML 与 XHTML之间的差异

在 XHTML中, 属性不允许简写, formnovalidate 属性必须定义为 <button type="submit" formnovalidate="formnovalidate">.

语法

HTML <button> 标签

HTML <meta> charset 属性

HTML meta 标签参考手册 HTML <meta> 标签

实例

规定 HTML 文档的字符编码：

尝试一下 »

浏览器支持

所有主流浏览器都支持 charset 属性。

定义和用法

charset 属性规定 HTML 文档的字符编码。

提示：charset 属性可以通过任意元素上的 lang 属性来重写。

HTML 4.01 与 HTML5之间的差异

charset 属性是 HTML5 中的新属性，且替换了：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

仍然允许使用 http-equiv 属性来规定字符集，但是使用新方法可以减少代码量。

语法

属性值

值

描述

character_set

规定 HTML 文档的字符编码。

常用的值：

UTF-8 - Unicode 字符编码
ISO-8859-1 - 拉丁字母表的字符编码

在理论上，可以使用任何字符编码，但并不是所有浏览器都能够理解它们。某种字符编码使用的范围越广，浏览器就越有可能理解它。

如需查看所有可用的字符编码，请访问 IANA 字符集。

HTML <meta> 标签

HTML <dir> compact 属性

HTML dir 标签参考手册 HTML <dir> 标签

compact 属性的用处是改变列表显示效果——以一种更加小巧的方法显示。

实例

在目录列表中使用 compact 属性：

<dir compact>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</dir>

尝试一下 »

浏览器支持

注意： 目前所有主流浏览器都不支持 compact 属性。

定义和用法

<dir> 标签在HTML5中已不再支持。请使用 CSS 替代。

<dir> 的 compact 属性在 HTML 4.01 中已废弃。

compact 属性是一个 boolean（布尔）属性。

compact 属性规定列表呈现的效果比正常情况更小巧，这是通过减少行间距以及对列表进行缩进来实现的。

兼容性注释

<dir> 的 compact 属性在 HTML 4.01 中已废弃。请使用 CSS 替代。

CSS syntax: <dir style="line-height: 80%">

CSS 实例：缩小列表中的行高

在我们的 CSS 教程中，您可以找到更多有关line-height property属性的细节。

HTML 与 XHTML之间的差别

在 XHTML 中, 属性不允许简写, compact 属性必须定义为: <dir compact="compact">。

语法

HTML <dir> 标签

HTML <button> formtarget 属性

HTML <button> 标签

formtarget 属性可以规定提交的HTML表单在何处显示，下面的示例将详细使用该属性：

实例

两个提交按钮，第一个提交按钮使用默认 target ("_self") 提交数据，第二个提交按钮将数据提交到到新窗口(target="_blank"):

<form action="demo_form.html" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit" >提交</button>
<button type="submit" formtarget="_blank">提交到一个新窗口或选项卡</button>
</form>

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 支持 formtarget 属性。

注意： Internet Explorer 9 及更早IE版本不支持 formtarget 属性。

定义和用法

formtarget 属性指定在提交表单后在哪里显示响应。formtarget 属性覆盖表单元素的 target 属性。

该属性与 type="submit" 配合使用。

HTML 4.01 与 HTML5之间的差异

formtarget 属性是 HTML 5 中的新属性。

注意：HTML5 不支持框架和框架集。现在，parent, top 和 framename 值大多用于 iframe。

语法

属性值

值	描述
_blank	在新窗口/选项卡中将表单提交到文档。
_self	在同一框架中将表单提交到文档。（默认）
_parent	在父框架中将表单提交到文档。
_top	在整个窗口中将表单提交到文档。
framename	在指定的框架中将表单提交到文档。

HTML <button> 标签

HTML <meta> content 属性

HTML meta 标签参考手册 HTML <meta> 标签

content 属性可以使用的值依赖于 <meta> 标签中 name 和 httpEquiv 属性的值。

实例

描述 HTML 文档内的元数据：

尝试一下 »

浏览器支持

所有主流浏览器都支持 content 属性。

定义和用法

content 属性给出了与 http-equiv 或 name 属性相关的值。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
text	meta 信息的内容。

HTML <meta> 标签

HTML DOM 参考手册：HTML DOM Meta content 属性

HTML <del> cite 属性

HTML del 标签参考手册 HTML <del> 标签

cite 属性的值将指向一个URL，该URL会解释为什么文本被删除，请参考下述示例：

实例

一个删除的文本,文本的URL解释了删除的原因：

<p><del cite="del_demo_cite.htm">This text has been deleted</del></p>

尝试一下 »

浏览器支持

没有主流浏览器支持 cite 属性，但该属性可使用于屏幕阅读器。

定义和用法

cite 属性规定一个文档的 URL，该文档解释了文本被删除的原因。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
URL	引用的来源的 URL。可能的值：绝对 URL - 指向另一个站点（比如 href="http://www.example.com/song.ogg" rel="external nofollow" target="_blank" ）相对 URL - 指向网站内的文件（比如 href="song.ogg"）锚 URL - 指向页面内的一个锚（比如 href="#page"）

HTML <del> 标签

HTML <meta> http-equiv 属性

HTML meta 标签参考手册 HTML <meta> 标签

http-equiv 属性在 <meta> 标签相当于HTTP的头文件，向浏览器传递有用的信息，该属性使用的变量的值会在 content 属性中规定，请参考下述示例：

实例

每隔 30 秒刷新一次文档：

尝试一下 »

浏览器支持

所有主流浏览器都支持 http-equiv 属性。

定义和用法

http-equiv 属性提供了 content 属性的信息/值的 HTTP 头。

http-equiv 属性可用于模拟一个 HTTP 响应头。

HTML 4.01 与 HTML5之间的差异

使用 http-equiv 已经不是规定 HTML 文档的字符集的唯一方式：

HTML 4.01：<meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5：<meta charset="UTF-8">

语法

属性值

值

描述

content-type

规定文档的字符编码。

实例：

default-style

规定要使用的预定义的样式表。

实例：

注释：上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。

refresh

定义文档自动刷新的时间间隔。

实例：

注释：值 "refresh" 应该慎重使用，因为它会使得页面不受用户控制。在W3C's Web 内容可访问性指南中使用 "refresh" 会到导致失败。

HTML <meta> 标签

HTML DOM 参考手册：HTML DOM Meta httpEquiv 属性

HTML <button> name 属性

HTML button 标签参考手册 HTML <button> 标签

name 属性设置HTML中按钮的名称，用来提交某些值，请参考下文以了解该属性的详细使用情况。

实例

两个按钮带有相同的名称，在单击它们时提交不同的值：

尝试一下 »

浏览器支持

所有主流浏览器都支持 name 属性。

定义和用法

name 属性为按钮规定名称。

name 属性用于在 JavaScript 中对元素进行引用，或者在表单提交之后，对表单数据进行引用。

提示： 不同的 button 元素可以共享相同的名称。这就允许您标记带有相同名称的若干按钮，以便在表单中使用时能够提交不同的值。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
name	规定按钮的名称。

HTML <button> 标签

HTML DOM 参考手册：HTML DOM Button name 属性

HTML <del> datetime 属性

HTML del 标签参考手册 HTML <del> 标签

当HTML页面中有使用 <del> 标签删除的文本的时候，可以使用 datetime 属性设置文本删除的日期与时间。

实例

一个段落，带有时间和日期的文本已被删除：

<p>
<del datetime="2011-11-15T22:55:03Z">这是一个被删除了的文本</del>
</p>

尝试一下 »

浏览器支持

没有主流浏览器支持 datetime 属性,但它可以被屏幕阅读器解读。

定义和用法

datetime 属性规定文本被删除的日期和时间。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值

描述

YYYY-MM-DDThh:mm:ssTZD

文本被删除的日期和时间。

组件解释：

YYYY - 年（例如 2009）
MM - 月（例如 01 for January）
DD - 月中的日（例如 08）
T - 必需的分隔符
hh - 小时（例如 22 for 10.00pm）
mm - 分钟（例如 55）
ss - 秒（例如 03）
TZD - 时区标志符（Z 表示祖鲁，同时也是格林威治时间）

HTML <del> 标签

HTML <meta> name 属性

HTML meta 标签参考手册 HTML <meta> 标签

name 属性定义了HTML文档的描述、关键词和作者，对应于 content 属性，请参考下述示例：

实例

使用 name 属性来定义一个 HTML 文档的描述、关键词、作者：

尝试一下 »

浏览器支持

所有主流浏览器都支持 name 属性。

name 属性规定元数据的名称。 specifies the name for the metadata.

name 属性规定 content 属性的信息/值的名称。

注意：如果设置了 http-equiv 属性，则不应该设置 name 属性。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
application-name	规定页面所代表的 Web 应用程序的名称。
author	规定文档的作者的名字。实例：<meta name="author" content="Hege Refsnes">
description	规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。实例：<meta name="description" content="Free web tutorials">
generator	规定用于生成文档的一个软件包（不用于手写页面）。实例：<meta name="generator" content="FrontPage 4.0">
keywords	规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）。提示：总是规定关键词（对于搜索引擎进行页面分类是必要的）。实例：<meta name="keywords" content="HTML, meta tag, tag reference">

HTML <meta> 标签

HTML DOM 参考手册：HTML DOM Meta name 属性

HTML <button> type 属性

HTML button 标签参考手册 HTML <button> 标签

type 属性用来定义 HTML 文档中按钮的类型，请参考下述示例：

实例

两个 button 元素，一个是提交按钮，另一个是重置按钮：

尝试一下 »

浏览器支持

所有主流浏览器都支持 type 属性。

定义和用法

type 属性规定按钮的类型。

提示： 请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

HTML 4.01 与 HTML5之间的差异

NONE.

语法

属性值

值	描述
submit	该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。
button	该按钮是可点击的按钮（Internet Explorer 的默认值）。
reset	该按钮是重置按钮（清除表单数据）。

HTML <button> 标签

HTML DOM 参考手册：HTML DOM Button type 属性

HTML <button> autofocus 属性

HTML button 标签参考手册 HTML <button> 标签

设置了 autofocus 属性的按钮，将在页面加载后自动获取焦点，请参考下述示例：

实例

按钮使用 autofocus 属性:

尝试一下 »

浏览器支持

Internet Explorer 10, Firefox, Chrome, 和 Safari 支持autofocus 属性。

注意： Internet Explorer 9 以及更早IE版本不支持 autofocus 属性。

定义和用法

autofocus 属性是一个 boolean(布尔) 属性。

autofocus 属性规定当页面加载时按钮应当自动地获得焦点。

提示：

HTML 4.01 与 HTML5之间的差异

autofocus 属性是 HTML5 <button> 标签的新属性。

HTML 与 XHTML之间的差异

在 XHTML 中, 不允许属性简写,autofocus 属性必须定义为 <button autofocus="autofocus">。

语法

HTML <button> 标签

HTML <button> value 属性

HTML button 标签参考手册 HTML <button> 标签

value 属性用于设置HTML表单按钮的初始值，如下面的参考示例，我们设置了两个带有不同初始值的

实例

两个按钮带有相同的名称，在单击它们时提交不同的值：

尝试一下 »

浏览器支持

所有主流浏览器都支持 value 属性。

定义和用法

value 属性规定了 <form> 中 <button> 的初始值。

注意： 在表单中，如果按钮作为表单数据提交，只有表单的value值会被提交。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
value	按钮的初始值。

HTML <button> 标签

HTML DOM 参考手册：HTML DOM Button value 属性

HTML <meta> scheme 属性

HTML meta 标签参考手册 HTML <meta> 标签

scheme 属性定义了content 属性中的值的格式，请参考下述示例：

实例

使用 scheme 属性来定义 content 属性的格式：

尝试一下 »

浏览器支持

所有主流浏览器都支持 scheme 属性。

定义和用法

HTML5 不支持 <meta> scheme 属性。

scheme 属性规定用于翻译 content 属性的值的方案（格式或 URI）。

语法

属性值

值	描述
format/URI	定义 content 属性内的值的格式（或指向一个包含信息的 URI）。

HTML <meta> 标签

HTML DOM 参考手册：HTML DOM Meta scheme 属性

HTML <button> disabled 属性

HTML button 标签参考手册 HTML <button> 标签

disabled 属性用来控制HTML文档中的按钮是否可交互，它是boolean类型的值，您可以参考下述的示例：

实例

禁用一个按钮:

尝试一下 »

浏览器支持

所有主流浏览器都支持 disabled 属性

定义和用法

disabled 属性是一个 boolean(布尔) 属性。

如果使用该属性，则会禁用按钮。

被禁用的按钮是无法使用和无法点击的。

HTML 4.01 与 HTML5之间的差异

无。

HTML 与 XHTML之间的差异

在 XHTML 中, 属性不允许简写, disabled 属性必须定义为 <button disabled="disabled">。

语法

HTML <button> 标签

HTML DOM 参考手册：HTML DOM Button disabled 属性

HTML <menu> label 属性

HTML menu 标签参考手册 HTML <menu> 标签

label 属性规定了菜单的可见标签，请参考下述示例：

实例

带有两个菜单按钮（"File" 和 "Edit"）的工具栏，每个按钮都是一个带有一系列选项的下拉菜单：

尝试一下 »

浏览器支持

目前几乎没有主流浏览器支持 label 属性。

定义和用法

label 属性规定了菜单的可见标签。

label 属性通常用于显示菜单内嵌套的菜单标签。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，重定义了 <menu> 元素，且新增了 label 属性。

语法

属性值

值	描述
text	规定菜单的可见标签。

HTML <menu> 标签

HTML <button> form 属性

HTML button 标签参考手册 HTML <button> 标签

form 属性可以规定 <button> 元素属于哪个表单，请参考下述示例：

实例

位于表单之外的提交按钮(但是仍然是表单中的一部分)：

尝试一下 »

浏览器支持

除了Internet Explorer浏览器，其他主流浏览器都支持 form 属性。

定义和用法

form 属性规定按钮属于一个或多个表单。

提示：form 属性的值必须是按钮所属表单<form>的 id。

提示：如需引用一个以上的表单，请使用空格分隔的列表。

HTML 4.01 与 HTML5之间的差异

form 属性是HTML5的新属性。

语法

属性值

值	描述
form_id	按钮所属表单的 id。如需引用一个以上的表单，请使用空格分隔的列表。

HTML <button> 标签

HTML DOM 参考手册：HTML DOM Button form 属性

HTML <menu> type 属性

HTML menu 标签参考手册 HTML <menu> 标签

type 属性用于定义 <menu> 的类型，请参考下述例子，在此例中定义了一个“toolbar”类型的菜单：

实例

带有两个菜单按钮（"File" 和 "Edit"）的工具栏，每个按钮都是一个带有一系列选项的下拉菜单：

尝试一下 »

浏览器支持

目前几乎没有主流浏览器支持 type 属性。

定义和用法

type 属性规定菜单的类型。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，重定义了 <menu> 元素，且新增了 type 属性。

语法

属性值

值	描述
list	默认。规定一个列表菜单。一个用户可执行或激活的命令列表（li 元素）。
context	规定一个上下文菜单。菜单必须在用户与命令进行交互之前被激活。
toolbar	规定一个工具栏菜单。主动式命令，允许用户立即与命令进行交互。

HTML <menu> 标签

HTML <basefont> color 属性

HTML basefont 标签参考手册 HTML <basefont> 标签

color 属性规定HTML页面上文本的默认的颜色，用法如下示例所示：

实例

Specify a default font-color for text on page:

<head>
<basefont color="red" />
</head>

<body>
<h1>这是一个标题。</h1>
<p>这是一个段落。</p>
</body>

尝试一下 »

浏览器支持

只有Internet Explorer 9 及更早IE版本支持 color 属性。

定义和用法

HTML5 不再支持 <basefont> 标签。请使用 CSS 来设置。

<basefont> 的 color 属性在HTML 4.01中已废弃。

color 属性规定文档中文本的默认颜色。

兼容性注释

在 HTML 4.01 中，不赞成使用 basefont 元素的 color 属性；在 XHTML 1.0 Strict DTD 中，不支持 basefont 元素的 color 属性。

CSS 语法(在 <head> 部分): <style>body{color:red}</style>

CSS 实例：为页面规定默认文本颜色

在我们的 CSS 教程中，您可以找到更多有关文本 color 属性的细节。

语法

属性值

值	描述
color_name	规定颜色值为颜色名称的字体颜色（比如 "red"）。
hex_number	规定颜色值为十六进制值的字体颜色（比如 "#ff0000"）。
rgb_number	规定颜色值为 rgb 代码的字体颜色（比如 "rgb(255,0,0)"）。

HTML <basefont> 标签

HTML <map> name 属性

HTML map 标签参考手册 HTML <map> 标签

<map> 标签的 name 属性的值是图像映射使用的名称，请参考下述示例：

实例

带有可点击区域的图像映射：

尝试一下 »

浏览器支持

所有主流浏览器都支持 name 属性。

定义和用法

name 属性是必需的，规定图像映射的名称。

name 属性与 <img> 标签的 usemap 属性相关联，以创建图像与映射之间的关系。

HTML 4.01 与 HTML5之间的差异

无。

语法

属性值

值	描述
mapname	图像映射的名称。

HTML <map> 标签

HTML DOM 参考手册：HTML DOM Map name 属性

HTML <fieldset> disabled 属性

HTML fieldset 标签参考手册 HTML <fieldset> 标签

如果一组表单元素使用了 disabled 属性，则这组表单元素将被禁用，请参考下述的示例：

实例

禁用一组相关的表单元素：

尝试一下 »

浏览器支持

除了 Internet Explorer 和 Safari，其他主流浏览器都支持 disabled 属性。

定义和用法

disabled 属性是一个布尔属性。

disabled 属性规定应该禁用一组表单元素（一个 fieldset）。

被禁用的 fieldset 不可用，也不可点击。

HTML 4.01 与 HTML5之间的差异

disabled 属性是 <fieldset> 标签在 HTML5 中的新属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，禁止属性最小化，disabled 属性必须定义为 <fieldset disabled="disabled">。

语法

HTML <fieldset> 标签

HTML DOM 参考手册：HTML DOM Fieldset disabled 属性

HTML <fieldset> form 属性

HTML fieldset 标签参考手册 HTML <fieldset> 标签

form 属性定义属于 fieldset 的表单，请参考下述示例：

实例

位于 form 表单外的 <fieldset> 元素（但仍然属于 form 表单的一部分）：

尝试一下 »

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

目前，只有 Opera 支持 form 属性。

定义和用法

form 属性规定 fieldset 所属的一个或多个表单。

提示：form 属性的值必须是所属表单的 id。

提示：如需引用一个以上的表单，请使用空格分隔的列表。

HTML 4.01 与 HTML5之间的差异

form 属性是 HTML5 中的新属性。

语法

属性值

值	描述
form_id	规定 fieldset 所属的一个或多个表单 id 的空格分隔列表。

HTML fieldset 标签参考手册 HTML <fieldset> 标签

HTML DOM 参考手册：HTML DOM Fieldset form 属性

HTML <fieldset> name 属性

HTML fieldset 标签参考手册 HTML <fieldset> 标签

name 属性用于定义 fieldset 的名称。

实例

带有 name 属性的 <fieldset>：

尝试一下 »

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

除了 Internet Explorer，其他主流浏览器都支持 name 属性。

定义和用法

name 属性规定 fieldset 的名称。

name 属性用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据。

HTML 4.01 与 HTML5之间的差异

属性是 <fieldset> 标签在 HTML5 中的新属性。

语法

属性值

值	描述
name	规定 fieldset 的名称。

HTML fieldset 标签参考手册 HTML <fieldset> 标签

HTML DOM 参考手册：HTML DOM Fieldset name 属性

实例

使用 <template> 标签在页面加载时该标签中的内容不会显示，加载后可以使用 JavaScript 来显示它：

<button onclick="showContent()">显示隐藏内容</button>

</template>

function showContent() {

var temp = document.getElementsByTagName("template")[0];

var clon = temp.content.cloneNode(true);

document.body.appendChild(clon);

}

</script>

尝试一下 »

浏览器支持

所有主流浏览器都支持 <template> 标签。

标签定义及使用说明

<template> 标签定义在页面加载时隐藏的一些内容，该标签中的内容可以稍后使用 JavaScript 呈现。

如果您有一些需要重复使用的 HTML 代码，则可以使用 <template> 设置为公用的模板。

实例

实例中的每个数组元素都使用一个新的 div 元素来填充网页。每个 div 元素的 HTML 代码都在 template 元素内：：

</template>

var myArr = ["Google", "W3cschool", "Taobao", "Wiki", "Zhihu", "Baidu"];

function showContent() {

var temp, item, a, i;

temp = document.getElementsByTagName("template")[0];

item = temp.content.querySelector("div");

for (i = 0; i < myArr.length; i++) {

a = document.importNode(item, true);

a.textContent += myArr[i];

document.body.appendChild(a);

}

</script>

尝试一下 »

实例

查看浏览器是否支持 template 标签：

if (document.createElement("template").content) {

document.write("您的浏览器支持 template 标签！");

} else {

document.write("您的浏览器不支持 template 标签！");

}

尝试一下 »

全局属性

<time> 标签支持 HTML 的全局属性。

<tt> 标签用来改变字体样式，使标签中的文本显示为打字机文本，请参考下述例子：

实例

定义打字机文本：

<p><tt>Teletype text</tt></p>

尝试一下 »

浏览器支持

所有主流浏览器都支持 <tt> 标签。

标签定义及使用说明

HTML5 不支持 <tt> 标签。请用 CSS 代替。

<tt> 标签定义打字机文本。

提示和注释

提示：请使用 CSS 来规定文档中的文本类型。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 <tt> 标签。HTML 4.01 支持 <tt> 标签。

标准属性

在 HTML 4.01 中，<tt> 标签支持如下标准属性：

属性	值	描述
class	classname	规定元素的类名
dir	rtl ltr	规定元素中内容的文本方向
id	id	规定元素的唯一 id
lang	language_code	规定元素中内容的语言代码
style	style_definition	规定元素的行内样式
title	text	规定元素的额外信息
xml:lang	language_code	规定 XHTML 文档元素中内容的语言代码

如需完整的描述，请访问标准属性。

事件属性

在 HTML 4.01 中，<tt> 标签支持如下事件属性：

属性	值	描述
onclick	script	当鼠标被单击时执行脚本
ondblclick	script	当鼠标被双击时执行脚本
onmousedown	script	当鼠标按钮被按下时执行脚本
onmousemove	script	当鼠标指针移动时执行脚本
onmouseout	script	当鼠标指针移出某元素时执行脚本
onmouseover	script	当鼠标指针悬停于某元素之上时执行脚本
onmouseup	script	当鼠标按钮被松开时执行脚本
onkeydown	script	当键盘被按下时执行脚本
onkeypress	script	当键盘被按下后又松开时执行脚本
onkeyup	script	当键盘被松开时执行脚本

如需完整的描述，请访问事件属性。

HTML <thead> valign 属性

HTML thead 标签参考手册 HTML <thead> 标签

实例

把 <thead> 元素中的内容垂直居中对齐：

<table border="1"width="100%">
<thead valign="middle">
  <tr>
    <th>Month</th>
      <th>Savings</th>
  </tr>
</thead>
    <tr>
      <td>January</td>
    <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
  </tr>
</table>

尝试一下 »

浏览器支持

所有主流浏览器都支持 valign 属性。

定义和用法

HTML5 不支持 <thead> valign 属性。请使用 CSS 代替。

valign 属性规定 <thead> 元素中的内容的垂直对齐方式。

语法

属性值

值	描述
top	对内容进行上对齐。
middle	对内容进行居中对齐（默认值）。
bottom	对内容进行下对齐。
baseline	与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。请看下面的图示。

当文本的字号不同时，bottom vs. baseline 图示：

valign="bottom"

valign="baseline"

HTML <thead> 标签

HTML <th> valign 属性

HTML th 标签参考手册 HTML <th> 标签

实例

带有不同垂直对齐表头单元格的 HTML 表格：

<table border="1"style="height:200px">
<tr>
    <th valign="middle">Month</th>
    <th valign="bottom">Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
</table>

尝试一下 »

浏览器支持

所有主流浏览器都支持 valign 属性。

定义和用法

HTML5 不支持 <th> valign 属性。请使用 CSS 代替。

valign 属性规定表头单元格中的内容的垂直对齐方式。

语法

属性值

值	描述
top	对内容进行上对齐。
middle	对内容进行居中对齐（默认值）。
bottom	对内容进行下对齐。
baseline	与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。请看下面的图示。

当文本的字号不同时，bottom vs. baseline 图示：

valign="bottom"

valign="baseline"

HTML <th> 标签

HTML <tfoot> valign 属性

HTML tfoot 标签参考手册 HTML <tfoot> 标签

实例

把 <tfoot> 元素中的内容垂直对齐到底部：

<table border="1" width="100%">
<tr>
    <th>Month</th>
      <th>Savings</th>
</tr>
    <tr>
      <td>January</td>
    <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
</tr>
<tfoot valign="bottom">
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
</tfoot>
</table>

尝试一下 »

浏览器支持

所有主流浏览器都支持 valign 属性。

定义和用法

HTML5 不支持 <tfoot> valign 属性。请使用 CSS 代替。

valign 属性规定 <tfoot> 元素中的内容的垂直对齐方式。

语法

属性值

值	描述
top	对内容进行上对齐。
middle	对内容进行居中对齐（默认值）。
bottom	对内容进行下对齐。
baseline	与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。请看下面的图示。

当文本的字号不同时，bottom vs. baseline 图示：

valign="bottom"

valign="baseline"

HTML <tfoot> 标签

HTML 颜色混搭

混搭两种颜色，并查看效果：

选择颜色：

#FF66CC

#FFFF66

顶部颜色:

	#FF66CC
	#FF6DC6
	#FF75C1
	#FF7CBC
	#FF84B7
	#FF8CB2
	#FF93AD
	#FF9BA8
	#FFA3A3
	#FFAA9E
	#FFB299
	#FFBA93
	#FFC18E
	#FFC989
	#FFD184
	#FFD87F
	#FFE07A
	#FFE875
	#FFEF70
	#FFF76B
	#FFFF66

底部颜色:

HTML <td> valign 属性

HTML td 标签参考手册 HTML <td> 标签

实例

带有不同垂直对齐单元格的 HTML 表格：

<table border="1" style="height:200px">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td valign="top">January</td>
<td valign="top">$100</td>
</tr>
<tr>
<td valign="bottom">February</td>
<td valign="bottom">$80</td>
</tr>
</table>

尝试一下 »

浏览器支持

所有主流浏览器都支持 valign 属性。

定义和用法

HTML5 不支持 <td> valign 属性。请使用 CSS 代替。

valign 属性规定单元格中的内容的垂直对齐方式。

语法

属性值

值	描述
top	对内容进行上对齐。
middle	对内容进行居中对齐（默认值）。
bottom	对内容进行下对齐。
baseline	与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。请看下面的图示。

当文本的字号不同时，bottom vs. baseline 图示：

valign="bottom"

valign="baseline"

HTML <td> 标签

HTML canvas bezierCurveTo() 方法

HTML canvas 参考手册

实例

绘制一条三次贝塞尔曲线：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 bezierCurveTo() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。

三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

开始点：

moveTo(20,20)

控制点 1：

bezierCurveTo(20,100,200,100,200,20)

控制点 2：

bezierCurveTo(20,100,200,100,200,20)

结束点：

bezierCurveTo(20,100,200,100,200,20)

提示：请查看 quadraticCurveTo() 方法。它有一个控制点，而不是两个。

JavaScript 语法：	context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

参数值

参数	描述
cp1x	第一个贝塞尔控制点的 x 坐标。
cp1y	第一个贝塞尔控制点的 y 坐标。
cp2x	第二个贝塞尔控制点的 x 坐标。
cp2y	第二个贝塞尔控制点的 y 坐标。
x	结束点的 x 坐标。
y	结束点的 y 坐标。

HTML canvas 参考手册

HTML canvas quadraticCurveTo() 方法

HTML canvas 参考手册

实例

绘制一条二次贝塞尔曲线：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 quadraticCurveTo() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。

二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

开始点：

moveTo(20,20)

控制点：

quadraticCurveTo(20,100,200,20)

结束点：

quadraticCurveTo(20,100,200,20)

提示：请查看 bezierCurveTo() 方法。它有两个控制点，而不是一个。

JavaScript 语法：	context.quadraticCurveTo(cpx,cpy,x,y);

参数值

参数	描述
cpx	贝塞尔控制点的 x 坐标。
cpy	贝塞尔控制点的 y 坐标。
x	结束点的 x 坐标。
y	结束点的 y 坐标。

HTML canvas 参考手册

HTML canvas translate() 方法

HTML canvas 参考手册

实例

在位置 (10,10) 处绘制一个矩形，将新的 (0,0) 位置设置为 (70,70)。再次绘制新的矩形（请注意现在矩形从位置 (80,80) 开始绘制）：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 translate()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

translate() 方法重新映射画布上的 (0,0) 位置。

注意：当您在 translate() 之后调用诸如 fillRect() 之类的方法时，值会添加到 x 和 y 坐标值上。

JavaScript 语法：	context.translate(x,y);

参数值

注意： You can specify one or both parameters.

参数	描述
x	添加到水平坐标（x）上的值。
y	添加到垂直坐标（y）上的值。

HTML canvas 参考手册

HTML canvas miterLimit 属性

HTML canvas 参考手册

实例

以最大斜接长度 5 绘制线条：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 miterLimit 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

miterLimit 属性设置或返回最大斜接长度。

斜接长度指的是在两条线交汇处内角和外角之间的距离。

提示：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

边角的角度越小，斜接长度就会越大。

为了避免斜接长度过长，我们可以使用 miterLimit 属性。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示（Fig 3）：

默认值：	10
JavaScript 语法：	context.miterLimit=number;

属性值

值	描述
number	正数。规定最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

HTML canvas 参考手册

HTML canvas textBaseline 属性

HTML canvas 参考手册

实例

在 y=100 处绘制一条红线，然后在 y=100 处用不同的 textBaseline 值放置每个单词：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();

ctx.font="20px Arial"

//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 textBaseline 属性。

注意：textBaseline 属性在不同的浏览器上效果不同，特别是使用 "hanging" 或 "ideographic" 时。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

textBaseline 属性设置或返回在绘制文本时的当前文本基线。

下面的图示演示了 textBaseline 属性支持的各种基线：

注意：fillText() 和strokeText() 方法在画布上定位文本时，将使用指定的 textBaseline 值。

默认值：	alphabetic
JavaScript 语法：	context.textBaseline="alphabetic\|top\|hanging\|middle\|ideographic\|bottom";

属性值

值	描述
alphabetic	默认。文本基线是普通的字母基线。
top	文本基线是 em 方框的顶端。
hanging	文本基线是悬挂基线。
middle	文本基线是 em 方框的正中。
ideographic	文本基线是表意基线。
bottom	文本基线是 em 方框的底端。

HTML canvas 参考手册

HTML canvas fillStyle 属性

HTML canvas 参考手册

实例1 - 定义用红色填充的矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 fillStyle 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

默认值：	#000000
JavaScript 语法：	context.fillStyle=color\|gradient\|pattern;

属性值

值	描述
color	指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性或放射性）。
pattern	用于填充绘图的 pattern 对象。

实例2 -定义从上到下的渐变

定义从上到下的渐变，作为矩形的填充样式：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

尝试一下 »

实例3 -定义从左到右的渐变

定义从左到右的渐变，作为矩形的填充样式：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

尝试一下 »

实例4 -定义从黑到红再到白的渐变

定义从黑到红再到白的渐变，作为矩形的填充样式：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

尝试一下 »

实例5 -使用图像填充绘图

用到的图像： Lamp
url为：/data/tutorial_course_content_image//72/2e929b7c-ddc1-5175-83e6-4e21c1550453.jpg

使用图像来填充绘图：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

尝试一下 »

HTML canvas 参考手册

HTML canvas strokeStyle 属性

HTML canvas 参考手册

实例1-绘制一个矩形

绘制一个矩形。请用红色的笔触颜色：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 strokeStyle 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

默认值：	#000000
JavaScript 语法：	context.strokeStyle=color\|gradient\|pattern;

属性值

值	描述
color	指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性或放射性）。
pattern	用于创建 pattern 笔触的 pattern 对象。

实例2 - 绘制一个矩形

绘制一个矩形。使用渐变笔触：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// Fill with gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

尝试一下 »

实例3 - 使用渐变笔触

用一个渐变笔触来写文本 "Big smile!"：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

尝试一下 »

HTML canvas 参考手册

HTML canvas getImageData() 方法

HTML canvas 参考手册

实例

下面的代码通过 getImageData() 复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回画布：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

尝试一下 »

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 getImageData() 方法。

注意： nternet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

注意：ImageData 对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素的信息。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）

color/alpha 信息以数组形式存在，并存储于 ImageData 对象的 data 属性中。

提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。

实例：

以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息：

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

尝试一下

提示：您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。

使用该公式遍历所有的像素，并改变其颜色值：

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

请看下面的"尝试一下"实例！

JavaScript 语法

JavaScript 语法：	context.getImageData(x,y,width,height);

参数值

参数	描述
x	开始复制的左上角位置的 x 坐标（以像素计）。
y	开始复制的左上角位置的 y 坐标（以像素计）。
width	要复制的矩形区域的宽度。
height	要复制的矩形区域的高度。

要使用的图像：

The Scream

实例

使用 getImageData() 来反转画布上的图像的每个像素的颜色：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invert colors
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);

尝试一下 »

HTML canvas 参考手册

实例

创建 100*100 像素的 ImageData 对象，其中每个像素都是红色的，然后把它放到画布上：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);

尝试一下 »

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 createImageData() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）

因此，transparent black 表示 (0,0,0,0)。

color/alpha 信息以数组形式存在，并且由于数组包含了每个像素的四条信息，所以数组的大小是 ImageData 对象的四倍：width*height*4。（获得数组大小有更简单的办法，就是使用 ImageDataObject.data.length）

包含 color/alpha 信息的数组存储于 ImageData 对象的 data 属性中。

提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。

实例：

把 ImageData 对象中的第一个像素变为红色的语法：

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

把 ImageData 对象中的第二个像素变为绿色的语法：

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

JavaScript 语法

有两个版本的 createImageData() 方法：

1. 以指定的尺寸（以像素计）创建新的 ImageData 对象：

JavaScript 语法：	var imgData=context.createImageData(width,height);

2. 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）：

JavaScript 语法：	var imgData=context.createImageData(imageData);

参数值

参数	描述
width	ImageData 对象的宽度，以像素计。
height	ImageData 对象的高度，以像素计。
imageData	另一个 ImageData 对象。

HTML canvas 参考手册

实例

创建 100*100 像素的 ImageData 对象，其中每个像素均被设置为红色：

画布

JavaScript：

尝试一下 »

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 ImageData data 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

data 属性返回一个对象，该对象包含指定的 ImageData 对象的图像数据。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色（0-255）

G - 绿色（0-255）

B - 蓝色（0-255）

A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）

color/alpha 信息以数组形式存在，并存储于 ImageData 对象的 data 属性中。

实例：

把 ImageData 对象中的第一个像素变为红色的语法：

imgData=ctx.createImageData(100,100);imgData.data[0]=255;imgData.data[1]=0;imgData.data[2]=0;imgData.data[3]=255;

把 ImageData 对象中的第二个像素变为绿色的语法：

imgData=ctx.createImageData(100,100);imgData.data[4]=0;imgData.data[5]=255;imgData.data[6]=0;imgData.data[7]=255;

JavaScript 语法

JavaScript 语法：	imageData.data;

HTML canvas 参考手册

实例

使用不同的 globalCompositeOperation 值绘制矩形。红色矩形是目标图像，蓝色矩形是源图像：

source-over

destination-over

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);

ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);

尝试一下 »

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 globalCompositeOperation 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

默认值：	source-over
JavaScript 语法：	context.globalCompositeOperation="source-in";

属性值

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

实例

所有 globalCompositeOperation 属性值：

尝试一下 »

HTML canvas 参考手册

HTML canvas globalAlpha 属性

HTML canvas 参考手册

实例

首先，绘制一个红色的矩形，然后将透明度 (globalAlpha) 设置为 0.5，然后再绘制一个蓝色和一个绿色的矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// Turn transparency on
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 globalAlpha 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

globalAlpha 属性设置或返回绘图的当前透明值（alpha 或 transparency）。

globalAlpha 属性值必须是介于 0.0（完全透明）与 1.0（不透明）之间的数字。

默认值：	1.0
JavaScript 语法：	context.globalAlpha=number;

属性值

值	描述
number	透明值。必须介于 0.0（完全透明）与 1.0（不透明）之间。

HTML canvas 参考手册

HTML canvas lineTo() 方法

HTML canvas 参考手册

实例

开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineTo()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

JavaScript 语法：	context.lineTo(x,y);

参数值

参数	描述
x	路径的目标位置的 x 坐标。
y	路径的目标位置的 y 坐标。

实例

绘制一条路径，形状是字母 L：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();

尝试一下 »

HTML canvas 参考手册

HTML canvas closePath() 方法

HTML canvas 参考手册

实例

绘制一条路径，形式是字母 L，然后绘制线条以返回开始点：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 closePath()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

closePath() 方法创建从当前点到开始点的路径。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

提示：请使用 fill() 方法来填充图像（默认是黑色）。请使用 fillStyle属性来填充另一个颜色/渐变。

JavaScript 语法：	context.closePath();

实例

把红色作为填充颜色：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="red";
ctx.fill();

尝试一下 »

HTML canvas 参考手册

HTML canvas moveTo() 方法

HTML canvas 参考手册

实例

开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 moveTo() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

moveTo() 方法把路径移动到画布中的指定点，不创建线条。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

JavaScript 语法：	context.moveTo(x,y);

参数值

参数	描述
x	路径的目标位置的 x 坐标。
y	路径的目标位置的 y 坐标。

HTML canvas 参考手册

HTML canvas textAlign 属性

HTML canvas 参考手册

实例

在位置 150 创建一条红线。位置 150 是下面实例中定义的所有文本的锚点。请研究每种 textAlign 属性值的效果：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();

ctx.font="15px Arial";

// Show the different textAlign values
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 textAlign属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

textAlign 属性根据锚点，设置或返回文本内容的当前对齐方式。

通常，文本会从指定位置开始，不过，如果您设置为 textAlign="right" 并将文本放置到位置 150，那么会在位置 150 结束。

提示：请使用 fillText() 或strokeText() 方法在画布上实际地绘制并定位文本。

默认值：	start
JavaScript 语法：	context.textAlign="center\|end\|left\|right\|start";

属性值

值	描述
start	默认。文本在指定的位置开始。
end	文本在指定的位置结束。
center	文本的中心被放置在指定的位置。
left	文本在指定的位置开始。
right	文本在指定的位置结束。

HTML canvas 参考手册

HTML canvas font 属性

HTML canvas 参考手册

实例

在画布上写一段 30 像素的文本，使用的字体是 "Arial"：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 font属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

font 属性设置或返回画布上文本内容的当前字体属性。

font 属性使用的语法与 CSS font 属性相同。

默认值：	10px sans-serif
JavaScript 语法：	context.font="italic small-caps bold 12px arial";

属性值

值	描述
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	使用用于窗口状态栏中的字体。

HTML canvas 参考手册

HTML canvas scale() 方法

HTML canvas 参考手册

实例

绘制矩形，放大到 200%，然后再次绘制矩形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 scale()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

scale() 方法缩放当前绘图至更大或更小。

注意：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。

JavaScript 语法：	context.scale(scalewidth,scaleheight);

参数值

参数	描述
scalewidth	缩放当前绘图的宽度（1=100%，0.5=50%，2=200%，依次类推）。
scaleheight	缩放当前绘图的高度（1=100%，0.5=50%，2=200%，依次类推）。

实例

绘制一个矩形；放大到 200%，再次绘制矩形；放大到 200%，再次绘制矩形；放大到 200%，再次绘制矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

尝试一下 »

HTML canvas 参考手册

HTML canvas isPointInPath() 方法

HTML canvas 参考手册

实例

如果点 20,50 位于当前路径中，则绘制一个矩形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
   {
   ctx.stroke();
   };

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 isPointInPath()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

如果指定的点位于当前路径中，isPointInPath() 方法返回 true，否则返回 false。

JavaScript 语法：	context.isPointInPath(x,y);

参数值

参数	描述
x	要测试的 x 坐标。
y	要测试的 y 坐标。

HTML canvas 参考手册

HTML canvas rect() 方法

HTML canvas 参考手册

实例

绘制 150*100 像素的矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 rect()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

rect() 方法创建矩形。

提示：请使用 stroke() 或fill() 方法在画布上实际地绘制矩形。

JavaScript 语法：	context.rect(x,y,width,height);

参数值

参数	描述
x	矩形左上角的 x 坐标。
y	矩形左上角的 y 坐标。
width	矩形的宽度，以像素计。
height	矩形的高度，以像素计。

实例

通过 rect() 方法来创建三个矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Red rectangle
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();

// Green rectangle
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();

// Blue rectangle
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();

尝试一下 »

HTML canvas 参考手册

HTML canvas fillRect() 方法

HTML canvas 参考手册

实例

绘制 150*100 像素的已填充矩形：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 fillRect() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

fillRect() 方法绘制"已填充"的矩形。默认的填充颜色是黑色。

提示：请使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

JavaScript 语法：	context.fillRect(x,y,width,height);

参数值

参数	描述
x	矩形左上角的 x 坐标。
y	矩形左上角的 y 坐标。
width	矩形的宽度，以像素计。
height	矩形的高度，以像素计。

HTML canvas 参考手册

HTML canvas strokeRect() 方法

HTML canvas 参考手册

实例

绘制 150*100 像素的矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 strokeRect() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

strokeRect() 方法绘制矩形（无填充）。笔触的默认颜色是黑色。

提示：请使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。

JavaScript 语法：	context.strokeRect(x,y,width,height);

参数值

参数	描述
x	矩形左上角的 x 坐标。
y	矩形左上角的 y 坐标。
width	矩形的宽度，以像素计。
height	矩形的高度，以像素计。

HTML canvas 参考手册

HTML canvas clearRect() 方法

HTML canvas 参考手册

实例

在给定矩形内清空一个矩形

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 clearRect() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

clearRect() 方法清空给定矩形内的指定像素。

JavaScript 语法：	context.clearRect(x,y,width,height);

参数值

参数	描述
x	要清除的矩形左上角的 x 坐标。
y	要清除的矩形左上角的 y 坐标。
width	要清除的矩形的宽度，以像素计。
height	要清除的矩形的高度，以像素计。

HTML canvas 参考手册

HTML canvas lineCap 属性

HTML canvas 参考手册

实例

绘制圆形的结束线帽：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();

尝试一下 »

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineCap 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

lineCap 属性设置或返回线条末端线帽的样式。

注意："round" 和 "square" 值会使线条略微变长。

默认值：	butt
JavaScript 语法：	context.lineCap="butt\|round\|square";

属性值

值	描述
butt	默认。向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽。
square	向线条的每个末端添加正方形线帽。

HTML canvas 参考手册

HTML 参考手册- (HTML5 标准)

功能排序

HTML5 <canvas> 参考手册

描述

浏览器支持

颜色、样式和阴影

线条样式

矩形

路径

转换

文本

图像绘制

像素操作

合成

其他

HTML 音频/视频 DOM 参考手册

HTML 音频/视频 方法

HTML 音频/视频属性

HTML 音频/视频事件

Perl IF...ELSIF 语句

语法

实例

连接到 SSDB 服务器

对于 Windows 用户:

转义响应中的中文和二进制数据

监控 SSDB 实例的状态

info

Level Files Size(MB) Time(sec) Read(MB) Write(MB)

info cmd

compact

SSDB 图形界面工具

HTTP 方法：GET 对比 POST

什么是 HTTP ？

两种 HTTP 请求方法：GET 和 POST

GET 方法

POST 方法

比较 GET 与 POST

其他 HTTP 请求方法

Px、Em 换算工具

文本字体大小

相关文章

PX

EM

REM

px 与 rem 的选择？

键盘快捷键

Windows 和 Mac 的键盘快捷键

基本的快捷键

文本编辑

Web 浏览器

屏幕截图

HTML 参考手册- (HTML5 标准)

按字母顺序排列

HTML 参考手册- (HTML5 标准)

功能排序

HTML 全局属性

HTML 事件属性

全局事件属性

窗口事件属性（Window Event Attributes）

表单事件(Form Events)

键盘事件（Keyboard Events）

鼠标事件（Mouse Events）

多媒体事件(Media Events)

其他事件

HTML5 <canvas> 参考手册

描述

浏览器支持

颜色、样式和阴影

线条样式

矩形

路径

转换

文本

图像绘制

像素操作

合成

其他

HTML 音频/视频 DOM 参考手册

HTML 音频/视频 方法

HTML 音频/视频属性

HTML 音频/视频方法

`Level Files Size(MB) Time(sec) Read(MB) Write(MB)`

HTML 音频/视频方法

HTML URL 编码参考手册

HTML 语言代码参考手册