问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

有必要写HEAD、BODY和HTML标签吗？

社区维基
1
新手上路，请多包涵

是否需要编写 <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 正确地将头部和身体分开：

在此处输入图像描述

W3C 验证器 说它是有效的。

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

写这些标签有理由吗？

原文由 Larry Foobar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmltags
阅读 725
2 个回答
得票最新
社区维基
1
✓ 已被采纳

HTML 规范当然允许省略 html 、 head 和 body _标签_。根本原因是浏览器一直在寻求与现有网页保持一致，而 HTML 的早期版本并没有定义这些元素。当 HTML 第一次这样做时，它是以一种在标签丢失时进行推断的方式完成的。

我经常发现在制作原型时省略标签很方便，尤其是在编写测试用例时，因为它有助于使标记专注于所讨论的测试。推理过程 应该 完全按照您在 Firebug 中看到的方式创建元素，并且浏览器在这样做时非常一致。

但…

Internet Explorer 在这方面至少有一个已知错误。甚至 Internet Explorer 9 也展示了这一点。假设标记是这样的：

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

你应该（并且在其他浏览器中做）得到一个看起来像这样的 DOM ：

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

但是在 Internet Explorer 中你会得到这个：

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

你自己看看吧。

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

原文由 Alohci 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

Google Style Guide for HTML 建议省略所有可选标签。 That includes <html> , <head> , <body> , <p> and <li> .

从 _3.1.7 可选标签_ 开始：

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

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

 <!-- 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.

原文由 Rima 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