HTML尾标以补充头标记

时间:2015-12-02 20:55:14

标签: javascript html html5

通常,在我们的HTML文件中,一般结构看起来有点像这样:

pageController.setViewControllers([controllers[0]], direction: .Forward, animated: false, completion: nil)

但是,我经常发现自己使用的是需要在 <!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> 中,以便我可以将其标记为&#34;分开&#34;在我的脑海里。

但是,我真正做的就是在文档末尾注入一堆脚本。这些内容不应该放在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> 标记不是HTML规范的一部分,我看到很少或没有使用tail标记,除了旧的HTML4内容使用{{1标记为tail标记。

所以我想知道的是:这是一个好习惯吗?这种方法有任何缺点吗?

4 个答案:

答案 0 :(得分:1)

  

这是好习惯吗?

没有

  

这种方法有什么缺点吗?

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

将所有内容放在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>

答案 1 :(得分:1)

我知道你要去哪里。我考虑过同样的概念。将<script>标记放在文档底部有一些有效的案例,并且它们确实不需要位于<body>标记中 - 除了没有其他有效放置它们(保存<head>)。为了组织目的而不是创建无效标签,我已经完成了以下工作:

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

有些像CSS一样的

section#tail { display: none; }

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

答案 2 :(得分:0)

不好的做法。作为在Paths:["asdkmalksmdasd","asdasdad"]; 标记中包含脚本的替代方法,您可以将它们保留在<body></body>部分中,并且可以使用以下Jquery调用页面加载后所需的代码:

<head></head>

或以下javascript:

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

答案 3 :(得分:0)

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脚本,读取它,并在最后加载到页面的交互性。

在访问某些页面时,这为用户提供了更好的体验。