简体   繁体   English

div标签在html标签下的合法性

[英]legality of div tag immediately under html tag

I was running lynx to test some HTML I had to do, because having accessibility in mind. 我正在运行lynx来测试一些我必须做的HTML,因为要牢记可访问性。 I guessed that, if looked pretty in Lynx, the whole range of screen readers, crappy phones and other stuff would do OK, even most ancient hardware. 我猜想,如果在Lynx上看起来很漂亮,那么即使是大多数古老的硬件,整个屏幕阅读器,笨拙的电话和其他东西也都可以。

In some cases I was using a shortcut in case I wanted to wipe out all static HTML at a once for the regular case of when JS is supported and enabled, consisting in nesting all the static HTML tags in an identified div tag to be wiped out. 在某些情况下,如果我想一次擦除所有静态HTML(对于支持和启用JS的常规情况),我会使用快捷方式,包括将所有静态HTML标签嵌套在已标识的div标签中以进行擦除。 。

Later I realized that caused a behavior change in my lynx compilation: 后来我意识到这导致了我的lynx编译中的行为更改:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta name=viewport content="width=device-width">
    <title>Title</title>
  </head>
  <body>
    <div id="whatever">
      <header>
        <h1>First heading</h1>
      </header>
      <main>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </main>
      <footer>
        <hr />
        <p>
          Footer.
        </p>
      </footer>
    </div>
  </body>
</html>

Browsing that (in http://driedleav.es/so_20170729/with_div_inside.html too) moves the first header to full left: 浏览(也在http://driedleav.es/so_20170729/with_div_inside.html中 )将第一个标头移到最左端:

在此处输入图片说明

Browsing this other, in http://driedleav.es/so_20170729/without_div_inside.html too, centers the first header: http://driedleav.es/so_20170729/without_div_inside.html中浏览其他内容时,第一个标头也居中:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta name=viewport content="width=device-width">
    <title>Title</title>
  </head>
  <body>
    <header>
      <h1>First heading</h1>
    </header>
    <main>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </main>
    <footer>
      <hr />
      <p>
        Footer.
      </p>
    </footer>
  </body>
</html>

在此处输入图片说明

Am unable to catch any difference in behavior when displaying it in the WebKit software of my local host. 在本地主机的WebKit软件中显示行为时,无法捕获任何行为差异。

Should I give up the div tag used immediately under the body tag for the sake of standard, compatibility, and accesibility; 为了标准,兼容性和可访问性,我是否应该放弃在body标签下立即使用的div标签; at the cost of larger to develop, and larger to download, JS code? 以更大的开发成本和更大的下载成本为代价,JS代码?

Is my Lynx compilation buggy? 我的Lynx编译有问题吗?

Are my WebKit compilations buggy? 我的WebKit编译有问题吗?

By inserting a div , lynx considers the creation of an implicit section which makes the h1 the title of the section, and no longer the title of the webpage. 通过插入div ,lynx会考虑创建一个隐式部分,该部分使h1成为该部分的标题,而不再是网页的标题。

You should note that replacing the <div id="whatever"> with <main id="whatever"> gives the expected result. 您应该注意,将<div id="whatever">替换为<main id="whatever">会得到预期的结果。

Should I give up the div tag used immediately under the body tag for the sake of standard, compatibility, and accesibility; 为了标准,兼容性和可访问性,我是否应该放弃在body标签下立即使用的div标签; at the cost of larger to develop, and larger to download, JS code? 以更大的开发成本和更大的下载成本为代价,JS代码?

For the sake of standard, probably not. 为了标准,可能不是。 For the sake of compatibility, most definitely yes if wanting to support particular versions of lynx . 出于兼容性考虑,如果要支持特定版本的lynx ,则绝对可以。

Check these, are the same sources but with consecutive multi level headings as the only difference. 选中这些,是相同的来源,但唯一的不同是连续的多层标题。

http://driedleav.es/so_20170729/with_div_inside_.html behaving like this: http://driedleav.es/so_20170729/with_div_inside_.html的行为如下:

在此处输入图片说明

http://driedleav.es/so_20170729/without_div_inside_.html behaving like this: http://driedleav.es/so_20170729/without_div_inside_.html的行为如下:

在此处输入图片说明

From browsing further test docs, am seeing the behavior keeps being adding indentation levels, which seems saner than seeming not to be doing anything at all. 通过浏览更多的测试文档,我发现这种行为一直在增加缩进级别,这似乎比根本不做任何事情都要精明。

Is my Lynx compilation buggy? 我的Lynx编译有问题吗?

Because probably WebKit being 100% compliant, probably yes. 因为可能WebKit 100%兼容,所以可能是的。

Are my WebKit compilations buggy? 我的WebKit编译有问题吗?

Probably not, given it is a large and matured project used by zillions, and the eyeballs law of bugs. 考虑到这是不计其数的庞大而成熟的项目,并且漏洞的眼球定律,可能不会。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM