诺大年纪，还学这么老旧的玩意，真是闲的蛋疼么？非也，我这段时间其实很忙，很缺睡眠，可以说负责任的说，我真的很累，可是我更爱折腾。我这个毛病，间歇、周期性的，一旦发作，简直停不下来。这次发起，大概快两个礼拜了。

那到底为滴个啥呢，当然是觉得这玩意其实还不过时，在我看来，简直永远也不会过时，因为从 HTML 最初被发明出来时候它的初衷应用场景来说，它还是最好的。

嗨，一抬头，看见 JesseZhao(赵光) 在他博客（好像弃用很多年了哈）签名档处放的这首小诗，觉得有点意思，抄下来膜拜一下吧：

未曾清贫难成人,
不经打击老天真。
自古英雄出炼狱,
从来富贵入凡尘。

它究竟好在哪里呢，简洁。 HTML：HyperText Markup Language ，翻译成国语，就是 超文本标记语言 。什么意思呢，利用一些简便的“标记”，实现对纯文本的“格式化”展示，这就是 HTML 最初被发明的本意。假如它一直保持纯洁，只是用于美观一些地展示文本内容，而初衷不改的话，那就不会有那么多的好心广告、花边小电影不期然跳出来丰富人们的视觉享受，在得到感官刺激的同时，逐渐让我们心浮气躁，由爱生恨。这是怎么回事呢，这是因为 HTML 标签只是一些“字符标记”，在变成屏幕展示的时候，需要 浏览器 内置的程序对它进行解释和图形渲染，而以 Micro Soft IE 为代表的浏览器们，不知何故（我想主要还是商业冲动吧），为 HTML 加入了其语言标准之外的“嵌入元素”和“对象元素”以满足“多媒体”内容展示的需要，可是浏览器本身又不能提供对这些嵌入式元素的渲染功能，需要根据多样化的多媒体内容特点，另行下载（浏览者本地不具备情况下）多媒体插件来进行本地化的媒体播放。正是由于多媒体类型的多样性，插件越搞越多，尤其是在 flash 技术发展和应用的推动下，连游戏这样专业性的图形渲染作业也被放到浏览器中了。不仅仅多媒体，推波助澜的还有另一路怪兽，基于论坛、社交和交易等之类型的具有互动需求的应用，也在浏览器端实现，不过好在他们一般走的是 ASP/PHP 脚本+数据库 路线，从一开始就与 HTML 分道扬镳。神仙也有疲乏的时候，何况人家 HTML 本来就没那么大的野心，它实在不堪重负了。到今天，HTML 和单纯通用性的浏览器已接近被抛弃，让位于 APP 模式了。APP 满天飞，热闹确实是热闹，可这么多的重复开发，浪费资源姑且不论，视觉疲劳有没有？另外，我们一天天走在不断加装 APP 的路上，设备的升级换代变得越来越快，也越来越身不由己。硬件厂商是高兴了，你的钱包真的没有意见吗？！！！

牢骚归牢骚，可是追求更多感官刺激“欲无止境”的人类毕竟身不由己（据说是因为“自私的基因”在作祟），需求摆在那里，势不可挡。HTML 真的还能用吗？

首先，对于只是以文字展示为主要诉求的人们来说，比如写博客，个人发表文章的作家、公知、技术控这一类的人来说，我觉着回归最干净、简便的 HTML 模式是最聪明的选择，好处至少如下：

