钟文志的部落格

Appearance

HTML 的 <script> 和 <noscript> 标签用于网页中包含 JavaScript 代码和在不支持 JavaScript 时显示的内容。下面是它们的详细介绍以及使用示例。

<script> 标签 ​

<script> 标签用于在网页中嵌入 JavaScript 代码。它可以在 HTML 文档的任何地方使用，但通常放置在 <head> 或 <body> 中。

基本用法 ​

  1. 内联脚本

    直接在 <script> 标签中写入 JavaScript 代码：

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联 JavaScript 示例</title>
    <script>
        // 这是一个简单的 JavaScript 脚本
        console.log("Hello, World!");
        alert("这是一个警告框！");
    </script>
</head>
<body>
    <h1>内联 JavaScript 示例</h1>
</body>
</html>

  2. 外部脚本

    引用外部的 JavaScript 文件，这是一种更常见的做法，可以提高代码的可维护性和重用性：

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部 JavaScript 示例</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>外部 JavaScript 示例</h1>
</body>
</html>

    外部脚本文件 script.js 的内容可能如下：

    javascript
    // script.js
console.log("这是一个来自外部文件的消息！");
alert("外部脚本被执行！");

  3. 异步和延迟加载

    使用 async 和 defer 属性可以控制脚本的加载方式：

    • async：脚本会异步加载和执行，不会阻塞 HTML 文档的解析。

      html
      <script src="async-script.js" async></script>

    • defer：脚本会延迟执行，直到 HTML 文档完全解析完成。适用于需要在页面完全加载后执行的脚本。

      html
      <script src="defer-script.js" defer></script>

    这两个属性通常用于提高页面的加载速度和性能，尤其是在涉及多个外部脚本时。

  4. 类型属性

    指定脚本的类型，通常省略，因为默认类型是 text/javascript：

    html
    <script type="text/javascript">
    // JavaScript 代码
</script>

  5. 模块化脚本

    使用 type="module" 可以让脚本作为模块加载，支持 import 和 export：

    html
    <script type="module">
    import { myFunction } from './myModule.js';
    myFunction();
</script>

脚本位置 ​

  • <head> 中的脚本

    放置在 <head> 中的脚本通常用于页面初始化，如设置全局变量和预加载资源。但要注意，如果这些脚本在页面加载完成前会执行，可能会导致页面加载变慢。

    html
    <head>
    <script>
        // 初始化脚本
        console.log("头部脚本");
    </script>
</head>

  • <body> 中的脚本

    放置在 <body> 结束标签之前的脚本通常用于操作 DOM，因为这时页面内容已经加载完毕。

    html
    <body>
    <!-- 页面内容 -->
    <script>
        // 可以安全地操作 DOM
        console.log("主体脚本");
    </script>
</body>

  • 推荐使用 defer

    现代页面开发中，推荐在 <head> 中使用 defer 属性，这样可以确保 DOM 解析后执行 JavaScript，同时保持良好的页面性能。

    html
    <head>
    <script src="script.js" defer></script>
</head>

<noscript> 标签 ​

<noscript> 标签用于在浏览器不支持 JavaScript 或用户禁用 JavaScript 的情况下显示备用内容。

用法示例 ​

  1. 显示替代内容

    在不支持 JavaScript 时，显示一条消息：

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Noscript 示例</title>
</head>
<body>
    <h1>Noscript 示例</h1>
    <noscript>
        <p>您的浏览器不支持 JavaScript 或 JavaScript 已被禁用。</p>
        <p>请启用 JavaScript 以获得更好的体验。</p>
    </noscript>
</body>
</html>

  2. 用作功能替代

    提供非 JavaScript 的功能实现，如表单的基本功能：

    html
    <form action="/submit" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form>

<noscript>
    <p>JavaScript 被禁用。请手动提交表单。</p>
</noscript>

注意事项 ​

  • SEO 和用户体验

    使用 <noscript> 标签可以改善在 JavaScript 受限环境下的用户体验，并提供更好的搜索引擎优化（SEO），因为搜索引擎爬虫有时不执行 JavaScript。

  • 功能降级

    对于需要 JavaScript 才能正常工作的功能，可以使用 <noscript> 提供降级选项，确保网站的基本功能在没有 JavaScript 的情况下仍能使用。

示例：结合 <script> 和 <noscript> ​

以下示例展示了如何在网页中结合使用 <script> 和 <noscript> 标签，以确保在支持 JavaScript 和不支持 JavaScript 的环境中都能正常工作。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结合 Script 和 Noscript 示例</title>
    <script>
        // 检查浏览器是否支持 JavaScript
        document.addEventListener("DOMContentLoaded", function() {
            const message = document.getElementById("js-message");
            message.textContent = "JavaScript 已启用！";
            message.style.color = "green";
        });
    </script>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p id="js-message">JavaScript 未启用。</p>
    
    <noscript>
        <p style="color: red;">JavaScript 被禁用或不被支持。请启用 JavaScript 以获得完整体验。</p>
    </noscript>
</body>
</html>

运行效果 ​

  • JavaScript 启用时：

    • 页面加载完成后，脚本将改变 id="js-message" 的文本内容为绿色的“JavaScript 已启用！”。

  • JavaScript 被禁用时：

    • <noscript> 标签中的消息将被显示，提示用户启用 JavaScript。

结论 ​

通过使用 <script> 和 <noscript> 标签，开发者可以为用户提供更为全面的体验，无论用户是否启用了 JavaScript。这种设计策略不仅提高了网页的兼容性，还确保了网页在各种浏览器环境中的可用性和可访问性。s