你真的了解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标签中的内容,并且该标签指定了language为JavaScript,这时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

目录
相关文章
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
507 5
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
482 0
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
749 49
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
539 5
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
665 14
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
458 2
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
348 1
|
搜索推荐 SEO
HTML中各种标题标签的正确使用方法及其特点
在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)