HTML的全程是Hyper Text Markup Language，中文名叫超文本标记语言，是一种用于创建网页的标准标记语言。HTML不是一种编程语言，而是一种标记语言，用来描述网页。
一、最基本的HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>First Page</title>
</head>
<body>
<h1>这是标题</h1>
<p>这是段落</p>
</body>
</html>
其中
- <!DOCTYPE html>：声明该文档是HTML5文档，加上这个声明有助于浏览器正确的显示网页内容。
- <html>：HTML文档的根元素。
- <head>：包含HTML文档的头信息，包括文档标题和文档的元数据。
- <title>：文档标题。
- <meta>：文档元数据，其中的charset="utf-8"属性表示文档采用utf-8编码，如果没有这个声明，可能会出现中文乱码。
- <body>：可见的页面内容。
- <h1>：标题。
- <p>：段落。
HTML内容
HTML在显示时浏览器会移除多余的的空格和空行，所有的空行和空格都会显示成一个空格。
HTML标签
- HTML标签不区分大小写，但是推荐使用小写，未来版本中会强制使用小写。
- HTML标签最好全都开始标签和结束标签成对出现，没有内容的标签可以在开始标签最后添加"/"关闭标签，表示空标签。
- 在开始标签中设置属性可以给元素增加附件信息。
HTML属性
- 属性使用键值对表示。
- 其中属性值始终包含在引号内，一般使用双引号，也可以使用单引号。
- 属性也使用小写。
二、基本标签
标题
使用<h1> - <h6>来表示，字体越来越小。
<h1>这是标题</h1>
段落
使用<p>表示。
<p>这是段落</p>
链接
使用<a>表示。
<a href="https://www.baidu.com">这是指向百度的链接</a>
在元素中添加标签ID，可以在href中添加#id来跳转到页面特定部分，还可以把文字换成图片标签来显示图片链接。
图像
使用<img>表示。
<img src="./imges/logo.png" width="255" height="255" />
注释
<!-- 这是注释 -->
分割线
<hr>
段落内换行
<br>
格式化文本
可以使用<b><i>设置粗体、斜体等，还有很多别的格式化文本的标签。
三、常用属性
几乎所有HTML标签都有的属性：
- class： 定义元素的一个或多个类名。
- id：定义元素的唯一ID。
- style：定义元素的行内样式。
- title：定义元素的额外信息（作为工具条使用）。
四、HTML头部
头部标签用<head>括起来，可以包含到这个标签里的标签有：<title><style><meta><link><script><noscript><base>。
- <title>
定义标题。 - <base>
定义本 文档中所有的链接标签的默认链接地址。 - <link>
定义本文档和外部资源的关系，通常用于链接到样式表。 - <style>
定义了文档的样式文件引用地址，也可以直接添加样式信息。 - <meta>
定义了网页元数据，可以包含网页的描述、关键词、文件的最后修改时间、作者。 - <script>
用于加载脚本。
五、HTML样式
可以通过3种方式把样式表添加到HTML文档中：
- 内联样式：在标签中使用style属性。
- 内部样式表：在<head>中的<style>中包含样式信息。
- 外部引用：使用外部CSS文件。
最好的方式是通过外部引用CSS文件
六、布局显示
大多数HTML的标签都可以定义为块级元素和内联元素，块级元素以新行来显示，内联元素不会以新行开始。
表格
表格由<table>定义，每个表格有若干行，由<tr>定义，每行被分割为若干个单元格，由<td>定义，意思是表格数据，单元格里可以嵌套其他的标签。另外还可以定义表头，用<th>表示。
需要注意表格现在一般不用于布局。
列表
列表支持有序列表、无序列表和自定义列表。
- 有序列表：使用<ol>定义，列表项用<li>定义。
- 无序列表：使用<ul>定义，列表项用<li>定义。
- 自定义列表：使用<dl>定义，一个列表使用<dt>定义，列表项用<dd>定义。
列表项内部可以嵌套各种标签。
区块
区块用<div>定义，一般用于其他标签的容器作文档布局和对大的内容块设置样式属性。另外还有一个<span>标签，用于部分文本设置样式属性。
七、表单
表单用于收集不同类型的用户输入，用<form>来定义，。一般里面都是嵌套输入标签<input>，通过不同的类型属性定义不同输入类型。输入类型常用以下几种：
- 文本域：type="text"，用来输入文本。
- 密码：type="password"，用来输入密码。
- 单选按钮：type="radio"，用来定义单选选项。
- 复选框：type="checkbox"，用来定义复选选项。
- 提交按钮：type="submit"，用来定义提交按钮。
另外还可以定义下拉列表、按钮等。
表单标签中还可以定义其他很多和用户输入相关的标签。
八、框架
使用框架，可以在一个浏览器窗口中显示不止一个页面，例如左边是目录，右边是内容的页面。
框架是通过<iframe>来定义的。
<iframe src=""></iframe>
可以通过属性定义框架的尺寸、是否显示边框等。
九、颜色
颜色值使用一个十六进制符号定义：#0000ff。另外还有一部分的常用颜色可以使用颜色名来定义：blue。
十、脚本
脚本使用<script>定义，该标签可以嵌在<head>中或<body>中，脚本代码就包含在这个标签中。通过脚本可以和用户进行交互，对内容进行动态更新等。
十一、字符实体
如果在文档内容中包含HTML的保留字符，必须替换为字符实体才能显示。可以用字符实体显示的还有特殊字符和空格，使用字符实体可以显示连续的多个空格。
十二、URL
在网络上使用统一资源定位符URL来定位万维网上的文档，URL的格式如下
scheme://host.domain:port/path/filename
- scheme：定义因特网服务的类型，最常见的类型是http。
- host：定义域主机(http的默认主机是www)。
- domain：定义域名。
- :port：定义端口号。
- path：定义服务器上的路径，相对于网站根目录。
- filename：定义文档或资源名称。
URL中只能使用ASCII字符集，如果有非ASCII字符需要转为URL编码表示。URL编码使用“%”后跟两位十六进制数来表示。URL中不能包含空格，一般使用+来替换空格。
十三、HTML5
HTML5的设计目的是在移动设备上支持多媒体。HTML5中增加了很多新特性：
- 增加了一些新元素和新属性，例如画布元素、多媒体元素等，也去除了一些原来的标准中不规范或没什么用的元素。
- 支持本地离线存储。
- 全面支持CSS3。
1.画布canvas
<canvas>标签定义画布，实际就是一个矩形框，在js中获取到这个画布对象进行绘图。
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0, 100, 100);
</script>
2.SVG矢量图
SVG是一种使用XML描述2d图形的语言，可以在HTML页面中直接嵌入SVG数据显示矢量图。SVG中的每个绘制的图形都被视为对象，可以使用js操作也可以添加事件处理。适合带有大型渲染区域的应用，如谷歌地图，不适合游戏应用。
<svg xmln="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180" />
</svg>
3.MathML
MathML是一种基于XML的用于在web上书写数学符号和公式的标记语言，在HTML中可以通<math>标准嵌入在页面中。
<math xmln="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
4.拖放
在HTML5中，任何元素都可以拖放。
<script>
function drag(ev)
{
ev.dataTransfer.setData("Text", ev.target.id);
}
function allowDrop(ev)
{
ev.preventDefault();
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<img draggable="true" ondragstart="draw(event)">
<div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
5.音频视频
音频使用标签<audio>，视频使用标签<video>。
6.表单
HTML5中新增了很多新的input类型，类型增加了日期、时间、颜色、电子邮件等，提供了更好的输入控制和验证。另外还新增了几种表单标签：
-
<datalist>：选项列表。 -
<keygen>：密钥生成器。 -
<output>：输出。
另外每种标签增加了很多新的属性，用于对标签进行更好的控制。
7.Web存储
HTML5的Web存储是一种比cookie更好的本地存储方式。用于存储对象的两上对象是localStorage和sessionStorage：
- localStorage：用于长久保存一个网站的数据，没有过期时间，直到手动删除。
- sessionStorage：用于临时保存同一窗口或标签页的数据，在关闭窗口或标签页之后会删除。
使用之前先检查浏览器是否支持Web存储：
if (typeof(Storage)!=="undefined")
{
//支持
}
localStorage
常用的API：
- localStorage.setItem(key, value)：保存数据
- localStorage.getItem(key, value)：读取数据
- localStorage.removeItem(key)：删除单个数据
- localStorage.clear()：删除所有数据
- localStorage.key(index)：获取某个索引的key
一般在使用时的方式：
localStorage.key = value； //保存数据
localStorage.key； //读取数据
当然，如果key是一个变量，就只能使用上面展示的API中的方式了。
sessionStorage
API、用法和localStorage是一样的，只是其数据在网页关闭后会清除。
8.Web SQL
Web SQL并不是HTML5标准的一部分，它是一个独立的规范，引入了一组使用SQL操作客户端数据库的API。这个规范中有3个核心方法：
openDatabase：使用现有的数据库或新建的数据库创建一个数据库对象。
transaction：控制一个事务，以及基于这种事务的提交或回滚。
-
executeSql：执行实际的SQL语句。
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024)
参数分别是数据库名称、版本号、描述文本、数据库大小，回调，最后一个参数可有可无。
db.transaction(function (tx){
tx.executeSql('Sql语句');
});
executeSql中还可以增加其他参数来对结果进行控制。
9.应用程序缓存
HTML5引入了应用程序缓存，这样Web应用可进行缓存，缓存了之后不联网也可以使用。
10.Web Worker
Web worker是运行在后台的JavaScript，不会影响页面的性能。
11.服务器发送事件Server-Sent Events
通过SSE可以让网页自动获取来自服务器的更新，这除了在页面中添加对应的处理，在服务器端也要支持发送事件。服务器的新消息就是通过这种方式发送的？
12.WebSocket
WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，浏览器和服务器之间就形成了一条快速通道，两者之间就可以进行数据交换了。
