So verwenden Sie js in HTML

coldplay.xixi
Freigeben: 2021-03-04 14:18:03
Original
8889 Leute haben es durchsucht

So verwenden Sie js in HTML: 1. Verwenden Sie [<script>], um JavaScript in HTML einzubetten, und verwenden Sie das src-Attribut, wenn Sie [<script>] verwenden, um externe Dateien einzubinden. 2. Alle [<script> ] Elemente Alle sollten innerhalb der Elemente der Seite platziert werden.

So verwenden Sie js in HTML

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML-Version 4.01, DELL G3-Computer.

So verwenden Sie js in HTML:

1. <script> Element

Verwenden Sie <script>, um JavaScript in HTML einzubetten <script>嵌入JavaScript

HTML 4.01 为

<script>定义了下列 6 个属性。

  • async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。

  • charset:可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值,因此这个属性很少有人用。

  • defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。

  • language:已废弃。原来用于表示编写代码使用的脚本语言(如 JavaScript、JavaScript1.2或 VBScript)。大多数浏览器会忽略这个属性,因此也没有必要再用了。

  • src:可选。表示包含要执行代码的外部文件。

  • type:可选。可以看成是language的替代属性;表示编写代码使用的脚本语言的内容类型(也称为 MIME 类型)。虽然 text/javascript 和 text/ecmascript 都已经不被推荐使用,但人们一直以来使用的都还是 text/javascript。实际上,服务器在传送 JavaScript 文件时使用的

MIME 类型通常是 application/x–javascript,但在type中设置这个却可能导致脚本被忽略。另外,在非IE浏览器中还可以使用以下值:

application/javascript和application/ecmascript。考虑到约定俗成和最大限度的浏览器兼容性,目前 type 属性的值依旧还是

text/javascript。不过,这个属性并不是必需的,如果没有指定这个属性,则其默认值仍为text/javascript。

使用<script>元素的方式有两种:直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript文件。在使用<script>元素嵌入JavaScript代码时,只须为<script>指定type属性。然后,像下面这样把JavaScript代码直接放在元素内部即可:

<script type="text/javascript">
function fun(){
    alert("hello")
}
</script>
Nach dem Login kopieren

包含在<script>元素内部的 JavaScript 代码将被从上至下依次解释。

在解释器对<script>元素内部的所

有代码求值完毕以前,页面中的其余内容都不会被浏览器加载或显示。

在使用<script>嵌入 JavaScript 代码时,记住不要在代码中的任何地方出现</script>字符串。如果必须出现,请使用/转义符</script>

在使用<script>包含外部文件时使用src属性。在解析外部文件时(包括下载)会停止页面的处理。在带有src属性的<script>中间不能再嵌入其他代码 ,否则不会执行。

2、标签的位置

按照传统的做法,所有<script>元素都应该放在页面的元素中,如:

这样做或是浏览器在所有的js文件都下载解析和执行完成后才开始显示页面(浏览器遇到body才会开始呈现内容)

为了避免这个问题,现代 Web 应用程序一般都把全部 JavaScript 引

用放在元素中页面内容的后面,如下例所示:

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
Nach dem Login kopieren

这样,在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

3、文档模式

doctype

混杂模式

标准模式

准标准模式

4、<noscript>

这个元素可以包含能够出现在文档中的任何 HTML 元素——<script>元素除外。包含

<noscript>

HTML 4.01 ist

<script> definiert die folgenden 6 Eigenschaften.

  • async: Optional. Gibt an, dass das Skript sofort heruntergeladen werden soll, aber andere Vorgänge auf der Seite, wie das Herunterladen anderer Ressourcen oder das Warten auf das Laden anderer Skripts, nicht verhindern soll. Nur gültig für externe Skriptdateien. 🎜
  • 🎜charset: Optional. Der Zeichensatz, der den über das src-Attribut angegebenen Code darstellt. Dieses Attribut wird selten verwendet, da die meisten Browser seinen Wert ignorieren. 🎜
  • 🎜defer: Optional. Gibt an, dass das Skript verzögert werden kann, bis das Dokument vollständig analysiert und angezeigt wird. Nur gültig für externe Skriptdateien. IE7 und früher unterstützen dieses Attribut auch für eingebettete Skripte. 🎜
  • 🎜Sprache: Veraltet. Ursprünglich zur Darstellung der Skriptsprache verwendet, die zum Schreiben von Code verwendet wird (z. B. JavaScript, JavaScript1.2 oder VBScript). Die meisten Browser ignorieren dieses Attribut, daher besteht keine Notwendigkeit, es zu verwenden. 🎜
  • 🎜src: Optional. Stellt eine externe Datei dar, die auszuführenden Code enthält. 🎜
  • 🎜type: Optional. Kann als alternatives Attribut zur Sprache betrachtet werden; es gibt den Inhaltstyp (auch MIME-Typ genannt) der Skriptsprache an, die zum Schreiben des Codes verwendet wird. Obwohl sowohl text/javascript als auch text/ecmascript veraltet sind, wurde immer text/javascript verwendet. Tatsächlich ist der 🎜
