学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/
关于HTML/HTML5（二） //www.greatytc.com/p/e03a8728a0bc
HTML/HTML5和CSS/CSS3还有JavaScript都是基础中的基础，很多的框架、插件，都是在这些“基础”的基础上实现的。
常说的DIV+CSS布局，不是说会把HTML和CSS一起使用就够了，而是在编写页面前，先布置页面结构（比如说 网页大体分为头部/页眉，导航栏，内容，底部/页脚，然后内容又分为……，相类似的组件/结构又可以将它统一为同一类结构……），
也可以使用 HTML5 提供的新语义元素来布局网页，header定义文档或节的页眉，nav定义导航链接的容器，section定义文档中的节，article定义独立的自包含文章，aside定义内容之外的内容（比如侧栏），footer定义文档或节的页脚，details定义额外的细节，summary定义 details 元素的标题。
然后再编写代码。先思考，再动手，否则会事倍功半。
HTML的简介：
超文本标记语言 (HyperTextMarkupLanguage) 、
标记语言(markup language)、标记标签(markup tag) 、
尖括号包围的关键词、成对出现、开始标签结束标签、开放标签闭合标签。
HTML 文档 = 网页（包含HTML标签和文本），Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
开始标签与结束标签之间的内容就是元素的内容，
HTML 元素具有空内容（empty content），
空元素在开始标签中进行关闭（以开始标签的结束而结束，比如<br />），
大多数 HTML 元素拥有属性（为 HTML 元素提供附加信息，在开始标签中，以名称/值对的形式出现，比如name="value"），始终为属性值加引号，
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素），
HTML 标签对大小写不敏感（推荐使用小写）。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理。
建议始终使用小写
HTML里的Hello World，每个人都敲过n遍。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>...</title>
</head>
<body>
<div>Hello World</div>
</body>
</html>
语言代码：（HTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。）
根据 W3C 推荐标准，您应该通过 标签中的 lang 属性对每张页面中的主要语言进行声明，比如：
<html lang="en">
......
</html>
参考手册：http://www.w3school.com.cn/tags/html_ref_language_codes.asp
不赞成使用的标签和属性：
<center>标签（居中的内容）
<font>标签和<basefont>标签（字体）
<s>标签和<strike>标签（删除线文本）：使用<del>代替
<u>标签（下划线文本）
<listing>标签<plaintext>标签<xmp>标签：使用<pre>代替
align属性（对齐方式）
bgcolor属性（背景颜色）
color属性（文本颜色）
下面列出了适用于大多数HTML元素的属性：
class属性指定类名，
id属性指定唯一id，
style属性指定行内样式，
title属性指定额外信息（可在工具提示中显示）
必需的属性：
如：1.图像标签必须使用alt属性，当图像无法显示时该属性很重要。
2.必须定义图像尺寸，这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。
对标签语义化有较好的理解，就是认识标签和属性的用途和作用。
文档类型：<!DOCTYPE html>（这个是HTML5的声明，声明帮助浏览器正确地显示网页）
文档：<html>
文档头部：<head>
（<head>内的元素可以是：<title><meta><base><link><script><style>，一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。）
文档标题：<title>
文档描述：<meta>
（描述：<meta name="author/revised/generator/description/keywords" content="....">，
重定向：<meta http-equiv="Refresh" content="5;url=abc.com" />）
所有标签的打开方式：<base>（<base target="_blank" />）
引入外部样式表：<link>
定义样式：<style>
脚本：<script>
文档主体：<body>
注释：<!-- 内容 -->
（条件注释：只有IE执行的注释：<!--[if IE 8]> ....内容.... <![endif]-->）
节/区域（块级，如：h1，p，ul，table）：<div>
行内的小块/区域（内联，如b，td，a，img）：<span>
标题：<h1> - <h6>（搜索引擎使用标题为您的网页的结构和内容编制索引，注意使用，应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。）
水平线：<hr />
换行：<br />
段落：<p>
链接：<a>，href 属性指定链接的地址（电子邮件mailto:，例子：http://www.w3school.com.cn/tiy/t.asp?f=html_mailto或者http://www.w3school.com.cn/tiy/t.asp?f=html_mailto2），
name 属性创建文档内的书签（HTML5 中不支持name属性。规定锚的名称，和href配合使用，可以用id属性替换name属性），
target 属性，被链接的文档在何处显示（比如_blank，_parent，_self，_top）。
图像：<img>，src属性指定文件地址，width、height属性指定图像宽高，alt 属性用来为图像定义一串预备的可替换的文本。usemap属性引用 map 元素中的 "id" 或 "name" 属性
带有可点击区域的图像映射：<map>，
图像映射中的区域：<area>，（area 元素总是嵌套在 标签中）alt属性用来为图像定义一串预备的可替换的文本。
（<img><map><area>例子：http://www.w3school.com.cn/tiy/t.asp?f=html_areamap）
表格：<table>，border属性指定表格边框，cellpadding属性指定单元格边距，cellspacing属性指定单元格间距，background属性指定背景，frame属性控制围绕表格的边框（box四周，above上方，below下方，hsides上和下方，vsides左和右侧）
（表头：<th>，行：<tr>，单元格：<td>，表格标题：<caption>，页眉：<thead>，主体：<tbody>，页脚：<tfoot>，列属性：<col>，列的组：<colgroup>）
横跨两列的单元格：colspan属性/rowspan属性为2即可
列表：无序列表：<ul>，type属性指定项目符号列表（disc，circle，square），，列表项：<li>
有序列表：<ol>，type属性指定项目符号列表（A，a，I，i），列表项：<li>
自定义列表：<dl>，列表项：<dt><dd>
表单：用于收集用户输入。<form action="" method="" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
（action 属性定义在提交表单时执行的动作，如果省略，则默认设置为当前页面。method 属性规定在提交表单时所用的 HTTP 方法（GET（默认方法）或POST））
form属性：
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。
使用GET方法：（最适合少量数据的提交。浏览器会设定容量限制。）
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。且表单数据在页面地址栏中是可见的。
使用POST方法：如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
表单元素：<input>元素（根据type不同，有不同形态）
文本输入：<input type="text" name="" value="" size="" maxlength="">
单选按钮：<input type="radio" name="" value="" [checked]>
多选按钮：<input type="checkbox" name="" value="" [checked]>
提交按钮：<input type="submit" value="Submit">（与form的action有关）
密码输入：<input type="password" name="">
重置按钮：<input type="reset">
隐藏按钮：<input type="hidden">
下拉列表：<select name=""><option value="" [selected]>
（列表通常会把首个option选项显示为被选选项。）
多行输入/文本域：<textarea name="" rows="" cols="">
按钮：<input type="button" value="">
按钮：<button type="button">
用<fieldset>组合表单数据
<fieldset>元素组合表单中的相关数据
<legend>元素为<fieldset>元素定义标题。
比如：
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
数字输入：<input type="number" name="" min="" max="" step="10" value="30">
日期输入：<input type="date" name="" max="2017-12-31" min="2000-01-02">
颜色输入：<input type="color" name="">
滑块控件：<input type="range" name="" min="" max="" step="" value="">
月份输入：<input type="month" name="">（允许用户选择月份和年份。）
周/星期输入：<input type="week" name="">（允许用户选择周和年。）
时间输入：<input type="time" name="">
日期数据输入：<input type="datetime" name="">（允许用户选择日期和时间（有时区）。）
日期时间输入：<input type="datetime-local" name="">（允许用户选择日期和时间（无时区）。）
邮件输入：<input type="email" name="">
搜索输入：<input type="search" name="">
电话输入：<input type="tel" name="">
URL输入：<input type="url" name="">
输入限制（属性）：（列出了一些常用的输入限制，其中一些事HTML5中新增的）
disabled 规定输入字段应该被禁用。（disabled 属性不需要值。它等同于 disabled="disabled"。）
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。（如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。该属性不会提供任何反馈。）
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读（无法修改）。（readonly 属性不需要值。它等同于 readonly="readonly"。）
required 规定输入字段是必需的（必需填写）。
size 规定输入字段的宽度（以字符计）。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。
文本格式化：
HTML可定义很多供格式化输出的元素，比如粗体和斜体字。
粗体文本：<b>
加重语气：<strong>
大号字：<big>（HTML5已删除）
小号字：<small>
着重字体：<em>
斜体：<i>
上标：<sup>
下标：<sub>
插入字：<ins>
删除字：<del>
“计算机输出”：
计算机代码：<code>
键盘码/键盘格式：<kbd>
计算机代码样本：<samp>
打字机代码：<tt>（HTML5中已删除）
定义变量：<var>
预格式文本：<pre>
引用、引用和术语定义：
缩写/缩略词：<abbr>
首字母缩写：<acronym>（HTML5中已删除）
地址：<address>
文字方向：<bdo>（属性dir="rtl"或者dir="ltr"）
长的引用：<blockquote>
短的引用：<q>（文字外加“”）
引用、引证：<cite>
一个定义项目：<dfn>
（<dfn>用法：
1. 如果设置了 元素的 title 属性，则定义项目：http://www.w3school.com.cn/tiy/t.asp?f=html_formatting_dfn
2. 如果 元素包含具有标题的 元素，则 title 定义项目：http://www.w3school.com.cn/tiy/t.asp?f=html_formatting_dfn_2
3. 否则， 文本内容即是项目，并且父元素包含定义。http://www.w3school.com.cn/tiy/t.asp?f=html_formatting_dfn_3
注释：如果您希望简而化之，请使用第一条，或使用<abbr>代替。）
字符实体（HTML 中的预留字符（比如小于号、大于号）必须被替换为字符实体（&entity_name; 或者 &#entity_number;）。）
参考手册：http://www.w3school.com.cn/tags/html_ref_symbols.html
空格： 或  
小于号：< 或 <
大于号：> 或 >
与：& 或 &
双引号：" 或 "
单引号：'（IE不支持） 或 '
版权：© 或 ©
注册商标：® 或 ®
商标：™ 或 ™
乘号：× 或 ×
除号：÷ 或 ÷
等等...http://www.w3school.com.cn/html/html_entities.asp
（HTML5中已删除）
框架（此框架非彼框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。）
框架结构标签/框架集：<frameset>，rows属性/columns 属性的值规定了每行或每列占据屏幕的面积
框架标签：<frame>，noresize属性设置无边框值为"noresize"。
<frameset cols="25%,75%">
<frame src="a.html">
<frame src="b.html">
</frameset>
注意：为不支持框架的浏览器添加<noframes>标签。
重要提示：不能将<body>标签与<frameset> 标签同时使用！不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于<body>标签内。 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
（例子：使用框架导航跳转至指定的节http://www.w3school.com.cn/tiy/t.asp?f=html_frame_navigation2）
内联框架（用于在网页内显示网页）：<iframe>，src属性，width属性，height属性，frameborder属性指定iframe的边框。
iframe 可用作链接的目标（target），链接的 target 属性必须引用 iframe 的 name 属性。
<iframe src="demo.html" name="iframe_a"></iframe>
<p><a href="xxxx.com" target="iframe_a">xxxx.com</a></p>
响应式 Web 设计（Responsive Web Design），简称RWD。
RWD能够以可变尺寸传递网页，对于平板和移动设备是必需的。
1.纯css设计
2.bootstrap（CSS 框架，开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机，另讲）
（注意：<noscript>标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：<noscript>Your browser does not support JavaScript!</noscript>）
统一资源定位器/统一资源定位符（Uniform Resource Locator）
URL用于定位万维网上的文档（或其他数据）。
网址，比如http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：
scheme://host.domain:port/path/filename
解释：
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
以下是其中一些最流行的 scheme：
http （超文本传输协议） 以 http:// 开头的普通网页。不加密。
https （安全超文本传输协议） 安全网页。加密所有信息交换。
ftp （文件传输协议） 用于将文件下载或上传至网站。
file 您计算机上的文件。
URL 字符编码，URL 编码会将字符转换为可通过因特网传输的格式。
URL 只能使用ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
更多 ：http://www.w3school.com.cn/html/html_urlencode.asp，
http://www.w3school.com.cn/tags/html_ref_urlencode.html
Web Server，如果希望向世界发布您的网站，那么您必须把它存放在 web 服务器上。
更多：http://www.w3school.com.cn/html/html_webserver.asp
颜色：颜色值，颜色名，安全色……
更多：http://www.w3school.com.cn/html/html_colors.asp
颜色名：http://www.w3school.com.cn/html/html_colornames.asp
XHTML
（XHTML 是以 XML 格式编写的 HTML，XHTML指的是可扩展超文本标记语言，它 与 HTML 4.01 几乎是相同的，它是更严格更纯净的 HTML 版本，它是以 XML 应用的方式定义的 HTML，它是2001 年 1 月发布的 W3C 推荐标准，它得到所有主流浏览器的支持，它是是一种必须正确标记且格式良好的标记语言。）
与HTML相比最重要的区别：
文档结构
XHTML DOCTYPE 是强制性的
<html>中的 XML namespace 属性是强制性的
<html>、<head>、<title>以及<body>也是强制性的 以及 <body> 也是<i>强制性的</i>
元素语法
XHTML 元素必须正确嵌套，必须始终关闭，必须小写，必须有一个根元素
属性语法
XHTML 属性必须使用小写，必须用引号包围，禁止属性简写（如：错误：checked；正确：checked="checked"）
HTML5新的媒介元素：video && audio &&embed && source && track
audio 声音或音乐内容。
embed 外部应用程序的容器（比如插件）。
video 视频或影片内容。
source <video>和<audio>的来源。
track <video>和<audio>的轨道。
多媒体：（详细请看官方http://www.w3school.com.cn/html/html_media.asp）
视频格式：（MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。）
格式（文件扩展名）
AVI（.avi），WMV（.wmv），MPEG（.mpg/.mpeg），QuickTime（.mov），RealVideo（.rm/.ram），Flash（.swf/.flv），Mpeg-4（.mp4）
声音格式：（WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。
MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐，那么 MP3 是一个选项。）
格式（文件扩展名）
MIDI（.mid/.midi），RealAudio（.rm/.ram），Wave（.wav），WMA（.wma），MP3（.mp3/.mpga）
Object元素：<object>的作用是支持 HTML 助手（插件）。（官方：http://www.w3school.com.cn/html/html_object.asp）
HTML 助手（插件）：大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。
例子：
- 使用QuickTime 来播放 Wave 音频 元素
<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>
- 使用 Flash 来播放 SWF 视频
<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>
- 使用 Windows Media Player 来播放 WMV 影片
<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%"
height="100%" autostart="true" showcontrols="true"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>
嵌入音频：
PS：不同的浏览器对音频格式的支持也不同，如果不支持该文件格式，就无法播放。可以使用插件。
使用<embed>元素（<embed>元素定义外部（非 HTML）内容的容器。这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）：
<embed height="100" width="100" src="song.mp3" />
使用<object>元素：
<object height="100" width="100" data="song.mp3"></object>
使用<audio>元素：（这个例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息。）
<audio controls="controls" width="100" height="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>
最好的 HTML 解决方法（使用了两个不同的音频格式。HTML5<audio>元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 元素。） 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 元素。）
<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>
向网站添加音频的最简单方法：雅虎的媒体播放器绝对算其中之一。它能播放 mp3 以及一系列其他格式。通过一行简单的代码，您就可以把它添加到网页中，轻松地将 HTML 页面转变为专业的播放列表。
例子：（雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。
请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。）
<a href="song.mp3">Play Sound</a> //只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> //（使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部）
使用超链接：（如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。
以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”来播放该文件）
<a href="song.mp3">Play the sound</a>
内联的声音：（当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。
如果您打算在 web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。
我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。）
HTML 4.01 多媒体标签
<applet> 不赞成。定义内嵌applet。
<embed> HTML4 中不赞成，HTML5 中允许。定义内嵌对象。
<object> 定义内嵌对象。
HTML 5 多媒体标签
播放视频：
（使用<embed>标签）
<embed src="movie.swf" height="200" width="200"/>
（使用<object>标签）
<object data="movie.swf" height="200" width="200"/>
（使用<video>元素）
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
最好的 HTML 解决方法（HTML5 + <object> + <embed>，例子中使用了 4 中不同的视频格式。HTML 5 <video>元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。）
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>
优酷解决方案：（在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频）
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash"></embed>
使用超链接（如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。
以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player 来播放这个 AVI 文件）
<a href="movie.swf">Play a video file</a>
关于内联视频（当视频被包含在网页中时，它被称为内联视频。
如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联视频选项。
我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。）
HTML 4.01 多媒体标签
<applet> 不赞成。定义内嵌 applet。
<embed> 不赞成。定义内嵌对象。（HTML5 中允许）
<object> 定义内嵌对象。
<param> 定义对象的参数。
HTML 5 多媒体标签
<video> 标签定义声音，比如音乐或其他音频流。
</embed> 标签定义嵌入的内容，比如插件。
PS：当前，video 元素支持三种视频格式：
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
PS：当前，audio 元素支持三种音频格式：
类型 IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis NO √ √ √ NO
MP3 √ NO NO √ √
Wav NO √ √ NO √
地理定位：（HTML5 Geolocation（地理定位）用于定位用户的位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。）
Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。
- 使用地理定位（getCurrentPosition() 方法来获得用户的位置。可返回用户位置的经度和纬度）
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation) //检测是否支持地理定位
{
navigator.geolocation.getCurrentPosition(showPosition); //如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position) //showPosition() 函数获得并显示经度和纬度
{
x.innerHTML="Latitude: " + position.coords.latitude + "
Longitude: " + position.coords.longitude;
}
</script>
处理错误和拒绝：（getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数）
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED: //用户不允许地理定位
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE: //无法获取当前位置
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT: //操作超时
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
在地图中显示结果：（您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图，例子中使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像））
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="";
}
官方（使用的是谷歌地图）：http://www.w3school.com.cn/tiy/t.asp?f=html5_geolocation_map_script
给定位置的信息，可以用在 更新本地信息，显示用户周围的兴趣点，交互式车载导航系统 (GPS)
getCurrentPosition() 方法 - 返回数据（若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。）
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间
Geolocation 对象 - 其他有趣的方法
watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 停止 watchPosition() 方法
下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude + "
Longitude: " + position.coords.longitude;
}
</script>
HTTP状态消息：（当浏览器从 web 服务器请求服务时，可能会发生错误。）
从而有可能会返回下面的一系列状态消息：
1xx: 信息，2xx: 成功，3xx: 重定向，4xx: 客户端错误，5xx: 服务器错误
100 Continue服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
101 Switching Protocols服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。
200 OK请求成功（其后是对GET和POST请求的应答文档。）
201 Created请求被创建完成，同时新的资源被创建。
202 Accepted供处理的请求已被接受，但是处理未完成。
203 Non-authoritative Information文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。
204 No Content没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
205 Reset Content没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
206 Partial Content客户发送了一个带有Range头的GET请求，服务器完成了它。
300 Multiple Choices多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
301 Moved Permanently所请求的页面已经转移至新的url。
302 Found所请求的页面已经临时转移至新的url。
303 See Other所请求的页面可在别的url下被找到。
304 Not Modified未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy客户请求的文档应该通过Location头所指明的代理服务器提取。
306Unused此代码被用于前一版本。目前已不再使用，但是代码依然被保留。
307 Temporary Redirect被请求的页面已经临时移至新的url。
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
500 Internal Server Error请求未完成。服务器遇到不可预知的情况。
501 Not Implemented请求未完成。服务器不支持所请求的功能。
502 Bad Gateway请求未完成。服务器从上游服务器收到一个无效的响应。
503 Service Unavailable请求未完成。服务器临时过载或当机。
504 Gateway Timeout网关超时。
505 HTTP Version Not Supported服务器不支持请求中指明的HTTP协议版本。
HTTP方法：两种最常用的 HTTP 方法是：GET 和 POST。
GET- 从指定的资源请求数据。
POST- 向指定的资源提交要被处理的数据
介绍：
超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。
HTTP 的工作方式是客户机与服务器之间的请求-应答协议。
web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。
举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。
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：
后退按钮/刷新：
GET方法无害，
POST方法数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签：
GET方法可收藏为书签，
POST方法不可收藏为书签
缓存：
GET方法能被缓存，
POST方法不能缓存
编码类型：
GET方法：application/x-www-form-urlencoded，
POST方法：application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史：
GET方法参数保留在浏览器历史中。
POST方法参数不会保存在浏览器历史中。
对数据长度的限制：
GET方法限制长度。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。
POST方法无限制。
对数据类型的限制：
GET方法只允许 ASCII 字符。
POST方法没有限制。也允许二进制数据。
安全性
GET方法：与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。
在发送密码或其他敏感信息时绝不要使用 GET ！
POST方法：POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性：
GET方法：数据在 URL 中对所有人都是可见的。
POST方法：数据不会显示在 URL 中。
= = = = = = = = =
其他 HTTP 请求方法
HEAD与 GET 相同，但只返回 HTTP 报头，不返回文档主体。
PUT上传指定的 URI 表示。
DELETE删除指定资源。
OPTIONS返回服务器支持的 HTTP 方法。
CONNECT把请求连接转换到透明的 TCP/IP 通道。
HTML实例：http://www.w3school.com.cn/example/html_examples.asp
