是否有必要编写HEAD，BODY和HTML标签？

时间：2011-04-12 21:46:04

标签： html html5 tags

是否有必要撰写<html>，<head>和<body>代码？

例如，我可以制作这样一个页面：

<!DOCTYPE html>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script>

Firebug正确分离头部和身体： enter image description here

W3C验证说它有效。

但我很少在网上看到这种做法。

有没有理由写这些标签？

6 个答案:

答案 0 :(得分：136)

HTML规范肯定允许省略html，head和body 标记。根本原因是浏览器总是试图与现有网页保持一致，而HTML的早期版本并没有定义这些元素。当HTML 2.0 首次执行时，它的执行方式是在丢失时推断标记。

我经常发现在原型设计时省略标签很方便，特别是在编写测​​试用例时，因为它有助于将标记集中在有问题的测试上。推理过程应该以与您在Firebug中看到的方式完全相同的方式创建元素，并且浏览器在执行此操作时非常一致。

但是...

IE在这个领域至少有一个已知的bug。甚至IE9也展示了这一点。假设标记是这样的：

<!DOCTYPE html>
<title>Test case</title>
<form action='#'>
   <input name="var1">
</form>

你应该（并在其他浏览器中）获得一个如下所示的DOM：

HTML
    HEAD
        TITLE
    BODY
        FORM action="#"
            INPUT name="var1"

但在IE中，你得到了这个：

HTML
    HEAD
       TITLE
       FORM action="#"
           BODY
               INPUT name="var1"
    BODY

See it for yourself.

此错误似乎仅限于任何文字内容和任何form开始标记之前的body开始标记。

答案 1 :(得分：67)

适用于HTML的Google样式指南建议省略所有可选标记 其中包括<html>，<head>，<body>，<p>和<li>。

https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

  

对于文件大小优化和可扫描性目的，请考虑   省略可选标签。 HTML5规范定义了哪些标签可以   被省略。

     

（这种方法可能需要建立一个更宽的宽限期   指南，因为它与Web开发人员有很大不同   通常教。出于一致性和简单性的原因，这是最好的   省略了所有可选标签，而不仅仅是选择。）

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

答案 2 :(得分：45)

与@Liza Daly关于HTML5的说明相反，该规范实际上非常具体，可以省略哪些标签，以及何时（规则与HTML 4.01略有不同，主要是为了澄清注释和空白等模糊元素属于何处）

相关参考文献是http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags，它说：

  • 如果html元素中的第一个内容不是注释，则可以省略html元素的开始标记。

  • 如果html元素后面没有注释，则可省略html元素的结束标记。

  • 如果元素为空，或者head元素中的第一个元素是元素，则可以省略head元素的开始标记。

  • 如果head元素后面没有空格字符或注释，则可省略head元素的结束标记。

  • 如果元素为空，或者body元素中的第一个元素不是空格字符或注释，则可以省略body元素的开始标记，除非body元素中的第一个元素是脚本或风格元素。

  • 如果body元素后面没有注释，则可以省略body元素的结束标记。

所以你的例子是有效的HTML5，并且将被解析为这样，html，head和body标签位于隐含的位置：

<!DOCTYPE html><HTML><HEAD>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script></HEAD><BODY><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script></BODY></HTML>

请注意，注释“此脚本将在头部”实际上是作为正文的一部分进行解析，尽管脚本本身是头部的一部分。根据规范，如果您希望它完全不同，则</HEAD>和<BODY>标记可能不会被省略。 （尽管相应的<HEAD>和</BODY>代码仍可以）

答案 3 :(得分：14)

在HTML4中省略它们是有效的：

7.3 The HTML element
start tag: optional, End tag: optional

7.4.1 The HEAD element
start tag: optional, End tag: optional

http://www.w3.org/TR/html401/struct/global.html

在HTML5中，没有“必需”或“可选”元素，因为HTML5语法的定义更为宽松。例如，title：

  

在大多数情况下，title元素是必需的子元素，但是当更高级别的协议提供标题信息时，例如当HTML用作电子邮件创作格式时，在电子邮件的主题行中，可以省略title元素。

http://www.w3.org/TR/html5/semantics.html#the-title-element-0

在真正的XHTML5中省略它们是无效的，尽管几乎从未使用过（与XHTML-acting-like-HTML5相比）。

但是，从实际角度来看，您经常希望浏览器以“标准模式”运行，以便在呈现HTML和CSS时具有可预测性。提供DOCTYPE和更结构化的HTML树将保证更可预测的跨浏览器结果。

答案 4 :(得分：13)

确实，HTML规范允许在某些情况下省略某些标记，但通常这样做是不明智的。

它有两个效果 - 它使规范更复杂，这反过来又使浏览器作者更难编写正确的实现（如IE所示错误）。

这使得规范的这些部分中浏览器错误的可能性很高。作为一个网站作者，你可以通过包含这些标记来避免这个问题 - 所以虽然规范没有说明你必须这样做，但这样做可以减少出错的可能性，这是一个很好的工程实践。

更重要的是，最新的HTML 5.1 WG规范目前表示（请记住，这是一项正在进行的工作，可能会有所改变）。

  

如果元素为空，则可省略body元素的开始标记   如果body元素中的第一个东西不是空格字符或   注释，除非body元素中的第一个东西是a   元，链接，脚本，样式或模板元素。

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element

这有点微妙。您可以省略正文和头部，然后浏览器将推断应该插入这些元素的位置。这带来了不明确的风险，这可能会引起混淆。

所以这个

<html>
  <h1>hello</h1>
  <script ... >
  ...

导致script元素是body元素的子元素，但是这个

<html>
  <script ... >
  <h1>hello</h1>

会导致脚本标记成为head元素的子元素。

你可以通过这样做来明确

<html>
    <body>
      <script ... >
      <h1>hello</h1>

然后无论你拥有第一个脚本还是h1，它们都会出现在body元素中。这些是在重构和调试代码时容易被忽略的事情。 （例如，你有JS正在寻找正文中的第一个脚本元素 - 在第二个片段中它会停止工作）。

作为一般规则，明确事物总是比把事情留给解释更好。在这方面，XHTML更好，因为它迫使你完全明确你的代码中的元素结构，这使它更简单，因此不容易被误解。

所以是的，你可以省略它们并在技术上有效，但这样做通常是不明智的。

答案 5 :(得分：0)

Firebug正确显示了这一点，因为您的浏览器会自动为您修复错误标记。此行为未在任何地方指定，并且可能（将）因浏览器而异。这些标签是您正在使用的DOCTYPE所必需的，不应该被省略。

html element是每个html页面的根元素。如果你看看所有其他元素的描述，它会说明元素可以在哪里使用（几乎所有元素都需要头部或主体）。

相关问题
最新问题