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