HTML

HTML 超文本标记语言 Hyper Text Markup Language
用标签描述网页，核心就是HTML标签（HTML tag），HTML是大小写不敏感的，eg：

    <!DOCTYPE html>   //文档类型的声明标签，不属于html标签，指示使用的是哪个html版本
    <html lang="en">  //lang属性指明文档显示语言
        <head>
            <meta charset="UTF-8">//字符集，一般使用UTF-8
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title></title> //文档标题
        </head>      
        <body>        //主体，也是页面可见的内容部分
            <!-- 这是注释标签，基础标签 -->
            <h1></h1> //标题，h1-h6
            <p></p>   //段落
            <hr>      //水平线
            <br/>     //空白行
            <a></a>   //HTML超链接，href属性指定链接地址，target指定被链接文档打开形式，例如新窗口打开，name属性可以创建锚，通过锚实现页面内跳转
            <img>     //图像，src属性指向图片地址；alt属性指向替换文本；通过map可以创建可供点击区域的图像映射，每个区域都是超链接；
            ismap属性将图像定义为服务器端图像映射，点击一个服务器端图像映射，点击坐标会以URL查询字符串的形式发送到服务器

            <!-- 文本格式化标签 -->
            <strong></strong><b></b>   //加粗字
            <em></em> <i></i>   //斜体字
            <del></del><s></s>   //删除线
            <ins></ins><u></u>   //下划线
            <big></big> <small></small> //大、小号字
            <sub></sub> <sup></sup> //上标、下标

            <!-- 引用相关 -->
            <q>这是引用标签,为内容添加双引号</q>
            <blockquote>缩进处理</blockquote>
            <p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
            <p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>
            <!-- 用于提供文章/文档的作者、联系方式 h5-->
            <address>
                Written by JackMa.<br> 
                Visit us at:<br>
                Example.com<br>
                Box 564, Disneyland<br>
                USA
            </address>
            <!-- HTML <cite> 元素定义著作的标题,斜体显示 h5-->
            <cite>The Scream</cite>
            <!-- bdo元素定义双流向覆盖（bi-directional override）,默认ltr，可以设置为rtl -->
            <bdo dir="rtl">This text will be written from right to left</bdo>

            <!-- 计算机代码显示
            <code>  定义计算机代码文本
            <kbd>   定义键盘文本
            <samp>  定义计算机代码示例
            <var>   定义变量
            <pre>   定义预格式化文本 -->

            <!-- 表格 -->
            <table border="1">
                <caption>这是标题</caption>
                <tr>
                    <th align="left">姓名</th>
                    <th align="right"colspan="2">性别</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>男</td>
                    <td>女</td>
                </tr>
            </table>
            <!-- 
                1.无边框表格，默认或者border=0
                2.表头th
                3.标题caption
                4.格边距cellpadding、格间距cellspacing
                5.align属性排列
                6.frame属性设置边框显示，box、above、below、hsides、vsides
             -->

            <!-- 列表 可以通过css设置列表样式
            1.有序列表 ol
            2.无序列表 ul
            3.列表项目 li
            4.定义列表 dl，定义项目 dt 定义描述 dd
             -->
            <ul>
                <li>第一项</li>
                <li>第二项</li>
            </ul>
            <!-- 块级元素 div，内联元素span -->
            
        </body>
    </html>

HTML文档 = 网页 = HTML标签 + 纯文本

HTML的属性
全局属性包括class、id、title、draggable(h5新增)、style

HTML布局和响应式设计
RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的
一般可以直接使用bootstrap框架实现

HTML框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。使用框架的坏处：开发人员必须同时跟踪更多的HTML文档；很难打印整张页面
框架结构标签：frameset、frame
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。为不支持框架的浏览器添加 <noframes> 标签。

<!-- cols/rows设置框架垂直/水平的分配比例 -->
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>

内联框架Iframe
iframe 用于在网页内显示网页。
添加 iframe 的语法

<iframe src="URL" width="200" height="200" frameborder="0" name="frame_a"></iframe>
<p><a href="http://baidu.com" target="iframe_a">go to baidu</a></p>
<!-- URL 指向隔离页面的位置,属性指定高宽和边框，还可以设置name属性将iframe作为target链接的目标 -->

HTML头部元素标签

title 文档标题
base 为页面上的所有链接规定默认地址或默认目标（target）
meta 提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引页面。
link 定义文档与外部资源之间的关系，最常用为连接外部样式表
script 用于定义客户端脚本，比如 JavaScript。
style 用于为 HTML 文档定义样式信息。

HTML中的字符实体
实体名称对大小写敏感

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

HTML颜色

颜色值颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
颜色名仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
Web安全色数年前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

HTML <!DOCTYPE>
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

XHTML
XHTML 指的是可扩展超文本标记语言，与 HTML 4.01 几乎是相同的，XHTML是更严格更纯净的 HTML 版本，是以 XML 应用的方式定义的 HTML。
XHTML与HTML的区别
文档结构：

XHTML DOCTYPE 是强制性的
<HTML> 中的 XML namespace 属性是强制性的
<HTML>、<title>、<body> 以及 <head> 也是强制性的。

元素语法：

XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素

属性语法：

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的

HTML表单
HTML表单用于搜集用户输入，一般使用<form>，form中包含表单元素，包括不同类型的input、复选框、单选框、单选按钮、提交按钮等等。

