正文

新手如何轻松搭建个人网站，从源码入手的实战攻略

/0 浏览量
0806

了解网站基础

在开始搭建个人网站之前，我们需要了解一些基础概念。网站由多个部分组成，包括：

  • HTML：超文本标记语言，用于创建网页的基本结构。
  • CSS：层叠样式表，用于美化网页的外观和格式。
  • JavaScript：一种脚本语言，用于增加网页的交互性。

选择开发环境

安装文本编辑器

选择一个适合你的文本编辑器，以下是一些流行的选择：

  • Visual Studio Code：功能强大，支持多种编程语言。
  • Sublime Text：轻量级，但功能齐全。
  • Atom：由GitHub开发，具有丰富的插件生态。

安装代码版本控制工具

版本控制可以帮助你管理代码更改，推荐使用Git。

# 安装Git
sudo apt-get install git

创建网站结构

创建一个文件夹来存放你的网站文件，例如my_website。

mkdir my_website
cd my_website

在my_website文件夹中，创建以下文件：

  • index.html：网站的主页面。
  • style.css：网站样式文件。
  • script.js：网站脚本文件。

编写HTML代码

打开index.html文件，并编写以下HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的个人网站</h1>
    </header>
    <main>
        <p>这里可以放置你的内容。</p>
    </main>
    <footer>
        <p>版权所有 &copy; 2022</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

编写CSS代码

打开style.css文件，并编写以下CSS代码：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header, main, footer {
    padding: 20px;
}

header {
    background-color: #333;
    color: #fff;
}

footer {
    background-color: #333;
    color: #fff;
}

编写JavaScript代码

打开script.js文件，并编写以下JavaScript代码：

// 示例：显示当前时间
function showTime() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    document.getElementById('time').textContent = `${hours}:${minutes}:${seconds}`;
}

// 每秒更新时间
setInterval(showTime, 1000);

// 页面加载完成后执行
window.onload = function() {
    showTime();
};

预览网站

打开终端，使用以下命令启动本地服务器：

python -m http.server

在浏览器中访问http://localhost:8000/，你应该能看到你的个人网站了。

总结

通过以上步骤，你已经成功搭建了一个简单的个人网站。你可以根据自己的需求添加更多功能，如图片、视频、表单等。随着经验的积累，你还可以学习更多前端和后端技术，打造一个更强大的网站。祝你搭建网站愉快！

-- 展开阅读全文 --