HTML学习总结

弄懂HTML，XHTML，HTML5，XML之间的区别

XHTML 是在 HTML 的基础上向 XML 过渡的东西，和 HTML 最大的区别就在于它更严谨而且语义化更强

比如 XHTML 规定所有标记都必须小写，因为 XML 需要区分大小写，而 HTML 不这么要求；XHTML 要求标签必须闭合，不允许开放标签存在比如“<P>第一段</P>第二段”这样的写法在 XHTML 里是错误的，但是 HTML 允许它的存在）而HTML5的出现及，导致XHTML2.0已成为历史。

HTML4.01 的声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5的声明：
<!DOCTYPE html>
XHTML1.0的声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5 是最新的 HTML 标准，他的主要目标是提供所有内容而不需要任何的像 flash， silverlight 等的额外插件，这些内容来自动画，视频，富 GUI 等。他的上一个版本是HTML4.0.1

最直观的就是XML语法要求更为严格,一般用来存放数据，进行序列化和反序列化操作。

基础标签标签手册

标题 - <h1> - <h6>

段落 - <p>

链接 - <a href="url" target="_blank"> 新窗口打开</a>
- 还可以使用a标签的id和name写锚点名，href的value值"#锚点名"进行跳转
图像 - <img src="url" alt=""/>

表格 - table，tr，td

列表 - ul > li (无号) ol > li (有序) dl > dt - dd (自定义列表)

块 - div

文本 - span

隔离页 - <iframe src="URL" frameborder="0"></iframe> 无边框

框架 -
<frameset cols="25%,75%">
  <frame src="page1.htm">
  <frame src="page2.htm">
</frameset>
表单 -
<form action="http://www.example.com/test.asp" method="post/get">
 <input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
 <input type="password">
 <input type="checkbox" checked="checked">
 <input type="radio" checked="checked">
 <input type="submit">
 <input type="reset">
 <input type="hidden">
 <input type="button">
 <select>
  <option>Apples
  <option selected>Bananas
  <option>Cherries
 </select>
 <textarea name="Comment" rows="60"cols="20"></textarea>
</form>
HTML5 输入类型

HTML5 增加了多个新的输入类型：

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

HTML5 属性

HTML5 为 <input> 增加了如下属性：

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height 和 width

list

min 和 max

multiple

pattern (regexp)

placeholder

required

step

并为 <form> 增加如需属性：

autocomplete (on/off控制是否自动填写)

novalidate(是否对type进行验证)

HTML全局属性参考

HTML事件大全参考

HTML5 Canvas 画布参考

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏，其中的许多对象会被频繁重绘
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

video和audio 参考

<embed> 元素（HTML4 中不支持，HTML5 中允许。定义内嵌对象。）

支持嵌入视频，音频，图片，页面

<embed height="100" width="100" src="song.mp3" />

<embed width="100%" height="500px" src="snippet.html">

<embed src="audi.jpeg">

HTML5 语义元素

标签描述

<article> 定义文章。

<aside> 定义页面内容以外的内容。

<details> 定义用户能够查看或隐藏的额外细节。

<figcaption> 定义 <figure> 元素的标题。

<figure> 规定自包含内容，比如图示、图表、照片、代码清单等。

<footer> 定义文档或节的页脚。

<header> 规定文档或节的页眉。

<main> 规定文档的主内容。

<mark> 定义重要的或强调的文本。

<nav> 定义导航链接。

<section> 定义文档中的节。

<summary> 定义 <details> 元素的可见标题。

<time> 定义日期/时间。

标签	描述
<article>	定义文章。
<aside>	定义页面内容以外的内容。
<details>	定义用户能够查看或隐藏的额外细节。
<figcaption>	定义 <figure> 元素的标题。
<figure>	规定自包含内容，比如图示、图表、照片、代码清单等。
<footer>	定义文档或节的页脚。
<header>	规定文档或节的页眉。
<main>	规定文档的主内容。
<mark>	定义重要的或强调的文本。
<nav>	定义导航链接。
<section>	定义文档中的节。
<summary>	定义 <details> 元素的可见标题。
<time>	定义日期/时间。

HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。

header, section, footer, aside, nav, main, article, figure { display: block; }

HTML5拖拽drag 和 drop

<script>
// 阻止默认不允许拖拽的行为
function allowDrop(ev) {
    ev.preventDefault();
}

// 鼠标开始拖拽
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

// 鼠标松开
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<!-- 允许拖拽的元素 -->
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" 
width="336" height="69">

</body>

HTML5 本地存储对象

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。

本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

HTML 本地存储提供了两个在客户端存储数据的对象：

window.localStorage - 存储没有截止日期的数据

window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持：
if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
} else {
    // 抱歉！不支持 Web Storage ..
}
// 存储
localStorage.setItem("lastname", "Gates"); // 或写localStorage.lastname = "Gates"
// 取回
localStorage.getItem("lastname");// 或读 localStorage.lastname
// 删除
localStorage.removeItem("lastname");

HTML5 引入了应用程序缓存（Application Cache）

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

manifest 文件有三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

完整写法

CACHE MANIFEST：
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/offline.html

提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存只会在其 manifest 文件改变时被更新。如果您编辑了一幅图像，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。浏览器对缓存数据的容量限制可能不太一样（某些浏览器的限制是每个站点 5MB）

HTML5 Web Workers

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。

Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。

在创建 web worker 之前，请检测用户浏览器是否支持它：
if (typeof(Worker) !== "undefined") {
    // 是的！支持 Web worker！
    // 一些代码.....
} else {
    // 抱歉！不支持 Web Worker！
}
创建 Web Worker 文件

