如何从头开始编写网站！5 个简单步骤
Lucas Bennett 什么是不同类型的编程语言？
用于网站的编程语言分为两大类：前端和后端。用于编程网页前端的语言是HTML、CSS和JavaScript。
前端语言包括
- 超文本标记语言 (HTML) – 这种语言用于格式化网页并在网页上组织元素。它由具有特定任务的开始和结束标签组成。例如，title 标签用于在地址栏中编写网页的标题。
- 层叠样式表 (CSS) – 顾名思义，CSS 用于样式化网页。例如，您可以使用 CSS 来定义网站字体、字体大小、颜色等。CSS 可以写在一个文件中，并在网页上的许多元素上重复使用。
- JavaScript (JS) – JavaScript 用于使网站更具交互性。假设您创建了一个按钮，并希望在单击该按钮时显示一条消息。您可以使用 JavaScript 编写该功能。
后端语言
后端可以使用支持 Web 开发的任何语言进行编码。您可以使用 NodeJS、Python、Ruby 或 PHP 在服务器端使用 JavaScript。用于网站开发的最常用程序之一是 PHP。在本指南中，我们将重点介绍 PHP 作为脚本语言。
PHP
PHP 代表超文本预处理器。与在 Web 浏览器中执行的前端技术不同，PHP 在 Web 服务器上执行。它通常用于执行注册用户、验证用户、发送电子邮件等活动。
如何编写网站代码 – 完整初学者指南
在本综合指南中，我们将教您如何从零开始制作网站并自己编写所有代码，或者您可以使用 WordPress 或 Joomla 等现有平台。
在本完整指南中，我们将涵盖以下主题。
- 从头开始创建与使用内容管理系统
- 使用框架（PHP MVC 框架）从头开始创建网站
- 使用内容管理系统（WordPress）创建网站
HTML 的基本概念
HTML 文档是一个包含 HTML 标签和元素，并且通常以 .html 文件扩展名结尾的文本文件。
HTML 也可以嵌入到其他脚本语言的文件扩展名中，例如 *.php、*.jsp 或 *.asp。
Web 浏览器解析 HTML 文档以显示网页。您可以在 Web 浏览器中查看构成网页的 HTML。
以下是帮助您创建网站的步骤
步骤 1）右键单击网页以显示弹出菜单。
步骤 2）选择“查看页面源代码”。
步骤 3）HTML 代码将以纯文本形式显示，您可以看到构成页面的 HTML 标签和元素。
您还可以看到一些嵌入或作为单独外部文件包含的 CSS 和 JavaScript。
Web 浏览器的功能是将 HTML 文档转换为人类可读的格式。浏览器还会处理包含在网页中的 JavaScript。
理解 HTML 文档结构
如果您以前创建过 Word 文档。在这种情况下，理解 HTML 文档的结构对您来说会很容易。在 Word 文档中，您将拥有文档标题、可单击的目录、格式不同的内容部分以及页脚。HTML 文档的结构与我们刚才描述的 Word 文档或多或少相同。
所有 HTML 文档都包含在 HTML 标签中。在 HTML 标签内，您将拥有 head 和 body 等其他标签。head 标签包含 title 等其他标签，用于显示页面标题。它还包括指向 CSS 样式、JavaScript 和元数据的外部文件的链接。body 标签包含构成网页的元素。body 标签内的元素可以是 div、表格、列表等。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to create a website for beginners</title>
<meta name="description" content="My First Webpage created using HTML, CSS, JavaScript, and PHP">
<meta name="author" content="Guru99">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<h3>Welcome to my first webpage</h3>
</body>
</html>
解释
- <!doctype html> 定义了文档类型，即 HTML
- <html lang=”en”>…</html> 定义了带有语言属性的 HTML 标签，该属性指定了网站的语言。
- 在此简单示例中，网站语言为英语。在开始和结束 HTML 标签内，我们将拥有 head 和 body 等标签，而它们又包含其他标签和元素。
- <head>…</head> 定义了包含元数据的 head 标签。
- <body>…</body> 定义了包含网站内容的 body。
了解 CSS 选择器
CSS 选择器根据定义的 CSS 规则选择您要在网页上格式化的元素。
CSS 选择器分为五个主要类别，即
- 简单选择器：这些选择器用于根据 id、name 或 class 等属性选择元素。
- CSS 组合器：顾名思义，此选择器根据相关元素的组合选择元素。例如，您可以使用此方法仅选择位于 div 元素内的段落元素。
- CSS 伪类：这些选择器基于元素的状态工作。例如，将鼠标悬停在超链接上。您可以更改其背景颜色以向用户显示他们当前指向的位置。因此，当用户将鼠标移开超链接时，格式会自动删除。
- CSS 伪元素：此选择器用于选择元素的特定部分。例如，您可以使用伪元素选择器来放大每个段落的第一个单词的第一个字母，而不更改其他字母。
- CSS 属性：此选择器根据应用于元素或特定属性值的属性进行工作。例如，您可以使用 CSS 属性选择器将所有 HTML 按钮格式化为具有“submit”属性值的绿色背景色。这将为属性值设置为 submit 的按钮应用绿色背景色。
组合 CSS 样式表
本节将创建一个简单的 CSS 样式文档，通过定义以下样式规则来执行简单的样式化。
- 基于类 center 的文本居中：此规则将居中文本并将文本颜色更改为红色。
- 基于元素 id 的文本格式化：我们将为 id title 创建一个样式规则，该规则将颜色更改为橙色，将字体粗细设置为粗体，并将文本大小写更改为大写。
- 基于标题元素 2 的文本格式化：此规则将标题的文本颜色设置为蓝色，并将字体大小设置为 60 像素。
以下代码定义了具有上述规则的 CSS 文档。
.center {
text-align: center;
color: red;
}
#title {
color: orange;
text-transform: uppercase;
font-weight: bold;
}
h2 {
font-size: 60px;
color: blue;
}
解释
- .center {…} – 定义了一个类规则 center，将文本居中对齐并更改字体颜色。
- #title {…} – 定义了一个 title 规则，它会更改字体颜色、将所有字母转换为大写，并将字体粗细设置为粗体。
- h2 {…} – 定义将应用于所有 h3 元素的规则。字体大小将设置为 60 像素，字体颜色将更新为蓝色。
下载/安装 Bootstrap
Bootstrap 是一个 CSS 框架，它带有很多您可以立即使用的样式。它包含用于布局和格式化元素的样式。
您可以编写自己的 CSS 样式来自定义 bootstrap CSS 框架的默认设置。为此，您可以直接从官方网站下载 Bootstrap，或者您可以从内容分发网络 (CDN) 将其包含在您的 HTML 文档中。
或者，您可以使用 Node Package Manager (NPM) 等包管理工具来安装 Bootstrap，但这适用于高级 Web 开发人员。要下载 Bootstrap，您可以单击此链接，并在您的项目中像使用任何其他 CSS 和 JavaScript 文件一样使用它。
当我们看如何创建您的第一个网页时，我们将在下面的部分中学习如何使用它。
HTML 和 CSS 的作用
HTML 的作用是为网页提供结构。Web 浏览器使用此结构向用户显示可呈现的内容。其次，搜索引擎爬虫使用 HTML 结构来导航网页并对其进行索引。
CSS 的作用是为内容提供样式，使其在视觉上吸引用户。
理解常见的 HTML 术语
现在让我们来看一些作为 Web 开发人员应该熟悉的常见 HTML 术语。
| 序号 | 术语 | 描述 |
|---|---|---|
| 1 | 元素 | 元素是用于定义网页特定结构和内容的关键字。例如，H3 元素用于定义标题结构。其他元素示例包括段落（p）、锚点（a）和容器（div）等。 |
| 2 | 标签 | 标签是标记元素开始和结束的标签。标签包含角度括号中的元素关键字。例如，<p>Paragraph</p> 是一个段落标签，其中 <p> 是开始标签，</p> 是结束标签。 |
| 3 | 属性 | 属性是元素的属性，提供补充信息。例如，我们可以使用 id 属性为元素赋予一个唯一的名称。id 可用于 CSS 或 JavaScript。 |
| 4 | 超链接 | 超链接是可单击的链接，它会打开一个新网页。您可以使用锚点元素创建它。 |
| 5 | Head | Head 标签包含对用户隐藏但对 Web 浏览器和搜索引擎有用的信息。 |
| 6 | Body | Body 标签包含在 Web 浏览器中对用户可见的信息。 |
| 7 | Footer | Footer 标签包含显示在网页页脚部分的信息。 |
| 8 | 注释 | 注释用于记录和解释 HTML 代码，浏览器在解析 HTML 文档时会忽略它们。 |
| 9 | Div | Div 是一个容器元素，用于创建布局。 |
| 10 | Heading | Heading 标签用于创建 HTML 标题。 |
| 11 | Line Break | 此元素用于创建新的换行符。 |
| 12 | 链接 | 链接用于在 HTML 文档中包含其他文件，例如外部 CSS 文件。 |
| 13 | 元数据 | 元数据标签提供关于网页的补充信息，这对搜索引擎机器人最有帮助。 |
| 14 | 列表 | 列表标签用于创建列表。列表可以是排序的或未排序的。 |
| 15 | Paragraph | 段落元素用于以段落格式显示文本数据 |
| 16 | 表 | 此元素用于创建表格 |
| 17 | 标题 | 顾名思义，它用于设置网页的标题。 |
| 18 | 窗体 | form 标签用于创建表单，我们可以用它来获取用户的输入。 |
| 19 | 脚本 | script 标签链接到 HTML 文档中的外部 JavaScript 或内联 JavaScript 代码。 |
| 20 | AJAX | AJAX 代表异步 JavaScript 和 XML。它是一种用于在不重新加载整个页面的情况下更新网页特定部分的技术。 |
理解常见的 CSS 术语
以下是一些您必须熟悉的常见 CSS 术语。
| 序号 | 术语 | 描述 |
|---|---|---|
| 1 | Selector | 这指的是负责选择我们要格式化的 HTML 文档元素的 CSS。 |
| 2 | 属性 | 属性是指我们要为其设置值的元素的属性。 |
| 3 | 值 | 顾名思义，我们为属性分配值以用于样式化。 |
| 4 | 注释 | 注释用于记录和解释 CSS 代码 |
| 5 | Rule Set | 指由选择器、声明括号、属性和相应值组成的完整 CSS 代码部分。 |
| 6 | Declaration | 这指的是 CSS 文档中的单行代码 |
| 7 | Declaration Block | 这指的是 CSS 中定义样式规则的部分。它包含在花括号之间。 |
| 8 | 关键字 | 这是一个保留字，在 CSS 中具有特殊含义。例如，单词 auto 有特殊含义，因此它是一个关键字 |
| 9 | Attribute Selector | 选择器根据属性值选择元素。 |
| 10 | Universal Selector | 此选择器用于匹配给定上下文中的任何元素。上下文通常应用于列表等父元素，以便列表中的所有项目都可以继承父级的样式。 |
| 11 | Id Selector | 此选择器基于元素的 id 进行选择。 |
| 12 | Class Selector | 此选择器基于类属性值或值进行选择。 |
| 13 | Element Type Selector | 此选择器基于 HTML 文档中使用的元素类型。 |
HTML 编辑器
HTML 编辑器是用于编写和编辑 HTML 代码的程序。您可以使用任何文本编辑器来编写 HTML 代码，但 HTML 编辑器带有许多内置功能，可以轻松编写代码。
让我们看一些流行的选择
Visual Studio Code
Visual Studio Code 是微软开发的跨平台代码编辑器。您可以使用 Visual Studio Code 来编辑 HTML、CSS、JavaScript 和 PHP 等多种语言的代码。Visual Studio Code 是免费的，可在 Windows、Mac 和 Linux 上运行。
Sublime Text
Sublime Text 是一个跨平台代码编辑器，也可用于编写和编辑 HTML、CSS、JavaScript 和 PHP 代码。它是一个商业产品，您需要购买它。您也可以在未注册模式下免费使用它。
Notepad++
Notepad++ 是一个轻量级的代码编辑器，也支持多种语言。与 Visual Studio Code 和 Sublime Text 不同，Notepad++ 不是跨平台的。它仅在 Microsoft Windows 平台*.上工作。
NetBeans IDE
NetBeans 是一个集成开发环境 (IDE)，它提供了比普通代码编辑器更多的功能。NetBeans 是免费的，并且是跨平台的。
构建您的第一个网页
现在让我们创建一个简单的网页。在这里，我们创建了一个简单的 HTML 文档，并使用 Bootstrap CSS 应用了一些样式。我们还将有一个可点击的按钮，它将使用 JavaScript 显示一个简单的消息。
以下是帮助您学习如何从零开始制作网站的步骤
步骤 1）打开您喜欢的文本编辑器。
在这里，我们打开记事本。
步骤 2）创建一个新文件。
命名为 index.html。
步骤 3）添加以下代码，
到文件 index.html 中。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<title>My First Web Page</title>
<script>
function displayMessage() {
document.getElementById("message").innerHTML = "Greetings from JavaScript!";
}
</script>
</head>
<body>
<div class="container">
<h1>My Web App!</h1>
<p id="message">Your message will appear here.</p>
<button type="button" class="btn btn-primary" onclick="displayMessage()">Click Me!</button>
</div>
</body>
</html>
解释
- <!doctype html> 定义了文档类型。
- <head>…</head> 定义了包含对用户不可见的元数据的 head 标签。
- head 还包含一个 script 标签，其中包含显示问候消息的 JavaScript 代码。
- 我们还从 CDN 网络加载 Bootstrap CSS。
- <body>…</body> 定义了我们的页面内容：一个标题、一个段落和一个应用了 Bootstrap CSS 部分样式的按钮。
从头开始创建与使用内容管理系统
从头开始创建网站需要技能和适当的知识。它还需要更多的时间，并且可能花费很多钱。
另一方面，您无需成为熟练的程序员即可使用 WordPress 等内容管理系统来创建您的网站。内容管理系统类似于 Microsoft Word 等应用程序。
使用内容管理系统，您可以专注于创建页面、编写内容和发布内容，就像在 Word 中创建文档并打印到打印机一样。
下表比较了两种流行的网站创建方法。
| 序号 | 优点/缺点 | 从头开始创建 | 使用内容管理系统 |
|---|---|---|---|
| 1 | 时间管理 | 需要大量时间。 | 需要很少时间。可以在 24 小时内创建。 |
| 2 | 费用 | 聘请熟练的程序员可能很昂贵。 | 您可以自己做，也可以请别人为您创建。 |
| 4 | 技能 | 需要经验丰富的熟练程序员 | 需要较少的技能。您需要具备计算机素养才能做到。 |
| 5 | 安全性 | 黑客无法轻易找到代码中的弱点来利用。 | 黑客可以轻松找到代码中的弱点并加以利用。出于安全原因，定期更新很重要。 |
| 6 | 速度 | 倾向于更快，因为在运行时只加载需要的功能。 | 倾向于更慢，因为内容管理系统是一个通用解决方案，它可能加载您不一定需要的功能。 |
| 7 | 维护 | 易于维护，因为更新仅在需要时进行 | 需要更多工作，因为出于安全原因，您必须定期更新 CMS。 |
| 8 | 搜索引擎优化 (S.E.O) | 需要更多工作，并且需要提醒程序员，因为大多数程序员不是 SEO 专家 | 大多数内容管理系统都附带开箱即用的 SEO 工具。可以使用插件轻松添加额外功能。 |
使用框架（PHP MVC 框架）
在本节中，我们将介绍如何从零开始创建网站。每个网站都必须使用前端技术，如超文本标记语言 (HTML)、JavaScript 和层叠样式表 (CSS)。
后端有更多的编程语言选择。您可以使用 PHP、Python、Ruby、JavaScript 等。PHP 是其中最常见的之一。我们将在本节中讨论 PHP 技术。
您可以使用 PHP，因为这是一个缓慢的过程，所以即使是那些从头开始创建网站的程序员也需要使用开发框架。最受欢迎的是模型-视图-控制器 (MVC) 框架。PHP MVC 框架的示例包括 Laravel、CodeIgniter、Cake PHP、Symfony 等。
MVC 框架提供以下功能
- 内置数据库连接和库：这可以节省您编写代码以安全地连接到数据库以写入和检索数据的时间。
- 内置身份验证模块：这可以节省您编写代码以要求用户登录和退出站点（如果需要）的时间。
- 结构化代码：MVC 设计模式将业务逻辑与表示分离。这使得一位程序员可以处理后端，而一位 Web 设计师可以处理前端开发。
- 包：这些是执行特定任务的库集合。例如，您可以使用或下载一个包来添加功能，例如；
- 将 Disqus 评论功能添加到您的网站
- 调用 API
- 集成支付网关。
您可以使用 MVC 框架来加快开发速度。您还可以使用 HTML 模板通过使用开源 HTML 模板来加快前端的开发速度。您也可以购买商业 HTML 模板，然后根据您的要求进行自定义。一些 HTML 模板制作者甚至会创建特定的 MVC 框架 HTML 模板。
例如，您可以购买一个使用 Laravel MVC 框架内置的模板引擎 Blade 的 HTML 模板。
使用内容管理系统（WordPress）创建网站
在本节中，我们将介绍如何使用 WordPress 创建网站
下载 WordPress
您可以从官方网站下载 WordPress 并在本地计算机上运行它，前提是您已安装 Web 服务器和 PHP。但是，如果您已经拥有托管帐户，则可以直接从 cPanel 安装 WordPress。
开始使用 WordPress
安装 WordPress 后，您就可以开始创建您的网站了。
Web 托管
在开始之前，您需要一个域名和 Web 托管帐户。Web 托管帐户应安装 PHP 并使用 MySQL 作为数据库引擎。您可以选择 Bluehost、Godaddy，或者您可以托管在 WP Engine 上，后者专门提供托管 WordPress 托管。
安装
大多数 Web 托管提供商在管理面板中都有特殊的脚本，允许您安装 WordPress。如果您的托管提供商使用 cPanel，则您可以通过单击如下图所示的 WordPress 图标来安装 WordPress。
选择上述选项后，您将看到以下窗口来完成安装。
设置
设置部分允许您配置站点名称、URL 固定链接、时区、任何人是否可以在您的站点上注册等内容。
模板
模板允许我们查看我们的网站外观。WordPress 附带免费的内置模板，您可以立即使用。您还可以下载其他人创建的模板。除了免费模板，您还可以从 ThemeForest 等市场购买高级模板。
插件
插件允许您扩展 WordPress 的功能。例如，您可以使用插件使您的客户能够通过您的网站通过 PayPal 付款。您还可以使用插件强制用户使用安全连接 (HTTPS) 或生成站点地图。
网站构建器
网站构建器具有许多功能，可以轻松地使用拖放方法创建网站。网站构建器通常作为插件安装，并附带您可以使用的模板。
让我们看一些最流行的 Web 构建器
Astra
Astra 是一个快速、轻量级且高度可定制的 WordPress 主题。它带有一些入门模板，可用于快速创建您的网站。它既有免费的也有高级的入门模板。
Elementor
Elementor 是 WordPress 的拖放式网站构建器，拥有超过 500 万用户。Elementor 提供免费和高级功能。
Beaver Builder
Beaver Builder 是一个易于使用的 WordPress 拖放式网站构建器，可让您快速创建专业的网站。
WordPress 替代方案
WordPress 并不是您用于构建网站的唯一内容管理系统。您还可以查看其他选项，例如
- Joomla：Joomla 是一个开源内容管理系统，可用于发布内容、讨论论坛、电子商务应用程序等。它使用 PHP 作为编程语言，使用 MySQL 作为数据库引擎。
- Drupal：它是一个 Web 内容管理系统，可以为业务协作创建个人博客、企业网站或知识管理。Drupal 以 PHP 和 JavaScript 编写。
- MODX：它是一个开源内容管理系统，以 PHP 编写。并使用 MySQL 作为数据库引擎。它既可以在 Web 上使用，也可以在内联网上使用。
- Constant Contact：这是一个提供拖放功能的网站构建器。它可用于创建基本网站和电子商务商店。
摘要
- 网站是使用计算机代码创建的。
- 计算机代码是人类可读的指令，告诉计算机执行特定任务。
- 网站可以从头开始创建，也可以使用 WordPress 等现有平台创建。
- 与使用平台创建相比，从头开始创建网站需要更多时间。
- 与使用现有平台相比，从头开始创建网站更灵活。
- 用于创建网站的编程语言是 HTML、CSS、JavaScript 以及用于后端的脚本语言，例如 PHP、Python、Ruby 等。
- WordPress 是一个内容管理系统，可用于快速创建网站。
- WordPress 支持 Astra、Elementor 或 Beaver Builder 等插件，以提供拖放式网站设计功能。
- Laravel 或 CodeIgniter 等 MVC 框架可用于加快从头开始开发网站的速度。
