编程技术

Document

网站开发：初学者深入指南

作为SEO专家，至少要对网站开发有基本的了解

为什么？因为相关的知识和技能可以为您的网站和品牌取得更大的成功奠定基础。

在本指南中，我将介绍它是什么以及不同类型的 Web 开发，并仔细研究 HTML——在探索 Web 开发和 SEO 如何协同工作之前。

什么是网站开发？

Web 开发是使用 HTML、PHP 和 JavaScript 等技术以及内容管理系统 （CMS） 创建和维护网站的过程。

不要与网页设计混淆，网页开发涉及网站的技术方面。网页设计关注网站的外观和感觉。

了解 Web 代码的工作原理很有帮助。

但是像 WordPress 和 Wix 这样的现代 CMS 已经让没有编码背景的人能够进行 Web 开发。

尽管如此，至少了解 Web 技术的基础知识仍然很有用，因为它将帮助开发人员解决问题或创建自定义解决方案。

Web 开发很重要，因为它通过创建高性能的在线体验对收入产生直接影响。

Web 开发与网页设计的区别

网页设计通常被认为专注于网站的外观以及用户如何与网站互动。

Web 开发描述了创建网站的技术工作。

虽然这两个学科之间可能存在交叉，因为网页设计师可能具有开发技能，反之亦然，但两者是不同的学科。

Web开发的两类

Web开发有多种类型。但它们都分为两类：

  • 前端开发
  • 后端开发

前端 Web 开发

前端 Web 开发对应于为创建网站访问者通过其浏览器体验的所有内容所做的工作。

从技术上讲，Web 浏览器被称为客户端，它是运行网站代码的设备。

因此，前端开发也称为客户端开发。

（注意：客户端通常是从服务器请求网页的任何内容，例如屏幕阅读器、机器人等）

HTML、CSS 和 JavaScript 知识是前端 Web 开发的基础。

后端 Web 开发

后端 Web 开发是指在服务器上运行的网站代码，包括脚本语言和 Web 框架。

后端开发也称为服务器端开发，因为它包含后台在服务器上运行的内容。

一个例子是 PHP，它使 Web 服务器能够从数据库中获取各个网页元素。

PHP、JavaScript 和 Python 等编程和脚本语言通常是后端开发的一部分。

HTML 是网站的编码语言

网站最基本的构建块是 HTML。这是一种向机器传达网页应该是什么样子的方式。

HTML 是一种规则相对简单的编码语言。

如果您曾经玩过大富翁、国际象棋或跳棋等棋盘游戏，那么您已经熟悉了游戏是如何用规则和棋子玩的。

HTML 几乎就像一个游戏。这些部分是各种 HTML 元素及其属性——规则是它们的使用方式。

这些规则允许用户创建浏览器可以为网站访问者呈现的网页。

HTML的含义

HTML 代表超文本标记语言。

了解 HTML 的基础知识对于 Web 开发和几乎所有使用网站的人都很重要。

超文本

超文本只是链接的一个花哨的词。

在 1990 年代，超文本这个词很重要，因为它描述了一种创建自组织全球信息网络的方法。

超文本将网站内的连接网页链接起来，也将连接的网站链接到其他网站，从而创建一个像蜘蛛网一样连接在一起的庞大信息网络。

蜘蛛网的比喻是由互联网的发明者蒂姆·伯纳斯-李（Tim Berners-Lee）创造的。这就是为什么网页、网站和搜索引擎蜘蛛如此命名的原因。

标记语言

标记语言是一种结构化的方式，用于传达有关网页格式化以及共同构成整个网页的各个部分的信息。

因此，综上所述，超文本标记语言（HTML）是一个基于链接的系统，用于创建连接到其他网页和网站的网页和网站。

HTML 网页的组件

HTML 由称为元素的构建块组成。

可以使用属性修改元素。

某些元素是网页的主要部分。

把这些主要部分想象成游戏板本身，所有的动作都发生在棋盘上。

网页的主要部分

<HTML>

告诉浏览器这是一个 HTML 页面。

此元素包含整个网页。

<HEAD>

此部分是元数据的位置。

元数据是在网页上不可见的信息，适用于浏览器和搜索引擎。

元数据的一个示例是元描述元素，它提供搜索引擎在其搜索结果中使用的网页的描述。

除其他外，本节还包含指向构建站点可见部分所需的资源的链接。

<BODY>

<BODY> 是网页的可见部分。它总是在<HEAD>部分之后继续。

主要元素具有开始和结束“标签”，用于显示元素的开始和结束位置。

开始标记如下所示：

<example>

结束标记如下所示：

</example>

以下是网页的宏观大纲：

<HTML>
     <HEAD>
     </HEAD>
           <BODY>
           </BODY>
</HTML>