我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：
var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i); //postMessage() 方法 - 它用于向 HTML 页面传回一段消息
    setTimeout("timedCount()",500);
}

timedCount();
注释: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
创建 Web Worker 对象
if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
   //它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：
}
然后我们就可以从 web worker 发生和接收消息了。

向 web worker 添加一个 "onmessage" 事件监听器：
w.onmessage = function(event){ 
document.getElementById("result").innerHTML = event.data; 
};
当 web worker 传送消息时，会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。

终止 Web Worker
w.terminate();
由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

window 对象

document 对象

parent 对象

Server-Sent 事件(SSE)

Server-Sent 事件指的是网页自动从服务器获得更新。

以前也可能做到这一点，前提是网页不得不轮询是否有可用的更新。通过 Server-Sent 事件，更新能够自动到达。

例如：Facebook/Twitter 更新、股价更新、新的博文、赛事结果，等等。
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};
创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）

每当接收到一次更新，就会发生 onmessage 事件

当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中
// 检测服务器发送事件的浏览器支持
if(typeof(EventSource) !== "undefined") {
    // 是的！支持服务器发送事件！
    // 一些代码.....
} else {
    // 抱歉！不支持服务器发送事件！
}
EventSource 对象

在上例中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：

事件描述

onopen 当通往服务器的连接被打开

onmessage 当接收到消息

onerror 当发生错误

事件	描述
onopen	当通往服务器的连接被打开
onmessage	当接收到消息
onerror	当发生错误

HTML 中有用的字符实体

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

显示结果描述实体名称实体编号

空格    

< 小于号 < <

> 大于号 > >

& 和号 & &

" 引号 " "

' 撇号 ' (IE不支持) '

￠分（cent） ¢ ¢

£ 镑（pound） £ £

¥ 元（yen） ¥ ¥

€ 欧元（euro） € €

§ 小节 § §

© 版权（copyright） © ©

® 注册商标 ® ®

™ 商标 ™ ™

× 乘号 × ×

÷ 除号 ÷ ÷

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

Emoji 字符

表情符号也是来自 UTF-8 字母的字符参考手册

😄 是 128516 <p>😄</p>

😍 是 128525 <p>😍</p>

💗 是 128151 <p>💗</p>

字符集参考

ISO-8859-1 是 HTML 4 的默认字符集。此字符集支持 256 个不同的字符代码。HTML 4 同时支持 UTF-8。

ANSI（Windows-1252）是原始的 Windows 字符集。 ANSI 与 ISO-8859-1 相同，不同之处在于 ANSI 具有 32 个额外的字符。

HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集，该字符集涵盖了世界上几乎所有的字符和符号！

<meta charset="UTF-8">

URL 编码参考

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

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

由于 URL 通常包含 ASCII 集之外的字符，因此必须将 URL 转换为有效的 ASCII 格式

URL 编码使用后跟十六进制数字的 "%" 替代不安全的 ASCII 字符

在 JavaScript 中，您可以使用 encodeURIComponent() 函数。

HTTP请求消息状态返回码参考

常用：

2xx: 成功
200 OK 请求成功（其后是对GET和POST请求的应答文档。）
201 Created 请求被创建完成，同时新的资源被创建。
202 Accepted 供处理的请求已被接受，但是处理未完成。

3xx: 重定向
301 Moved Permanently 所请求的页面已经转移至新的url。
302 Found 所请求的页面已经临时转移至新的url。

4xx: 客户端错误
400 Bad Request 服务器未能理解请求。
401 Unauthorized 被请求的页面需要用户名和密码。
403 Forbidden 对被请求页面的访问被禁止。
404 Not Found 服务器无法找到被请求的页面
405 Method Not Allowed 请求中指定的方法不被允许。
406 Not Acceptable 服务器生成的响应无法被客户端所接受。
415 Unsupported Media Type 由于媒介类型不被支持，服务器不会接受请求。

5xx: 服务器错误
500 Internal Server Error 请求未完成。服务器遇到不可预知的情况。

HTTP 方法

GET

POST

PUT

HEAD

DELETE

PATCH

OPTIONS

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

GET 请求可被缓存

GET 请求保留在浏览器历史记录中

GET 请求可被收藏为书签

GET 请求不应在处理敏感数据时使用

GET 请求有长度限制（URL 的最大长度是 2048 个字符）

GET 请求只允许 ASCII 字符。

GET 请求只应当用于取回数据（不修改）

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

POST 请求不会被缓存

POST 请求不会保留在浏览器历史记录中

POST 不能被收藏为书签

POST 请求对数据长度没有要求

HTML问答篇

弄懂HTML，XHTML，HTML5，XML之间的区别

基础标签 标签手册

HTML5 输入类型

HTML5 属性

HTML全局属性 参考

HTML事件大全 参考

HTML5 Canvas 画布 参考

Canvas

video和audio 参考

<embed> 元素（HTML4 中不支持，HTML5 中允许。定义内嵌对象。）

HTML5 语义元素

HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。

HTML5拖拽drag 和 drop

HTML5 本地存储对象

HTML5 引入了应用程序缓存（Application Cache）

HTML5 Web Workers

创建 Web Worker 文件

创建 Web Worker 对象

终止 Web Worker

Server-Sent 事件(SSE)

EventSource 对象

HTML 中有用的字符实体

Emoji 字符

字符集 参考

URL 编码 参考

HTTP请求消息状态返回码 参考

HTTP 方法

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

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

基础标签标签手册

HTML全局属性参考

HTML事件大全参考

HTML5 Canvas 画布参考

字符集参考

URL 编码参考

HTTP请求消息状态返回码参考