HTML 标签 HTML <b>字体加粗 标签HTML <big> 大号字体 标签HTML <em> 强调标签HTML <strong> 重要事务标签HTML <dfn>定义实例标签HTML <code> 计算机代码 标签HTML <samp> 计算机输出 标签HTML <kbd> 用户输入 标签HTML <var> 变量 标签HTML <cite> 作品标题 标签HTML <i> 字体斜体 标签HTML <small> 侧记 标签HTML <sup>上标 标签HTML <sub>下标 标签HTML <ins>插入 标签HTML <del>删除 标签HTML <s>删除 标签HTML <strike> 删除标签HTML <u>下划线 标签HTML <tt>打印机文字 标签HTML <pre>预格式化的文本 标签HTML <abbr>缩写体 标签HTML <acronym>首字母缩写 标签HTML <address>联系信息 标签HTML <bdo>覆盖文本方向 标签HTML <blockquote> 长引用 标签HTML <q> 短引用 标签HTML <link> 外部资源 标签HTML <style> 样式标签HTML <title> 标题标签HTML <base>文档根 URL标签HTML <meta> 元数据标签HTML <script> 脚本标签HTML <noscript> 不支持脚本标签HTML <command> 定义命名标签HTML <head> 头部标签HTML <map> 图像映射标签HTML <img> 图像标签HTML <area> 图像映射区域标签HTML <a> 超链接标签HTML <div>块标签HTML <span>局部布局标签HTML <form> 表单 标签HTML <optgroup>选项组 标签HTML <option>选项 标签HTML <select> 下拉列表 标签HTML <datalist> 选项列表 标签HTML <input> 表单交互 标签 HTML <textarea> 多行文本 标签HTML <button> 按钮 标签 HTML <legend> 分组标题 标签HTML <fieldset> 分组 标签 HTML <label> 标识 标签 HTML <h1><h2><h3><h4><h5><h6>标题 标签HTML <hr> 水平线 标签HTML <ol> 有序列表 标签 HTML <li> 列表项 标签HTML <ul> 无序列表 标签HTML <dl>描述列表 标签HTML <dt>描述列表项目名 标签HTML <dd>描述列表子项目 标签HTML <output>输出 标签 HTML <p>段落 标签HTML <table>表格 标签HTML <tr>表格行 标签HTML <th>表标题 标签HTML <td>表单元格 标签HTML <caption>表名称 标签HTML <col>列属性 标签HTML <colgroup>列组合 标签HTML <thead>表格表头 标签HTML <tbody>表格主体 标签HTML <tfoot>表格底部 标签HTML <br>换行 标签HTML <object>对象 标签HTML <iframe>标签HTML <header> 区域页眉 标签HTML <footer> 区域页脚 标签HTML 参考手册 HTML 全局属性HTML 事件属性HTML 世界语言代码缩略词ascii码对照表HTML 完整的 ISO-8859-1 参考手册HTML 符号实体参考手册HTML 字符集HTML URL编码表HTML Canvas 参考手册

HTML <script> 脚本标签

JavaScript (JS) 是一种编程语言,为通常用于客户端(client-side)的网页动态脚本,不过,也常通过像Node.js这样的包,用于服务器端(server-side)。<script> 标签可出现在HTML的任意位置。也可以多个<script> 标签。

案例

]596]_$`D[GN[T94_@0DEAQ.png

<script>
document.write("这是script输出的字符!")
</script>

script脚本

script属性

属性描述
srcURL

规定外部脚本的 URL。外部脚本文件的 URL:

  • 绝对 URL - 指向另一个网站(比如 src="http://www.xuandaima.com/my.js")

  • 相对 URL - 指向网站内的一个文件(比如 src="/js/my.js")


asynchtlm5async规定异步执行脚本(仅适用于外部脚本)。
deferdefer规定当页面已完成解析后,执行脚本(仅适用于外部脚本)。
charset
charset
规定在脚本中使用的字符编码(仅适用于外部脚本)。
typeMIME-type

规定脚本的 MIME 类型。MIME 类型一些常用的值:

  • text/javascript (默认)

  • text/ecmascript

  • application/ecmascript

  • application/javascript

  • text/vbscript

xml:spacepreserveHTML5 不支持。规定是否保留代码中的空白。

src属性

定外部脚本文件,方便多个页面引用和维护,比方多个页面需要使用相同javaScript脚本代码,把JS定义为外部文件,通过src属性在每个页面引入即可。如果使用 "src" 属性,则 <script> 元素必须是空的。外部脚本文件不能包含 <script> 标签。

)IRAEAMKL0{(S$%PVU`TP29.png

HTML文件

<script src="/Template/Test/js/my.js"></script>

my.js

alert("这是外部文件输出的字符!");

src属性

async 属性

async 属性一旦脚本可用,则会异步运行,这里说一下同步和异步,同步就是一行一行的执行,直到上面的执行为完成,只能做这一件事,异步根据代码可先执行后面的代码,像定时任务、ajax 请求,动态<img>加载、事件绑定这些场景都是异步。

(0CGOQEREOS6IQTLJ9(PN`T.png

HTML文件

<p id="p1">Hello World!</p>
<script src="/Template/Test/js/async.js"  async></script>

async.js

alert(document.getElementById("p1").firstChild.nodeValue);

async 属性

defer 属性

页面已加载后才会运行脚本。

(0CGOQEREOS6IQTLJ9(PN`T.png

HTML文件

<script src="/Template/Test/js/defer.js" defer></script>
<p id="p1">Hello World!</p>

defer.js

alert(document.getElementById("p1").firstChild.nodeValue);

defer 属性

async 属性和defer 属性区别

  • <script src="script.js"></script>

没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

  • <script async src="script.js"></script>

有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

  • <script defer src="myscript.js"></script>

有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。


接着,我们来看一张图咯:

284aec5bb7f16b3ef4e7482110c5ddbb_articlex.jpg

蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。

charset 属性

charset 属性规定在外部脚本文件中使用的字符编码。

9ITNHL4[_ZS7NVL8MKNZC}6.png

<script charset="windows-1256" src="/Template/Test/js/charset.js" ></script>

charset属性

注意谷歌浏览器不支持该script标签charset属性

type 属性

type 属性规定脚本的 MIME 类型。script标签默认是text/javascript。

WIND5E9CB8T04HK6ID6T_MP.png

<script>
document.write("这是没定义type属性");
</script>
<script type="text/javascript">
document.write("这是定义了type属性");
</script>

type属性

支持浏览器

ChromeIEFirefoxsafarioprea

全局属性

<script>标签支持HTML 全局属性