🎜MIME-Typ, den der Server bei der Übertragung von JavaScript-Dateien verwendet, normalerweise application/x–javascript, aber die Einstellung dieses Typs kann dazu führen, dass das Skript ignoriert wird. Darüber hinaus können die folgenden Werte in Nicht-IE-Browsern verwendet werden: 🎜🎜application/javascript und application/ecmascript. Unter Berücksichtigung der Konvention und maximaler Browserkompatibilität ist der aktuelle Wert des Typattributs immer noch 🎜🎜text/javascript. Dieses Attribut ist jedoch nicht erforderlich. Wenn dieses Attribut nicht angegeben ist, ist sein Standardwert immer noch text/javascript. 🎜🎜Es gibt zwei Möglichkeiten, das <script>-Element zu verwenden: JavaScript-Code direkt in die Seite einbetten und externe JavaScript-Dateien einbinden. Wenn Sie das Element <script> zum Einbetten von JavaScript-Code verwenden, müssen Sie nur das Typattribut für <script> angeben. Platzieren Sie dann einfach den JavaScript-Code wie folgt direkt im Element: 🎜
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用) JavaScript。</p>
</noscript>
</body>
</html>
Nach dem Login kopieren
Nach dem Login kopieren
🎜Der im <script> enthaltene JavaScript-Code wird von oben nach unten interpretiert. 🎜🎜Bis der Interpreter den gesamten Code im <script>-Element auswertet, wird der Rest des Inhalts auf der Seite nicht vom Browser geladen oder angezeigt. 🎜🎜Wenn Sie <script> zum Einbetten von JavaScript-Code verwenden, achten Sie darauf, dass die Zeichenfolge </script> an keiner Stelle im Code erscheint. Wenn es vorhanden sein muss, verwenden Sie das /-Escape-Zeichen </script>🎜🎜Verwenden Sie das src-Attribut, wenn Sie externe Dateien mit <script> einbinden. Die Verarbeitung der Seite wird gestoppt, während externe Dateien analysiert werden (einschließlich Downloads). Es kann kein anderer Code mit dem src-Attribut in die Mitte des <script> eingebettet werden, da dieser sonst nicht ausgeführt wird. 🎜🎜🎜2. Tag-Position🎜🎜🎜Gemäß der traditionellen Praxis sollten alle <script>-Elemente in den Elementen der Seite platziert werden, wie zum Beispiel: 🎜🎜Auf diese Weise lädt der Browser alle js-Dateien herunter und analysiert sie Die Seite wird erst angezeigt, wenn die Ausführung abgeschlossen ist (der Browser beginnt erst mit der Darstellung des Inhalts, wenn er auf den Textkörper trifft). Um dieses Problem zu vermeiden, platzieren moderne Webanwendungen im Allgemeinen alle JavaScript-Referenzen nach dem Seiteninhalt Element, wie im folgenden Beispiel gezeigt: 🎜rrreee🎜 Auf diese Weise wird der Inhalt der Seite vollständig im Browser gerendert, bevor der enthaltene JavaScript-Code analysiert wird. Benutzer werden auch das Gefühl haben, dass die Geschwindigkeit beim Öffnen der Seite beschleunigt wird, da die Zeit, in der das Browserfenster eine leere Seite anzeigt, verkürzt wird. 🎜🎜3. Dokumentmodus body> Jedes HTML-Element – ​​außer dem <script> Inhalte, die 🎜🎜 im Element <noscript> enthalten, werden nur unter den folgenden Umständen angezeigt: 🎜🎜[ ] Der Browser unterstützt keine Skripte; 🎜🎜[ ] Der Browser unterstützt Skripte, Skripte jedoch deaktiviert. 🎜

符合上述任何一个条件,浏览器都会显示<noscript>中的内容。而在除此之外的其他情况下,浏览器不会呈现<noscript>中的内容。示例:

<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用) JavaScript。</p>
</noscript>
</body>
</html>
Nach dem Login kopieren
Nach dem Login kopieren

相关学习推荐:html视频教程

Das obige ist der detaillierte Inhalt vonSo verwenden Sie js in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage