您的位置：首页 > Web前端 > HTML

HTML&lt;script&gt;标签

2018-02-27 07:09 651 查看

HTML script 标签

script 标签 -- 在文档中使用脚本script标签是成对出现的,以

<script>

开始,以

</script>

结束
属性

src

-- 指定需要加载的脚本文件(例如:js文件)的地址URI

type

-- 指定媒体类型(例如:

type="text/javascript"

)

引用网址:http://www.dreamdu.com/xhtml/tag_script/

示例

<head>
<script type="text/javascript" src="dreamdu.js"></script>
</head>

HTML 5 <script> 标签

定义和用法

实例

<script type="text/javascript">
document.write("Hello World!")
</script>

<script>元素

    向HTML页面中插入JavaScript的主要方法，就是使用<script>元素。这个元素由Netscape创造并在Netscape Navigator2中首先实现。后来，这个元素被加入到正式的HTML规范中。HTML4.01为<scripth>定义了下列6个属性。
async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本有效。
charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
language：已废弃。
src：可选。表示包含要执行代码的外部文件。
type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。

    使用<script>元素的方式有两种：直接在页面中嵌入JavaScript代码和包含外部JavaScript文件。    在使用<script>元素嵌入JavaScript代码时，只需为<script>指定type属性。然后，向下面这样把javaScript代码直接放在元素内部即可：
[js] view plain copy<script type="text/javascript">
    function sayHi(){
        alert("Hi!");
    }
</script>
    包含在<script>元素内部的JavaScript代码将被从上至下依次解释。就拿前面这个例子来说，解释器会解释一个函数的定义，然后将该定义保存在自己的环境当中。当解释器对<script>元素内部的所有代码求值完毕前，页面中的其余内容都不会被浏览器加载或显示。

    如果要通过<script>元素来包含外部JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部javascript文件的链接，例如：
[js] view plain copy<script type="text/javascript" src="example.js"></script>
在这个例子中，外部文件example.js将被加载到当前页面中。外部文件只须包含通常要放在开始的<script>和结束的</script>中间的那些javascript代码即可。与解析嵌入式javascript代码一样，在解析外部javascript文件（包括下载该文件）时，页面的处理也会暂时停止。如果是在XHTML文档中，也可以省略前面示例代码中结束的</script>标签，例如：
[js] view plain copy<script type="text/javascript" src="example.js" />
按照惯例，外部javascript文件带有.js扩展名。但这个扩展名不是必需的，因为浏览器不会检查包含javascript的文件的扩展名。这样一来，使用JSP、PHP或其他服务器端语言动态生成javascript代码也就成为了可能。但是，服务器通常还是需要看扩展名决定为响应应用哪种MIME类型。如果不适用.js扩展名，请确保服务器能反应会正确的MIME类型。
HTML调用JavaScript   相信开始学JavaScript的同学都已经有了HTML和CSS的基础。如果没学，建议回头去学习。1.1 <script>元素
   JS（对JavaScript的简称，以下都用JS代替）插入HTML的主要方法就是使用<script>标签。它有5个属性：   （1）type（language）：脚本语言的内容类型（同调用CSS的type=“text/css”类似），type="text/javascript"；   （2）src ：导入外部的JS文件,src="example.js"；   （3）charset：用来设置script元素包含的脚本的字符编码，默认是utf-8编码（只针对外部脚本）；   （4）defer：设置脚本延迟执行（只针对外部脚本）；   （5）async：在加载HTML文件的同时异步加载脚本（只针对外部脚本）。1.2 嵌入<script>的方式   （1）直接在页面嵌入JS代码：可以在head和body标签中，位置的不同只会影响加载脚本的时间，通常可以忽略。   [html] view plain copy<!DOCTYPE html>
<html>
<head>
    <title>JavaScript脚本语言</title>
    <script type="text/javascript">    //在head标签中插入
        function sayHi{
            alert("Hi");
        }
    </script>
</head>
<body>

</body>
</html>
[html] view plain copy<!DOCTYPE html>
<html>
<head>
    <title>JavaScript脚本语言</title>

</head>
<body>
    <script type="text/javascript">     //在body中插入
        function sayHi{
            alert("Hi");
        }
    </script>
</body>
</html>

（2）在head标签中添加外部JS文件：注意外部文件以 .js后缀结尾，在JS文件中去掉<script>标签直接写函数。   html文件
[html] view plain copy<!DOCTYPE html>
<html>
<head>
    <title>JavaScript脚本语言</title>
    <script type="text/javascript" src="example.js"></script>  //在head标签插入JS文件
</head>
<body>

</body>
</html>
[javascript] view plain copy//JS文件 example.js
function sayHi(){
    alert("Hi");
}
1.3 <noscript>标签    早期的浏览器都不支持JS，<noscript>标签就是在不支持JS的浏览器中显示替代的内容[html] view plain copy<!DOCTYPE html>
<html>
<head>
    <title>JavaScript脚本语言</title>
    <script type="text/javascript" src="example.js"></script>  //在head标签插入JS文件
</head>
<body>
   <noscript>
     <p>本页面需要浏览器支持(启用)JavaScript.</p>  //支持JS的浏览器永远不会显示
   </noscript>
</body>
</html>

注：不必把所有的JS写到一个<script>标签中，如果想区分JS里面函数，可以加入多个<script>标签，但为了以后维护的方便，建议都采用外部添加JS文件，可以创建多个标签添加多个JS文件。[html] view plain copy<!DOCTYPE html>
<html>
<head>
    <title>JavaScript脚本语言</title>
    <script type="text/javascript" src="example01.js"></script>  //在head标签插入多个JS文件
    <script type="text/javascript" src="example02.js"></script>
    <script type="text/javascript" src="example03.js"></script>
</head>
<body>

</body>
</html>

用JavaScript的几种情况和规范写法

比较简单，基础。一、引用外部文件中的js脚本<script type="text/javascript" src="ext.js"></script>也可以象下面这样写，language不是必要的，但是推荐上面的写法

<script language="javascript" type="text/javascript" src="ext.js"></script>

二、页面内引用：

<script type="text/javascript">//<![CDATA[
var x = 0;
function fn(args) {
//...
}
//]]></script>

加上“//<![CDATA[” 和 “//]]>”是为了兼容XHTML，是推荐的写法，HTML时代一般用“”

三、在一些HTML控件的事件属性中使用（一般事件为onxxx，如onmouseover,onclick,onchange）

<body onload="alert('loaded');">
<input type="text" name="username" onclick="alert(this.value);" />

四、在一些HTML控件的非事件属性中使用（注意：一定要加javascript:）

<a href="javascript:void(0);" onclick="alert(this.innerText);">my blog:http://blog.csdn.net/kimsoft</a>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

HTML&amp;lt;script&amp;gt;标签

HTML script 标签

示例

HTML 5 <script> 标签

定义和用法

实例

<script>元素

用JavaScript的几种情况和规范写法

HTML<script>标签