零基础小白，如何创建一个网站？（附教程）

原创已于 2025-04-25 14:56:27 修改 · 1.3w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

于 2025-03-20 17:03:20 首次发布

网站搭建专栏收录该内容

9 篇文章

订阅专栏

该文章已生成可运行项目，

【代码版】网站搭建教程

【0代码】网站搭建教程

【代码版】网站搭建教程

一、准备工作

在开始构建网页之前，需要安装一个代码编辑器，例如 Visual Studio Code、Sublime Text 或者 Atom。这些编辑器可以帮助你编写和管理 HTML 和 CSS 代码。

二、HTML：网页的骨架

HTML 通过标签构建页面结构，就像用积木搭建房屋

1、初始化 HTML 文件

首先，打开你代码编辑器，创建一个新的文件，并将其保存为 index.html。以下是一个基本的 HTML 结构代码：

<!DOCTYPE html>
<html>

<head>
    <title>我的网站</title>
    <link rel="sheet" href="s.css">
</head>

<body>
    <header>
        <h1>欢迎</h1>
    </header>
    <main>
        <p>这是一个段落</p>
        <ul>
            <li>列表项 1</li>
        </ul>
        <button id="myButton">点击我</button>
    </main>
</body>

</html>

核心标签速查表：

标签	用途
`<html>`	页面容器
`<head>`	元数据（标题、样式、脚本）
`<body>`	可见内容区域
`<h1>` - `<h6>`	标题
`<p>`	段落
`<button>`	按钮

三、CSS：网页的外衣

CSS 通过样式美化页面，如同为房屋装修

1、创建 CSS 文件并链接

在与 index.html 相同的目录下，创建一个新文件，命名为 s.css。通过编写 CSS 代码来美化网页。

/* 全局样式 */
body {
    font-family: Arial;
    background: #f0f0f0;
}

/* 标题样式 */
h1 {
    color: #333;
    text-align: center;
}

/* 链接样式 */
a {
    color: blue;
    text-decoration: none;
}

/* 按钮样式 */
button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}

常用属性分类：

盒模型：widthheightmarginpadding
定位：positionfloatflex
视觉：colorfont - sizebackground
响应式：@media 查询

四、JavaScript：网页的交互灵魂

JavaScript 为网页添加交互性，使网页 “活” 起来。

把 <script> 标签放到 index.html 文件中 <body> 标签末尾。以下是一个简单的示例，当点击按钮时，会弹出一个提示框：

<script>
// 获取按钮元素
const myButton = document.getElementById('myButton');

// 为按钮添加点击事件监听器
myButton.addEventListener('click'function () {
    alert('你点击了按钮！');
});
</script>

JavaScript 常见用途：