HTML 创建一个简单的个人网站

要创建一个简单的个人网站,可以使用 HTML 为基础,添加一些基本的结构和样式。网站可以包括主页、关于我页面和联系方式。这个网站使用简单的 HTML 和一点 CSS 来改善视觉效果。

1、 创建主页的HTML 文件

需要创建一个名为 index.html的HTML 文件,内容如下,

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人网站</title>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; }
        header, footer { text-align: center; padding: 1em; background-color: #f3f3f3; }
        nav { text-align: center; margin-top: 20px; }
        nav a { margin: 0 10px; text-decoration: none; color: darkblue; }
        a:hover { text-decoration: underline; }
        main { margin-top: 20px; }
        .content { max-width: 800px; margin: auto; }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的个人网站</h1>
    </header>
    <nav>
        <a href="index.html">主页</a>
        <a href="about.html">关于我</a>
        <a href="contact.html">联系方式</a>
    </nav>
    <main class="content">
        <h2>首页</h2>
        <p>这里是一些介绍我的文本和主要内容。</p>
    </main>
    <footer>
        <p>版权所有 © 2024 我的名字</p>
    </footer>
</body>
</html>

2、创建关于我们的HTML 文件

可以创建其他页面,about.htmlcontact.html

1)about.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>关于我</h1>
    </header>
    <nav>
        <a href="index.html">主页</a>
        <a href="about.html">关于我</a>
        <a href="contact.html">联系方式</a>
    </nav>
    <main class="content">
        <h2>简介</h2>
        <p>这里是我的一些背景介绍。</p>
    </main>
    <footer>
        <p>版权所有 © 2024 我的名字</p>
    </footer>
</body>
</html>

2)contact.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系方式</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>联系方式</h1>
    </header>
    <nav>
        <a href="index.html">主页</a>
        <a href="about.html">关于我</a>
        <a href="contact.html">联系方式</a>
    </nav>
    <main class="content">
        <h2>如何联系我</h2>
        <p>您可以通过以下方式与我联系:电子邮件、电话或社交媒体。</p>
    </main>
    <footer>
        <p>版权所有 © 2024 我的名字</p>
    </footer>
</body>
</html>

3、使用相同的 CSS 文件

每个页面都引用了同一个外部 CSS 文件 styles.css。可以将上述内嵌的 CSS 样式保存到一个单独的文件中,并在所有页面中引用它。基础的网站结构是一个良好的起点,可以根据需要添加更多功能或内容,比如图片、视频或更复杂的布局。

推荐阅读
cjavapy编程之路首页