如何使用 HTML 和 CSS 创建网站

您想学习如何使用 HTML 和 CSS 设计网站吗？

如果是，那么您就来到了正确的网站。 本课程将教您如何使用 HTML 和 CSS 创建网站以及 Web 开发的要点。 此外，您还将了解将网站从空白页面转变为功能齐全、引人注目的杰作所需的一切。

让我们首先简要回顾一下 HTML 和 CSS。

• HTML：超文本标记语言 (HTML) 标准定义了网站的组件、内容和组织结构。
• CSS ：在创建指定网站元素如何美观地显示的样式表时，网页设计师会使用 CSS（层叠样式表），一种计算机语言。

由于网站的设计和感觉最终取决于创建页面的代码，因此缺一不可。

做好准备

因此，即使在使用 HTML 和 CSS 构建网站之前，您也需要一个 Web 服务器（托管）。 您可以在多家网络托管企业的服务器上购买简单的托管服务。

只需在 Google 中输入“最佳网络托管提供商”并选择价格合理的选项，您就可以找到“WebSpaceKit”并查看不同客户的评论。 拥有域名和服务器后，您可以将两者链接在一起。

使用 HTML 和 CSS 创建网站的步骤

以下分步过程将引导您完成使用 HTML 和 CSS 构建网站的过程。

第 1 步：掌握 HTML 基础知识

HTML 标签是 HTML 文档的基本构建块。

这是标签的示例：

这是我们现在正在处理的 <b> 标签。 起始标记 (<b>) 和结束标记 (</b>) 之间的任何文本都将以粗体显示。 在本例中，该文本是Hello，World！

不过，这里还是一些附加标签的示例：

或者，如果您想提供指向其他页面的链接，如下所示：

这是我们定价页面的链接。

下面是一段代码，可以让您做到这一点：

第 2 步：学习 HTML 文档的结构

基本的 HTML 文档结构如下：

上面的代码是有效的 HTML，因此将其复制并粘贴到新文件中并将其另存为 index.html。

让我们更详细地了解该代码的每个组件：

您可以将新的index.html 文件复制到Web 服务器的根目录并在浏览器中查看它。 不要太兴奋——这个页面会很糟糕（见下文）。

注意：使用 MS Word 等简单文本软件处理 HTML 文件是令人不愉快的。 安装 Sublime Text 以简化 HTML 编辑。 Mac 和 PC 版本都是免费的。

第 3 步：了解 CSS 选择器的基础知识

CSS 中的选择器很像 HTML 中的标签。 元素的视觉行为可以通过选择器来定义。 考虑一下 CSS 选择器的这种情况：

此选项为 HTML 文档内容内的所有 <p> 元素指定 18px 的字体大小。

虽然这是使用 CSS 选择器的一种方法，但更实用的选择是创建多个“类”，然后将它们专门应用于标签。

在 CSS 中，类选择器如下所示：

第 4 步：创建 CSS 样式表

HTML 文档中的每个元素都有一个位置，它们的排列会影响网页的结构和外观。 CSS 文档则不然。

样式表是 CSS 文件。 CSS 样式表列出了 HTML 文本中的所有类定义。 对于基本设计来说，类定义顺序通常并不重要。 如何构建 CSS 样式表定义每个类并评估网站设计。

这很乏味……对吧？ 我们将为您简化 HTML 和 CSS 设计。 我们不会从头开始，而是检查一个活的东西。

Bootstrap在这里有帮助……

第5步：安装引导程序

Bootstrap 是一个免费的 HTML/CSS 工具包。 Bootstrap 简化了 HTML 和 CSS 文档结构。 它提供了一个框架，可以优化您网站的开发核心结构。

Bootstrap 可让您直接进入令人兴奋的部分。 它跳过了网站创建过程中繁琐的 HTML 和 CSS 步骤。

有两种选择：

• 选择(a) ：通过从Bootstrap网页下载核心包并在其上进行开发来学习Bootstrap。
• 选择 (b) ：通过购买具有精美设计和示例网站的 Bootstrap 入门包来节省时间。

我们建议选择 (b)，原因有很多：

开始使用模板可以更轻松地理解 HTML 文档基础知识。 这使您可以专注于有趣的事情，例如内容布局和设计。

这样，您将学得更快并获得更好的结果。

第 6 步：选择设计

