Erfahren Sie mehr über das Skript-Tag in HTML-HTML-Tutorial-php.cn

Erfahren Sie mehr über das Skript-Tag in HTML

青灯夜游

Freigeben： 2020-07-06 10:24:27

nach vorne

4704 Leute haben es durchsucht

Erfahren Sie mehr über das Skript-Tag in HTML

Studenten, die ein wenig über das Schreiben von Webseiten gelernt haben, wissen alle, dass der JS-Code auf der Webseite in das Skript-Tag geschrieben werden sollte, aber warum tun Sie das? In diesem Artikel wird das Skript-Tag vorgestellt.

Skript-Tag

Anfangs wollte Netscape HTML-Dateien mithilfe von js im Browser anzeigen, wollte jedoch den Anzeigeeffekt dieser Datei in anderen Browsern nicht beeinflussen und erstellte daher das Skript-Tag

Wir alle wissen, dass Tags Attribute hinzufügen können:

asynchron bedeutet, dass das Skript sofort heruntergeladen wird und andere Vorgänge in der Schnittstelle nicht behindern sollte
src gibt die externe Datei zum Ausführen dieses Skripts an, optional
charset Der Zeichensatz der durch src angegebenen externen Datei
defer Das Skript wird verzögert, bis das Dokument analysiert und angezeigt wird abgeschlossen, optional
Sprache ist veraltet. Es wird verwendet, um das Sprachattribut zu ersetzen. Daher muss dieser Parameter im Allgemeinen nicht angegeben werden .

<script type="text/javascript">
    // 属性设置
    function SayHi(){
        alert("Hi");
    }
</script>

Nach dem Login kopieren

rrree

Bis der Interpreter den Code im Skript-Tag auswertet, wird der Rest des Inhalts auf der Seite nicht vom Browser geladen oder angezeigt

Wenn das Tag mit src js-Code enthält, wird dieser ignoriert. Sie sollten also nach dem Schreiben von src keinen Code darin schreiben
Versuchen Sie, externe Dateien zum Schreiben von js zu verwenden,
, was die Wartung erleichtert und die js an einem Ort ist. Wenn zwei Seiten dasselbe js verwenden, kann es zwischengespeichert werden

Ursprünglich sollte das Tag im Header platziert werden, aber da es im Header platziert ist, wird die Seite nicht gerendert, wenn js geladen wird (die Seite beginnt erst mit dem Rendern, wenn sie in den Text geladen wird), was dazu führt, dass Bai, also fügen wir es jetzt am Ende des Körpers ein

<!-- 注意下面的写法    /> 这么写本身没有问题，但是不能在html中使用这种语法，因为这样会打乱html的解析 -->
<script type="text/javascript" src="2.js"/>
// 必须写成下面的样子
<script type="text/javascript" src="2.js"></script>

Nach dem Login kopieren

Nach dem Hinzufügen des Defer-Attributs zum Skript kann das Einfügen in den Header theoretisch den Zweck einer verzögerten Ausführung erreichen , aber da verschiedene Browser unterschiedliche Unterstützung für die Verzögerung bieten (die Ausführungsreihenfolge ist ungewiss und das eingebettete js unterstützt keine Verzögerung usw.), ist es für uns am besten, der obigen Schreibmethode von

zu folgen und sie an der Stelle zu schreiben Ende des Körpers

. Das async-Attribut soll auch das Problem des asynchronen Ladens von Skripten lösen. Es unterstützt auch keine eingebetteten js-Skripte. Der ursprüngliche Unterschied zwischen ihm und defer besteht darin, dass async nicht in der richtigen Reihenfolge geladen wird , aber in der tatsächlichen Verwendung bieten Browser auch unterschiedliche Unterstützung für dieses Attribut. Keines der beiden Attribute kann die sequentielle Ausführung von Skripten und die Ausführung vor DOMContentLoaded garantieren. Daher ist es am besten, dieses Attribut erst zu verwenden, wenn der Browser es vollständig unterstützt.

Tag

Wenn der Browser js deaktiviert oder js überhaupt nicht unterstützt (das kommt jetzt natürlich selten vor), muss es reibungslos abgebaut werden, daher das Noscript-Tag

wird benötigt. Die Funktion besteht darin, den Inhalt in Noscript anzuzeigen, wenn die oben genannte Situation auftritt. Siehe das Beispiel unten

<body>
...

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
</body>

Nach dem Login kopieren

Beachten Sie, dass der Inhalt in diesem Tag nicht angezeigt wird, wenn im Browser JS aktiviert ist angezeigt.

Empfohlene Tutorials:

HTML-Tutorial

, JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über das Skript-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!