1 <script> 标签
<script> 标签用于定义客户端脚本,比如 JavaScript。 在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。 script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。注:旧的 JavaScript 例子也许会使用 type 属性:<script type="text/javascript">。
type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。1.1 <script> 属性属性 | 是否必填 | 适用范围 | 说明 |
async | 可选 | 外部文件 | 表示应该立即下载脚本,但不应妨碍页面中的其它操作,比如下载资源或其它脚本文件 |
charset | 可选 | 外部文件 | 表示通过src指定的代码的字符集 |
defer | 可选 | 外部文件,IE4-7也支持嵌入代码 | 表示脚本可以延迟到文档完全解析和显示之后再执行 |
language | 可选(已废弃) | 原用于表示编写代码的脚本语言 | |
src | 可选,使用外部文件时为必填选项 | 外部文件 | 表示包含要执行的外部文件 |
type | 可选,默认text/javascript | 可以看成是language的替代属性,表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。 |
(1) 关于type属性,虽然text/javascript和java/ecmascript都已经不被推荐使用,但一直以来使用的都还是text/javascript,实际上,服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript,但在type中设置这个值可能导致脚本被忽略,另外,在非IE浏览器中还可以使用application/javascript和application/ecmascript。type如果没有指定,默认值为text/javascript。
(2) 只要不包含async和defer,浏览器会按照<script>在页面中出现的顺序依次解析;设置了defer时,会立即下载<script>元素,但是延迟执行,在规范中,要求多个含defer属性的脚本顺序执行且在DOMContentLoaded事件前执行,但是在实现中不一定满足这些要求;在HTML5中添加了async属性,和defer类似,也只是适用于外部文件,告诉浏览器立即下载文件,但延迟执行,不同的是,多个含async的脚本即便在规范中也没有规定执行的顺序,异步脚本再load事件前执行,但可能在DOMContentLoaded之前或之后执行。
(3) 在阅读之前的代码或者用一些IDE生成代码时,常常可以看到下面的结构:
显示 | 说明 | 实体名称 | 实体编号 |
半方大的空白 |   |   | |
全方大的空白 |   |   | |
不断行的空白 | |   | |
< | 小于 | < | < |
> | 大于 | > | > |
& | &符号 | & | & |
" | 双引号 | " | " |
有些不支持JavaScript的浏览器,可以将JavaScript代码包含在一个HTML注释中(由于所有主流浏览器均支持JavaScript,所以不再推荐使用):
对于一些老旧浏览器或者禁用了JavaScript的浏览器,还可以使用<noscript></noscript>元素来呈现相关的说明。
1.2 <script> 位置
脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中,或兼而有之。
注:把脚本置于 <body> 元素的底部,可改善显示速度,因为脚本编译会拖慢显示。
(1) <head> 中的 JavaScript
JavaScript 函数被放置于 HTML 页面的 <head> 部分例:
一张网页
一个段落
(2) <body> 中的 JavaScript
JavaScript 函数被放置于 HTML 页面的 <body> 部分。例:
A Web Page
一个段落
2 JavaScript 使用方法
在HTML中使用JavaScript的方式主要有:
2.1 引入外部脚本
在Html中使用<script>标签元素引入外部文件(推荐),将代码写入外部文件中,JavaScript 文件的文件扩展名是 .js。如需使用外部脚本,请在 <script> 标签的 src (source) 属性中设置脚本的名称。
可通过完整的 URL 或相对于当前网页的路径引用外部脚本:
(1) 使用完整的 URL 来链接至脚本
例:
(2) 使用位于当前网站上指定文件夹中的脚本
例:
(3) 链接了与当前页面相同文件夹的脚本:
例:
备注:
a. 可以在 <head> 或 <body> 中放置外部脚本引用。
b. 在XHTML文档中,导入外部文件时,可以使用简写方式<script/>但是在HTML中只能<script></script>。c. 导入外部文件时,src属性是必须的,这个时候嵌入在<script></script>中的代码(如果有)会被忽略。d. src属性也可以指定来自外部域的JavaScript文件,这一点让<script>元素异常强大,也备受争议,因为可能会让人恶意注入脚本。
e. 外部文件只需要包含<script></script>中的代码即可,不需要包括<script>元素本身,意思就是外部脚本不能包含 <script> 标签。
f. 外部文件一般扩展名为.js,但这不是强制的。
引入外部脚本优势:
a. 分离了 HTML 和代码
b. 使 HTML 和 JavaScript 更易于阅读和维护c. 已缓存的 JavaScript 文件可加速页面加载
2.2 在<script>内写入JavaScript代码。
在<script>元素中内嵌代码时,只需要指定type属性,但代码中不能出现</script>字符串,否则会解析出错。
例:
');会将字符串中的作为前面的标签结束符来解析,从而出现异常 document.writeln('');//通过将分开,从而避免作为
2.3 将脚本程序代码作为某个元素的事件属性值或超链接的href属性值
超链接<a>的href属性除了可以使用http和mailto等协议之外,还可以使用Javascript协议。
例:
单击这个超链接,浏览器将会执行JavaScript:后面的脚本程序代码。
3 文档模式
在IE5.5中开始引入文档模式的概念,通过使用通过文档类型(doctype)切换实现的,最初包括混杂模式(quirks mode)和标准模式(standards mode),混杂模式让IE的行为与包括非标准特性的IE5相同,标准模式则让IE的行为更接近标准行为。在IE引入文档模式之后,其他浏览器也纷纷仿效。之后,IE又提出一种所谓准标准模式(almost standards mode),这种模式下的浏览器特性有很多是符合标准的,但也不尽然。所有浏览器默认开启混杂模式。
可以通过下面的方法启动标准模式:
通过过渡性或框架集型来触发准标准模式:
参考来源: