html5大纲算法（目录树）

看了《CSS那些事儿》我一直遵循着给每个板块写一个h标签，并保持层次，比如导航条、焦点图我都写了一个缩进隐藏的h标签。这种规范一般人根本看不出来，即使是行内的大多数人也觉得没有必要。可是我一直自己默默的遵循着，强迫症啊 T T。
最近在看《HTML5经典实例》，当我看到第一章中“html5大纲算法”功能的时候我乐了，原来html5中提出了用h标签生成文档的功能，就像一个目录树。至于它可以做什么，书上说利于盲人软件对网站结构的识别，可以通过这个“目录树”方便进行页面跳转。例如这个儒之堂足浴的首页，生成的目录树如下图：

我给logo写了h2作为这个页面中最大的h标签，而h1作为预留的，文章页的标题才用h1。页面按板块分别写了h3,如果下面还有板块再使用h4如此类推。

如何才能查看这个目录树，只要要在谷歌浏览器上装一个HTML5 Outliner插件就能查看了。安装后浏览器的地址栏上会多一个outliner图标，点击后就能生成改页面相应的“目录树”了，但是只能查看线上的网页哦。这个插件会在你的html页面上增加一些额外的id和属性 定位各个板块，用来让用户点击目录树上的链接 相应的板块能够闪烁。

虽说HTML5有了这么个功能和理念，事实上没有任何盲人软件支持这一特性。但是既然是新理念，而且是一个不错的理念，我们就应该开始遵循起来，严格要求自己才能把代码写的更好。
类似的页面习惯还有很多，给每个图片写上alt、给必要的链接写上title描述、保持页面的结构顺序、坚持结构、行为、表现相分离等等。

html5大纲算法和HTML5 Outliner的更多内容：HTML5 大纲算法（HTML5 Outliner）

转载于:https://www.cnblogs.com/xjchenhao/p/4014136.html