使用 HTML 和 CSS 的网站可以使用任何 Bootstrap 模板。 它们的功能应该类似。 本指南使用 Start Bootstrap 模板。 他们提供精心设计、优化且无故障的免费模板。

选择右侧的“免费下载”按钮可以将 zip 文件保存到您的桌面。 解压后，将包的内容传输到本地 Web 服务器或 Web 托管帐户的根目录。

在浏览器中启动网站。 这是模板的默认形式：

尽管它已经很有吸引力，但如果您了解 HTML 和 CSS，则可以更改它。

第 7 步：HTML 和 CSS 网站定制

首先，设计主页。 这将教我们如何改变视觉效果和文字，并调整一切。

我们在上面简要讨论了 HTML 文档头。 让我们深入挖掘一下。

在 Sublime Text 中，您的 Bootstrap 站点的 index.html 文件具有如下所示的 head 部分（为了清楚起见，我们删除了非必要的项目 *）：

其中一些声明是新的：

让我们简化最后的语句，它加载 CSS。 替换该行：

将加载未缩短的 CSS 表。 更改此版本更加简单。

滚动到index.html 的底部。 以下几行位于结束正文标记之前：

他们加载 JavaScript 文件来设计视觉交互。 JavaScript 允许顶部菜单中的“关于”链接轻松将您移至同一页面上的“关于”块。 我们现在可以忽略这段代码。 我们等等吧。

相反，让我们添加内容：

第 8 步：插入文本和图像

1. 更改页面标题：将 head 部分中标题标签之间的文本替换为您自己的文本：

2.自定义英雄部分：英雄部分是这个块：

我们自己的东西会很棒。 返回index.html并找到此部分以编辑此块：

此代码控制英雄内容。

我们已经知道的其他一些标签有许多 CSS 类。 学习所有这些科目比看起来更简单。 修改index.html默认文本很容易。 找到您想要更改的标签并更新开始标签和结束标签之间的内容。

您可以自由添加段落。 我们可以复制网站上的内容并在下面发布。

3. 自定义其他页面块： index.html 文件有几个部分。 导航、服务、产品组合、号召性用语、联系块和页脚位于一个块中。

各部分具有不同的材料，但结构相似。 它们共享 HTML 标签，但具有单独的 CSS 类。 浏览每个块并探索自定义页面。

您可以更改文本并重新排列部分（<section> 标记之间的部分）。 尽管您必须手动剪切和粘贴各个部分，但这很容易。 但是，我们还没有讨论两个简单的更改。 接下来，这些：

第9步：调整字体和颜色

在 HTML 和 CSS 中，更改颜色和字体很简单。 将内联样式分配给 HTML 元素是最简单的。 例如：

HTML 使用十六进制值来表示颜色。 “#FF0000”代表红色。

颜色最好使用 CSS 样式表来指定。 我们可以将其添加到 CSS 样式表中以获得与上面代码相​​同的效果：

要更改网站上任何文本的颜色，首先，确定为其设置样式的元素，然后转到样式表并调整或创建匹配的类。

首先，在更改 Bootstrap 模板的颜色或字体之前，检查 CSS 代码中可能已经提供替代尺寸或颜色的类。 如果可用，请使用它们。

第10步：添加更多页面

自定义主页后，开始添加页面并将其链接到该主页。 HTML 和 CSS 允许您连接任意数量的子页面。

网站通常需要联系页面、关于页面、隐私政策页面、作品集等页面……

我们要做的另一件事是在页面上添加一张图片。

HTML 图像标签如下所示：

容易，对吧？ 图片路径只是一个参数。 将您的图片添加到图像目录中进行组织。

创建页面后，从主页 (index.html) 连接它们。 此链接属于导航菜单（位于 <!– 导航 –> 下方）。

找到这一行：

我们将改变它：

HTML <a> 元素是一个链接标记。 它通过在 href 参数中指定其地址来链接到任何网页。 可点击的链接文本位于 <a></a> 元素之间。

当您重新加载主页时，您的新“关于”链接将会出现。

全做完了！ 你的网站现在棒极了……

如果您认为完成此任务对您来说太具有挑战性，我们的团队建议您使用 WordPress 设计一个网站，或者使用 MakeYourWP 等平台的现成网站之一！

如需更多更新，请继续关注网站学习者！

有关如何使用 HTML 和 CSS 创建网站的常见问题