在 <BODY> 元素中，是定义网页可见部分的所有其他元素，如段落、图像和链接。

属性以某种方式更改元素，有时是为了提供更多信息。

例如，图像元素 <IMG> 可以具有“alt”属性，该属性提供替代文本，该文本使用屏幕阅读器等辅助技术将图像内容传达给访问者。

段落元素可以具有“class”属性，该属性为段落中的单词添加格式，例如要使用的特殊字体大小。

深入探讨：元素和标签之间的区别

“element”和“tag”这两个词有时可以互换使用，但实际上有区别。

HTML 元素本身的代码片段称为标记，因为通常有一个开始标记和一个结束标记。例如，传达有关网页内容的信息的 TITLE 元素如下所示：

<TITLE>描述网页内容的词语</TITLE>

标题的 HTML 称为 TITLE 元素。

但是代码片段本身，<TITLE> 和 </TITLE> 被称为标记，在本例中为开始和结束标记。

标记命名元素以及该元素的开始和结束位置（对于需要开始和结束标记的元素）。

元素通常称为标签。但是，从技术上讲，HTML 元素被称为元素，而不是标签。

只有代码片段本身称为标记。

一清二楚？

关于标签和元素的进一步阅读

W3c.org 对 HTML 标记的历史引用在开始和结束标记本身的上下文中讨论标记，而不是与元素无关。

Mozilla开发者页面提供了标签的定义：

“在 HTML 中，标签用于创建元素。”

W3C 上关于元素的历史页面没有将元素称为标签。它仅在开始和结束标记的上下文中使用单词标记。

Mozilla开发者页面解释了为什么Elements不是标签：

“元素和标签不是一回事。

标签在源代码中开始或结束元素，而元素是 DOM 的一部分，DOM 是用于在浏览器中显示页面的文档模型。

在引用 HTML 元素时滥用单词标签似乎很小。但是，在 Web 开发中，通过使用正确的行话来精确地使用正确的行话是一种很好的做法，这样每个人都能理解引用任何内容时的含义。

CSS – 网站的样子

另一个基本的 Web 开发构建块是级联样式表 （CSS），它控制网页的外观。

CSS 文件包含样式信息，例如字体、边框大小和颜色。

在旧版本的 HTML 中，样式信息嵌入在 HTML 本身中。但随着 HTML 4 的发布，这种情况发生了变化，当时引入了样式表来将样式数据与内容相关数据分开。

CSS的创新意味着可以使用一个文件设置整个网站的样式。

Web 开发的类型

您可以使用 HTML 从头开始创建网页，但这对于每天发布网站来说很不方便。

这就是为什么创建网站最流行的方式是使用内容管理系统 （CMS）。

有开源内容管理系统和闭源版本。

开源 CMS 示例：

  • Drupal
  • Joomla
  • WordPress

闭源 CMS 示例：

  • Duda
  • Shopify
  • Squarespace
  • Wix

WordPress 和 Web 开发

WordPress 是创建任何网站的最流行方式，包括电子商务商店、新闻网站、有关主题的信息网站和本地商业网站。

使用 WordPress，您可以为网站的外观选择一个模板并开始发布。但是，要使模板看起来完全符合您的要求，需要进行一些模板编辑。

无需知道如何编写 HTML、CSS 或 PHP 代码即可编辑模板。

尽管 WordPress 被设计为易于使用，但事实是 Web 开发技能对于创建备用模板（称为“子模板”）和创建不属于模板的有用功能很有用。

这就是为什么存在第三方 WordPress 网站构建器的原因，以使使用 WordPress 创建网站变得更加容易。

闭源内容管理系统通常设计为易于使用，因此这些系统的 Web 开发问题较少。

Web 开发和 SEO 如何协同工作

Web 开发对 SEO 越来越重要。

页面速度直接或间接地影响网页搜索排名。

优化页面速度通常归结为了解 Web 开发的技术方面，这些方面会影响网页在浏览器中的呈现方式。

Chrome 用于调试网站性能的工具称为 Chrome 开发者工具（不是 Chrome SEO 工具）。

虽然一些 SEO 专业人士可能会尝试安装 WordPress 插件来规划更好的网站性能，但事实是 Web 开发技能对于故障排除和修复性能问题更有效。

Web 开发提供了扩展 SEO 必需品的解决方案，例如结构化数据、自动化元描述和优化代码以通过搜索引擎进行最佳网站抓取。

从前端到后端，Web 开发可以在正确搜索优化网站方面发挥重要作用。

网站开发是在线成功的关键

了解 Web 开发不仅仅是了解如何解决问题。

它也很有用，因为它使您能够首先实际识别问题，并且至少对解决方案有一个大致的了解。

即使只学习 Web 开发的基础知识，也将有助于培养更大的在线成功。