script 和 noscript 元素
script 和 noscript 元素script
script 元素是用于在网页中嵌入 JavaScript 脚本的。例如:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
document.write("Hello");
</script>
</body>
</html>
执行这个 html 文件,将会在页面上显示 Hello。
script 元素还可以链接外部的 JS 文件,例如:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="a.js"></script>
</body>
</html>
a.js:
document.write("Hello");
执行 html 文件,一样会在页面显示 Hello。
注意:链接了外部的 JS 文件,<script> 标签内部不能再有 JS 代码。例如下面这段代码是错误的:
<script src="a.js">
document.write("123")
</script>
正常情况下,HTML 被解析时遇到了 JS 代码时会停下解析 HTML 代码,转而执行 JS 代码。我们可以延迟 JS 代码的执行,等到 HTML 代码解析完后再执行 JS 代码:
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- defer 属性用于延迟 JS 代码的执行 -->
<script src="a.js" defer></script>
</body>
</html>
还可以异步执行 JS 代码(JS 代码和 HTML diamante同时解析):
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- 设置 async 属性 -->
<script src="a.js" defer></script>
</body>
</html>
defer、async 只能用于外部代码文件。
noscript
当浏览器不支持 JavaScript 时,我们可以用 noscript 元素显示一些内容:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
document.write("欢迎你,让我们开启 JavaScript 的旅程吧!");
</script>
<noscript>
<p>都什么年代了,没有 JavaScript 哪行?!</p>
<img
alt="嫌弃"
src="https://ilovefishc.com/html5/html5/lesson6/img/xianqi.png"
/>
</noscript>
</body>
</html>
运行这段 HTML 代码,一般是可以正常显示 "欢迎你,让我们开启 JavaScript 的旅程吧!" 的,如下图:
但当浏览器不支持 JavaScript 或者用户禁用了 JavaScript 时,会显示如下的内容:
页:
[1]