堂主 - WEB前端开发

专注于互联网 | WEB前端开发 | 以用户为中心的体验 | 家是圆心 | Code is art !

博文列表

HTML5 大纲算法(HTML5 Outliner)

1 comments

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

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

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

HTML大纲算法

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

PDF文档中的目录结构:

pdf.gif

没有HTML5之前

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

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

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

gg-测试插件.png

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