Html 是否有浏览器工具可以显示网站标题信息的快速概览？

有时你需要一个网站所有使用的html标题（h1，h2，h3，…）的快速概述。是的，实际上您可以查看源代码以获得它，但这并不是一个快速的概述

许多Web开发人员都知道Chromiumbrowser的优秀工具“Web开发人员”。该工具使您能够概述标题，但概述颜色不允许总结标题编号或标题层次结构

因此，这就引出了一个问题：是否有Firefox、Chrome或其他浏览器工具可以快速显示网站标题信息？

您有Firefox插件和Chrome扩展，这正是您的工作。另外，还有一个叫做的工具，它可以计算标题以及许多与可访问性相关的事情

波浪工具栏

---

您可以尝试安装firebug，它是一个firefox插件，地址是：

---

这是一个功能强大的web开发工具。：）

虽然有许多浏览器扩展和bookmarklet可以按照纯HTML源代码中定义的方式显示标题，但据我所知，没有一个浏览器扩展和bookmarklet可以像屏幕阅读器那样显示标题（这实际上是我们大多数时候都感兴趣的）

一些背景：为了保持网页的良好可访问性，整个网页必须组织在一个有效和有意义的标题结构中。这可能是这样的：

H1 Navigation
H1 Content: Here comes the "real" title and content of the current page
  H2 Content sub section 1
  H2 Content sub section 2
    H3 Content sub section 2.1
  etc.
H1 Related
  H2 News
    H3 News 1
    H3 News 2
    H3 News 3

通常情况下，在图形设计中，许多标题被省略（例如导航或相关标题），其含义通过页面的图形结构传递。尽管如此，非图形用户代理（如屏幕阅读器）依赖于这些标题，因此它们应该仍然存在于HTML源代码中，并且仅在图形用户代理（“普通”web浏览器）中可视地隐藏

现在，有两种方法可以从网页上直观地隐藏某些内容：

首先，我们可以使用CSS属性

display:none

或

visibility:hidden

。有些人不知道的是：使用这些属性，屏幕阅读器也会忽略隐藏的内容。因此，这是一种隐藏屏幕读者仍然应该看到的内容的好方法，not也是一种隐藏标题的合适方法

第二种方法是将要隐藏的内容移出视图端口。这通常通过以下方式完成：位置：绝对，左侧：10000px，宽度：1px；高度：1px；溢出：隐藏（在网上有很多不同的版本，但基本上都是一样的）。因此，您通常使用上述属性定义一个CSS类，如

.visually\u hidden

，并将该类分配给要在视觉上隐藏的标题（但不能从屏幕阅读器中隐藏）

现在，回到原来的话题

正如前面所指出的，所提到的标题概述了所有工具/扩展并没有区分视觉元素和完全隐藏的元素（事实上，它们根本不关心CSS）！因此，它们只在有限的范围内有用。（如果我错了，或者有人知道实现此功能的扩展，请更正。）

如果您需要查看标题概述屏幕用户通过屏幕阅读器的感知方式，您必须自己安装屏幕阅读器（例如免费的NVDA）并使用其内部标题概述

更新

---

Internet Explorer的Web易访问性工具栏似乎在其“Structure=>headers Structure”功能中尊重了上述显示/可见性CSS属性，因此它似乎适合以实际方式显示标题层次结构。

因此，您将验证您自己的HTML。您可以在一个浏览器中完成此操作。Chrome有很多可访问性问题，正如他们在bug报告中所指出的。因此，这是浪费时间，因为铬不断地自我进化和发展。它在提供标准方面并不稳定，但正在努力维持一些东西。如果我错了，请纠正我，@ChristianMichael。您能删除webdeveloper屏幕截图和webdeveloper文本吗？我自己试过，但似乎做不到。Wave工具栏是a当时认为可以接受的答案。使用Web Developer插件，切换“大纲›大纲时显示元素标记名”和“大纲›大纲标题”选项；这有点奇怪，但通常会显示标题级别。@PraveenKumar一旦安装了Firefox的Web Developer插件，请启用“大纲›大纲时显示元素标记名”和“大纲›大纲标题”选项。这样做将在页面上的所有标题旁边添加标题级别指示器（如h2）。这同样适用于Chrome，但一些选项名称略有不同。我已经在Seamonkey（Firefox）中使用Web开发者工具栏多年了，我从来都不知道它能做到这一点！这段时间我一直在搜索源代码。作为参考，它位于“信息-查看文档大纲”下-它列出了按顺序嵌套的标题，每个标题旁边都有小标记，指示它是什么标题（H1、H2等）。它还通知您缺少标题级别，这正是我所需要的。

H1 Navigation.visually_hidden
H1 Content
  H2 Content sub section 1
  H2 Content sub section 2
    H3 Content sub section 2.1
  etc.
H1 Related.visually_hidden
  H2 News
    H3 News 1
    H3 News 2
    H3 News 3