input 是最重要的表单元素，主要使用的类型是text、radio、、password、submit、checkbox、number，text单行输入文本，默认宽度为20字符（这并不是说只能输入20个字符，而是显示长度），radio允许用户在有限的选项中选择一个，submit用于向表单处理程序提交表单，在表单的action中指定，可以使用method指定提交方法为get/post，并且需要为每个提交字段设置name属性。
fieldset 元素可将表单内的相关元素分组，当一组表单元素放到 <fieldset>标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。<fieldset> 标签没有必需的或唯一的属性。<legend> 标签为 fieldset 元素定义标题。
select 定义下拉列表，<option>元素定义待选择选项，列表通常会将第一个选择作为被选选项，可以设置selected属性来定义预选选项。
textarea 定义多行文本输入字段，可以通过rows、cols定义大小。
button 定义可点击按钮。
H5新增
datalist 为 <input> 元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。<input> 元素的 list 属性必须引用 <datalist>元素的 id 属性。
h5新增的input类型 color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week，同时增加了输入限制，包括disabled、max、min、maxlength、pattern（正则表达式）、readonly、required、step、size、value（默认值）
h5新增的表单元素（需要注意浏览器的支持性问题）
- datalist 规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的，option必须设置value属性。如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id。
- output 用于不同类型的输出，比如计算或脚本输出。
- keygen 密钥对生成器（key-pair generator），是提供一种验证用户的可靠方法。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

HTML5

默认字符编码UTF-8，跨平台、新语义、图形和媒体元素。

新的属性语法

H5支持四种不同的属性语法：

Empty <input type="text" value="John Doe" disabled>
Unquoted <input type="text" value=John Doe disabled>
Double-quoted <input type="text" value="John Doe">
Single-quoted <input type="text" value='John Doe'>

HTML图形

Canvas HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，用于定义用于网络的基于矢量的图，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失。
与传统图像格式（jpg、gif等）相比具有可通过文本编辑器来创建和修改、可被搜索、索引、脚本化或压缩、可伸缩的、可在任何的分辨率下被高质量地打印、可在图像质量不下降的情况下被放大的优点。
Canvas vs SVG
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas：

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG：

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

HTML多媒体

使用<object>或者<embed>标签加载HTML插件以支持对多媒体文件的播放。

音频播放

<object>或者<embed>标签

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

使用H5的audio元素，下面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，代码将回退尝试<embed> 元素。

<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>

使用第三方脚本播放，例如雅虎播放器。

<a href="song.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

视频播放

<embed>或者<object>，h4不支持embed，并且两者都要求浏览器支持flash，iPhone和iPad不支持flash视频

<embed src="movie.swf" height="200" width="200"/>
<object data="movie.swf" height="200" width="200"/>

<video>是html5中的新标签，考虑到H4和XHTML的支持,最好的解决办法如下

<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>

第三方解决方案，例如优酷播放器

HTML5 API

1.地理定位

getCurrentPosition() 方法 - 返回数据
若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy		位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

2.拖放

拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。
拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。

首先：为了把一个元素设置为可拖放，请把 draggable 属性设置为 true；
然后，规定当元素被拖动时发生的事情。ondragstart 属性调用了一个 drag(event) 函数，规定拖动什么数据。dataTransfer.setData() 方法设置被拖动数据的数据类型和值；
ondragover 事件规定被拖动的数据能够被放置到何处。默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。这个任务由 ondragover 事件的 event.preventDefault() 方法完成；
当放开被拖数据时，会发生 drop 事件。ondrop 属性调用了一个函数，drop(event)，将拖动元素追加到放置元素中。

3.本地存储

什么是本地存储？通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。
怎么存储？HTML 本地存储提供了两个在客户端存储数据的对象：

window.localStorage - 存储没有截止日期的数据
window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

怎么使用本地存储？在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持。
使用：

// 存储
localStorage.setItem("lastname", "Gates");
localStorage.lastname11 = "Gates1";
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
document.getElementById("result").innerHTML = localStorage.lastname1;
// 删除
localStorage.removeItem("lastname");
// 名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！
// sessionStorage 对象等同 localStorage 对象，不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。

4.HTMl5 应用缓存

什么是应用缓存？ HTML5 引入了应用程序缓存（Application Cache），这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
Cache Manifest 基础
如需启用应用程序缓存，请在文档的html标签中包含 manifest 属性：manifest="demo.appcache"
Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件有三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

5.HTML5 Web Workers

什么是 Web Worker？当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。
怎么使用web workers？

检测浏览器支持 if (typeof(Worker) !== "undefined")
在一个外部js文件中创建 Web Worker，使用postMessage回传消息到html
在html页面创建web workers对象， w = new Worker("demo_workers.js");，从web workers对象发送和接收消息为web worker对象添加onMessage事件监听
使用web worker的terminate()方法终止运行

6.HTML5 SSE

什么是SSE？Server-Sent 事件指的是网页自动从服务器获得更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件，更新能够自动到达。例如：Facebook/Twitter 更新、股价更新、新的博文、赛事结果，等等。单向通道。
怎么使用SSE？
创建EventSource 对象用于接收服务器发送事件通知：

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

同时还需要能够发送数据更新的服务器，服务器响应的MIME类型必须是"text/event-stream"，SSE 支持短轮询、长轮询和HTTP 流，而且能在断开连接时自动确定何时重新连接。

HTML基础总结