HTML尾部标记以补充头部标记

HTML Tail Tag to complement Head Tag

本文关键字：头部 HTML 尾部      更新时间：2023-09-26

因此，在我们的HTML文件中，一般结构看起来有点像这样：

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <!-- Favicon -->
        <!-- Meta Stuff -->
        <!-- Title -->
        <!-- CSS Files -->
        <!-- JavaScript Files -->
        <!-- Other Header Stuff -->
    </head>
    <header>
        <!-- Navbar & Header Stuff -->
    </header>
    <body>
        <!-- Body Stuff -->
    </body>
    <footer>
        <!-- Copyright & Footer Stuff -->
    </footer>
</html>

然而，我经常发现自己使用的JavaScript文件需要在body的之后加载，或者与之交互的任何元素。因此，身体可能最终看起来像这样：

<body>
    <!-- Body Stuff -->
    <script src="..."></script>
    <script src="..."></script>
    <script src="..."></script>
    ...
    <script src="..."></script>
</body>

当然，我可以手动或使用某种编译器将所有这些东西合并到一个大型脚本文件中。我甚至可以将所有的脚本打包到一个单独的div中，这样我就可以在脑海中标记为"单独的"。

然而，我真正要做的只是在文档末尾注入一堆脚本。这些东西不应该真正放在body标签中，因为它不是实际的内容，只是代码。

为了纠正这一点，我经常使用tail标签，如下所示：

<!DOCTYPE HTML>
<html lang="en">
    <head></head>
    <header></header>
    <body>
        <!-- Body Stuff -->
    </body>
    <footer></footer>
    <tail>
        <script src="..."></script>
        <script src="..."></script>
        <script src="..."></script>
        ...
        <script src="..."></script>
        <script>(function() { console.log('Custom code'); })();</script>
    </tail>
</html>

浏览器似乎对此很满意，我对这个解决方案很满意。然而，tail标签并不是HTML规范的一部分，我几乎没有看到tail标签的使用，除了使用tail标签作为footer标签的旧HTML4内容。

所以我想知道的是：这是一个好的做法吗？这种方法有什么缺点吗

我明白你要怎么做了。我也考虑过同样的概念。将<script>标记放在文档底部是有效的，它们实际上不需要放在<body>标记中——只是没有其他有效的位置可以放置它们（保存<head>）。为了代替为组织目的创建无效标签，我做了以下操作：

    <section id="tail">
        ... 
    </section>
</body>

使用一些类似的CSS

section#tail { display: none; }

以确保没有错误的显示效果。

这种做法好吗？

没有。

这种方法有什么缺点吗？

你必须进行详尽的浏览器测试，看看这是否有效，包括文本浏览器和屏幕阅读器。此外，人们可能会嘲笑你，史蒂夫·福克纳会创造一个关于你的有趣模因。。。如果这可能会冒犯你，那也是不利的。

将所有内容放入body标记中，只需将所有脚本放在</body>标记之前，不要用任何东西包装。它们不会显示，因此无需在元素中对它们进行分组。

<!DOCTYPE HTML>
<html lang="en">
    <head></head>
    <body>
        <header></header>
        <!-- Body Stuff -->
        <footer></footer>
        <script src="..."></script>
        <script src="..."></script>
        <script src="..."></script>
        ...
        <script src="..."></script>
        <script>(function() { console.log('Custom code'); })();</script>
    </body>
</html>

这不是一个好的做法。作为在<body></body>标记中包含脚本的替代方案，您可以将它们保留在<head></head>部分中，并且可以使用以下Jquery调用页面加载后所需的代码：

$( document ).ready(function() {
});

或者以下javascript：

window.onload = function() {
};

HTML Tail定义了要插入到每个HTML文档底部的HTML代码，通常包括返回主页的链接或插入一个小图形。它作为表数据元素插入，并与页面右对齐

对不起，我不同意你的方法。

基本结构：

<!DOCTYPE html>
<html>
<head>
<!-- Some meta data -->
<!-- Title -->
<title></title>
<!-- Link to css script -->
<link rel="stylesheet" type="text/css" href="example.css"/>
</head>
<body>
<!-- Some Content -->
<!-- Script tag to .js source script -->
<script src="example.js"></script>
</body>
</html>

正确的基本页面加载的简单解释：

当浏览器浏览HTML脚本时，

  • 它首先识别所定义的脚本的类型
  • 然后它运行到一个LINK标记上，该标记将它指向.css脚本。浏览器读取它并首先在页面上显示样式
  • 则它通过BODY标签并显示内容
  • 最后，它运行到一个SCRIPT标记上，该标记将浏览器引导到一个.js脚本，读取该脚本，并在最后将交互加载到页面

这为用户访问某个页面提供了更好的体验。

相关文章：