你真的了解html吗?--之script标签介绍

简介:

一.属性:

src:该属性指定外部JavaScript文件的地址,可以跨域。如果指定了该属性,那么script标签中的内容就会被忽略。

 

type:指定所使用的脚本语言,可以覆盖默认的脚本语言(即在<META http-equiv="Content-Script-Type" content="type">中定义的脚本类型

)开发者必须指定该属性,该属性没有默认值。

 

language:(不赞成使用),指定script标签的内容所使用的脚本语言,该属性的值是一些语言的标示符,但是由于语言的标示符不标准,因此该属性被弃用了,偏向于使用type属性指定所使用的脚本语言。在ie中当有多个script标签时,最好为每个script都指定一个language属性,并且script标签的顺序也非常重要,特别是当一个脚本函数作为事件控制器赋予一个或者多个元素上时,xml对于script标签来说是合法的内容,但是xml不是一个脚本语言,如果把xml作为script 的内容如:

 

<html>
<head>
<SCRIPT LANGUAGE="XML" id="mySrc1">
<offerings>
 <class><materials>This should render.</materials><time>1.5
hr</time></class>
</offerings>
</SCRIPT>
<SCRIPT LANGUAGE="Javascript">
function returnIslandRootName()
{
  var islandRoot = document.all["mySrc1"].XMLDocument;
  alert(islandRoot.nodeName);
}
</SCRIPT>
</head>
<body>
<button onclick="returnIslandRootName()">Test the XML Data Island</button>
</body>
</html>

由于xml数据岛为第一个script标签中的内容,并且该标签指定了languageJavaScript,这时mshtml会在第一个script标签中加载returnIslandRootName 方法,因此会报错,那么正确的会是什么呢?

<html>
<head>
<SCRIPT LANGUAGE="Javascript">
function returnIslandRootName()
{
  var islandRoot = document.all["mySrc1"].XMLDocument;
  alert(islandRoot.nodeName);
}
</SCRIPT>
<SCRIPT LANGUAGE="XML" id="mySrc1">
<offerings>
 <class><materials>This should render.</materials><time>1.5
hr</time></class>
</offerings>
</SCRIPT>
</head>
<body>
<button onclick="returnIslandRootName()">Test the XML Data Island</button>
</body>
</html>

 

 

defer:该属性按时浏览器不立即让script标签产生文档内容。因此这样浏览器不用被阻止渲染文档内容。在firefox中需要Requires Gecko 1.9.1以上的引擎。

 

charset:该属性指定了外部JavaScript文件的编码方式。对于行内JavaScript文件的编码方式不起作用。

 

async:该属性需要Gecko 1.9.2以上的引擎,是firefox专有的属性,用来异步执行JavaScript脚本,只在拥有src属性时才气作用,

 

二.指定脚本语言的方式:

1.指定整个文档默认的脚本语言。

<META http-equiv="Content-Script-Type" content="type">

content:指定脚本语言的类型如:"text/tcl", "text/javascript", "text/vbscript".

由于文档默认的脚本类型是JavaScript,因此我们在使用JavaScript时最简单且兼容性最好的方式为<script></script>

2.指定当前脚本块所使用的脚本语言

通过script标签的type属性指定,这样会覆盖1中所定义的脚本语言类型。

 

如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>
上面的例子指定这个文档所使用的默认的脚本语言类型text/tcl,第一块script中所以用的脚本类型为text/vbscript,第二块脚本块中所使用的脚本类型为text/javascript.
 
三.如果浏览器不支持所指定的脚本类型。应该用noscript标签指定。如:
<SCRIPT type="text/tcl">
 ...some Tcl script to insert data...
</SCRIPT>
<NOSCRIPT>
 <P>Access the <A href="http://someplace.com/data">data.</A>
</NOSCRIPT>
 

 

参考:http://www.w3.org/TR/html401/interact/scripts.html

https://developer.mozilla.org/En/HTML/Element/Script

http://msdn.microsoft.com/en-us/library/ms535892(VS.85).aspx

目录
相关文章
|
26天前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
30 0
|
2月前
|
移动开发 JavaScript Java
关于Android中如何过滤HTML标签
关于Android中如何过滤HTML标签
46 0
|
1月前
|
移动开发 搜索推荐 前端开发
HTML结构的基本标签
HTML结构的基本标签
|
11天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
28 13
|
10天前
|
搜索推荐 SEO
HTML中各种标题标签的正确使用方法及其特点
在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
|
11天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
该博客文章详细介绍了HTML的基础知识,包括注释、标签属性、常用标签、实体、图片引入、meta标签、内联框架、超链接的使用,并通过代码示例和测试结果截图展示了这些元素在网页中的应用效果。
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
|
24天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
33 4
|
3天前
|
移动开发 HTML5
这些年没来得及学习的一些 HTML5 标签
【9月更文挑战第16天】HTML5 引入了许多新标签,增强了网页的功能与便利性。这些标签包括结构标签如 `&lt;header&gt;`(定义页眉)、`&lt;footer&gt;`(定义页脚)、`&lt;nav&gt;`(定义导航链接)、`&lt;section&gt;`(定义文档节)和 `&lt;article&gt;`(定义独立内容),以及多媒体标签 `&lt;audio&gt;` 和 `&lt;video&gt;`,用于播放音频和视频。此外,还有表单相关标签,如 `&lt;datalist&gt。
HTML中font标签用法
这篇文章详细介绍了HTML中`<font>`标签的用法,包括如何分别设置字体风格(`font-style`)、字体粗细(`font-weight`)、字体大小(`font-size`)和字体类型(`font-family`),并通过实例代码演示了如何综合使用这些属性来定义文本的字体样式。
HTML中font标签用法