如何从头开始编写网站代码！5 个简单步骤
卢卡斯·贝内特
有哪些不同类型的编程语言？
网站的编程语言分为前端和后端两大类。前端网页编程使用的语言是 HTML、CSS 和 Java脚本。
前端语言包括
- 超文本标记语言（HTML） – 此语言用于格式化网页并组织网页上的元素。它由开始和结束标签组成，每个标签都有特定的任务。例如，title 标签用于在地址栏中写出网页的标题。
- 层叠样式表（CSS） – 顾名思义，CSS 用于设置网页样式。例如，您可以使用 CSS 来定义 网站字体、字体大小、颜色等。CSS 可以写在一个文件中，并在网页上的众多元素上反复使用。
- Java脚本（JS） – Java脚本用于使网站更具交互性。假设您创建了一个按钮，并希望它在被点击时显示一条消息。您可以使用 Java用于编写该功能的脚本。
后端语言
后端可以使用任何支持 Web 开发的语言进行编码。您可以使用 Java使用 NodeJS 在服务器端编写脚本， Python、Ruby 或 PHP。网站开发最常用的程序之一是 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 和 Java脚本可以嵌入或作为单独的外部文件包含。
Web 浏览器的功能是将 HTML 文档转换为人类可读的格式。浏览器还会处理 Java包含在网页内的脚本。
理解 HTML 文档结构
假设您之前创建过 Word 文档。在这种情况下，理解 HTML 文档的结构对您来说将非常容易。在 Word 文档中，您将拥有文档标题、可点击的目录、不同格式的内容部分和页脚。HTML 文档的结构与我们刚刚描述的 Word 文档大致相同。
所有 HTML 文档都包含在 HTML 标记中。在 HTML 标记内，您还会有其他标记，例如 head 和 body。header 标记包含其他标记，例如用于显示页面标题的 title。它还包括指向 CSS 样式的外部文件的链接， Java脚本和元数据。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>
说明：
- 定义文档类型为 HTML
- …定义具有语言属性的 HTML 标签，该属性指定网站语言。
- 在这个简单的例子中，网站语言是英语。在开始和结束 HTML 标签内，我们将有诸如 head 和 body 之类的标签，这些标签又包含其他标签和元素。
- …定义包含元数据的 head 标签。
- …定义包含网站内容的主体。
了解 CSS 选择器
CSS 选择器根据定义的 CSS 规则选择您想要格式化的网页元素。
CSS 选择器分为五大类，分别是：
- 简单选择器： 这些选择器用于根据 id、name 或 class 等属性选择元素。
- CSS 组合器：顾名思义，这种选择器根据相关元素的组合来选择元素。例如，您可以使用此方法仅选择 div 元素内的段落元素。
- CSS 伪类：这些选择器根据元素的状态工作。例如，将鼠标悬停在超链接上。您可以更改其背景颜色以向用户显示他们当前指向的位置。因此，当用户将鼠标移离超链接时，格式会自动删除。
- CSS 伪元素：此选择器用于从元素中选择特定部分。例如，您可以使用伪元素选择器放大每个段落中第一个单词的第一个字母，而其他字母保持不变。
- CSS 属性：此选择器根据应用于元素的属性或特定的属性值进行工作。例如，您可以使用 CSS 属性选择器将所有 HTML 按钮格式化为包含属性值“submit”的绿色背景颜色。这会将绿色背景颜色应用于属性值设置为提交的按钮。
整理 CSS 样式表
本节将创建一个简单的 CSS 样式文档，通过定义以下样式规则来执行简单的样式设置。
- 根据类中心来居中文本： 此规则将使文本居中并将文本颜色更改为红色。
- 根据元素 ID 格式化文本： 我们将为 id 标题创建一个样式规则，将颜色更改为橙色，使字体粗细变为粗体，并将文本大小写更改为大写。
- 根据标题元素编号 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 {…} – 定义一个类规则中心，将文本对齐在中心并改变字体颜色。
- #title {…} – 定义一个标题规则，改变字体颜色，将所有字母转换为大写，并将字体粗细更改为粗体。
- h2 {…} – 定义将应用于所有 h3 元素的规则。字体大小将设置为 60 像素，字体颜色将更新为蓝色。
下载/安装 Bootstrap
Bootstrap 是一个 CSS 框架，它带有大量样式，您可以立即开始使用。它包含布局和格式化元素的样式。
您可以编写 CSS 样式来自定义 bootstrap CSS 框架的默认设置。为此，您可以下载 Bootstrap 您可以从官方网站直接获取，也可以从内容分发网络 (CDN) 将其包含在您的 HTML 文档中。
或者，你可以使用包管理工具（例如 Node Package Manager (NPM)）来安装 Bootstrap，但此版本适用于高级 Web 开发人员。要下载 Bootstrap，您可以点击此 链接在这里 并像其他 CSS 一样在你的项目中使用它 Java脚本文件。
当我们创建您的第一个网页时，我们将在下面的部分中学习如何使用它。
HTML 和 CSS 的作用
HTML 的作用是为网页提供结构。Web 浏览器使用此结构向用户显示可呈现的内容。其次，搜索引擎蜘蛛使用 HTML 结构来导航网页并对其进行索引。
CSS 的作用是为内容提供样式，使其在视觉上吸引用户。
了解常见的 HTML 术语
现在让我们看一下作为 Web 开发人员应该熟悉的一些常见 HTML 术语。
| S / N | 按揭年数 | 描述 |
|---|---|---|
| 1 | 元素 | 元素是用于定义网页特定结构和内容的关键字。例如，元素 H3 用于定义标题结构。元素的其他示例包括段落 (p)、锚点 (a) 和容器 (div) 等。 |
| 2 | 标签 | 标签是标记元素开始和结束的标签。标签包括尖括号中的元素关键字。例如，段落是一个段落标签，其中是开始标签，是结束标签。 |
| 3 | 属性 | 属性是元素的属性，用于提供补充信息。例如，我们可以使用 id 属性为元素赋予唯一名称。id 可以在 CSS 或 Java脚本。 |
| 4 | 超链接 | 超链接是一种可点击的链接，可打开新网页。您可以使用锚元素来创建它。 |
| 5 | 校长 | head标签包含对用户隐藏但对网络浏览器和搜索引擎有用的信息。 |
| 6 | Body | body 标签包含用户在网络浏览器中可见的信息。 |
| 7 | 页脚 | 页脚标签包含显示在网页页脚部分的信息。 |
| 8 | 评论 | 注释用于记录和解释 HTML 代码，浏览器在解析 HTML 文档时会忽略它们。 |
| 9 | DIV | Div 是一个用于创建布局的容器元素。 |
| 10 | 标题 | 标题标签用于创建 HTML 标题。 |
| 11 | 越线 | 此元素用于创建新的换行符。 |
| 12 | 链接 | 链接用于在 HTML 文档中包含其他文件，例如外部 CSS 文件。 |
| 13 | 元数据 | 元数据标签提供了有关网页的补充信息，这些信息对搜索引擎机器人最有用。 |
| 14 | 列表 | list 标签用于创建列表。列表可以是有序的，也可以是无序的。 |
| 15 | 段 | 段落元素用于以段落格式显示文本数据 |
| 16 | 表 | 此元素用于创建表格 |
| 17 | 称谓 | 正如标题所示，它是用来设置网页的标题。 |
| 18 | 表单 | 表单标签用于创建表单，我们可以使用它来获取用户输入。 |
| 19 | 脚本 | 脚本标签链接到外部 Java脚本或内联 JavaHTML 文档内的脚本代码。 |
| 20 | AJAX的 | AJAX 代表异步 Java脚本和 XML。这是一种用于更新网页某些部分而无需重新加载整个页面的技术。 |
了解常见的 CSS 术语
以下是一些您必须熟悉的常见 CSS 术语。
| S / N | 按揭年数 | 描述 |
|---|---|---|
| 1 | 选择 | 这是指负责选择我们想要格式化的 HTML 文档元素的 CSS。 |
| 2 | 查看房源 | 属性是指我们希望为其设置值的元素的属性。 |
| 3 | 理念 | 正如名称所示，我们将值分配给属性以用于样式目的。 |
| 4 | 评论 | 注释用于记录和解释 CSS 代码 |
| 5 | 规则集 | 指由选择器、声明括号、属性和相应值组成的完整 CSS 代码部分。 |
| 6 | 声明 | 这指的是 CSS 文档中的一行代码 |
| 7 | 声明块 | 这是指定义样式规则的 CSS 部分。它位于花括号内。 |
| 8 | 关键字 | 这是 CSS 中具有特殊含义的保留字。例如，单词 auto 具有特殊含义，因此是关键字 |
| 9 | 属性选择器 | 选择器根据属性值选择元素。 |
| 10 | 通用选择器 | 此选择器用于匹配给定上下文中的任何元素。上下文通常应用于列表等父元素，以便列表中的所有项目都可以从父元素继承样式 |
| 11 | ID 选择器 | 该选择器根据元素的 id 进行选择。 |
| 12 | 类选择器 | 该选择器根据类属性值或值进行选择。 |
| 13 | 元素类型选择器 | 该选择器基于 HTML 文档中使用的元素类型。 |
HTML 编辑器
HTML 编辑器是用于编写和编辑 HTML 代码的程序。您可以使用任何文本编辑器来编写 HTML 代码，但 HTML 编辑器带有许多内置功能，可让您轻松编写代码。
让我们来看看一些受欢迎的选择：
Visual Studio Code
Visual Studio Code 是一个由开发的跨平台代码编辑器 Microsoft。 您可以使用 Visual Studio Code 编辑多种语言的代码，包括 HTML、CSS、 Java脚本和 PHP。 Visual Studio Code 免费，运行于 Windows，Mac和Linux。
Sublime Text
Sublime Text 是一个跨平台的代码编辑器，也可以用来编写和编辑 HTML、CSS、 Java脚本和 PHP 代码。它是商业产品，您需要购买。您也可以在未注册模式下免费使用它。
Notepad++
Notepad++ 是一款轻量级的代码编辑器，也支持多种语言。与 Visual Studio Code 和 Sublime Text, Notepad++ 不跨平台。它仅适用于 Microsoft Windows 平台。
NetBeans IDE
NetBeans 是一个集成开发环境（IDE），它提供比常规代码编辑器更多的功能。 NetBeans 是免费且跨平台的。
建立您的第一个网页
现在让我们创建一个简单的网页。这里我们创建了一个简单的 HTML 文档，并使用以下代码应用了一些样式 Bootstrap CSS。我们还将有一个可点击的按钮，它将使用以下命令显示一条简单消息 Java脚本。
以下步骤可帮助您学习如何从头开始创建网站：
步骤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/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" 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>
说明：
- 定义文档类型。
- …定义包含用户不可见的元数据的 head 标签。
- 头部还包含一个脚本标签，其中包含 Java显示问候消息的脚本代码。
- 我们也在加载 Bootstrap 来自 CDN 网络的 CSS。
- …定义页面的内容：标题、段落和一个应用一些样式的按钮 Bootstrap CSS。
从头开始创建与使用内容管理系统
从头开始创建网站需要技能和适当的知识。它还会占用更多时间，也可能花费很多钱。
另一方面，您不需要成为一名熟练的程序员就可以使用 WordPress 等内容管理系统创建您的网站。内容管理系统类似于以下应用程序 Microsoft Word.
通过内容管理系统，您可以专注于创建页面、编写内容和发布内容，就像用文字创建文档并将其打印到打印机一样。
下表比较了两种流行的网站创建方法。
| S / N | 赞成/反对 | 从头开始创建 | 使用内容管理系统 |
|---|---|---|---|
| 1 | 时间 | 需要花费很多时间。 | 花费的时间很少。 不到 24 小时即可创建。 |
| 2 | 成本 | 雇用一名熟练的程序员可能会很昂贵。 | 您可以自己做或者雇人为您创建。 |
| 4 | 技能 | 需要有经验且熟练的程序员 | 所需技能较少。您需要具备计算机知识才能完成此操作。 |
| 5 | 安全性 | 黑客无法轻易找到代码中的弱点来利用。 | 黑客可以轻松找到代码中的弱点并加以利用。出于安全原因，定期更新非常重要。 |
| 6 | 速度 | 往往更快，因为只在运行时加载需要的功能。 | 往往会比较慢，因为内容管理系统是一种通用解决方案，可能会加载您不一定需要的功能。 |
| 7 | 维护 | 易于维护，因为仅在需要时进行更新 | 需要做更多的工作，因为出于安全原因，您必须定期更新 CMS。 |
| 8 | 搜索引擎优化 (SEO) | 需要做更多工作，并且需要提醒程序员，因为大多数程序员都不是 SEO 专家 | 大多数内容管理系统都附带现成的 SEO 工具。可以使用插件轻松添加额外功能。 |
使用框架（PHP MVC 框架）
在本节中，我们将了解如何从头开始创建网站。每个网站都必须使用前端技术，例如超文本标记语言 (HTML)， Java脚本和层叠样式表 (CSS)。
后端有更多编程语言选项。您可以使用 PHP， Python, 红宝石, Java脚本等，其中最常见的就是PHP，本节我们就来聊一聊PHP技术。
您可以使用 PHP，因为它是一个缓慢的过程，因此即使是从头开始创建网站的程序员也需要使用开发框架。最流行的是模型-视图-控制器 (MVC) 框架。PHP MVC 框架的示例包括 Laravel、CodeIgniter、Cake PHP、Symfony 等。
MVC 框架提供以下功能：
- 与库的内置数据库连接： 这节省了您编写代码以安全地连接数据库来写入和检索数据的时间。
- 内置身份验证模块： 这节省了您编写需要用户登录和退出网站的代码的时间。
- 结构化代码： MVC 设计模式将业务逻辑与表示分离。这样可以轻松找到负责后端开发的程序员和负责前端开发的网页设计师。
- 包： 这些是执行非常特定任务的库的集合。例如，您可以使用或下载包来添加以下功能：
- 为你的网站添加 Disqus 评论功能
- 调用 API
- 集成支付网关。
您可以使用 MVC 框架来加快开发时间。您还可以使用 HTML 模板来加快前端的开发速度，方法是使用开源 HTML 模板。您还可以购买商业 HTML 模板，然后根据您的要求进行自定义。一些 HTML 模板制作者甚至创建特定的 MVC 框架 HTML 模板。
例如，您可以购买使用 blade 模板（Laravel MVC 框架内置的模板引擎）的 HTML 模板。
使用内容管理系统 (WordPress) 创建网站
在本节中，我们将介绍如何使用 WordPress 创建网站：
下载 WordPress
如果您有 Web 服务器并安装了 PHP，则可以从官方网站下载 WordPress 并在本地计算机上运行。但是，如果您已经有托管帐户，则可以直接从 cPanel 安装 WordPress。
WordPress入门
安装 WordPress 后，您可以开始创建您的网站。
虚拟主机：
在开始之前，你需要有一个 域名和网络托管 帐户。网站托管帐户应安装 PHP，并且 MySQL 作为数据库引擎。您可以使用 Bluehost、Godaddy，或者您可以使用WP Engine 进行托管，该公司专门提供托管型 WordPress 主机。
安装：
大多数网络托管服务提供商在管理面板中都有特殊脚本，允许您安装 WordPress。如果您的托管服务提供商使用 cPanel，那么您应该能够通过单击 WordPress 图标来安装 WordPress，如下图所示：
一旦您选择了上述选项，您将看到 Windows 以下内容以完成安装。
设置：
设置部分允许您配置站点名称、URL 永久链接、时区、是否有人可以在您的站点上注册等内容。
模板：
模板让我们看到我们的网站是什么样子。WordPress 附带免费的内置模板，您可以立即使用。您还可以下载其他人创建的模板。除了免费模板，您还可以从 ThemeForest 等市场购买高级模板。
外挂程式：
插件可让您扩展 WordPress 的功能。例如，您可以使用插件让客户从您的网站通过 PayPal 向您付款。您还可以使用插件强制用户使用安全连接 (HTTPS) 或生成站点地图。
网站建设者：
网站构建器具有许多功能，可使用拖放方法轻松创建网站。网站构建器通常作为插件安装，并附带您可以使用的模板。
让我们来看看一些最受欢迎的网站创建器：
Astra
Astra 是一款快速、轻量且高度可定制的 WordPress 主题。它附带入门模板，您可以使用它们快速创建网站。它有免费和高级入门模板。
元素：
Elementor 是一款拖放式 WordPress 网站构建器，有超过 5 万用户在使用。Elementor 提供免费和付费功能。
海狸建造者：
Beaver Builder 是一款易于使用的拖放式 WordPress 网站构建器，可让您快速创建具有专业外观的网站。
WordPress替代品
WordPress 并不是唯一可用于构建网站的内容管理系统。您还可以查看其他替代方案，例如
- 乔姆拉： Joomla 是一个开源内容管理系统，可用于发布内容、讨论论坛、电子商务应用程序等。它使用 PHP 作为编程语言， MySQL 作为数据库引擎。
- Drupal： 它是一个 Web 内容管理系统，可以创建个人博客、公司网站或用于业务协作的知识管理。Drupal 是用 PHP 编写的， Java脚本。
- 修改版本： 它是一个用 PHP 编写的开源内容管理系统。并使用 MySQL 作为数据库引擎。它既可用于 Web，也可用于 Intranet。
- 恒联：这是一个提供拖放功能的网站创建器。它可用于创建基本网站和电子商务商店。
结语
- 网站是使用计算机代码创建的。
- 计算机代码是人类可读的指令，指示计算机执行特定任务。
- 可以从头开始创建网站，也可以使用现有平台（例如 WordPress）。
- 与使用平台创建网站相比，从头开始创建网站需要更多时间。
- 与使用现有平台相比，从头开始创建网站更加灵活。
- 用于创建网站的编程语言是 HTML、CSS、 Java脚本和后端的脚本语言，例如 PHP， Python, 红宝石等
- WordPress 是一个内容管理系统，可以用来快速创建网站。
- WordPress 支持 Astra、Elementor 或 Beaver Builder 等插件，提供拖放式网站设计功能。
- 可以使用 Laravel 或 CodeIgniter 等 MVC 框架来加快从头开始开发网站的速度。
