你真的了解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

目录
相关文章
|
2月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
60 5
|
26天前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
91 49
|
4月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
64 0
|
20天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
31 5
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
1月前
|
存储 移动开发 前端开发
|
2月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
46 2
|
2月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
41 1
|
3月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
164 1
|
3月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
329 1