以下是一个使用前端三件套（HTML、CSS、JavaScript）编写的最简单的前端案例：


<!DOCTYPE html>
<html>
<head>
    <title>最简单的前端案例</title>
    <meta charset="UTF-8">
    <style>
        /* CSS 样式 */
        h1 {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- HTML 内容 -->
    <h1>这是一个标题</h1>

    <!-- JavaScript 代码 -->
    <script>
        alert("Hello, world!");
    </script>
</body>
</html>

这个案例包含了一个 HTML 页面、一个 CSS 样式和一段 JavaScript 代码。它会在页面中心显示一个红色标题，并在页面加载时弹出一个对话框，显示 “Hello, world!”。



要运行这个案例，你需要将上面的代码复制到一个文本编辑器中，然后将文件保存为 .html 格式。接下来，你可以在浏览器中打开这个文件，就可以看到这个案例的效果了。

如果你想要在本地搭建一个 Web 服务器并在上面运行这个案例，你可以使用 Python 自带的 http.server 模块。具体步骤如下：

  1. 将上面的代码复制到一个文本编辑器中，然后将文件保存为 .html 格式。
  2. 打开终端或命令提示符窗口。
  3. 进入保存了 .html 文件的目录。
  4. 在终端或命令提示符窗口中输入以下命令：
python -m http.server
  1. 在浏览器中输入 http://localhost:8000/，就可以看到这个案例的效果了。



关闭正在运行的http.server：

  1. 按下Ctrl + C
  2. 关闭命令提示符窗口


这个案例的代码逐句解释：

<!DOCTYPE html>

这一行代码定义了文档类型，告诉浏览器这是一个 HTML 文档。

<html>

这一行代码定义了 HTML 文档的根元素。

<head>
    <title>最简单的前端案例</title>
    <meta charset="UTF-8">
    <style>
        /* CSS 样式 */
        h1 {
            color: red;
            text-align: center;
        }
    </style>
</head>

这一部分代码定义了文档的头部。<title> 标签定义了文档的标题，显示在浏览器的标题栏中。<meta> 标签定义了文档使用的字符集。<style> 标签定义了文档的样式表，这里定义了一个样式，将 <h1> 元素的颜色设置为红色，并居中显示。

<body>
    <!-- HTML 内容 -->
    <h1>这是一个标题</h1>

    <!-- JavaScript 代码 -->
    <script>
        alert("Hello, world!");
    </script>
</body>

这一部分代码定义了文档的主体。<body> 标签定义了文档的主体部分。<h1> 标签定义了一个标题，显示在页面中央。<script> 标签定义了 JavaScript 代码，这里使用 alert() 函数弹出一个对话框，显示 "Hello, world!"。

</html>

这一行代码表示 HTML 文档结束。