正如之前写“前端之旅”系列时所说，HTML、CSS、JavaScript其实没什么可说的。在应用层面上说，确实如此。那么，我为什么又要回过头来再写它呢？不同的阶段，不同的理解吧。这是建立在我目前认知上的一个整理，不是基础教程，不喜请绕行。
1993年，ITFE（英特网工作小组）发布HTML草案。
1994年，Tim Berners-Lee创建非营利性的W3C维护互联网的对等性。
1995年，HTML2.0作为RFC1866发布。
1996年，HTML3.2发布，W3C组织对HTML语言进行规范化，注重兼容性的提高。
1997年，HTML4.0推出，提倡将文档结构和样式分离，并实现了表格更灵活的控制。
1999年，HTML4.01在HTML4.0的基础上作微小改进。
随后，W3C发现HTML存在缺陷，前途不美丽，目标转向语言更加规范的XML，于是出现了XHTML。
2000年，XHTML1.0发布，内容与HTML4.01一样，但是XHTML使用了新的语法规则。
2001年，XHTML1.1发布之后，W3C开始致力于HTML、XHTML都不兼容的XHTML2.0。
2003年，XForms重启了HTML的演化，各大厂商向W3C组织提交相关提议被拒绝。
2004年，各大厂商相继脱离W3C组织，在WHATWG投入工作。
2006年，W3C暗示了参与HTML5开发的兴趣，并于2007年组建了工作组与WHATWG共同开发HTML5标准。
2014年，HTML5.0标准规范定稿。
各大厂商脱离W3C加入WHATWG，与WHATWG的若干原则息息相关。最后W3C愿意与WHATWG一起干，与XHTML的问题也少不了干系，这其中的纠葛可以参考HTML Standard。记录这段流水账，不单纯的为了字数，它或许与后面的内容有不小的联系。
初识HTML
先来一段代码片段：
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://example.com">
<meta charset="utf-8">
<link rel="stylesheet" href="example.css">
<script src="example.js"></script>
<title>example</title>
<script>
alert('Hello world!');
</script>
<style>
.notice {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<noscript>
<div class="notice">Please enable javascript to continue.</div>
</noscript>
</body>
</html>
上面这段代码是5.0规范，它与4.0规范最明显的差别就在于<!DOCTYPE>。它不是HTML标签，用于指示Web浏览器关于页面使用哪个HTML版本进行编写指令。因为4.0基于SGML，所以需要引用DTD规定标记语言规则，这样才能正确地呈现内容。
<!-- HTML 5 -->
<!DOCTYPE html>
<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!-- XHTML 1.1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
接下来是主根元素<html>，所有其他元素必须是此元素的后代，它有两个主要子元素：<head>规定文档相关配置信息（元数据），包括文档标题、引用样式、脚本等；<body>表示文档内容。
HTML元素
HTML由元素组成，每个元素都可以被多个属性修饰，属性有全局属性和元素属性。具体的学习参考MDN，很多学习Web知识的初学者，把国内学习网站w3school、菜鸟教程当作主要参考。个人觉得这样的网站只适合初学了解，推荐参考MDN或者标准文档以便了解更多知识。
HTML元素按功能可分为：主根元素、文档元数据、分区根元素、内容分区、文本内容、内联文本语义、图片和多媒体、内嵌内容、脚本、编辑标识、表格内容、表单、交互元素和Web 组件。从表现形式上，大多数元素都是行内元素或块级元素，行内元素只占据对应标签所包含的空间，块级元素则占据其父元素的整个空间。这不可绝对而言，CSS的出现可以改变它们的原有特性。大部分元素可以通过CSS来改变外观，也有一些标签是有固定外观，比如<video><embed>等。
通常HTML标签由一个开始标签和一个结束标签构成，标签之间插入其他标签，相当于一个默认插槽。有许多标签虽然也拥有默认插槽，可以插入新的HTML元素，但它并不被认为是好的书写，比如<i>标签内嵌套<div>。还有一些HTML不具备默认插槽的能力，也就不需要闭合标签，通过属性来显示或改变值。在XHTML中，语法要求严格，元素标签必须闭合。虽然HTML5标准已经统领了HTML和XHTML，但不得不说也有顽固派不愿跟上时代。
网页的主要展现内容虽然在<body>，但也不得不重视<head>的元素，它对内容的展现、SEO也有着十分重要的作用，不可小觑。举个例子，<meta>标签：
<!-- 规定页面使用字符集 -->
<meta charset="utf-8">
<!-- 规定优先使用浏览器版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 禁止浏览器从本地缓存中访问内容 -->
<meta http-equiv="Pragma" content="no-cache"/>
<!-- 规定视窗操作规则 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<!-- 告诉搜索引擎网站的主要内容 -->
<meta name="description" content="example">
<!-- 为搜索引擎提供关键字列表 -->
<meta name="keyword" content="example">
当然，<meta>的功能并不止于此，本文不做展开，只是作一个宏观的了解。除<meta>标签之外，还有其他元数据标签也有着重要的作用，包括接下所提到的<script>。
HTML发展
从元素的语义上就可以看出HTML的历史痕迹，元素中有相当一部分属于文章展示，再发展到表单元素，再到现在多种多样的嵌入元素。网页承载的内容逐渐加重，再加上科技及技术的发展，也就促使前端的职责不断发生改变。最初的前端负责设计切图，后端负责套模版；到后来页面内容增多，前后端沟通成本增加，于是出现前后端分离；Node的出现对彻底解决了模块化管理、前端部署及业务分离等问题提供了工程化解决方案。
说到工程化，就得提到JavaScript。根据HTML解析规则从上至下执行，遇到<script>标签则停下由JS引擎进行解析，这就会使得页面加载过慢。于是就有人想到将JS代码放到最后，在新标准中<script>有defer、async属性可解决这种“阻塞效应”。这就说明，HTML并没有太严格的要求标签的放置，通常解析引擎会正常归位或解析。但也避免不了错误的嵌套导致页面展示错误，养成好的习惯是必须的，不能因为无约束就不守规矩！
Web技术不断推陈出新，只是有少数浏览厂商喜欢自己玩一套把戏。（IE：看我做啥？我已准备退出舞台，是他们要用我的！）在HTML中，有不少元素已被废弃，比如<font><frame>等。还有一些元素及属性已不被推荐使用，比如<body>的bgcolor属性、<img>的border属性等。另外，在新标准中推出一些新的元素以满足时代发展需求，比如<template><slot>等。尽管这些需求并未成定案，它们在未来必有举足轻重的作用，然而它并未出现在某些网站中，比如<template><slot>已在Vue中有展现。
最后
顺便提一下语义化，语义化的优点：易于用户阅读，样式丢失的时候能让页面呈现清晰的结构；有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重；方便其他设备解析，如盲人阅读器根据语义渲染网页；有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
随着技术的不断发展，如今前端不会切片的不在少数，企业不注重程式运行效率风气正盛。“做出来就完了”似乎成了某种“规范”，仅靠<div>便可完成页面编写，哪注重什么语义化。也罢，风气如此，HTML就写到这儿吧！
来源：oschina
链接：https://my.oschina.net/ly81/blog/4462965