在html中包含javascript的最佳实践_Javascript_Html

在html中包含javascript的最佳实践

javascript html

在html中包含javascript的最佳实践,javascript,html,Javascript,Html,我已经在很多地方读过了，并且使用了这些知识，在页面底部包含javascript，除非有一些document.write脚本或范围问题。但最近，我遇到了一些我从未（可能）见过或使用过的东西。有些人在“i”标记中使用script标记。我不知道在其他标记中使用脚本标记的原因我非常希望能澄清我的问题 p、包含所有脚本标记的“i”标记位于页面底部，就在结束正文标记之前。我假设您正在谈论并且您在Firebug的HTML面板或类似工具中看到了标记：该页面包含。特别是，它有几个未关闭的标签。这使得浏览器

我已经在很多地方读过了，并且使用了这些知识，在页面底部包含javascript，除非有一些document.write脚本或范围问题。但最近，我遇到了一些我从未（可能）见过或使用过的东西。有些人在“i”标记中使用script标记。我不知道在其他标记中使用脚本标记的原因

我非常希望能澄清我的问题

p、包含所有脚本标记的“i”标记位于页面底部，就在结束正文标记之前。

我假设您正在谈论并且您在Firebug的HTML面板或类似工具中看到了

标记：

该页面包含。特别是，它有几个未关闭的标签。这使得浏览器在呈现页面之前应用某些修复，因为它需要使用有效的HTML才能在内存中生成DOM树。这方面的主要问题是，无法保证所有浏览器都会生成相同的修复程序，或者这些修复程序会按预期工作

如果打开原始HTML代码（在某些浏览器中，可以按Ctrl+U），您将看到

标记没有被

标记包围。在DOM节点中看到的是浏览器应用的修复的结果

例如，顶部有一个未关闭的

标记：

<i>notyfy adds the ability to style notyfy via CSS, as well removing the need for JS-based layouts and implementing event-type callbacks.</p>

notyfy添加了通过CSS设置notyfy样式的功能，同时消除了对基于JS的布局和实现事件类型回调的需要

如果你想知道，一些前端框架，比如Twitter Boostrap，已经决定（ab）使用

标签来显示图标：

<span class="runner" data-layout="top" data-type="alert">Alert <i class="icon-caret-right"></i></span>

警报

当然，这与JavaScript无关，这些图标是用CSS生成的

编辑：HTML代码和DOM树之间有一个微妙但重要的区别。浏览器使用HTML代码构建文档的内存表示形式，称为DOM树。HTML被设计为可能无效，但DOM树不能。例如，此HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>Invalid HTML test</title>
</head>
<body>
    <p>Hellow, <i>world</div>
</body>
</html>


无效的HTML测试
嗨，世界

。。。将生成此树：

正如你所看到的，它们是不同的。为了生成有效的文档结构，我的浏览器已完全删除了

标记，并决定在正文结尾之前关闭

和

标记。

有任何例子吗？如果您通过dom检查器查看启用脚本的呈现页面，斜体标记中是否有任何内容？@RupamDatta如果查看源代码，您将看到“i”标记不在那里，因为它们是在dom中稍后创建的。绝对没有理由把你的脚本标签放在“i”标签里。我想诺蒂菲的开发者对斜体字有些痴迷，看看这个网站，全是斜体字（哦，我的眼睛…）。是的，回到主题，不应该有任何理由把它们放在

@RupamDatta中。不，他们不使用它。他们只是使用无效的html，没有正确关闭所有标记。这就产生了这种效果。@MrLister我通常会认真对待10k用户的评论，但我的印象是您不知道HTML代码和DOM树之间的区别。我会为你更新我的答案的，事实上我会的。如果您使用Firefox查看“页面信息”，您将看到该页面是以标准遵从模式呈现的。另外，您将标记和元素混为一谈。@MrLister-当然，怪癖模式是一个适用于我们这里没有的特定场景的术语。我已经把它从答案中删除了。@alvarog.Vicario你的解释太棒了。现在我认为包装脚本实际上对开发的站点没有任何好处。@RupamDatta-准确地说，包装脚本不是有意的。