局域网网页制作教程，如何快速搭建？-建站教程-锦华智联科技

第一步：准备工作
- 核心概念：客户端与服务器
- 你需要的工具：一个文本编辑器
- 网络知识：如何获取本机IP地址
第二步：创建你的第一个网页
- 创建文件夹和文件
- 编写HTML代码
- 用浏览器打开网页
第三步：让网页更美观
- 引入CSS样式
- 编写简单的CSS代码
第四步：让网页动起来
- 引入JavaScript脚本
- 编写简单的JS代码
第五步：在局域网内访问
- 直接通过IP地址访问（最简单）
- 搭建一个简单的本地服务器（推荐）
第六步：进阶玩法
- 使用专业的代码编辑器（VS Code）
- 使用Live Server插件（实时刷新）
- 跨设备访问（手机、平板）
常见问题与解答 (FAQ)

第一步：准备工作

核心概念：客户端与服务器

简单理解：

（图片来源网络，侵删）

客户端：就是用来浏览网页的设备，比如你的电脑、手机上的浏览器（Chrome, Edge, Safari等）。
服务器：存放网页文件,并响应客户端请求的计算机。

在局域网网页制作中，你的电脑同时扮演了服务器和客户端的角色，你把网页文件放在电脑上，然后用同一台电脑或其他局域网内的设备去访问它。

你需要的工具：一个文本编辑器

网页的本质是文本文件，所以你只需要一个能编写纯文本的编辑器，Windows系统自带的 “记事本” 就可以，但强烈推荐使用更专业的编辑器，它们有语法高亮、自动补全等功能,能极大提升效率。

推荐选择：
- Visual Studio Code (VS Code)：功能强大，免费,是目前最受欢迎的代码编辑器。
- Sublime Text：轻量、快速,非常受欢迎。
- Notepad++：Windows平台下的经典编辑器。

本教程以 VS Code 为例进行讲解,因为它功能最全面。

网络知识：如何获取本机IP地址

要让局域网内的其他设备访问你的电脑，你需要知道你电脑的“门牌号”,也就是IP地址。

（图片来源网络，侵删）

在 Windows 上：
1. 打开“命令提示符”或“PowerShell”（可以在开始菜单搜索 cmd 或 powershell）。
2. 输入命令 ipconfig 并按回车。
3. 在显示的信息中找到 IPv4 地址，后面跟着的一串数字（如 168.1.105）就是你电脑的IP地址。
在 macOS 上：
1. 打开“系统设置” > “网络”。
2. 选择你正在使用的网络连接（如 Wi-Fi）。
3. 点击“详细信息”,就能看到你的IP地址。
在 Linux 上：
1. 打开终端。
2. 输入命令 ip a 或 ifconfig 并按回车。
3. 找到你的网络接口（如 en0 或 wlan0），后面的 inet 地址就是你的IP地址。

请记下你的IP地址，后面会用到。

第二步：创建你的第一个网页

现在我们来创建最基础的网页结构——HTML。

创建文件夹和文件

在你的电脑上新建一个文件夹，命名为 my-website（或任何你喜欢的名字）。
用 VS Code 打开这个文件夹。
在 VS Code 中，新建一个文件，命名为 index.html。index.html 是服务器默认打开的主页文件。

编写HTML代码

在 index.html 文件中,输入以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
    <h1>你好，局域网！</h1>
    <p>欢迎来到我的个人网站。</p>
    <p>这是在 <strong>局域网</strong> 中访问的哦。</p>
</body>
</html>

代码解释：

<!DOCTYPE html>：声明这是一个HTML5文档。
<html>：整个网页的根元素。
<head>：包含网页的元数据，比如标题、字符编码等,这些内容不会直接显示在页面上。
<title>：显示在浏览器标签页上的标题。
<body>：包含所有可见的页面内容，比如标题、段落、图片等。
<h1>, <p>, <strong>：都是HTML标签,用来定义不同类型的文本。

用浏览器打开网页

最直接的方式是：

找到你刚刚创建的 index.html 文件。
右键点击它，选择“用 Google Chrome 打开”（或其他浏览器）。

