HTML 教程——脚本【JavaScript】（二十二）

牛部落 • • HTML CSS, 网络相关

HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

HTML <script> 标签

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!"：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>天牛博客(tnell.com)</title>
</head>
<body>
    <script>
        document.write("Hello World!")
    </script>

</body>
</html>

浏览器显示如下：

HTML<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>天牛博客(tnell.com)</title>
</head>
<body>

    <script>
        document.write("Hello World!")
    </script>
    <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

</body>

</html>

浏览器显示如下：

JavaScript体验

JavaScript可以直接在HTML输出:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>天牛博客(tnell.com)</title>

</head>

<body>

    <p>
        JavaScript 能够直接写入 HTML 输出流中：
    </p>
    <script>
        document.write("<h1>这是一个标题</h1>");
        document.write("<p>这是一个段落。</p>");
    </script>
    <p>
        您只能在 HTML 输出流中使用 <strong>document.write</strong>。
        如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
    </p>

</body>

</html>

浏览器显示如下：

JavaScript 能够直接写入 HTML 输出流中：

您只能在 HTML 输出流中使用document.write  。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

JavaScript事件响应:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>天牛博客(tnell.com)</title>

</head>

<body>

    <h1>我的第一个 JavaScript </h1>

    <p id="demo">
        JavaScript 可以触发事件，就像按钮点击。</p>

    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "Hello JavaScript!";
        }
    </script>

    <button type="button" onclick="myFunction()">点我</button>

</body>

</html>

 浏览器显示如下：

我的第一个 JavaScript

JavaScript 可以触发事件，就像按钮点击。

JavaScript处理 HTML 样式:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>天牛博客(tnell.com)</title>

</head>

<body>

    <h1>我的第一段 JavaScript</h1>
    <p id="demo">
        JavaScript 能改变 HTML 元素的样式。
    </p>
    <script>
        function myFunction() {
            x = document.getElementById("demo") // 找到元素
            x.style.color = "#ff0000";          // 改变样式
        }
    </script>
    <button type="button" onclick="myFunction()">点击这里</button>

</body>

</html>

浏览器显示如下：

我的第一段 JavaScript

JavaScript 能改变 HTML 元素的样式。


HTML 脚本标签

标签 描述
<script> 定义了客户端脚本
<noscript> 定义了不支持脚本浏览器输出的文本

 

版权声明：
作者：牛部落
链接：https://www.tnell.com/716.html
来源：天牛博客
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录