我从读者 Josh Kreis 那里得到了一个很好的问题
我注意到,在
<script>标签上,有各种各样的变体,它们似乎都可以在跨浏览器中工作。 哪些是必需的,哪些不是必需的?
<script>
//some javascript here
</script>
<script type="text/javascript">
//some javascript here
</script>
<script type="text/javascript" language="javascript">
//some javascript here
</script>
<script language="javascript">
//some javascript here
</script>
<script type="text/javascript">
//<![CDATA[
// some javascript here
//]]>
</script>
据我所知,这是情况。 如果有人愿意详细说明或纠正我的错误,请在评论中进行。
/* WAY OLD - DO NOT USE */
<script language="javascript">
//some javascript here
</script>
从未真正存在过 language 属性(或者如果有,它已经过时很久了)。 存在 lang 属性,但它用于完全不同的目的:识别人类语言而不是计算机语言。 使用 language 属性的这种语法用于告诉(旧的)浏览器识别并运行该脚本作为 JavaScript。 它曾经有效,但它从未成为标准。
我们现在有一个标准的方法来做到这一点
<script type="text/javascript">
//some javascript here
</script>
type 属性是标准且正确的方法来识别并告诉浏览器该标签包含哪种类型的脚本。 有时你会看到使用 language 和 type 属性的代码。 据我所知,这从不必要。
来自 规范 的非常具体的解释,language 是一个“过时但符合标准”的特性
作者不应在 script 元素上指定 language 属性。 如果存在该属性,其值必须与字符串“JavaScript”进行 ASCII 不区分大小写的匹配,并且 type 属性必须被省略或其值必须与字符串“text/javascript”进行 ASCII 不区分大小写的匹配。 该属性应该完全省略(带有值“JavaScript”,它没有效果),或者用 type 属性的使用来替换。
最近,你可能已经看到了很多这样的情况
<script>
//some javascript here
</script>
根本没有属性。 这是 HTML5 处理包含 JavaScript 的脚本标签的方式。 它只是假设类型是 text/javascript。 如果不是(我从未见过其他类型的脚本),你将需要使用 type 属性更改它。 我建议你在使用 HTML5 时这样做。
还有一个奇怪的情况
<script type="text/javascript">
//<![CDATA[
$("<div />").appendTo("body"); // Some JS with HTML in it.
//]]>
</script>
如果你仍然使用 XHTML,并且你的 JavaScript 包含 HTML(或者甚至是 < 字符,这可能需要在大于逻辑中),你将需要在脚本周围使用这些 CDATA 注释,如果你关心脚本是否通过验证(你会收到类似于:文档类型在此不允许元素“div” 的错误)。 并且如果,你将脚本直接放在开始和结束脚本标签之间,而不是链接到脚本 src。
有太多 IF 了。
要点
- 如果你使用的是 HTML5,只需使用
<script>。 - 如果你使用的是更旧的版本,请使用
<script type="text/javascript">。 - 如果你正在编写供其他人在其网站上使用的脚本(例如,可复制粘贴的代码、WordPress 插件等),请使用
<script type="text/javascript">和 CDATA。
感谢您对此进行澄清! 我一直想知道这一点。 我很高兴 HTML5 现在变得更加简单了。
有人知道在 script 标签中使用的其他类型吗? 我也从未见过除了 javascript 之外的任何其他东西。
许多客户端模板引擎(例如,jQuery 模板)使用 script 标签来定义模板。 查看 此 示例。
“我从未见过其他类型的脚本”
值得一提的是,你可以使用
type="text/coffeescript和浏览器内的 CoffeeScript 解释器。 示例在此:http://joshuacc.github.com/LifeForce/很棒的文章,当有人告诉我我必须使用 type 属性时(即使我正在编写 HTML5),我会将他们发送到这里。
对于链接文件… 这不是完全相同的事情吗?
@Rob,是的,我在一些旧网站上见过 vbscript。
type=”text/vbscript”
几年前我写了一些简单的 vbscript。
你还可以像这样定位 javascript 版本
type=”text/javascript1.3″
但我之前从未见过这种情况。
Chrome 网页检查器的 Google 页面速度扩展会因脚本和链接的 css 元素上没有包含 type 属性而扣分。 在 .htaccess 文件中指定 mime 类型对于它来说是不够的。
不确定它是否真的会影响页面加载时间,但考虑到 Google 使用页面加载速度进行搜索排名,如果它能使 Google 高兴,添加 type 属性总没有坏处!
也就是说,我不确定 Googlebot 是否使用与网页检查器扩展相同的页面速度评分标准,但我还是会继续使用它们。
感谢您的提示,Jonic。 这真是一个极好的观点!
您是在 HTML5 网站上检查的,还是在其他标准上检查的?
我好像记得你可以使用 script 标签转义到 php?
也许您想到的是获取由 PHP 文件生成的 JS 脚本?
当然,您可以使用 <% … %> 和 <%php … php%> 标签在文件中切换到 PHP 解析。
是的,我在此处写了有关此内容的信息
http://www.impressivewebs.com/php-file-html-script-tag/
您基本上可以使用 script 标签调用任何类型的文件,但结果必须实际返回 JavaScript,以便它可以在页面上执行操作。
CDATA 部分中字符的特殊解释与验证无关。 在加载页面时或在验证之前,您将遇到 XML 解析错误。 这只是一个捷径,因此您不必在脚本中使用诸如 < 之类的实体。 如果您使用的是 XML 语法,那么 CDATA 之前的那些 javascript 注释是多余的——实际上,这是您使用 CDATA 的唯一原因,除非您试图编写多语言代码,而这种方式最近已变得不太流行。
还省略了可能与“application/javascript”与“text/javascript”相关的最常见的误解。 我现在很少看到 language 属性。
对于普通 JavaScript,您只需要一个没有属性的 script 元素。 mime 类型不需要,因为 JS 是标准。 如果您想指定自己的语言,那么 mime 类型就很有意义了。 脚本节点内的注释完全是历史上的,没有正在使用的客户端关心脚本节点中内容的显示。
我发现我仍然喜欢使用
script type=”text/javascript”
即使在使用 HTML5 时——这样,我的代码编辑器仍然知道突出显示语法。 我正在使用 Coda,有没有办法让它在不添加 type=”text/javascript” 的情况下识别 JS?
是的,将 JavaScript 放到单独的文件中
最重要的信息被遗漏了… 那就是最好将 JavaScript 放到它自己的外部 .js 文件中,而不是放在 (X)HTML 文档中。 所以理想情况下,你只需要做这个
HTML5
<script src=”yourscript.js”></script>
更旧的版本
<script src=”yourscript.js” type=”text/javascript”></script>
无需担心那个难看的 CDATA 东西。
HTML5 不再要求 type 属性的原因是*没有浏览器**关心它,根本不关心。 文档类型/声明的 HTML 版本与此无关。
* 对于 javascript
** 没有任何_常用_的浏览器
(大多数不常用的浏览器也是如此)
没错,但我还是会为任何非 HTML5 的东西包含 type 属性,以用于验证目的。 您是对的,没有任何浏览器会关心 type 是否存在。 但是,它在之前的版本中是必需的才能“有效”,因此,如果您进行任何验证,定义 type 将可以防止验证错误。
没错。
(我想我对验证的关心不如对实用性的关心大。)
“最好将 JavaScript 放到它自己的外部 .js 文件中”
从语义上讲,这可能是最好的方法,但它也是一个额外的 HTTP 请求,所以……在我看来,它并不总是最好的选择。
FWIW - 最小的测试省略了 <style> 和 <script> 上的类型。根据 http://syntax.whattf.org/relaxng/xhtml5.rnc 有效,但根据 http://www.w3.org/MarkUp/RELAXNG/xhtml-rdfa-1.rng 无效
因此,旧的 XHTML 风格需要类型才能验证,否则任何 HTML5 都可以,并且任何浏览器都不会出现问题。
xhtml5 RNG 会卡在 HTTP 元数据上,但我认为这是一个错误。
不要忘记
当然,这可以与以上所有选项结合起来,营造出更 企业级 的感觉。
我前几天才想到这件事……时机真不错。谢谢你为我解惑!
我经常遇到 CDATA 的另一个情况是,当使用像 Python 的 Genshi 这样的模板引擎来生成 HTML 时。它往往过于聪明,会将 JavaScript 中的 <> 转换为 &- 实体。
如果你在 CSS 中也使用它们,也是一样的。这会导致奇怪的语法:
<style type="text/css"> /* <![CDATA[ */ .someelement:after { content: ">"; } /* ]]> */ </style>顺便问一下:在 HTML5 中,style 的 type=”” 可以省略吗?
是的,
<style>元素和<link rel=stylesheet>的type属性都可以省略。参见 HTML5 Level 1,了解更多“无处不在”的 HTML5 新内容。与其仅仅说“在 HTML5 中”……
可能值得注意的是
<!doctype html>
应该是在使用时使用的 doctype
<script>
// 这里有一些 javasciript
</script>
我想再次指出 handlebars 模板,它包含在脚本标签中
Handlebars 正在 集成 到 YUI3 中,这是另一个指出这一点的原因。
再次感谢你的帖子!
我认为无论 HTML 4 还是 5,都应该始终使用
<script>。所有浏览器默认都使用 Javascript,而且一直都是这样。顺便问一下:将来可能会有
type="application/dart"(至少在 Chome 中)只想补充一点(虽然不是必需的):我是一个博主,我意识到使用
//<![CDATA[很重要。因为如果不使用它,单引号会被解析成',双引号会被解析成"。此外,如果不使用//<![CDATA[,博主会拒绝 JQuery$ ('.something').append('<div></ div>');它预计这是一个放在
<head>上的 HTML 元素你能写一篇关于
<style>标签的文章吗?这篇文章很棒,Chris!سلام.خسته نباشید.من از ایران شهر ممقان هستم.
از زحمات شما تشکر میکنم.
————————–
你好,我是来自伊朗玛玛干的阿里雷扎。
谢谢你的付出。
我认为我看到了另一种变体
嗯,我添加了 pre 和 code 标签,但没有用。
无论如何,我的意思是有时会有一个 charset 属性:charset=”utf-8″
这里有一篇关于这个主题的很好的文章
http://www.hixie.ch/advocacy/xhtml
很棒的文章!HMLT5 部分中的 **小** 错误,最后一句
“我建议你在使用 HTML5 时这样做。”
应该是“我建议你在使用 HTML5 时这样做。”(is / if),我想。
也许还要加个逗号?
继续努力,这是我为数不多的几个网站之一,我经常访问,如果不是每天的话。
据我所知,Crockford 主张删除 type 属性,因为他认为将来它不会改变成除了 text/javascript 之外的任何其他内容——而且在现代浏览器中这样做没有弊端。
旧的 <!– –> 风格在 <script> 内是为了那些不理解 <script> 的浏览器,它阻止了它们将块的内容呈现为文本。(也许是关闭了 JS 的 Netscape 4,或者像 Mosaic 这样的早期版本的浏览器?我不记得了。)
关于其他语言:使用 Silverlight,IronRuby 和 IronPython 也受支持。
这真是一个很好的思考素材,又学到了新东西,再次感谢 Chris!
现在我总是这样使用它
不需要类型或其他东西。顺便说一下,服务器可以像这样设置
如果目录是 css,则 default_type text/css;如果目录是 js,则 default_type text/js;等等。
同样不需要为字符集和其他内容添加元标签
add_header X-UA-Compatible IE=Edge,chrome=1;
add_header charset utf-8;
在 html 中不需要所有这些代码,因为服务器可以做到这一点。
是的,不需要引号
我相当确定“language”属性是由微软在 Internet Explorer 中引入的[1],这样你就可以除了常见的 JavaScript 默认值之外,还可以处理 VBScript 或 JScript(JScript 对 JavaScript 进行了一些细微的增强,但本质上仍然是 JavaScript[2])。IE 还可以通过使用扩展[3],处理基于 Perl 的语言 PerlScript。此功能是通过 Windows 脚本宿主[4] 提供的,该宿主似乎也表明使用语言标签来区分不同的语言。
[1] http://msdn.microsoft.com/en-us/library/aa242461(v=vs.60).aspx
[2] http://en.wikipedia.org/wiki/JScript
[3] http://www.xav.com/perl/Components/Windows/PerlScript.html
[4] http://en.wikipedia.org/wiki/Windows_Script_Host
好文章
HTML5 以前就是这么简单。现在我明白了 XD
很棒的文章……感谢 Chris!
很棒的文章……感谢 Chris!继续写出这样有价值的文章……再次感谢
我们在我们使用的名为 Umbraco 的 CMS 的前端使用脚本标签。它是基于 ASP.Net 的,但我们使用这个标签并添加 runat=”server” 到它,然后我们能够在 Umbraco 模板中直接在代码块之间添加一些 C# 代码。
这是另一种使用该标签的方法。我认为无论是在 HTML5 还是其他版本中,最好还是将 type 添加到标签中以确保安全。这样,如果旧的浏览器无法读取 HTML5 元素,但仍然可以运行页面上的 Javascript,你始终有一个后备方案。特别是如果你的下拉菜单由 Javascript 控制。这样,即使用户无法查看 HTML5 元素,他们至少也可以浏览网站。
runat=”server” 是 ASP.NET 的东西。这不是任何 HTML 规范的一部分,用户永远不会看到它(因为它是在服务器上执行的)。但这通常被认为是一种不好的做法——正确的方法是使用代码隐藏文件(.aspx.cs)。我不确定 Umbraco 是否允许这样做。
丹尼尔,
我们了解代码背后的东西。runat=”server” 脚本标签实际上是在执行一些非常简单的 UA 嗅探,并在 URL 中添加 /mobile。Umbraco 允许使用备用模板来构建您的网站,而无需创建全新的网站或重定向到 m.mydomain.com 风格的网站。我们利用备用模板,通过使用脚本 runat=”server” 来实现这一目的。
网站的其余部分基于 Umbraco 的平台构建。我们创建了一些自定义控件,并将其内置到网站中,当然也使用了代码隐藏文件。
如果您了解 C# 或 ASP.Net,我建议您至少尝试一下。它是一个非常酷的 CMS,非常可扩展。即使您不了解 C# 或 ASP.Net,也应该尝试一下。您无需了解这两种语言中的任何一种就可以在 Umbraco 中构建网站。主要需要的是基本的 HTML 和 CSS。
是的。
我只是想告诉那些不知道脚本标签可以在 ASP.Net 中使用来使用 runat=”server” 从客户端执行服务器端操作的人。
language 属性肯定已经过时,不应该再用于当前的 Web 开发。早期,浏览器使用该属性来表示语言类型和所需的最小解析器版本。例如:
<script language="JavaScript1.5">表示解析引擎应该支持 JavaScript 语言的 1.5 版才能运行脚本。如果浏览器不支持该版本,则不会运行脚本。如今的浏览器不再使用这种类型的指定方式。在 JavaScript 中使用try {} catch {}是了解脚本支持需求的一个典型例子。过去,语言和实现是有限的,并且仍在不断发展,代码可能会在不支持的情况下导致错误而不是捕获错误。