HTML 简介
HTML 简介
<!DOCTYPE html><html><head><title>页面标题(w3cschool.cn)</title></head><body><h1>我是第一个标题</h1><p>我是第一个段落。</p></body></html>
实例解析
DOCTYPE声明了文档的类型<html>标签是 HTML 页面的根元素，该标签的结束标志为</html><head>标签包含了文档的元数据（meta），如<meta charset="utf-8">定义网页编码格式为utf-8。<title>标签定义文档的标题<body>标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body><h1>标签作为一个标题使用，该标签的结束标志为</h1><p>标签作为一个段落显示，该标签的结束标志为</p>
什么是 HTML?
HTML 语言用于描述网页。
- HTML 是指超文本标记语言: Hyper Text Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 ( markup tag )
- HTML 使用标记标签来描述网页
- HTML 文档包含了 HTML 标签及文本内容
- HTML 文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 ( HTML tag )。
- HTML 标签是由 尖括号 包围的关键词，比如
<html> - HTML 标签通常是 成对出现 的，比如
<b>和</b> - 标签对中的第一个标签是开始标签，第二个标签是 结束标签
- 开始和结束标签也被称为开放标签 和 闭合标签
HTML 元素
“HTML 标签” 和 “HTML 元素” 通常都是描述相同的意思。
但是严格来讲，一个 HTML元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p>
Web 浏览器
Web 浏览器（如谷歌浏览器、Internet Explorer、Firefox 和 Safari ）是用于读取 HTML 文件，并将其作为网页显示。
Web 浏览器不会直接显示 HTML 标签，而是通过使用标签来决定如何向用户展现 HTML 页面的内容：
<!DOCTYPE> 声明
<!DOCTYPE>是标准通用标记语言的文档类型声明，有助于在浏览器中正确地显示网页。
由于网络上文件的类型不一，因此需要正确声明 HTML 版本，以使得浏览器能够正确识别并显示您的网页内容。
doctype声明是不区分大小写的，以下方式均可使用：
<!DOCTYPE html> /*H5声明*/<!DOCTYPE HTML><!doctype html><!Doctype Html>
中文编码
在 HTML 页面的头部声明字符为 UTF-8 可以解决在浏览器中出现中文乱码的现象。
<head><meta charset="UTF-8"><title>页面标题</title></head>
HTML 基础
HTML 标题
HTML 标题（Heading）是通过h1-h6标签来定义的.
h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。
这里有六个标题元素标签 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每个元素代表文档中不同级别的内容：
<h1> 表示主标题（ the main heading ），<h2> 表示二级子标题（ subheadings ），<h3>表示三级子标题（ sub-subheadings ），<h4>、<h5>、<h6>字体的大小依次递减。
HTML 段落
HTML 段落是通过标签<p>来定义的，P是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样。
HTML 中的空格
在代码中可能包含了很多的空格——这是没有必要的
下面的两个代码片段是等价的：
<p>狗 狗 很 呆 萌。</p><p>狗 狗 很 呆 萌。</p>
无论你用了多少空格（包括空格字符，包括换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空格字符减少为一个单独的空格符。
HTML 链接
HTML 链接是通过标签<a>来定义的。a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。
<a href="http://www.w3cschool.cn">这是一个链接</a>
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签 中使用了 href 属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带上下划线
- 点击链接时，链接显示为红色并带上下划线
使用 Target 属性，你可以定义被链接的文档在何处显示（在新的窗口打开，还是在原有的窗口中打开）。
下面的这行会在新窗口打开文档：
<a href="https://www.w3cschool.cn/" target="">访问W3Cschool教程!</a><p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
id 属性可用于在一个 HTML 文档中创建书签标记。
提示: 书签是不以任何特殊的方式显示，在 HTML 文档中是不显示的，所以对于读者来说是隐藏的。
在 HTML 文档中创建一个链接到”有用的提示部分 (id=”tips”）”：
<a href="#tips">Visit the Useful Tips Section</a>
HTML 图像
HTML 图像是通过标签<img>来定义的。使用img元素来为你的网站添加图片，使用src 属性指向一个图片的具体地址。举例如下：
<img src="https://www.your-image-source.com/your-image.jpg">
请注意：img元素是自关闭元素，不需要结束标记。
alt属性用来为图像定义一串预备的可替换的文本。
设置图像的高度与宽度
height（高度）与width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
设置图像边框
在<img>标签中您可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。
<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3">
HTML 强调
在人类语言中，为了突出一句话的意思，我们通常强调某些词，并且我们通常想要标记某些词作为重点或者表示某种程度上的不同。HTML 提供了许多语义化的元素，并且允许我们通过这些元素的意义标记正文内容，在这个章节中，我们将看到最常见的一小部分元素。
在 HTML 中我们可以使用em（emphasis）元素来标记这样的情况，浏览器默认风格为斜体：
<p>我 <em>很高兴</em>你不 <em>讨厌我</em>.</p>
在 HTML 中我们还可以使用<strong>(strong importance)元素来标记这样的请况，浏览器默认风格为粗体：
<p>这种液体是<strong>高毒性的</strong>.</p><p>我就指望你<strong>不会</strong> 迟到!</p>
HTML 水平线
hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。
HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
HTML 注释可以方便地用来帮助网页设计人员，提醒他们与程序相关的信息。
注释写法如下:
<!-- 注释 -->
HTML 折行
如果您希望在不产生一个新起点的情况下进行换行（新行），请使用 <br /> 标签。
在 HTML 语言中，<br /> 标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行拆分
HTML 文本格式化
HTML 中存在一些格式化文本的标签，它们可以被直接使用，而不用您再去写样式进行调整。
<b>加粗文本</b><br><br><i>斜体文本</i><br><br><code>电脑自动输出</code><br><br>这是 <sub> 下标</sub> 和 <sup> 上标</sup>
HTML 文本格式化标签
| 标签 |
描述 |
|
定义粗体文本 |
|
定义着重文字 |
|
定义斜体字 |
|
定义小号字 |
|
定义加重语气 |
|
定义下标字 |
|
定义上标字 |
|
定义插入字 |
|
定义删除字 |
HTML 引文, 引用, 及标签定义
| 标签 |
描述 |
|
定义缩写或首字母缩略语。 |
|
定义文档作者或拥有者的联系信息。 |
|
定义文字方向。 |
|
| 定义从其他来源引用的节。 |
|
定义短的引用语。 |
|
定义著作的标题。 |
|
定义项目或缩略词的定义。 |
HTML id
HTML id 属性用于 为HTML 元素指定唯一的 id。
一个 HTML文档中不能存在多个有相同 id 的元素。
使用 id 属性
id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。
id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。
id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
下面的例子中我们有一个 <h1> 元素，它指向 id 名称 “myHeader”。这个 <h1> 元素将根据 head 部分中的 #myHeader 样式定义进行样式设置：
<!DOCTYPE html><html><head><style>#myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center;}</style></head><body><h1 id="myHeader">My Header</h1></body></html>
通过 ID 和链接实现 HTML 书签
HTML 书签用于让读者跳转至网页的特定部分。
如果页面很长，那么书签可能很有用。
要使用书签，您必须首先通过id创建它，然后在别的位置为它添加链接。
然后，当单击链接时，页面将滚动到带有书签的位置。
HTML 头部
HTML 头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。
HTML 元素
元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。
可以添加在头部区域的元素标签为:
, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。</p>
<p><head> 元素描述了文档的各种属性和信息，其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。</p>
<hr>
<p><a name="c023c234"></a></p>
<h3 id="ezmxyd"><a name="ezmxyd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML <title> 元素</h3><p>title 在 HTML/XHTML 文档中是必须的。</p>
<p>title 元素:</p>
<ul>
<li>定义了浏览器工具栏的标题</li><li>当网页添加到收藏夹时，显示在收藏夹中的标题</li><li>显示在搜索引擎结果页面的标题</li></ul>
<p><a name="75067282"></a></p>
<h3 id="em6wlj"><a name="em6wlj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML <base> 元素</h3><p><base> 标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接 规定默认地址或默认目标（target）</p>
<p><a name="10df00ac"></a></p>
<h3 id="4331xe"><a name="4331xe" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML <link> 元素</h3><p><link> 标签定义了文档与外部资源之间的关系。</p>
<p><link> 标签通常用于链接到样式表。</p>
<p><a name="7e2d4d04"></a></p>
<h3 id="dzjiaa"><a name="dzjiaa" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML <style> 元素</h3><p><style> 标签定义了HTML文档的样式文件引用地址.</p>
<p>在<style> 元素中你需要指定样式文件来渲染HTML文档</p>
<p><a name="9841e312"></a></p>
<h3 id="civdx1"><a name="civdx1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML <meta> 元素</h3><p>元数据（metadata）是关于数据的信息。</p>
<p><meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。</p>
<p>典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。</p>
<p><meta> 标签始终位于 head 元素中。</p>
<p>元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务。</p>
<p><a name="bc0d5f9c"></a></p>
<h4 id="5x4y93"><a name="5x4y93" class="reference-link"></a><span class="header-link octicon octicon-link"></span>针对搜索引擎的关键词</h4><p>一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。</p>
<p>下面的 meta 元素定义页面的描述：</p>
<pre><code class="lang-html"><meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
</code></pre>
<p>下面的 meta 元素定义页面的关键词：</p>
<pre><code class="lang-html"><meta name="keywords" content="HTML, CSS, XML" />
</code></pre>
<p>name 和 content 属性的作用是描述页面的内容。</p>
<hr>
<p><a name="18ee243d"></a></p>
<h3 id="442fu0"><a name="442fu0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML <script> 元素</h3><p><script> 标签用于加载脚本文件，如： JavaScript。</p>
<p><a name="f4ee95a2"></a></p>
<h2 id="8o2469"><a name="8o2469" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 表格</h2><hr>
<p>表格由<code><table></code>标签来定义。每个表格均有若干行（由<code><tr></code>标签定义），每行被分割为若干单元格（由<code><td></code>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</p>
<p>HTML 表格的基本结构：</p>
<p><table>…</table>：定义表格</p>
<p><code><th>…</th></code>：定义表格的标题栏（文字加粗）</p>
<p><code><tr>…</tr></code>：定义表格的行</p>
<p><code><td>…</td></code>：定义表格的列</p>
<p>有以下两个属性，用于调整 HTML 表格中单元格的空间：</p>
<ul>
<li><code>cellspacing</code>属性-定义表格单元格之间的空间</li><li><code>cellpadding</code>属性-表示单元格边框与单元格内容之间的距离</li></ul>
<p>合并单元格：</p>
<ul>
<li>如果要将两个或多个列合并为一个列，将使用<code>colspan</code>属性</li><li>如果要合并两行或更多行，则将使用<code>rowspan</code>属性。</li></ul>
<p><a name="94be1eb4"></a></p>
<h3 id="1khx1w"><a name="1khx1w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表格头部、主体、页脚</h3><hr>
<p>表格可以分为三个部分 - 头部，主体和页脚，如同word 文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。</p>
<p>头部，主体和页脚的对应的三个标签是：</p>
<ul>
<li><code><thead></code>- 创建单独的表头。</li><li><code><tbody></code>- 表示表格的主体。</li><li><code><tfoot></code>- 创建一个单独的表页脚。</li></ul>
<p>表可以包含多个<code><tbody></code>元素以指示不同的页面。</p>
<p>但值得注意的是<code><thead></code>和<code><tfoot></code>标签应出现在<code><tbody></code>之前：</p>
<pre><code class="lang-html"><table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</code></pre>
<p><a name="09a39ee2"></a></p>
<h2 id="9s6ukp"><a name="9s6ukp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 列表</h2><hr>
<p>HTML 支持有序、无序和定义列表:</p>
<p>无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。</p>
<p>无序列表适合成员之间无级别顺序关系的情况。</p>
<p>无序列表使用 <ul> 标签。</p>
<p>同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。</p>
<p>有序列表适合各项目之间存在顺序关系的情况。</p>
<p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。</p>
<p>自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。</p>
<p>自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有术语名或者只有定义也是可行的，也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。</p>
<pre><code class="lang-html"><dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</code></pre>
<p><a name="b1d7c72a"></a></p>
<h1 id="3br6u3"><a name="3br6u3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 区块</h1><p><a name="a51ec107"></a></p>
<h2 id="4lhiu7"><a name="4lhiu7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML <div> 和<span></h2><hr>
<p>HTML 可以通过 <div> 和 <span> 将元素组合起来。</p>
<hr>
<p><a name="5b8a46b8"></a></p>
<h2 id="39ssef"><a name="39ssef" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 区块元素</h2><p>大多数 HTML 元素被定义为<strong>块级元素</strong>或<strong>内联元素</strong>。</p>
<p>块级元素在浏览器显示时，通常会以新行来开始（和结束）。</p>
<p>实例: <h1>, <p>, <ul>, <table></p>
<hr>
<p><a name="356c6577"></a></p>
<h2 id="8juewj"><a name="8juewj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 内联元素</h2><p>内联元素在显示时通常不会以新行开始。</p>
<p>实例: <b>, <td>, <a>, <img></p>
<hr>
<p><a name="5bcac3b2"></a></p>
<h2 id="2kd7z8"><a name="2kd7z8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML <div> 元素</h2><p><div> 标签可以把文档分割为独立的、不同的部分。</p>
<p>HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。</p>
<p><div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。</p>
<p>如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。</p>
<p><div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。</p>
<hr>
<p><a name="8f09d681"></a></p>
<h2 id="c9kdq2"><a name="c9kdq2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML <span> 与元素</h2><p>HTML <span> 元素是内联元素，可用作文本的容器</p>
<p><span> 元素也没有特定的含义。</p>
<p>当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。</p>
<p><a name="cc3cebc8"></a></p>
<h1 id="8ysd38"><a name="8ysd38" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 表单</h1><hr>
<p>HTML 表单用于收集不同类型的用户输入。</p>
<p><a name="cc3cebc8-1"></a></p>
<h2 id="5p6ir8"><a name="5p6ir8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 表单</h2><p>表单是一个包含表单元素的区域。</p>
<p>表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。表单使用表单标签 <form> 来设置。</p>
<p><a name="23883485"></a></p>
<h2 id="b8k604"><a name="b8k604" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 表单 - 输入元素</h2><p>多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。</p>
<p>输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：</p>
<hr>
<p><a name="eb5ff119"></a></p>
<h2 id="5x5nrq"><a name="5x5nrq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文本域（Text Fields）</h2><p>文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。</p>
<pre><code class="lang-html"><form>
姓名: <input type="text" name="firstname"><br>
电话号码: <input type="text" name="lastname">
</form>
</code></pre>
<p><a name="6d1131d7"></a></p>
<h2 id="fzu2wd"><a name="fzu2wd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>密码字段</h2><p>密码字段通过标签 <input type="password"> 来定义:</p>
<pre><code class="lang-html"><form>
密码: <input type="password" name="pwd">
</form>
</code></pre>
<p><a name="7557d4db"></a></p>
<h2 id="bquuem"><a name="bquuem" class="reference-link"></a><span class="header-link octicon octicon-link"></span>单选按钮（Radio Buttons）</h2><p><input type="radio"> 标签定义了表单单选框选项。</p>
<pre><code class="lang-html"><form>
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>
</code></pre>
<p><a name="1a3204c5"></a></p>
<h2 id="anv2ui"><a name="anv2ui" class="reference-link"></a><span class="header-link octicon octicon-link"></span>复选框（Checkboxes）</h2><p><input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。</p>
<pre><code class="lang-html"><form>
<input type="checkbox" name="vehicle" value="Bike">我有自行车<br>
<input type="checkbox" name="vehicle" value="Car">我有小车
</form>
</code></pre>
<p><a name="511bdef2"></a></p>
<h2 id="9jr3a6"><a name="9jr3a6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>提交按钮 (Submit Button)</h2><p><input type="submit"> 定义了提交按钮.</p>
<p>当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:</p>
<pre><code class="lang-html"><form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
</code></pre>
<p>假如您在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。</p>
<p><a name="979cb831"></a></p>
<h1 id="e04v2e"><a name="e04v2e" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 框架</h1><hr>
<p><iframe>标签规定一个内联框架。</p>
<p>一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。</p>
<p>通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。</p>
<p><strong>iframe 语法：</strong></p>
<pre><code class="lang-html"><iframe src="URL"></iframe>
</code></pre>
<p><code>height</code>和<code>width</code>属性用来定义<code>iframe</code>标签的高度与宽度。</p>
<p>属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”)</p>
<p><a name="553640e2"></a></p>
<h2 id="9fod1a"><a name="9fod1a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>移除边框</h2><hr>
<p><code>frameborder</code>属性用于定义<code>iframe</code>表示是否显示边框。设置为0。</p>
<p><a name="164a4d8e"></a></p>
<h2 id="3xadqq"><a name="3xadqq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>使用 iframe 来显示目录链接页面</h2><hr>
<p><code>iframe</code>可以显示一个目标链接的页面</p>
<p>目标链接的属性必须使用<code>iframe</code>的属性，如下实例：</p>
<pre><code class="lang-html"><iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>
</code></pre>
<p><a name="3e7577ac"></a></p>
<h1 id="38prb2"><a name="38prb2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML URL</h1><p><a name="ff755ff7"></a></p>
<h2 id="1er7wb"><a name="1er7wb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 统一资源定位器 (Uniform Resource Locators)</h2><hr>
<p>URL 是一个网页地址。</p>
<p>URL 可以由字母组成，如 “w3cschool.cn”，或互联网协议（IP）地址： 120.79.88.157。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。</p>
<hr>
<p><a name="09c271e6"></a></p>
<h2 id="fvaf1b"><a name="fvaf1b" class="reference-link"></a><span class="header-link octicon octicon-link"></span>URL - 统一资源定位器</h2><p>Web 浏览器通过 URL 从 Web 服务器请求页面。</p>
<p>当您点击 HTML 页面中的某个链接时，对应的 标签指向万维网上的一个地址。</p>
<p>一个统一资源定位器 (URL) 用于定位万维网上的文档。</p>
<p>scheme://host.domain:port/path/filename</p>
<ul>
<li><ul>
<li>scheme - 定义因特网服务的类型。最常见的类型是 http</li><li>host - 定义域主机（http 的默认主机是 www ）</li><li>domain - 定义因特网域名，比如 w3cschool.cn</li><li>:port - 定义主机上的端口号（http 的默认端口号是 80 ）</li><li>path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。</li><li>filename - 定义文档 / 资源的名称</li></ul>
</li></ul>
<p><a name="7e8e58a0"></a></p>
<h2 id="esw9i2"><a name="esw9i2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>常见的 URL Schemes</h2><p>以下是一些 URL scheme：</p>
<table>
<thead>
<tr>
<th>Scheme</th>
<th>访问</th>
<th>用于…</th>
</tr>
</thead>
<tbody>
<tr>
<td>http</td>
<td>超文本传输协议</td>
<td>以 http:// 开头的普通网页。不加密。</td>
</tr>
<tr>
<td>https</td>
<td>安全超文本传输协议</td>
<td>安全网页，加密所有信息交换。</td>
</tr>
<tr>
<td>ftp</td>
<td>文件传输协议</td>
<td>用于将文件下载或上传至网站。</td>
</tr>
<tr>
<td>file</td>
<td></td>
<td>您计算机上的文件。</td>
</tr>
</tbody>
</table>
<hr>
<p><a name="eede5a4f"></a></p>
<h2 id="9ekr9x"><a name="9ekr9x" class="reference-link"></a><span class="header-link octicon octicon-link"></span>URL 字符编码</h2><p>URL 只能使用ASCII 字符集。</p>
<p>URL 编码会将字符转换为可通过因特网传输的格式。来通过因特网进行发送，由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。</p>
<p>URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。</p>
<p>URL 不能包含空格。URL 编码通常使用 + 来替换空格。</p>
<p><a name="HTML5"></a></p>
<h1 id="460t2y"><a name="460t2y" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5</h1><p>HTML5 中的一些有趣的新特性：</p>
<ul>
<li>用于绘画的 canvas 元素</li><li>用于媒介回放的 video 和 audio 元素</li><li>对本地离线存储的更好的支持</li><li>新的特殊内容元素，比如 article、footer、header、nav、section</li><li>新的表单控件，比如 calendar、date、time、email、url、search</li></ul>
<p><a name="a9a3ab54"></a></p>
<h2 id="9gbsgl"><a name="9gbsgl" class="reference-link"></a><span class="header-link octicon octicon-link"></span><canvas> 新元素</h2><p><a name="f0989ea5"></a></p>
<h3 id="4qhr7o"><a name="4qhr7o" class="reference-link"></a><span class="header-link octicon octicon-link"></span>什么是 Canvas?</h3><p>HTML5 元素用于图形的绘制，通过脚本 (通常是<a rel="nofollow" href="https://www.w3cschool.cn/javascript/js-tutorial.html">JavaScript</a>)来完成.</p>
<p>标签只是图形容器，您必须使用脚本来绘制图形。</p>
<p>你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。</p>
<p><a name="4aa8ccc0"></a></p>
<h3 id="5z6e47"><a name="5z6e47" class="reference-link"></a><span class="header-link octicon octicon-link"></span>创建一个画布（Canvas）</h3><p>一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.</p>
<p>注意: 默认情况下 <canvas> 元素没有边框和内容。</p>
<p><canvas>简单实例如下:</p>
<pre><code class="lang-html"><canvas id="myCanvas" width="200" height="100"></canvas>
</code></pre>
<p><strong>提示:</strong> 你可以在HTML页面中使用多个 <canvas> 元素.</p>
<p>使用 style 属性来添加边框:</p>
<pre><code class="lang-html"><canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
</code></pre>
<p><a name="6e5cec1c"></a></p>
<h3 id="1pjdbi"><a name="1pjdbi" class="reference-link"></a><span class="header-link octicon octicon-link"></span>使用 JavaScript 来绘制图像</h3><p>canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：</p>
<pre><code class="lang-html"><script>
//首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
//然后，创建 context 对象：getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</code></pre>
<p>设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。</p>
<p>fillRect(<em>x,y,width,height</em>) 方法定义了矩形当前的填充方式。</p>
<p><a name="e43ce028"></a></p>
<h3 id="f57eg8"><a name="f57eg8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Canvas 坐标</h3><p>canvas 是一个二维网格。</p>
<p>canvas 的左上角坐标为 (0,0)</p>
<p>上面的 fillRect 方法拥有参数 (0,0,150,75)。</p>
<p>意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。</p>
<p><a name="07e63f65"></a></p>
<h3 id="d9vndg"><a name="d9vndg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Canvas - 路径</h3><p>在Canvas上画线，我们将使用以下两种方法：</p>
<ul>
<li>moveTo(<em>x,y</em>) 定义线条开始坐标</li><li>lineTo(<em>x,y</em>) 定义线条结束坐标</li></ul>
<p>绘制线条我们必须使用到 “ink” 的方法，就像stroke().</p>
<pre><code class="lang-javascript">//定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</code></pre>
<p>在canvas中绘制圆形, 我们将使用以下方法:</p>
<ul>
<li>arc(x,y,r,start,stop)</li></ul>
<p>实际上我们在绘制圆形时使用了 “ink” 的方法, 比如 stroke() 或者 fill().</p>
<pre><code class="lang-javascript">var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</code></pre>
<p><a name="eaf88573"></a></p>
<h3 id="dr4amk"><a name="dr4amk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Canvas - 文本</h3><p>使用 canvas 绘制文本，重要的属性和方法如下：</p>
<ul>
<li>font - 定义字体</li><li>fillText(<em>text,x,y</em>) - 在 canvas 上绘制实心的文本</li><li>strokeText(<em>text,x,y</em>) - 在 canvas 上绘制空心的文本</li></ul>
<p>使用 fillText():</p>
<pre><code class="lang-javascript">//使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
</code></pre>
<p><a name="2dd4adbe"></a></p>
<h3 id="ejgwkh"><a name="ejgwkh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Canvas - 渐变</h3><p>渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。</p>
<p>以下有两种不同的方式来设置Canvas渐变：</p>
<ul>
<li>createLinearGradient(<em>x,y,x1,y1</em>) - 创建线条渐变</li><li>createRadialGradient(<em>x,y,r,x1,y1,r1</em>) - 创建一个径向/圆渐变</li></ul>
<p>当我们使用渐变对象，必须使用两种或两种以上的停止颜色。</p>
<p>addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.</p>
<p>使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。</p>
<p>使用 createLinearGradient():</p>
<pre><code class="lang-javascript">//创建一个线性渐变。使用渐变填充矩形:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</code></pre>
<p><strong>提示：</strong>当使用<canvas>元素创建径向渐变的时候 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内的参数有如下的含义:</p>
<ul>
<li>x：表示渐变的开始圆的 x 坐标</li><li>y：表示渐变的开始圆的 y 坐标</li><li>r：表示开始圆的半径</li><li>x1：表示渐变的结束圆的 x 坐标</li><li>y1：表示渐变的结束圆的 y 坐标</li><li>r1：表示结束圆的半径</li></ul>
<p><a name="0cdafee7"></a></p>
<h3 id="5fwo89"><a name="5fwo89" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Canvas - 图像</h3><p>把一幅图像放置到画布上, 使用以下方法:</p>
<ul>
<li>drawImage(<em>image,x,y</em>)</li></ul>
<pre><code class="lang-javascript">//把一幅图放到画布上
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</code></pre>
<p><a name="15aef3d1"></a></p>
<h2 id="2w5sw6"><a name="2w5sw6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 拖放（Drag 和 Drop）</h2><hr>
<p>拖放的目的是可以让你将某个对象放置到你想要放置的位置。</p>
<p>拖放（Drag 和 drop）是 HTML5 标准的组成部分。</p>
<pre><code class="lang-html"><!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>
<p>拖动 w3cschool.cn 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/statics/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
</code></pre>
<ol>
<li>首先，为了使元素可拖动，把 draggable 属性设置为 true ; </li><li>然后，规定当元素被拖动时，会发生什么。<br />在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。<br />dataTransfer.setData() 方法设置被拖数据的数据类型和值：在这个例子中，数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。 </li><li>默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。<br />这要通过调用 ondragover 事件的 event.preventDefault() 方法 </li><li>当放置被拖数据时，会发生 drop 事件。<br />在上面的例子中，ondrop 属性调用了一个函数，drop(event) </li></ol>
<p><a name="b044b7be"></a></p>
<h2 id="gh700r"><a name="gh700r" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 (视频)- 如何工作</h2><p>如需在 HTML5 中显示视频，您所有需要的是：</p>
<pre><code class="lang-html"><video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
</code></pre>
<p><video> 元素提供了播放、暂停和音量控件来控制视频。</p>
<p>同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸。如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变。</p>
<p><video> 与 </video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。</p>
<p><video> 元素支持多个 <video> 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式</p>
<p><a name="bb2964f5"></a></p>
<h2 id="dqestz"><a name="dqestz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 Audio - 如何工作</h2><p>如需在 HTML5 中播放音频，你需要使用以下代码：</p>
<pre><code class="lang-html"><audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
</code></pre>
<p>control 属性供添加播放、暂停和音量控件。</p>
<p>在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。</p>
<p><audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。</p>
<p><a name="55084072"></a></p>
<h2 id="74bqyx"><a name="74bqyx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 表单元素</h2><hr>
<p><a name="5a8e8940"></a></p>
<h3 id="a595b"><a name="a595b" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 新的表单元素</h3><p><strong>注意:</strong>不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。</p>
<hr>
<p><a name="d0af3b92"></a></p>
<h3 id="3lvmwn"><a name="3lvmwn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 <datalist> 元素</h3><p><datalist> 元素规定输入域的选项列表。</p>
<p><datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：</p>
<p>使用 <input> 元素的列表属性与 <datalist> 元素绑定.</p>
<pre><code class="lang-html"><!-- <input> 元素使用<datalist>预定义值: -->
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</code></pre>
<p><a name="a1d4f38e"></a></p>
<h3 id="65p643"><a name="65p643" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 <keygen> 元素</h3><p><keygen> 元素的作用是提供一种验证用户的可靠方法。</p>
<p><keygen>标签规定用于表单的密钥对生成器字段。</p>
<p>当提交表单时，会生成两个键，一个是私钥，一个公钥。</p>
<p>私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。</p>
<pre><code class="lang-html"><!--带有keygen字段的表单:-->
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
</code></pre>
<p><a name="910432cd"></a></p>
<h3 id="9t6b73"><a name="9t6b73" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 <output> 元素</h3><p><output> 元素用于不同类型的输出，比如计算或脚本输出：</p>
<pre><code class="lang-html"><!--将计算结果显示在 <output> 元素:-->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
</code></pre>
<p><a name="8c4acb48"></a></p>
<h2 id="2fd4j9"><a name="2fd4j9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 新的表单属性</h2><p>HTML5 的 <form> 和 <input>标签添加了几个新属性.</p>
<p><form>新属性：</p>
<ul>
<li>autocomplete：拥有自动完成功能。</li><li>novalidate：规定在提交表单时不应该验证 form 或 input 域。</li></ul>
<p><input>新属性：</p>
<ul>
<li>autocomplete：拥有自动完成功能。</li><li>autofocus：规定在页面加载时，域自动地获得焦点。</li><li>form：规定输入域所属的一个或多个表单。</li><li>formaction</li><li>formenctype</li><li>formmethod</li><li>formnovalidate</li><li>formtarget</li><li>height and width</li><li>list</li><li>min and max</li><li>multiple</li><li>pattern (regexp)</li><li>placeholder</li><li>required</li><li>step</li></ul>
<p><a name="3460c477"></a></p>
<h2 id="726iku"><a name="726iku" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 语义元素</h2><hr>
<p><a name="a3ba5c75"></a></p>
<h3 id="e5nj4q"><a name="e5nj4q" class="reference-link"></a><span class="header-link octicon octicon-link"></span>什么是语义元素?</h3><p>一个语义元素能够清楚的描述其意义给浏览器和开发者。</p>
<p><strong>无语义</strong> 元素实例: <div> 和 <span> - 无需考虑内容.</p>
<p><strong>语义</strong>元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.</p>
<p>许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.</p>
<p>HTML5提供了新的语义元素来明确一个Web页面的不同部分:</p>
<ul>
<li><header>：描述了文档的头部区域，用于定义内容的介绍展示区域，在页面中你可以使用多个<header> 元素。</li><li><nav>：定义导航链接的部分。</li><li><section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。</li><li><article>：定义独立的内容。</li><li><aside>：定义页面主区域内容之外的内容（比如侧边栏）。</li><li><figcaption>：定义 <figure> 元素的标题.</li><li><figure>：规定独立的流内容（图像、图表、照片、代码等等）。</li><li><footer>：描述了文档的底部区域.</li></ul>
<p><a name="6b91aa6d"></a></p>
<h2 id="42e40w"><a name="42e40w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 Web 存储</h2><hr>
<p>在HTML5之前，主要是使用cookies存储，cookies的缺点有：需要在请求头上带着数据，存储大小不过，在4k之内。本节，</p>
<p>HTML5 web 存储，一个比cookie更好的本地存储方式。</p>
<hr>
<p><a name="24d21c2e"></a></p>
<h3 id="4ztk24"><a name="4ztk24" class="reference-link"></a><span class="header-link octicon octicon-link"></span>什么是 HTML5 Web 存储?</h3><p>使用HTML5可以在本地存储用户的浏览数据。</p>
<p>早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。</p>
<p>数据以键/值对存在, web网页的数据只允许该网页访问使用。</p>
<p><a name="93820442"></a></p>
<h3 id="dm70y0"><a name="dm70y0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>localStorage 和 sessionStorage</h3><p>客户端存储数据的两个对象为：</p>
<ul>
<li>localStorage - 没有时间限制的数据存储</li><li>sessionStorage - 针对一个 session 的数据存储</li></ul>
<p><a name="89950e3e"></a></p>
<h3 id="73459b"><a name="73459b" class="reference-link"></a><span class="header-link octicon octicon-link"></span>localStorage 对象</h3><p>localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。</p>
<pre><code class="lang-javascript">localStorage.sitename="W3Cschool在线教程";
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
</code></pre>
<p>实例解析：</p>
<ul>
<li>使用 key=”sitename” 和 value=”W3Cschool在线教程” 创建一个 localStorage 键/值对。</li><li>检索键值为”sitename” 的值然后将数据插入 id=”result”的元素中。</li></ul>
<p>移除 localStorage 中的 “lastname” :</p>
<pre><code class="lang-javascript">localStorage.removeItem("lastname");
</code></pre>
<p>不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：</p>
<ul>
<li>保存数据：localStorage.setItem(key,value);</li><li>读取数据：localStorage.getItem(key);</li><li>删除单个数据：localStorage.removeItem(key);</li><li>删除所有数据：localStorage.clear();</li><li>得到某个索引的key：localStorage.key(index);</li></ul>
<p><a name="cb74d4ed"></a></p>
<h2 id="8pgfm6"><a name="8pgfm6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 应用程序缓存</h2><hr>
<p>使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。这意味着，你可以在没有网络连接的情况下进行访问。</p>
<hr>
<p><a name="81b32a26"></a></p>
<h3 id="cmuw44"><a name="cmuw44" class="reference-link"></a><span class="header-link octicon octicon-link"></span>什么是应用程序缓存（Application Cache）？</h3><p>HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。</p>
<p>应用程序缓存为应用带来三个优势：</p>
<ol>
<li>离线浏览 - 用户可在应用离线时使用它们</li><li>速度 - 已缓存资源加载得更快</li><li>减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。</li></ol>
<p><a name="14006ea5"></a></p>
<h2 id="9ksemf"><a name="9ksemf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 Web Workers</h2><hr>
<p>web worker 是运行在后台的 JavaScript，不会影响页面的性能，更好的解释是，你可以使用web worker提供的一种简单的方法来为web内容在后台线程中运行脚本，这些线程在执行任务的过程中并不会干扰用户界面！</p>
<hr>
<p><a name="771048ac"></a></p>
<h3 id="4wqyd2"><a name="4wqyd2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>什么是 Web Worker？</h3><p>当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。</p>
<p>web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。</p>
<p><a name="b9028bec"></a></p>
<h2 id="5qz9ic"><a name="5qz9ic" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 服务器发送事件(Server-Sent Events)</h2><hr>
<p>服务器发送事件（Server-sent Events）是基于 WebSocket 协议的一种服务器向客户端发送事件和数据的单向通讯。</p>
<p>HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。</p>
<hr>
<p><a name="26fe9f4c"></a></p>
<h3 id="98tfts"><a name="98tfts" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Server-Sent 事件 - 单向消息传递</h3><p>Server-Sent 事件指的是网页自动获取来自服务器的更新。</p>
<p>以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。</p>
<p>例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。</p>
<p><a name="32fef04d"></a></p>
<h2 id="g7k28n"><a name="g7k28n" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5 WebSocket</h2><p>WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。</p>
<p>WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。</p>
<p>在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。</p>
<p>现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。</p>
<p>浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。</p>
<p>当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。</p>