你就能看到你的第一个网页了！但此时,只有你自己的电脑能打开它。

第三步：让网页更美观

HTML定义了内容，CSS（层叠样式表）负责美化。

引入CSS样式

在 my-website 文件夹中，再新建一个文件，命名为 style.css。

修改 index.html 文件，在 <head> 标签内添加一行代码来引入这个CSS文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>你好，局域网！</h1>
    <p>欢迎来到我的个人网站。</p>
    <p>这是在 <strong>局域网</strong> 中访问的哦。</p>
</body>
</html>

编写简单的CSS代码

打开 style.css 文件,输入以下代码：

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0;
    padding: 20px;
    text-align: center;
}
h1 {
    color: #007bff;
}
p {
    line-height: 1.6;
    max-width: 600px;
    margin: 20px auto;
}

代码解释：

body { ... }：选择 <body> 标签，并设置它的样式，比如字体、背景色、外边距等。
h1 { ... }：选择 <h1> 标签,设置标题的颜色。
p { ... }：选择 <p> 标签,设置段落的行高和最大宽度。

刷新浏览器页面,你会发现网页的样式已经改变了！

第四步：让网页动起来

JavaScript（JS）可以让网页实现交互效果，比如点击按钮、显示时间等。

引入JavaScript脚本

在 my-website 文件夹中，再新建一个文件，命名为 script.js。

修改 index.html 文件，在 </body> 标签之前添加一行代码来引入这个JS文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>你好，局域网！</h1>
    <p>欢迎来到我的个人网站。</p>
    <p>这是在 <strong>局域网</strong> 中访问的哦。</p>
    <!-- 添加一个按钮 -->
    <button id="changeColorBtn">改变背景色</button>
    <!-- 引入JS文件 -->
    <script src="script.js"></script>
</body>
</html>

注意：通常将 <script> 标签放在 </body> 前面，这样可以确保在脚本执行时,页面上的所有元素都已经加载完毕。

编写简单的JS代码

打开 script.js 文件,输入以下代码：

// 获取按钮元素
const changeColorBtn = document.getElementById('changeColorBtn');
// 定义一个颜色数组
const colors = ['#f0f2f5', '#ffeaa7', '#fab1a0', '#74b9ff', '#a29bfe'];
// 为按钮添加点击事件监听器
changeColorBtn.addEventListener('click', function() {
    // 随机选择一个颜色
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    // 修改body的背景色
    document.body.style.backgroundColor = randomColor;
});

代码解释：

document.getElementById('changeColorBtn')：找到ID为 changeColorBtn 的元素（也就是我们的按钮）。
addEventListener('click', function() { ... })：给按钮添加一个“点击”事件，当按钮被点击时,执行后面的函数。
document.body.style.backgroundColor = randomColor;：修改整个页面的背景色。

刷新浏览器，点击“改变背景色”按钮,看看效果！

第五步：在局域网内访问

你的网页文件已经准备好了,我们让局域网内的其他设备也能访问到它。

直接通过IP地址访问（最简单）

确保你的电脑和要访问的设备（比如手机）连接在同一个Wi-Fi下。
找到你电脑的IP地址（如 168.1.105）。
在手机或其他电脑的浏览器地址栏中，输入 http://[你的IP地址]，http://192.168.1.105。
按回车,你应该就能看到你的网页了！

缺点：这种方法直接读取文件，浏览器可能会因为安全策略而阻止某些功能（比如JS的某些API）,并且不支持动态内容。

搭建一个简单的本地服务器（推荐）

为了获得更好的体验，我们需要一个简单的服务器,这里介绍两个超简单的方法：

方案A：使用 Python (推荐)

如果你的电脑安装了 Python（现在大多数系统都自带）,这是最简单的方法。

打开命令提示符或终端。
使用 cd 命令切换到你存放网站的文件夹。
```
cd C:\Users\你的用户名\Desktop\my-website
```
运行以下命令启动一个简单的HTTP服务器：
- Python 3:
```
python -m http.server 8000
```
- Python 2:
```
python -m SimpleHTTPServer 8000
```
你会看到类似 Serving HTTP on 0.0.0.0 port 8000 ... 的提示,说明服务器已经启动。
在局域网内的任何设备上，访问 http://[你的IP地址]:8000。http://192.168.1.105:8000。

