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)
html5大纲算法(目录树)的更多相关文章
- html5--6-68 实战前的准备工作:了解HTML5大纲算法
html5--6-68 实战前的准备工作:了解HTML5大纲算法 学习要点 了解HTML5大纲算法 在html5中有一个很重要的概念,叫做HTML5大纲算法(HTML5 Outliner),它的用途为 ...
- HTML5大纲算法
什么是HTML大纲算法? 大纲算法允许用户代理(user agent)从一个web页面生成一个信息结构目录,让用户对页面有一个快速的概览.类似书籍.PDF.帮助文档等,都有一个清晰的目录结构,用户能方 ...
- 第八十七节,html5+css3pc端固定布局,大纲算法,section和div,结构分析
html5+css3pc端固定布局,大纲算法,section和div,结构分析 一.大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户 ...
- HTML5区块和大纲算法
原文链接: Using HTML sections and outlines - Mozilla Developer Network 每集HTML5+CSS3网页布局教程-2大纲算法 HTML5标准带 ...
- 【.net 深呼吸】将目录树转化为文本
大伙都知道,文件系统是树形结构的,有时候我们会想到把目录的层次结构变为纯文本形式,就像这样: ├─Windows-universal-samples-master │ ├─Samples │ │ ├─ ...
- python 小程序 复制目录树
1. 将一个目录树完全复制到另外一个目录下面 import os, sys """ 复制目录树 """ maxloadsize = 1024 ...
- vs切换当前编辑文件时自动定位目录树
在编辑区,切换当前编辑文件时(单击.cpp或.h文件选项卡),"解决方案资源管理器"目录树会自动定位当前编辑的文件,并以灰色标识,当一个解决方案中的工程数目数目很多,每个工程下面又 ...
- html5大纲
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 14.KVM安装之脚本和镜像目录树准备
1.php脚本需要先安装PHP环境,Apache服务器必须支持PHP $ yum install -y php #安装PHP $ php -v #查看是 ...
随机推荐
- list<>泛型的意义
泛型就是指定一个自定类或数据类型例如(int)并命名一个XXX集合名,所有这个类型的数据可以加入这个XXXX集合名,组成一个集合. private list<可放例int数据类型或自定类> ...
- STL map用法总结(multimap)
2017-08-19 10:58:52 writer;pprp #include <map> #include <string> #include <iostream&g ...
- Java的 final 关键字
本文主要探讨Java final 关键字修饰变量时的用法. !!!!文末有彩蛋!!!! 1.修饰类 当用final修饰一个类时,表明这个类不能被继承.也就是说,如果一个类你永远不会让他被继承,就可以用 ...
- 获得Python脚本所在目录
如何获得Python脚本所在目录的位置 On this page... (hide) 1. 以前的方法 2. 正确的方法 3. 实例说明 (Edit) 1. 以前的方法 如果是要获得程 ...
- Eclemma的安装
和TestNG安装一致 Help -->Install New Software --> Add Name: Eclemma Location:http://update.eclemma ...
- SQL 2008R2还原对于服务器失败 备份集中的数据库与现有数据库 3154错误
以前用sql server 2005的时候就遇到过类似的问题,数据库在别的服务器上备份后,在本机无法还原,这次终于找到了解决方案,网上的没有找到类似的,希望能帮到大家! 原因分析:在SQL Serve ...
- 键盘对应数字-keycode值大全(转)
event.keycode值大全 keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear k ...
- 常用的SpringMVC注解
1.@RequestMapping() 访问链接编写: 例如: (1).请求方法: 访问链接: (2).请求参数和请求头: 访问链接: 2.@PathVariable 例如: 访问链接: 结果显示: ...
- jmap和jstack使用
http://blog.csdn.net/sinat_29581293/article/details/70214436
- javascript打开新窗体
open -- 打开(弹出)一个新的窗体 open,中文"打开"的意思 引用网址:http://www.dreamdu.com/javascript/window.open Jav ...