我的博客，不一样的自我表达

在不断发展的网页设计和用户体验领域，增强网站性能的一种简单而有效的技术是实施预加载器。它不仅可以通过在加载期间提供视觉反馈来改善用户体验，而且还可以对网站的 SEO（搜索引擎优化）做出积极贡献。在本文中，我们将探讨预加载的重要性、它如何影响 SEO，以及如何为您的网站实现引人注目的预加载器。1.增强用户体验：用户喜欢快速无缝加载的网站。预加载器为他们提供视觉反馈，表明内容正在传输中。它有助于管理用户期望，减少对网站加载缓慢的印象。2.降低跳出率：加载缓慢的网站通常会导致高跳出率。

上面的页脚看起来不错，唯一的区别是 facebook、twitter 等社交图标的显示。向 FontAwesome 图标添加样式：将图标的字体大小设置为 3em，下边距为 1em，并将它们显示为块。添加以上两种样式后，图标现在将水平排列并位于版权 div 的中心。我们将在页脚的不同位置使用很棒的字体图标。将列表项设置为显示为内联块，以便图标可以水平显示而不是垂直显示。因此，我们已经完成了网站除页脚之外的所有部分的构建。将三列对齐为一行：将三列全部向左浮动，并为每一列指定 320px 的宽度。

设置列标题的样式：下一个要做的事情是设置图像下方的列标题的样式。添加布局的基本样式：首先，将溢出设置为隐藏，并添加所有所需的边距和填充。接下来是在该部分的顶部提供 1 像素的细边框，以将其与上一个部分分开，并将其中的所有文本对齐到中心。在上一篇文章中，我们已经看到了3 栏布局并完成了主要内容的第 2 部分。如果您仔细观察上图，可以发现网站的第 3 部分与第 2 部分几乎相同。现在在浏览器中运行index.html文件，您将能够看到第3 部分的内容，其顺序与添加CSS 之前第2 部分的内容一样。

添加布局的基本样式：首先，将溢出设置为隐藏，并添加所有所需的边距和填充。接下来是在该部分的顶部提供 1 像素的细边框，以将其与上一个部分分开，并将其中的所有文本对齐到中心。设置列标题的样式：接下来要做的好事情是设置列标题的样式。在父行 div 中声明三个 div 来包含三列，并将它们的 id 分别指定为column1、column2 和column3。在第一部分文章中，我们开始构建网站的主要部分并完成了第一部分。将光标属性设置为指针，以便每当用户将鼠标悬停在按钮上时，鼠标指针都会变成代表指针的漂亮手形。

我们刚刚完成了网站标题的构建。让我们开始构建网站的主要内容。在这篇文章中，我们将构建主布局的第 1 部分。主布局的第 1 部分在下图中突出显示：让我们记下第 1 部分的内容和一些对设计有用的属性：标题：它包含一个标题“欢迎来到我们的网站”，与中心对齐。示例文本：它有一个示例文本，或者我们可以说标题正下方的一个段落，该段落也与中心对齐。让我们开始为我们网站的第 1 部分编写 HTML，请按照以下步骤操作：为节标记提供类容器，将其宽度固定为 1200px 并将其子项对齐到中心。

到目前为止，我们已经为网站的标题创建了导航栏。完成标题的下一步是包含图像和图像上方的文本，如下面的屏幕截图所示：让我们再次看一下index.html 文件中标头的代码部分。要完成图像菜单，我们首先需要在 id 为“header-image-menu”的 div 标签内添加图像和文本，如上面的代码所示。添加图像：单击此处下载给定的图像。将其添加到项目的图像文件夹中。将其包含在id = “header-image-menu” 的div 中。添加文本：在。

正如您在上面的 CSS 中看到的，我们已经为项目所需的几乎每个有用的 HTML 元素设置了默认值。我们稍后将设计导航栏，但首先创建一个名为“ style.css ”的文件并将其添加到文件夹“ example project/css ”。也就是说，我们刚刚创建了导航栏的结构，为了使其看起来美观，我们必须使用CSS添加样式。在导航菜单部分添加一个无序列表，其中包含 5 个列表项，名称分别为“首页”、“关于我们”、“我们的产品”、“职业”和“联系我们”。因此，我们首先要创建的是网页标题中的导航菜单。

HTML5 是 HTML 脚本语言的第五个版本。它支持许多旧版本的 HTML 不支持的新功能。例如：在 HTML5 中，有一个新的东西称为语义元素。语义元素具有有意义的名称，可以说明内容的类型。例如页眉、页脚、表格……等。HTML5 引入了许多如下所述的语义元素，这些元素使代码更易于开发人员编写和理解，并指示浏览器如何处理它们。现在让我们开始实际编码我们的网站。删除index.html中的所有内容，仅保留标准 HTML 结构。

我们已经学习了很多关于 HTML 的知识。我们知道：HTML 页面的结构。什么是标签和元素？关于一些最常用的基本标签的详细解释。创建了我们的第一个网页来打印“Hello World！” 不同尺寸。先决条件：在开始项目之前，我们首先需要下载一个合适的代码编辑器来编写我们的代码。下面列出了一些流行的 HTML 文本编辑器：VS代码记事本记事本++崇高文本3原子现在让我们从我们在本课程介绍中看到的项目开始。第一步是创建目录。

列表是简短信息的记录，例如人名，通常在每行上书写或打印一个内容，并以易于查找特定内容的方式进行排序。例如：购物清单待办事项清单HTML 中的列表HTML 提供了三种指定信息列表的方法。所有列表必须包含一个或多个列表元素。HTML 中可以使用的列表类型有：ul ：无序列表。这将使用普通项目符号列出项目。ol ：有序列表。这将使用不同的数字方案来列出您的项目。dl ：定义列表。这会按照与字典中排列项目相同的方式排列您的项目。

到目前为止，我们已经了解了 HTML 文档的结构、标签等。让我们使用这些知识来创建我们的第一个网页，该网页将打印文本“ Hello World！” 屏幕上。打开文本编辑器，然后在其中键入以下代码并将其保存为名称“index.html”。

众所周知，HTML 是一种网络语言。它用于设计网页，或者我们可以说构建网站的页面布局。HTML 代表超文本标记语言，因为它的完整形式表明它不是任何编程语言，而是一种标记语言。因此，在执行 HTML 代码时我们不会遇到任何此类错误。实际上，HTML 代码不会被编译或解释，因为 HTML 代码是由浏览器呈现的。这类似于程序的编译。Html内容通过浏览器进行解析，显示HTML内容。

这是 HTML 和 CSS 的入门课程，它将帮助您了解 Web 开发所需的所有 HTML 和 CSS 基础知识。