方案B：使用 Node.js 和 `http-server`

如果你已经安装了 Node.js,这也是一个非常流行的方法。

打开终端。
切换到你的网站文件夹。
如果你还没安装 http-server，先全局安装它（只需安装一次）：
```
npm install -g http-server
```
在你的网站文件夹下，运行命令：
```
http-server -p 8000
```
服务器启动后，同样在局域网内访问 http://[你的IP地址]:8000。

注意：启动服务器后，不要关闭命令提示符/终端窗口,否则服务器就会停止。

第六步：进阶玩法

使用专业的代码编辑器（VS Code）

如果你还没用，强烈建议安装 Visual Studio Code，它不仅免费，还有海量的插件,能极大提升你的开发效率。

使用 Live Server 插件（实时刷新）

这是 VS Code 最实用的插件之一！它能自动启动一个本地服务器，并且在你的代码保存后，自动刷新浏览器，省去了你手动按 F5 的麻烦。

在 VS Code 中，按 Ctrl+Shift+X 打开扩展商店。
搜索 Live Server，然后点击“安装”。
安装后，在 index.html 文件上右键，选择 "Open with Live Server"。
它会自动用浏览器打开页面，并显示一个地址（通常是 http://127.0.0.1:5500），如果你想用手机访问，需要记下命令提示符里显示的局域网IP地址（如 http://192.168.1.105:5500）。

跨设备访问（手机、平板）

按照 方法二 搭建好本地服务器后，确保你的手机和平板连接着和电脑同一个Wi-Fi，然后在它们的浏览器中输入 http://[电脑的IP地址]:[端口号] 即可。

第七步：常见问题与解答 (FAQ)

Q: 为什么我输入IP地址后，手机上无法访问？ A: 请检查以下几点：

是否连接同一Wi-Fi：这是最常见的原因。
防火墙是否阻止：检查电脑的防火墙设置，可能需要允许Node.js或Python通过防火墙。
IP地址是否正确：确保输入的是你电脑的局域网IP,不是公网IP。
端口号是否正确：如果你启动服务器时指定了端口（如8000），访问时也必须加上 8000。

Q: “文件协议”是什么？为什么不能用？ A: 当你直接双击打开 index.html 文件时，浏览器使用的协议是 file://，这是一种本地文件访问协议，它不涉及服务器，因此很多基于网络的功能（如AJAX请求）会被浏览器出于安全目的而禁止，搭建本地服务器就是为了使用 http:// 协议，让网页在“服务器环境”下运行。

Q: 我需要一直开着电脑吗？ A: 是的，只要你想让局域网内的其他人能访问,就必须保持你的电脑开机并且服务器正在运行。

恭喜你！你已经成功完成了从零开始制作并部署一个局域网网页的全过程，这只是一个开始，你可以继续学习更复杂的HTML、CSS和JavaScript知识，比如制作表单、使用AJAX获取数据等,打造出更酷炫的局域网应用！

局域网网页制作教程，如何快速搭建？

目录

第一步：准备工作

核心概念：客户端与服务器

你需要的工具：一个文本编辑器

网络知识：如何获取本机IP地址

第二步：创建你的第一个网页

创建文件夹和文件

编写HTML代码

用浏览器打开网页

第三步：让网页更美观

引入CSS样式

编写简单的CSS代码

第四步：让网页动起来

引入JavaScript脚本

编写简单的JS代码

第五步：在局域网内访问

直接通过IP地址访问（最简单）

搭建一个简单的本地服务器（推荐）

方案A：使用 Python (推荐)

方案B：使用 Node.js 和 http-server

第六步：进阶玩法

使用专业的代码编辑器（VS Code）

使用 Live Server 插件（实时刷新）

跨设备访问（手机、平板）

第七步：常见问题与解答 (FAQ)

方案B：使用 Node.js 和 `http-server`