• 省时间，省心。我们知道，只是写文字的东西的话，重点在于思想，顶多追求一点逻辑性，不会节外生枝，浪费额外寻找资料的时间，从而增加写文章的效率。我自己的感受是，每次打算在网络上写一点文字的时候，经常会写着写着，就跑去找点图片，找点影像，或是补充一些关联信息什么的。搜索，筛选再加上整理，折腾半天，回过神来，原本想写的东西，才开了个头。甚至想不起来原本想要写些什么了，最起码原本活跃的思路受阻，不再有写下去的冲动。
• 节省资源，载入效率高。我们知道现在绝大多数提供博客和文章发布功能的网站，基本上都是基于 ASP/PHP 脚本+数据库的模式，他的页面载入效率与 HTML 不可同日而语。影响速度的最大障碍在于对硬盘文件的并发访问。HTML 页面是独立存放静态访问的，很多人同时访问同一个页面的情况毕竟很少。而数据库就不一样了，不可能为每一个用户建立独立的数据库，访问延迟等待乃至失败的情况时刻在发生。直观一点来说吧，一台个人笔记本作为静态网页模式的个人博客服务器绰绰有余，假如使用动态网页的话，只要你稍微有点知名度，并发访问用户数到达成千上万的话，就必须得租用专门的高性能服务器了。
• 便于搭建个人网站，自由不受约束，数据安全得到保障。这一条才是使用 HTML 的真正好处，由于上面提到的原因，要发布个人网页的话，完全没有必要使用公共平台，在自己的个人电脑上发布就可以了（个人建站，很简单，菜鸟也可以一个小时搞掂，另外有文章描述之）。好处就显而易见了：
  • HTML 学起来容易，算上 css 样式设计，总共也就几十个标签。先掌握几个最基本的，然后边用边学，机灵点的话，简直不需要专门花时间去学习。稍微复杂一点的是 分类管理 ，然而由于有了 Emacs + Org-mode （另文描述），也是分分钟搞掂的事情。
  • 可以自由决定，随时上线还是断网。另外，发布也无须别人审查了（当然，责任自负啊！不过即便是在公网，真要出事，也还是责任自负吧，网站会为你挡箭么！）
  • 图片、音视频等消耗空间的资源，想发就发，不再受限制。公网上需要自己找图床，不说免费图床不好找的话，找到了也还需要浪费时间上传。放在自己的硬盘上，空间无限（毕竟硬盘很便宜啊），时间 0 消耗。
  • 安全，还是安全。 关键的关键，你不会一不高兴就终止为自己提供图床服务吧。你的数据一直处于你自己的管控范围，发现有不宜于公开的，随时可以撤回。公网上，可就没那么方便了。

当然，缺点也显而易见：

• 知名度和传播范围不好搞大。这个是没办法的事情，不过被“百度、谷歌”检索到，是不受影响的。另外，传播圈子的话，对于有一些作者来说，“话语只同知己言”，这个也就不是问题了。
• 域名、地址解析和长时在线问题。域名的话，可以先搞一个免费的，借用“花生壳”来搞地址映射。感觉有需要的话，再买一个收费的域名，好像是很便宜吧，反正我大概是不须要的！长时间在线的话，电脑不要关就是了，用不了多少电费。专门买一台电脑，配一个2T的硬盘，那就更加理想了，三五千块钱就搞定。
• HTML5 时代即将来临。尽管 IE 们有基于商业需要不安分守己恪守规矩的冲动，他们毕竟也开始感受到苦果的滋味。先是 Opera、Mozilla 基金会和苹果这些浏览器厂商于 2004 年组成 WHATWG (Web 超文本应用技术工作组: Web Hypertext Application Technology Working Group)，提出 HTML5 标准草案，然后于 2007 年被国际中立性技术标准机构 W3C (万维网联盟)接受。其主要目的：
  • 引进新的语法特征，如 video、audio 和 canvas 标记，从而在移动设备上“原生地”支持多媒体；
  • 引进本地存储、三维、图形及特效等新的功能，以真正改变用户与文档的交互方式。

2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5 标准规范终于最终制定完成了，并已公开发布。 目前，Firefox、Google Chrome、Opera、Safari 4+、Internet Explorer 9+ 都已支持 HTML5，我们在新潮的页面上，已经看到不再依赖于外部插件，基于 HTML5 的页面上能够以很高超的效率显示生动、漂亮的幻灯片，高解析度的音视频，3D动态相册等梦幻般的的内容了（接下来的几个礼拜我将一一学习和展示）。

