什么是HTML大纲算法?

大纲算法允许用户代理(user agent)从一个web页面生成一个信息结构目录,让用户对页面有一个快速的概览。类似书籍、PDF、帮助文档等,都有一个清晰的目录结构,用户能方便的定位所需内容。一个良好结构的大纲,不仅是对于搜索引擎的优化,更是为借助于屏幕阅读器浏览网页的盲人(或弱视力)用户提供了巨大的帮助。

帮助文档的目录结构:

我们这里从一个简单的例子入手  比如说我们要做一个书店的网页它的大纲是这样的

图书区域

  1.经管励志

    《活法》

    《执行力》

    《永远不放弃》

  2.文学经典

    《钢铁是怎样炼成的》

    《一千零一夜》

HTML5大纲

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gbk">
<title>HTML5大纲</title> <style> </style>
<body>
<h1>图书区域</h1>
<section>
<h1>经管励志</h1>
<article>
<h1>《活法》</h1>
</article> <article>
<h1>《执行力》</h1>
</article> <article>
<h1>《永不放弃》</h1>
</article> </section> <section>
<h1>文学经典</h1>
<article>
<h1>《钢铁是怎样炼成的》</h1>
</article>
<article>
<h1>《一千零一夜》</h1>
</article>
</section>
</body>
</html>

  

HTML5大纲算法的更多相关文章

  1. html5大纲算法(目录树)

    看了<CSS那些事儿>我一直遵循着给每个板块写一个h标签,并保持层次,比如导航条.焦点图我都写了一个缩进隐藏的h标签.这种规范一般人根本看不出来,即使是行内的大多数人也觉得没有必要.可是我 ...

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

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

  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. html5大纲

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

  6. 深入理解HTML5:语义、标准与样式(勇猛精进早登大师殿堂创最优品质交互)

    深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...

  7. HTML5开发规范

    1.总体规范——采用html5的结构标签进行页面布局,注意结构的语义化,并注意页面大纲的层级结构.使用css3.0进行样式的设计. a.网页大纲查询网址http://gsnedders.html5.o ...

  8. 深入理解HTML5:语义、标准与样式

    <深入理解HTML5:语义.标准与样式> 基本信息 作者: (美)布拉德福(Bradford,A.) 海涅(Haine,P.) 译者: 高京 出版社:电子工业出版社 ISBN:978712 ...

  9. 第 31 章 项目实战-PC端固定布局[2]

    学习要点: 1.大纲算法 2.section和div 3.结构分析 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一.大纲算法  ...

随机推荐

  1. HTML <del> 标签

    HTML <del> 标签 什么是<del> 标签? 定义文档中已被删除的文本. 实例 a month  is <del>25</del> 30 day ...

  2. 痞子衡嵌入式:MCUBootUtility v2.4发布,轻松更换Flashloader文件

    -- 痞子衡维护的NXP-MCUBootUtility工具距离上一个版本(v2.3.1)发布过去2个月了,这一次痞子衡为大家带来了版本升级v2.4.0,这个版本主要有一个非常重要的更新需要跟大家特别说 ...

  3. nrm切换npm源

    使用 nrm 提供了一些最常用的npm包镜像地址,能够让我们快速的切换安装包时候的服务器地址: 全局安装nrm包 npm i nrm -g 查看当前所有可用的镜像源地址以及当前所使用的镜像源地址 nr ...

  4. JMeter性能测试工具使用入门

    目录 安装 下载安装包 解压 添加到环境变量 启动 切换中文 打开日志查看 使用示例 创建线程组 添加HTTP接口 添加察看结果树 运行测试 添加断言 添加自定义变量 JMeter是一款强大的性能测试 ...

  5. Redis 入门与 ASP.NET Core 缓存

    目录 基础 Redis 库 连接 Redis 能用 redis 干啥 Redis 数据库存储 字符串 订阅发布 RedisValue ASP.NET Core 缓存与分布式缓存 内存中的缓存 ASP. ...

  6. 文献管理软件 Zotero 安装、配置与使用

    简介 Zotero优缺点 使用Zotero作为主力文献管理工具的原因: 软件本身完全免费并且开源,不存在盗版问题 注册后本身只包括 300M 空间同步,但支持 WebDAV 同步,例如 Dropbox ...

  7. ECC ~ Edge-Conditioned Filter in CNN on Graphs

    ECC的卷积操作和常规的二维图像卷积操作都是一种加权平均操作,不同之处在于ECC可以作用在任何图结构上,并且其权重由节点间的边权所决定. 考虑$G=(V,E)$, 其中$|V|=n$ 边 $E \in ...

  8. eclipse时一直卡在进程中

    (1)今天遇到进入eclipse时一直卡在 进程中,无论是重启电脑,还是重启软件 删除 D:\workspace\.metadata\.lock 文件才有用,特此记录下. (2)还有一种情况就是打开e ...

  9. python 作业 用python实现 mysql查询结果导出带列名

    1 import pandas as pd 2 import numpy as np 3 import matplotlib as mpl 4 import matplotlib.pyplot as ...

  10. ZOJ 1006 Do the Untwish

    Do the Untwish 题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1006 题意:给定密文按公式解密 注 ...