作为一名前端人员，相信HTML是大家最熟悉不多的东西，但是每一次新的学习都会有新的收获。刚开始学习的时候太注重一些常用标签的使用，重新学习时才发现有很多东西应该注意
1：HTML的发展史
HTML是超文本标记语言，它不同于Java、c++等编程语言，而是一种标记语言。它通过一套标记标签组成（例如<html></html>,<body></body>等）。HTML通过这些标记标签来描述页面。
当然最初的版本是HTML1.0,但它只是一个草案，并没有正式的标准；紧接着是2.0 , 3.2 , 4.0 , 4.0.1,紧接着出现了XHTML1.0（可扩展超文本标记语言），它是HTML以及XML（可扩展标记性语言）的结合;然后再是XHTML2.0,最后再演变为现在的HTML5。
紧接着就是一直傻傻都不是很明白的一些名词和关系
SGML
标准通用置标语言是一种通用的文档结构描述置标语言，为语法置标提供了异常强大的工具，同时具有极好的扩展性，因此在数据分类和索引中非常有用。但SGML复杂度太高，不适合网络的日常应用，加上开发成本高、不被主流浏览器所支持等原因，使得SGML在Web上的推广受到阻碍。HTML和XML都是SGML的子集。XML可以被认为是SGML的一个子集，而HTML是SGML的一个应用
XML（Extensible Markup Language）
中文为可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。XML可以用来标记数据、定义数据类型，可以允许用户对自己标记语言进行定义，是对人和机器都比较友好的数据承载方式。它提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据，非常适合万维网传输，是Internet环境中跨平台、依赖于内容的技术，也是当今处理分布式结构信息的有效工具
2:<!DOCTYPE>的作用
<!DOCTYPE>必须放在HTML文件的第一行，用来告诉浏览器的解析器应该以什么样的文档标准解析文档
HTML5中只需要写是因为它不基于SGML,因此不需要对DTD进行引用，只需要用<!DOCTYPE HTML>来规范浏览器的行为。而HTML 4.0.1基于SGML,所以需要对DTD(Document Type Definition)进行引用，才能告知浏览器文档所使用的文档类型
在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种
意义：1：让浏览器以标准模式渲染（例如盒子模型有IE盒模型和标准盒子模型，如果加上doctype就会默认是标准盒子模型）
2：让浏览器知道元素的合法性
3：em和i的区别
em和i在HTML标签中的作用都是斜体的意思，但是不同的是em是语义化标签，表示强调作用，而i是纯样式标签，表示斜体。
4：语义化的意义
语义即为意义。语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。这样的做法是开发者以及机器更容易理解，有助于SEO（搜索引擎优化）
5：HTML和DOM
HTML经过浏览器解析变成DOM，js可以维护DOM，而不是HTML
6：Property和attribute的区别
两者用中文翻译过来都是属性的意思，一般我们将property表示为特性，而attribute表示为属性，attribute是死的，它是写在HTML中的属性。经过解析之后，每一个DOM都会有一个property属性，这个属性是“活的”
例如：<input type="text" value='1'>
假如有一个input文本框，我们给一个它的属性value设置值为1，然后解析之后就会有一个property特性，这个特性的值时可以改变的，我们可以将原本文本框中的1在页面上重新赋值为其他数字。但是使用getattribute获取value的值依然为1。
7：form的作用
1：直接提交表单
2：可以使用submit /reset按钮
3:便于浏览器保存表单
8：html5有什么新的变化
1 拖拽释放(Drag and drop)
2语义化标签
<article> 页面独立的内容区域。
<aside> 页面的侧边栏内容。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command> 命令按钮，比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 对话框，比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> <figure> 元素的标题
<footer> section 或 document 的页脚。
<header> 文档的头部区域
<mark> 带有记号的文本。
<meter> 度量衡。仅用于已知最大和最小值的度量。
<nav> 导航链接的部分。
<progress> 任何类型的任务的进度。
<ruby> ruby 注释（中文注音或字符）。
<rt> 字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，不支持 ruby 元素的浏览器所显示的内容。
<section> 文档中的节（section、区段）。
<time> 日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
3 音频、视频(audio,video)
4 画布(Canvas)
5.地理(Geolocation)
6 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7sessionStorage 的数据在浏览器关闭后自动删除
8表单控件，calendar、date、time、email、url、search
9 新的技术webworker, websocket, Geolocation
9.Web 存储
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有
过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，
在关闭窗口或标签页之后将会删除这些数据
具体可以去官网看看web存储
10.web WebSocket
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯.
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据
菜鸟教程上写的很全，具体可以看看
