看了《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)

html5大纲算法(目录树)的更多相关文章

  1. html5--6-68 实战前的准备工作:了解HTML5大纲算法

    html5--6-68 实战前的准备工作:了解HTML5大纲算法 学习要点 了解HTML5大纲算法 在html5中有一个很重要的概念,叫做HTML5大纲算法(HTML5 Outliner),它的用途为 ...

  2. HTML5大纲算法

    什么是HTML大纲算法? 大纲算法允许用户代理(user agent)从一个web页面生成一个信息结构目录,让用户对页面有一个快速的概览.类似书籍.PDF.帮助文档等,都有一个清晰的目录结构,用户能方 ...

  3. 第八十七节,html5+css3pc端固定布局,大纲算法,section和div,结构分析

    html5+css3pc端固定布局,大纲算法,section和div,结构分析 一.大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户 ...

  4. HTML5区块和大纲算法

    原文链接: Using HTML sections and outlines - Mozilla Developer Network 每集HTML5+CSS3网页布局教程-2大纲算法 HTML5标准带 ...

  5. 【.net 深呼吸】将目录树转化为文本

    大伙都知道,文件系统是树形结构的,有时候我们会想到把目录的层次结构变为纯文本形式,就像这样: ├─Windows-universal-samples-master │ ├─Samples │ │ ├─ ...

  6. python 小程序 复制目录树

    1. 将一个目录树完全复制到另外一个目录下面 import os, sys """ 复制目录树 """ maxloadsize = 1024 ...

  7. vs切换当前编辑文件时自动定位目录树

    在编辑区,切换当前编辑文件时(单击.cpp或.h文件选项卡),"解决方案资源管理器"目录树会自动定位当前编辑的文件,并以灰色标识,当一个解决方案中的工程数目数目很多,每个工程下面又 ...

  8. html5大纲

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 14.KVM安装之脚本和镜像目录树准备

    1.php脚本需要先安装PHP环境,Apache服务器必须支持PHP $ yum install -y php    #安装PHP $ php -v                      #查看是 ...

随机推荐

  1. list<>泛型的意义

    泛型就是指定一个自定类或数据类型例如(int)并命名一个XXX集合名,所有这个类型的数据可以加入这个XXXX集合名,组成一个集合. private  list<可放例int数据类型或自定类> ...

  2. STL map用法总结(multimap)

    2017-08-19 10:58:52 writer;pprp #include <map> #include <string> #include <iostream&g ...

  3. Java的 final 关键字

    本文主要探讨Java final 关键字修饰变量时的用法. !!!!文末有彩蛋!!!! 1.修饰类 当用final修饰一个类时,表明这个类不能被继承.也就是说,如果一个类你永远不会让他被继承,就可以用 ...

  4. 获得Python脚本所在目录

    如何获得Python脚本所在目录的位置   On this page... (hide) 1.  以前的方法 2.  正确的方法 3.  实例说明   (Edit) 1.  以前的方法 如果是要获得程 ...

  5. Eclemma的安装

    和TestNG安装一致 Help -->Install New Software -->  Add Name: Eclemma Location:http://update.eclemma ...

  6. SQL 2008R2还原对于服务器失败 备份集中的数据库与现有数据库 3154错误

    以前用sql server 2005的时候就遇到过类似的问题,数据库在别的服务器上备份后,在本机无法还原,这次终于找到了解决方案,网上的没有找到类似的,希望能帮到大家! 原因分析:在SQL Serve ...

  7. 键盘对应数字-keycode值大全(转)

    event.keycode值大全   keycode 8 = BackSpace BackSpace    keycode 9 = Tab Tab    keycode 12 = Clear    k ...

  8. 常用的SpringMVC注解

    1.@RequestMapping() 访问链接编写: 例如: (1).请求方法: 访问链接: (2).请求参数和请求头: 访问链接: 2.@PathVariable 例如: 访问链接: 结果显示: ...

  9. jmap和jstack使用

    http://blog.csdn.net/sinat_29581293/article/details/70214436

  10. javascript打开新窗体

    open -- 打开(弹出)一个新的窗体 open,中文"打开"的意思 引用网址:http://www.dreamdu.com/javascript/window.open Jav ...