网站代码怎么写：入门知识点与网页范例

网站代码怎么写，可以从创建一个简单网页开始：先准备编辑工具，再进入编辑器新建项目，编写网页结构和样式，最后预览并发布。使用在线编辑器时，通常要先登录账号；用电脑上的代码编辑器则可以直接新建文件，不需要注册。下面按“准备—登录—编写—预览—发布”的顺序，做出一个带标题、介绍文字和联系方式的基础网页。

开始前准备什么

准备一台能打开网页的电脑，以及一个可编辑纯文本文件的工具。在线编辑器一般需要账号和可用的登录方式；登录后创建项目，代码保存在该编辑器提供的工作区。使用本地编辑器时，先新建一个文件夹，再在里面创建 index.html。这个文件名常用作网站首页文件名，浏览器打开它就能查看网页。

网页最初只需要 HTML。HTML 用标签安排标题、段落和区域，不必一开始就添加复杂功能。先完成一个能正常显示的版本，再逐步调整颜色、间距和内容，更容易发现代码写错的位置。

登录编辑器并创建网页

1. 进入编辑入口：打开所选在线编辑器，使用已有账号登录；新用户按编辑器提供的注册流程创建账号。若使用本地工具，直接打开编辑器即可。
2. 新建项目或文件：在线编辑器中创建一个空白网页项目；本地方式则新建文件夹，并在文件夹内建立 index.html。
3. 输入网页结构：将下面代码放进 index.html。代码中的标题、介绍和联系方式可以替换成自己的文字。
4. 保存并预览：在线编辑器使用预览区域查看效果；本地方式保存文件后，用浏览器打开 index.html。
5. 发布网页：在线编辑器若提供发布功能，可按项目中的发布入口完成发布；本地文件则目前只保存在自己的电脑上，需要放到可提供网页访问的托管空间，访客才能通过网站地址打开。

先写出网页主体代码

下面是一份可直接作为起点的 HTML。文档声明告诉浏览器使用 HTML5 解析；head 区域放页面标题和字符编码；body 区域放访客实际看到的内容。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的网站</title>
</head>
<body>
  <header>
    <h1>欢迎来到我的网站</h1>
    <p>这里介绍我的作品与服务。</p>
  </header>
  <main>
    <section>
      <h2>关于我</h2>
      <p>我会在这里分享项目进展和实用信息。</p>
    </section>
    <section>
      <h2>联系方式</h2>
      <p>邮箱：[email protected]</p>
    </section>
  </main>
</body>
</html>

保存后检查浏览器是否显示“欢迎来到我的网站”、两个小标题和对应段落。若页面空白，先确认代码是否放进 index.html，并检查开始标签和结束标签是否成对出现，例如 <p> 对应 </p>。中文出现乱码时，检查 head 中是否保留 UTF-8 字符编码设置。

添加样式，让网页更清楚

HTML 确定内容结构，CSS 控制颜色、宽度和间距。可以在项目中另建 style.css，写入以下样式；如果当前编辑器有独立的 CSS 输入区，也可以把样式放进该区域。

body {
  margin: 0;
  font-family: sans-serif;
  color: #243247;
  background: #f3f6fa;
}
header, main {
  max-width: 760px;
  margin: 24px auto;
  padding: 24px;
}
header {
  background: #dcecff;
  border-radius: 12px;
}
section {
  margin-top: 18px;
  padding: 18px;
  background: #ffffff;
  border-radius: 8px;
}

如果使用本地文件，在 HTML 的 head 区域加入样式文件引用：<link rel="stylesheet" href="style.css">。确认 style.css 与 index.html 位于同一文件夹，再刷新浏览器；背景变浅蓝、内容区域出现留白，就表示样式已经生效。

预览、修改与发布的完成路径

预览时重点看三件事：页面标题是否准确，段落有没有被误删，窄屏打开时文字是否仍能阅读。发现问题就回到编辑器修改并保存，再刷新预览。完成后，在在线编辑器的项目操作区使用发布功能，并按其流程设置网页名称或访问范围；发布结果会影响访客能否打开项目。使用本地方式时，保存代码只是完成制作，网页文件仍在本机，放入托管空间后才成为可供他人访问的网站。

日常修改也沿用这条路径：登录原来的编辑账号并打开项目，改动代码、保存、预览，再重新发布。这样既能保留已有网页结构，也能确认每次改动后的显示效果。初学时先让标题、正文和样式正常工作，再增加图片、菜单或更多栏目，网站代码会更容易维护。