• HTML将带来最为震撼的结果是：它可能会消灭 Flash。许多业内人士表示，HTML 将会最终代替多媒体框架，如 Adobe 的 Flash，尽管短期看来还不是时候，一些主流的大公司已经开始了逐步转向使用 HTML5 的步伐。谷歌于2015年2月26日开始自动将 Flash 广告转换为 HTML5 格式，这可能会加速 HTML5 替代 Flash 的进程。

哈哈，写这些废话，两个多小时就过去了。言归正传吧，记笔记正式开始。

我们首先回到 HTML 的思路和目标：通过有限的简单“标签”，来描述一个页面。首先我们比较自然地能想到，它需要描述三个东西：内容、格式化和布局。那么最初的设计者怎么解决它们呢？

• 内容。分类，就这么简单，通过枚举大多数人想展示或者说想看到的内容分类，巧妙而高效地解决了这个问题。HTML 把内容分成：
  • 文字。这里指的是单个的字、词这样的基本文字单位，这个不需要标签，计算机文字编码就解决它了。
  • 段落。 < p > ... < /p >
  • 标题。 < h1 > ... < /h1 > < h2 > ... < /h2 >
  • 列表项。 < ul >< li > ... < /li >< /ul >
  • 表格。 < table >< tr >< th >....< /th >< td >...< /td >< /tr > < /p >
  • 图像。 < img />
  • 超链接。 < a >...< /a >
  • 线条。 < hr/ >

对于文本型页面，主要也就是这么几类内容了，HTML 把它们称为“元素”，上面这么几个专门的“标签”就基本上“一网打尽”了。后来为了支持多媒体内容，增加了非标准的“嵌入”（ < embed > ）和“对象”（ < object > ）元素。

• 格式化。内容的格式化，大概也就是字体、涂色、修饰、背景这么几类，通过给上述元素附加“属性值”来描述。而对于个别“文字”，基于常见的“着重强调”以“醒目”之需求，特别搞了几个专门的“字体变形”标签，如加删除线、变粗、斜体、加下划线，变上、下标等。
• 布局。布局相对比较麻烦，这也是最初的 HTML 变得越来越“复杂、难搞”的主要原因。最初的设计大概是这么几个思路（这都是我瞎猜的啊）：
  • 自然排列。按照每一个元素出现的顺序自然排列。这又分为两种情况，一种称为块类元素，如标题、段落、列表项;另一种为跨行类元素，如自然文本、超链接。二者的差别是，块类元素，自动实现分行；而跨行类元素需要使用换行标签 < br/ > 强制换行。元素在其自然位置的定位，则通过“定位属性”来控制其“靠左、居中或靠右”。
  • 嵌套结构。按照自然排列的元素定位，只能针对单一元素分别进行。较为复杂的排版布局，必须是组群性的定位。比如说报纸，一个页面内通常是要开很多“窗口”，每个窗口里头有很多段落，也可以有图片、表格。这个通过元素的嵌套来实现，就是说一个元素内部可以嵌套其他元素，对外部元素的定位影响到其内部嵌入的元素，跟着一起被定位。具备嵌套功能而被变相用于结构布局的元素，最初只有表格（ < table > ）,后来加入了框架（ < frameset > ）。

可以想象，按照上述原理实现的 html 有什么毛病

重复格式描述

css 样式表

• 描述（定义）和映射：格式描述针对类型进行，格式的映射通过选择器。
  • 原来的元素，直接以原先的元素名检索对应。
  • 想要自行区分的元素，在html内容描述的时候描述为自定义的块状层（div）和跨行区间（span）， - 在 css 样式描述的时候，基于它们的 id 或者 class 属性值来检索对应。
  • 为了增加统一性，最大化的提高样式描述效率，所有的元素都当做一个“盒子”，其空间定位与格式描述，允许继承和覆盖。

就这么简单！事实无数次表明，最高明的思想往往就是最简单的思想。看起来，谁都能够想得到，可就是只有那个神奇的人才能把它发明出来。