html相关笔记
首先是html速查手册，其实一些html基础使用时再查寻；
http://www.w3school.com.cn/html/html_quick.asp
HTML高级部分
HTML <!DOCTYPE>
常用的声明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 头部元素
HTML <head> 元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <base> 元素
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head>
HTML <meta> 元素
元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定义页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 属性的作用是描述页面的内容;
HTML 脚本
<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容;
如何应付老式的浏览器
如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。
HTML 字符实体
HTML 中的预留字符必须被替换为字符实体。
HTML 实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体类似这样：
&entity_name; 或者 &#entity_number;
如需显示小于号，我们必须这样写：< 或 <
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
不间断空格（non-breaking space）
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
HTML 中有用的字符实体
注释：实体名称对大小写敏感！
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日圆 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
URL 编码会将字符转换为可通过因特网传输的格式。
URL 编码示例
| 字符 | URL 编码 |
|---|---|
| € | %80 |
| £ | %A3 |
| © | %A9 |
| ® | %AE |
| À | %C0 |
| Á | %C1 |
| Â | %C2 |
| Ã | %C3 |
| Ä | %C4 |
| Å | %C5 |
HTML 多媒体
Web 上的多媒体指的是音效、音乐、视频和动画。
现代网络浏览器已支持很多多媒体格式。
<object> 的作用是支持 HTML 助手（插件）。
HTML 助手（插件）
辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。
辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。
使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。
大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。
实例
<object width="420" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="bird.wav" /> <param name="controller" value="true" /> </object>使用 QuickTime 来播放 MP4 视频
实例
<object width="420" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="movie.mp4" /> <param name="controller" value="true" /> </object>
HTML 音频
使用插件
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。
插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。
可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。
这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。
使用 <embed> 元素
<embed> 标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。
下面的代码片段能够显示嵌入网页中的 MP3 文件：
实例
<embed height="100" width="100" src="song.mp3" />
使用 <object> 元素
<object tag> 标签也可以定义外部（非 HTML）内容的容器。
下面的代码片段能够显示嵌入网页中的 MP3 文件：
实例
<object height="100" width="100" data="song.mp3"></object>
使用 HTML5 <audio> 元素
<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。
最好的 HTML 解决方法
实例
<audio controls="controls" height="100" width="100"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> <embed height="100" width="100" src="song.mp3" /> </audio>
XHTML 简介
文档结构
- XHTML DOCTYPE 是强制性的
- <html> 中的 XML namespace 属性是强制性的
- <html>、<head>、<title> 以及 <body> 也是强制性的
元素语法
- XHTML 元素必须正确嵌套
- XHTML 元素必须始终关闭
- XHTML 元素必须小写
- XHTML 文档必须有一个根元素
属性语法
- XHTML 属性必须使用小写
- XHTML 属性值必须用引号包围
- XHTML 属性最小化也是禁止的
下面的例子展示了带有最少的必需标签的 XHTML 文档：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> </head> <body> ...... </body> </html>
如何从 HTML 转换到 XHTML
- 向每张页面的第一行添加 XHTML <!DOCTYPE>
- 向每张页面的 html 元素添加 xmlns 属性
- 把所有元素名改为小写
- 关闭所有空元素
- 把所有属性名改为小写
- 为所有属性值加引号
用 id 属性代替 name 属性
HTML 4.01 针对下列元素定义 name 属性：a, applet, frame, iframe, img, 和map。
在 XHTML 中不鼓励使用 name 属性，应该使用 id 取而代之。
下面是一个 HTML 的简写属性列表，以及在 XHTML 中的改写：
| HTML | XHTML |
|---|---|
| compact | compact="compact" |
| checked | checked="checked" |
| declare | declare="declare" |
| readonly | readonly="readonly" |
| disabled | disabled="disabled" |
| selected | selected="selected" |
| defer | defer="defer" |
| ismap | ismap="ismap" |
| nohref | nohref="nohref" |
| noshade | noshade="noshade" |
| nowrap | nowrap="nowrap" |
| multiple | multiple="multiple" |
| noresize | noresize="noresize" |
重要的兼容性提示：
你应该在 "/" 符号前添加一个额外的空格，以使你的 XHTML 与当今的浏览器相兼容。
语言属性（lang）
lang 属性应用于几乎所有的 XHTML 元素。它定义元素内部的内容的所用语言的类型。
如果在某元素中使用 lang 属性，就必须添加额外的 xml:lang，像这样：
<div lang="no" xml:lang="no">Heia Norge!</div>
XHTML 定义了三种文件类型声明。
使用最普遍的是 XHTML Transitional。
<!DOCTYPE> 是强制使用的。
一个 XHTML 文档有三个主要的部分：
- DOCTYPE
- Head
- Body
基本的文档结构是这样的：
<!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html>
在 XHTML 文档中，文档类型声明总是位于首行。
存在三种XHTML文档类型：
- STRICT（严格类型）
- TRANSITIONAL（过渡类型）
- FRAMESET（框架类型）
XHTML 1.0 的三种 XML 文档类型
XHTML 1.0 规定了三种 XML 文档类型，以对应上述三种 DTD。
XHTML 1.0 Strict
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在此情况下使用：需要干净的标记，避免表现上的混乱。请与层叠样式表配合使用。
XHTML 1.0 Transitional
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在此情况下使用：当需要利用 HTML 在表现上的特性时，并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。
XHTML 1.0 Frameset
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
在此的情况下使用：需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。
XHTML 标准属性
核心属性 (Core Attributes)
以下标签不提供下面的属性：base, head, html, meta, param, script, style, 以及 title 元素。
| 属性 | 值 | 描述 |
|---|---|---|
| class | class_rule 或 style_rule | 元素的类(class) |
| id | id_name | 元素的某个特定id |
| style | 样式定义 | 内联样式定义 |
| title | 提示文本 | 显示于提示工具中的文本 |
语言属性 (Language Attributes)
以下标签不提供下面的属性：base, br, frame, frameset, hr, iframe, param, 以及 script 元素。
| 属性 | 值 | 描述 |
|---|---|---|
| dir | ltr | rtl | 设置文本的方向 |
| lang | 语言代码 | 设置语言代码 |
键盘属性 (Keyboard Attributes)
| 属性 | 值 | 描述 |
|---|---|---|
| accesskey | 字符 | 设置访问某元素的键盘快捷键 |
| tabindex | 数 | 设置某元素的Tab次序 |
XHTML 事件属性
窗口事件 (Window Events)
表单元素事件 (Form Element Events)
键盘事件 (Keyboard Events)
鼠标事件 (Mouse Events)
HTML 字符集
如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。
万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。
由于很多国家使用的字符并不属于 ASCII，现代浏览器的默认字符集是 ISO-8859-1。
如果网页使用不同于 ISO-8859-1 的字符集，就应该在 <meta> 标签进行指定。
ISO 字符集
ISO 字符集是国际标准组织 (ISO) 针对不同的字母表/语言定义的标准字符集。
Unicode 标准
由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。
Unicode 标准涵盖了世界上的所有字符、标点和符号。
不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。
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 4.01 符号实体
http://www.w3school.com.cn/tags/html_ref_symbols.html
HTML URL 编码
http://www.w3school.com.cn/tags/html_ref_urlencode.html
HTTP 状态消息
1xx: 信息
| 消息: | 描述: |
|---|---|
| 100 Continue | 服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。 |
| 101 Switching Protocols | 服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。 |
2xx: 成功
| 消息: | 描述: |
|---|---|
| 200 OK | 请求成功（其后是对GET和POST请求的应答文档。） |
| 201 Created | 请求被创建完成，同时新的资源被创建。 |
| 202 Accepted | 供处理的请求已被接受，但是处理未完成。 |
| 203 Non-authoritative Information | 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。 |
| 204 No Content | 没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。 |
| 205 Reset Content | 没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。 |
| 206 Partial Content | 客户发送了一个带有Range头的GET请求，服务器完成了它。 |
3xx: 重定向
| 消息: | 描述: |
|---|---|
| 300 Multiple Choices | 多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。 |
| 301 Moved Permanently | 所请求的页面已经转移至新的url。 |
| 302 Found | 所请求的页面已经临时转移至新的url。 |
| 303 See Other | 所请求的页面可在别的url下被找到。 |
| 304 Not Modified | 未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。 |
| 305 Use Proxy | 客户请求的文档应该通过Location头所指明的代理服务器提取。 |
| 306 Unused | 此代码被用于前一版本。目前已不再使用，但是代码依然被保留。 |
| 307 Temporary Redirect | 被请求的页面已经临时移至新的url。 |
4xx: 客户端错误
| 消息: | 描述: |
|---|---|
| 400 Bad Request | 服务器未能理解请求。 |
| 401 Unauthorized | 被请求的页面需要用户名和密码。 |
| 402 Payment Required | 此代码尚无法使用。 |
| 403 Forbidden | 对被请求页面的访问被禁止。 |
| 404 Not Found | 服务器无法找到被请求的页面。 |
| 405 Method Not Allowed | 请求中指定的方法不被允许。 |
| 406 Not Acceptable | 服务器生成的响应无法被客户端所接受。 |
| 407 Proxy Authentication Required | 用户必须首先使用代理服务器进行验证，这样请求才会被处理。 |
| 408 Request Timeout | 请求超出了服务器的等待时间。 |
| 409 Conflict | 由于冲突，请求无法被完成。 |
| 410 Gone | 被请求的页面不可用。 |
| 411 Length Required | "Content-Length" 未被定义。如果无此内容，服务器不会接受请求。 |
| 412 Precondition Failed | 请求中的前提条件被服务器评估为失败。 |
| 413 Request Entity Too Large | 由于所请求的实体的太大，服务器不会接受请求。 |
| 414 Request-url Too Long | 由于url太长，服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时，就会发生这种情况。 |
| 415 Unsupported Media Type | 由于媒介类型不被支持，服务器不会接受请求。 |
| 416 | 服务器不能满足客户在请求中指定的Range头。 |
| 417 Expectation Failed |
5xx: 服务器错误
| 消息: | 描述: |
|---|---|
| 500 Internal Server Error | 请求未完成。服务器遇到不可预知的情况。 |
| 501 Not Implemented | 请求未完成。服务器不支持所请求的功能。 |
| 502 Bad Gateway | 请求未完成。服务器从上游服务器收到一个无效的响应。 |
| 503 Service Unavailable | 请求未完成。服务器临时过载或当机。 |
| 504 Gateway Timeout | 网关超时。 |
| 505 HTTP Version Not Supported | 服务器不支持请求中指明的HTTP协议版本。 |
两种最常用的 HTTP 方法是：GET 和 POST。
GET 方法
请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：
/test/demo_form.asp?name1=value1&name2=value2
有关 GET 请求的其他一些注释：
- GET 请求可被缓存
- GET 请求保留在浏览器历史记录中
- GET 请求可被收藏为书签
- GET 请求不应在处理敏感数据时使用
- GET 请求有长度限制
- GET 请求只应当用于取回数据
POST 方法
请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：
POST /test/demo_form.asp HTTP/1.1 Host: w3schools.com 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 或 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 通道。 |
浙公网安备 33010602011771号