当前位置：首页 > 行业动态 > 正文

html如何写js代码

admin
行业动态
2024-04-04
3938

在HTML中编写JavaScript代码，首先需要了解基本的语法和结构，以下是一个简单的示例，展示了如何在HTML中使用JavaScript代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>HTML与JavaScript示例</title>
</head>
<body>
    <h1>HTML与JavaScript示例</h1>
    <p>点击按钮查看结果：</p>
    <button onclick="showMessage()">点击我</button>
    <p id="result"></p>
    <script>
        function showMessage() {
            var message = "你好，这是通过JavaScript显示的消息！";
            document.getElementById("result").innerHTML = message;
        }
    </script>
</body>
</html>

在这个示例中，我们创建了一个简单的HTML页面，包含一个标题、一个段落、一个按钮和一个用于显示结果的段落，我们还添加了一个<script>标签，其中包含了JavaScript代码。

在<script>标签内，我们定义了一个名为showMessage的函数，这个函数的作用是获取ID为result的段落元素，并将其内容设置为一条消息，当用户点击按钮时，将调用此函数并显示消息。

要使用小标题和单元表格，可以在HTML中使用<h2>、<h3>等标签表示标题，以及<table>、<tr>、<th>和<td>等标签表示表格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>HTML与JavaScript示例</title>
</head>
<body>
    <h1>HTML与JavaScript示例</h1>
    <p>点击按钮查看结果：</p>
    <button onclick="showMessage()">点击我</button>
    <p id="result"></p>
    <h2>单位表格示例</h2>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
    </table>
    <script>
        function showMessage() {
            var message = "你好，这是通过JavaScript显示的消息！";
            document.getElementById("result").innerHTML = message;
        }
    </script>
</body>
</html>

在这个示例中，我们添加了一个标题为“单位表格示例”的小节，以及一个包含姓名、年龄和城市的表格。