什么是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. PyCharm搭配github错误处理

    ssh -T git@github.com 验证时 报错Could not open a connection to your authentication agent. 删除前面生成的.ssh文件 ...

  2. Python列表的增删改查

    列表的增: li = ['libai','sushi','dufu','sushi',"白居易"] 第一种: append():向列表末尾追加元素 li.append('diaoc ...

  3. scrapy爬取豆瓣电影信息

    最近在学python,对python爬虫框架十分着迷,因此在网上看了许多大佬们的代码,经过反复测试修改,终于大功告成! 原文地址是:https://blog.csdn.net/ljm_9615/art ...

  4. vue 404

    问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所 ...

  5. Day13 CSS样式

    1. css 选择器 1.1 css三种引入方法 <!DOCTYPE HTML> <html> <head> <meta charset="utf- ...

  6. ERP收付款的操作与设计--开源软件诞生22

    赤龙ERP收款付款讲解--第22篇 用日志记录"开源软件"的诞生 [进入地址 点亮星星]----祈盼着一个鼓励 博主开源地址: 码云:https://gitee.com/redra ...

  7. Django项目之打分系统

    打分系统 关注公众号"轻松学编程"了解更多. 项目GitHub地址:https://github.com/liangdongchang/VoteSys.git 1.开发需求 a. ...

  8. 【新阁教育】穷学上位机系列——搭建STEP7仿真环境

    经常有学员问我,学习上位机要不要买PLC硬件? 我一般的回答是:富则自行购买,穷则搭建仿真. PLC硬件,对于学习上位机来说,是锦上添花的事,经济条件允许,有则更好,条件不允许,我们也可以通过搭建仿真 ...

  9. 【CF1443F】Identify the Operations 题解

    原题链接 题意简介 建议去原题看.这题意我表达不清楚. 大概就是给你一个 n 的排列,现在要求你进行 m 次操作. 每次操作,你会在现有的排列中删去一个数,然后选择其左边或右边的一个与之相邻的数加入 ...

  10. Netcore中简单使用MemoryCache

    用到缓存架构,我们一般都会想到的Redis,因为它支持分布式,高可用,速率非常快.MemoryCache则相对较少提到,但是对于单体项目或者小型项目,memorycache还是是不错的选择.Memor ...