堂主原创博文，转载请加本页链接，谢谢合作：

http://www.osmn00.com/rebuild/223.html

-------------------------------- 分割线 ----------------------------------

HTML大纲算法

HTML中存在着一个大纲算法，大纲可以为用户提供同一份页面的信息结构目录，就像之前我们在word和pdf文档中体验过的那样。

PDF文档中的目录结构：

没有HTML5之前

HTML5之前的HTML4，唯一的方式是采用<h1> ~ <h6>元素来创建大纲。因为正常习惯下，<h1> ~ <h6>表示了从第一级到第六级的层级递减标题，而标题之下就应该是对应的内容了。

合理正确的使用标题元素可以为文档赋予一个良好结构的大纲，不单单对于搜索引擎的优化，更是为借助于屏幕阅读器浏览器网页的盲人（或弱视力）用户提供了巨大的帮助。

在非采用HTML5对网页进行重构的情况下，合理正确的使用标题元素依然可以为文档赋予一个良好结构的大纲，比如目前堂主博客的首页模板：

这个首页采用了如下的结构：

新年新气象，年前对博客的一些想法现在真的在付诸实施了。这回系统的梳理了俺对俺博客的需求，从功能性到界面展示。新的博客变化会很大，增加了一些功能，栏目划分有了很大变化，同时博客界面也应该会是我5年多博客生涯中自己最满意的一个。

目前新界面正在PSD设计阶段，新的博客前台将应用一些之前接触过但没系统结合过的手法：黄金分割、精确校准、同色系、HTML5、CSS3、无侵入脚本编程、优雅降级、侧重渲染效率、无障碍、支持移动设备等等。

同时这回也坚定了一下决心，不再温馨对待IE6用户。届时可能会对IE6用户展示一个无样式的结构文档或其他方式，来在保证基本内容可阅读的同时提示用户更换更现代的浏览器。

放出一些局部来显显：

下午看到学校（北京师范大学珠海分校）官网关于10周年校庆的事宜，闲着也闲着，PS了2张图片。

点击可看大图。

 PSD：点击下载