HTML5大纲算法

什么是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>

  

时间: 2024-10-24 22:25:06

HTML5大纲算法的相关文章

了解HTML5大纲算法

实战前的准备工作:了解HTML5大纲算法 在html5中有一个很重要的概念,叫做html5大纲算法(HTML5 Outliner),它的用途为用户提供一份页面的信息结构目录.合理的使用HTML5元素标签,可以生成一个非常清晰的文档大纲. HTML5大纲算法 我们可以通过各种工具去查看当前页面,这里推荐使用一个测试工具:HTML5 Outliner,网址如下:https://gsnedders.html5.org/outliner/ 1. 了解一个 section 和 div 的区别 ①div元素

HTML5区块和大纲算法

原文链接: Using HTML sections and outlines - Mozilla Developer Network 每集HTML5+CSS3网页布局教程-2大纲算法 HTML5标准带来了几个带有标准语义的新元素来描述Web文档结构.本文会介绍这些元素,并且讨论如何用这些元素定义令人满意的文档大纲. HTML4时代的文档结构 文档的结构(或者可以说在body标签之间的结构)是展示和表现web页面的基础.HTML4使用了区块(sections)和子区块(sub-sections)的

HTML5开发规范

1.总体规范——采用html5的结构标签进行页面布局,注意结构的语义化,并注意页面大纲的层级结构.使用css3.0进行样式的设计. a.网页大纲查询网址http://gsnedders.html5.org/outliner/ b.Html5大纲算法概念及如何如何在浏览器中添加网页大纲生成的插件 http://www.20ju.com/content/V165998.htm 2.Html5文档结构规范——html5作为新一代标签语言的标准,不需要再显式的声明mine类型及版本号. a.简化的Doc

2018 – 2019 年前端 JavaScript 面试题

JavaScript 基础问题 1.使以下代码正常运行: JavaScript 代码: const a = [1, 2, 3, 4, 5]; // Implement this a.multiply(); console.log(a); // [1, 2, 3, 4, 5, 1, 4, 9, 16, 25] 2.以下代码在 JavaScript 中返回 false . 解释一下为什么会这样: JavaScript 代码: // false 0.2 + 0.1 === 0.3 3.JavaScri

《HTML5揭秘》读书笔记(一)

一.HTML5的发展历程 + html演变的几个版本: html2.0.html3.2.html4.0.html4.01.html5. + 其中在html4.01发布之后,还发布了xtml1.0,它是基于html4.01的,没有新增任何新的元素和属性:xhtml遵循更严格的语法规范,xhtml定义的新的MIME类型(内容类型)为application/xhtml+xml,但是xtml1.0版本的网页仍然可以以text/html类型来发布,xtml1.0就是一个xml风格的html:在xtml1.

第九十一节,html5+css3pc端固定布局,完成首页

html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瓢城旅行社</title> <link

HTML5的全新语义化元素

1.<section> <section>元素用来定义文档或应用程序中的区域(或节).例如,可以用它组织你的个人信息,一个<section>用于联系信息,另一个用于新闻动态.需要重点理解的是用它的目的不是为了美化样式.如果你只想将某个元素包裹起来以便设置样式,那应该和以前一样继续使用<div>. 2.<nav> <nav>元素用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域.因为<nav>用于主导航区域

html5标签说明

页面结构发生变化 web 1.0 table时代 多层嵌套效率低.seo抓取能力不强 web 2.0 时代 大量的DIV+CSS   典型案例(微博.博客) web3.0时代 html5 减少DIV+CSS 简洁 典型案例(百度) 标签的变化 增加25个标签 结构元素 section元素:表示页面中的一个内容区块:比如章节.页眉.页脚或页面中的其他部分.它可以与h1 h2 h3 h4 h5 h6等元素结合起来 article  元素:表示页面中的一块与上下文不相关的独立内容,譬如博客中的一篇文章

HTML5基础(四)

新增和废除元素的认识 1.其他新增元素    1.新增的figure元素与figcaption元素 figure元素是一种元素的组合,带有可选标题.figure元素用来表示页面上一块独立的内容,如果将他从网页上删除不给我们的网页造成影响.  figcaption元素表示figure元素的标题,它属于figure元素,figcaption元素必须书写在figure元素内部,可以写在figure元素内的其他从属元素前面或后面.一个figure元素内最多只允许放置一个figcaption元素. <fi