HTML 页面加载后弹出提示框

在本文中，我们将介绍如何使用HTML页面加载后弹出提示框的方法和示例代码。

阅读更多：HTML 教程

什么是HTML页面加载后弹出提示框？

HTML页面加载后弹出提示框是一种在网页加载完毕后自动弹出提示框的功能。这样的提示框可以用于向用户展示重要信息、提醒用户进行操作等。

HTML页面加载后弹出提示框通常使用JavaScript来实现，通过在页面加载完成后触发JavaScript代码来弹出提示框。

实现HTML页面加载后弹出提示框的方法

欲实现HTML页面加载后弹出提示框的功能，可以按照以下步骤进行操作：

在HTML文件中引入JavaScript代码。通常将JavaScript代码放置在<script>标签中，可以嵌入在HTML文件中，也可以作为外部文件引入。
示例代码：

   <script>
   // your JavaScript code here
   </script>
   ```

2. 使用JavaScript代码来实现弹出提示框的功能。可以使用`alert()`方法来弹出提示框，该方法接受一个字符串参数作为提示框中显示的内容。

   示例代码：
```html
   <script>
   alert("欢迎访问我们的网站！");
   </script>
   ```

3. 在HTML文件中，通过调用JavaScript代码来触发页面加载后弹出提示框的操作。最常见的方法是使用`<body>`标签的`onload`事件。

   示例代码：
```html
   <script>
   function showWelcomeMessage() {
       alert("欢迎访问我们的网站！");
   }
   </script>

   <body onload="showWelcomeMessage()">
   <!-- 页面内容 -->
   </body>
   ```

以上是实现HTML页面加载后弹出提示框的基本步骤和示例代码。

## 更多示例代码

除了使用基本的`alert()`方法之外，还可以使用其他JavaScript库或代码来实现更多个性化的提示框效果。

例如，使用Bootstrap库可以创建具有不同样式和交互方式的提示框。

示例代码：
```html
<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function showAlert() {
            var alert = document.createElement('div');
            alert.classList.add('alert', 'alert-primary', 'alert-dismissible', 'fade', 'show');
            alert.setAttribute('role', 'alert');
            alert.innerHTML = '这是一个Bootstrap提示框！<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>';
            document.body.appendChild(alert);
        }
        window.onload = function() {
            showAlert();
        };
    </script>
</body>
</html>

上述示例代码中，我们引入了Bootstrap库的CSS和JavaScript文件，并创建了一个带有关闭按钮的提示框。