一、发展历史html发展历史1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他提出并创建原型系统ENQUIRE。1989年，伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统。他规定HTML并在1990年底写出浏览器和服务器软件。同年，伯纳斯-李与CERN的数据系统工程师罗伯特·卡里奥联合为项目申请资助，但未被CERN正式批准。在他的个人笔记中伯纳斯-李列举“一些使用超文本的领域”，并把百科全书列为首位。 HTML的首个公开描述出现于一个名为“HTML标签”的文件中，由蒂姆·伯纳斯-李于1991年底提及。它描述18个元素，包括HTML初始的、相对简单的设计。除了超链接标签外，其他设计都深受CERN内部一个以标准通用标记语言（SGML）为基础的文件格式SGMLguid的影响。这些元素在HTML 4中仍有11个存在。 伯纳斯-李认为HTML是SGML的一个应用程序。1993年中期互联网工程任务组（IETF）发布首个HTML规范的提案：“超文本标记语言（HTML）”互联网草案，由伯纳斯-李与丹·康纳利撰写。其中包括一个SGML文档类型定义来定义语法[11]。草案于6个月后过期，不过值得注意的是其对NCSA Mosaic浏览器自定义标签从而将在线图像嵌入的行为的认可，这反映IETF把标准立足于成功原型的理念。同样，戴夫·拉格特在1993年末提出的与之竞争的互联网草案“HTML+（超文本标记格式）”建议规范已经实现的功能，如表格与填写表单。 在HTML和HTML+的草案于1994年初到期后，IETF创建一个HTML工作组，并在1995年完成”HTML 2.0”，这是第一个旨在成为对其后续实现标准的依据的HTML规范。 在IETF的主持下，HTML标准的进一步发展因竞争利益而遭受停滞。自1996年起，HTML规范一直由万维网联盟（W3C）维护，并由商业软件厂商出资。不过在2000年，HTML也成为国际标准（ISO/ IEC15445：2000）。HTML 4.01于1999年末发布，进一步的勘误版本于2001年发布。2004年，网页超文本应用技术工作小组（WHATWG）开始开发HTML5，并在2008年与W3C共同交付，2014年10月28日完成标准化。二、版本时间线 1995年11月24日HTML 2.0作为IETF RFC 1866发布。追加RFC的附加功能： 1995年11月25日：RFC 1867（基于表单的文件上传） 1996年5月：RFC 1942（表格） 1996年8月：RFC 1980（客户端图像映射） 1997年1月：RFC 2070（国际化）1997年1月14日HTML 3.2 作为W3C推荐标准发布。 这是首个完全由W3C开发并标准化的版本，因IETF于1996年9月12日关闭它的HTML工作组。 最初代号为“威尔伯”（Wilbur），HTML 3.2 完全去除数学公式，协调各种专有扩展，并采用网景设计的大多数视觉标记标签。由于两家公司达成了协议，网景的闪烁元素和微软的滚动元素被移除。HTML对数学公式的支持最后成为另外一种被称为MathML的标准。1997年12月18日HTML 4.0作为W3C推荐标准发布。它提供三种变化： 严格，过时的元素被禁止。 过渡，过时的元素被允许。 框架集，大多只与框架相关的元素被允许。 最初代号“美洲狮”（Cougar）， HTML 4.0采用许多特定浏览器的元素类型和属性，并试图淘汰网景的视觉标记功能，将其标记为不赞成使用。HTML 4是遵循ISO 8879 - SGML的SGML应用程序。1998年4月24日HTML 4.0进行微调，不增加版本号。1999年12月24日HTML 4.01作为W3C推荐标准发布。它同样提供三种变化，最终勘误版于2001年5月12日发布。2000年5月ISO/IEC 15445:2000（”ISO HTML”，基于HTML 4.01严格版）作为ISO/IEC国际标准发布。在ISO中这一标准位于ISO/IEC JTC 1/SC 34域（ISO/IEC联合技术委员会1、小组委员会34 – 文档描述与处理语言）。2014年10月28日HTML 5作为W3C推荐标准发布。三、草案时间线 1991年10月HTML标签，一个非正式CERN文件首次公开18个HTML标签。1992年6月HTML DTD的首个非正式草案， 后续有七个修订版（7月15日，8月6日，8月18日，11月17日，11月19日，11月20日，11月22日）。1992年11月HTML DTD 1.1（首个版本号，基于RCS修订版，版本号从1.1开始而非1.0），非正式草案。1993年6月超文本标记语言由IETF IIIR工作小组作为互联网草案（一个粗略的建议标准）。在被第二版取代一个月后，IETF又发布6个草案，最终在RFC1866中发布HTML 2.0。1993年11月HTML+由IETF作为互联网草案发布，是超文本标记语言草案的一个竞争性提案。它于1994年5月到期。1995年4月 （1995年3月编写）HTML 3.0被提议作为IETF的标准，但直到提案在五个月过期后（1995年9月28日）仍没有进一步的行动。它包含许多拉格特HTML+提案的功能，如对表格的支持、围绕数据的文本流和复杂的数学公式的显示。W3C开始开发自己的Arena浏览器作为HTML 3和层叠样式表的试验台[，但HTML 3.0并没有获得成功。浏览器厂商，包括微软和网景，选择实现HTML3草案功能的不同子集并引入它们自己的插件（见浏览器大战）。2008年1月HTML5由W3C作为工作草案（链接）发布。虽然HTML5的语法非常类似于SGML，但它已经放弃任何成为SGML应用程序的尝试，除了一种替代的基于XML的HTML5序列，它已明确定义自己的“HTML”序列。2011年 HTML5 – 最终征求2011年5月，工作小组将HTML5推进至“最终征求”（Last Call）阶段，邀请W3C社区内外人士以确认本规范的技术可靠性。W3C开发一套综合性测试包来实现完整规范的广泛交互操作性，完整规范的目标日期为2014年。2011年1月，WHATWG将其“HTML5”活动标准重命名为“HTML”。W3C仍然继续其发布HTML5的项目。2012年 HTML5 – 候选推荐2012年7月，WHATWG和W3C的工作产生一定程度的分离。W3C继续HTML5规范工作，重点放在单一明确的标准上，这被WHATWG称为“快照”。WHATWG组织则将HTML5作为一个“活动标准”（Living Standard）。活动标准的概念是从未完成但永远保持更新与改进，可以蒂姆加新特性，但功能点不会被删除。 2012年12月，W3C指定HTML5作为候选推荐阶段。 该阶段的标准为“两个100％完成，完全实现交互操作”。2014年 HTML5 – 提案推荐与推荐2014年9月，HTML5进入提案推荐阶段。 2014年10月28日，HTML5作为稳定W3C推荐标准发布，这意味着HTML5的标准化已经完成。四、XHTML版本XHTML是使用XML 1.0改写自HTML 4.01的独立语言。它不再被作为单独标准开发。 XHTML 1.0， 2000年1月26日作为W3C推荐标准发布。修订版于2002年8月1日发布，它提供与HTML 4.0和4.01相同的三个变化，这些变化被重新在XML中制定。 XHTML 1.1，基于XHTML 1.0 严格版，2001年5月31日 作为W3C推荐标准发布。修订版可使用模块化XHTML的模块，2001年4月10日作为W3C推荐标准发布。 XHTML 2.0为工作草案，但为支持HTML5与XHTML5的工作，此草案被放弃。 XHTML 2.0与XHTML 1.x不兼容，因此更确切的说这是一个XHTML风格的新语言而不是XHTML 1.x的更新。 在HTML5草案中规定一个XHTML语法，称为“XHTML5.1”。CSS代码：
input { font-size: 14pxfont-weight: bold }
input[type=range]:before { content: attr(min)padding-right: 5px}
input[type=range]:after { content: attr(max)padding-left: 5px}
output {
display: block
font-size: 5.5em
font-weight: bold
}
HTML代码：
<form method="post">
<h4>音量控制</h4>
<input type="range" name="range" min="0" max="10" step="1" value="" />
<output name="result"> </output>
</form>
JS代码：
(function() {
var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5
// 检测浏览器是否是足够酷
// 识别range input.
var o = document.createElement('input')
o.type = 'range'
if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。')
// 设置初始值
// 无论是否本地存储了，都设置值为5
range.value = cachedRangeValue
result.value = cachedRangeValue
// 当用户选择了个值，更新本地存储
range.addEventListener("mouseup", function() {
alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。")
localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。")
}, false)
// 滑动时显示选择的值
range.addEventListener("change", function() {
result.value = range.value
}, false)
})()
HTML5新添加了对历史的管理，用户可以通过”前进”和”后退”按钮进行历史页面的切换。这让一些不在新页面中打开的新页面前进后退自如，提高了用户体验。
通过haschange事件，可以知道URL的参数什么时候发生了变化，也就是什么时候该有所反应。通过状态管理的API，能够在不加载新页面的情况下改变浏览器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三个参数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)。小例子如下
执行了history.pushState()方法后，新的状态信息就会被加入到历史状态栈，而浏览器地址栏也会变成新的相对URL。但是，浏览器并不会想服务器发送请求，即使历史状态改变之后查新location.href也会返回与地址栏中相同的地址。另外，第二个参数目前还没有浏览器实现，所以完全可以只传入一个空字符串即可，或者一个短标题也可以。第一个参数则应该尽可能提供初始化页面状态所需的各种信息。
因为history.pushState()方法会创建新的历史状态，所以会发现”后退”按钮也可以使用了。按下”后退”按钮，会触发window对象的popstate事件。Popstate事件的事件对象有一个state属性，这个属性就包含着当初以第一个参数传递给pushState()的状态对象。小例子如下
更新状态直接更新当前地址栏的内容，他不会产生后退操作，只是单纯修改当前地址。
要更新当前历史状态，可以调用replaceState()，传入的参数与pushState()方法的前两个参数相同。调用replaceState()不会在历史状态栈中创建新状态，只会重写当前状态。小例子如下
网上例子：
他这个还是创建了一个数组，然后把生成的内容存到数组中，在根据传的值
把数组对应的内容给读出来。
history有个问题是第一次点击是无效的，只有第二次才能起作用。这就非常的不爽了。
通常我们也不会需要他执行特别复杂的操作，反而是hash非常的好用。
hash是直接在url后面加一个#，然后立即可以被onpopstate事件检测到。
于是我们可以这样去做：
