看了《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. 网络软中断与NAPI函数分析

    网卡只有rx硬中断,外设通过中断控制器向CPU发出有数据包来临的通知, 而没有tx硬中断,因为发送数据包是cpu向外设发出的命令. ixgbe驱动的rx软中断和tx软中断在同一个CPU上处理. htt ...

  2. UVa 11354 邦德(最小瓶颈路+LCA)

    https://vjudge.net/problem/UVA-11354 题意: 有n个城市m条道路,每条道路有一个危险系数.先在有若干个询问,要求找到一条从s到t的路,使得途径所有边的最大危险系数最 ...

  3. IO模型详解

    IO编程包括: 文件读写 操作 StringIO 和 BytesIO 内存中 操作文件和目录 OS 序列化 json pickling 操作系统内核空间(缓冲区)收发数据: 内核态(内核空间)---- ...

  4. 又是新动作!微信小程序专属二维码出炉

    又到了晚上,微信又给我们带来了惊喜,并这次不是新的能力,而是把大家再熟悉不过的二维码换了新的造型. 正式揭晓:微信特制的小程序码.扫一扫新二维码 只要你的微信升级到了 6.5.7 版本,就可以扫码或者 ...

  5. WPF:理解TileBrush(ImageBrush,DrawingBrush和VisualBrush)

    ImageBrush:利用图像绘制区域 ImageBrush 是一种将自身内容定义为图像的 TileBrush,图像通过它的 ImageSource 属性指定. 您可以控制图像的拉伸.对齐和平铺方式, ...

  6. 最近玩了一下qt5.2.1,顺着写点东西,关于这个版本设置程序主窗口居中

    #include <QtGui/QGuiApplication> #include <QDebug> #include <QScreen> #include &qu ...

  7. iOS开发图片加载的内存问题及优化方案

    原创作者:Magic-Unique 原文地址:https://github.com/Magic-Unique/HXImage猿吧 - 资源共享论坛: http://www.coderbar.cn 做最 ...

  8. shell---正则表达式和文本处理器

    -----正则表达式----- grep -n  :显示行号 -o  :只显示匹配的内容 -q  :静默模式,没有任何输出,得用$?来判断执行成功没有,即有没有过滤到想要的内容 -l  :如果匹配成功 ...

  9. 适配器模式(Adapter Pattern)/包装器

    将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以在一起工作. 模式中的角色 目标接口(Target):客户所期待的接口.目标可以是具体的或 ...

  10. ( 转)Sqlserver中tinyint, smallint, int, bigint的区别 及 10进制转换16进制的方法

    一.类型比较 bigint:从-2^63(-9223372036854775808)到2^63-1(9223372036854775807)的整型数据,存储大小为 8 个字节.一个字节就是8位,那么b ...