-.github.io/index.html at main · MATHEMATSOME/-.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<!-- 网页文档类型，声明是HTML5 -->
<html lang="zh-CN">
<!-- 网页根元素，lang指定语言为中文 -->
<head>
    <!-- 头部：存放网页配置信息 -->
    <meta charset="UTF-8">
    <!-- 字符编码，确保中文正常显示 -->
    <title>我的第一个网页</title>
    <!-- 网页标题（浏览器标签上显示） -->
    <style>
        /* 简单样式：让网页更美观 */
        body {
            text-align: center; /* 内容居中 */
            margin-top: 50px; /* 顶部留空 */
            font-family:  Arial, 宋体; /* 字体 */
        }
        img {
            width: 300px; /* 图片宽度 */
            margin: 20px 0; /* 上下留空 */
        }
        button {
            padding: 10px 20px; /* 按钮内边距 */
            font-size: 16px; /* 按钮文字大小 */
            cursor: pointer; /* 鼠标移上去变指针 */
        }
    </style>
</head>
<body>
    <!-- 身体：网页可见内容 -->
    <h1>欢迎来到我的网页！</h1> <!-- 一级标题 -->
    <p>这是一个有基础功能的简单网页~</p> <!-- 段落文本 -->

    <!-- 显示图片（可替换成自己的图片路径） -->
    <img src="https://picsum.photos/300/200" alt="随机风景图">

    <!-- 按钮交互：点击弹出提示框 -->
    <button onclick="alert('你点击了按钮！')">点击我试试</button>

    <script>
        // 简单JS脚本：页面加载完成后弹出欢迎信息
        window.onload = function() {
            alert('网页加载完成啦！');
        }
    </script>
</body>
</html>