前端简介

咪库咪库咪
75 阅读15分钟

引入

浏览器是如何工作的

到目前为止，我们了解了客户端和服务器之间是如何处理一次请求与响应的。但实际上，我们的设备通常并不只是发送一次请求。每当我们加载一个网页时，设备会为构成该网页的每个文件分别发送请求。也就是说，即使我们只加载一个网页，该网页也可能会发出多个请求来获取不同的内容，例如图片。

那么，当我们同时发送多个请求时，这个过程是如何运作的呢？

以下这些步骤，都会在短短一瞬间完成：

  • 当用户输入一个网址并按下回车，服务器会处理该请求，并将 HTML 文件发送回客户端。HTML 文件包含了网页的主要内容，同时也包含了展示网页所需的其他资源或代码的链接。

  • 浏览器开始解析 HTML 文件中的元素，并为文件中引用的外部资源发起额外的 HTTP 请求。这些资源通常包括：

  • 一个或多个 CSS 样式表。CSS（层叠样式表）负责网页的样式和布局。浏览器会请求 CSS 文件，当服务器返回该文件后，浏览器会分析并将样式应用到页面内容上。

  • 网站的媒体资源，如图片和视频。这些资产也会通过请求-响应的方式从服务器传送到浏览器。如果这些文件较大，浏览器在渲染它们时可能会有明显的延迟。

  • 一个或多个 JavaScript 文件。JavaScript 让网页具有交互性，是网页“行为”的编程语言。如果一个网页不使用 JavaScript，那么它就是一个静态网页。

在大多数现代浏览器中，这些额外的请求是**并行（parallel）**发出的，也就是说它们是同时开始的，浏览器不会等待一个资源加载完成后再去请求下一个资源。

所有的资源通常会尽快显示出来。即使某些资源还没收到，HTML 内容也会先被显示出来。

最终，用户就可以开始与他们请求访问的网站进行交互了。整个过程通常在一秒钟或更短时间内完成，具体取决于用户的网络速度、网页的大小，甚至浏览器与服务器之间的物理距离。

web2.0

在我们了解了互联网的基本工作原理之后，让我们来看看一些促成现代网页开发和现代 JavaScript兴起的重要趋势。

最早的网页是由文本、图片和链接组成的静态页面，几乎没有互动性，用户只能从一个页面跳转到另一个页面浏览。这类网站被称为静态网站（static websites） ，意思是“缺乏动态变化”的网页，因为它们不会根据用户行为而改变内容。随着网络连接速度的提升以及网页技术的发展，网页上可以实现更复杂的交互功能。

在 2000 年代初期，一系列技术进步催生出了一批网页应用程序，被统称为 Web 2.0。
与早期的静态网站相比，Web 2.0 应用的特点包括：

  • 提供动态用户体验：
    Web 2.0 网站可以在不刷新整个页面的情况下，动态地响应用户输入并更新页面的某些部分。早期的网页在用户提交内容后，通常会跳转到新页面并重新加载。而 Web 2.0 只更新页面的部分内容，大大减少了加载等待和打断。
  • 强调用户生成内容（UGC）和社交分享：
    在早期网页中，内容大多由网站单方面提供。而 Web 2.0 的兴起带来了博客、社交媒体、Wiki 等平台，使得用户自己也可以创建内容，并与他人分享。

实现这些用户体验提升的背后，是一些关键的技术进步，例如：

  • jQuery：第一个能够在网页运行时从服务器获取数据的 JavaScript 框架，让网页具有异步请求功能。
  • 数据库连接的网页框架：如 Spring、Django 和 Ruby on Rails 等后端框架的出现，使得用户生成的内容可以被有效地创建、存储并展示出来。

这些技术的出现，极大地推动了互联网从“只读”向“读写互动”的转变，奠定了现代 Web 开发的基础。

image.png

当前互联网趋势

互联网连接智能手机的兴起深刻地改变了用户与互联网的互动方式。如今，移动互联网流量占所有互联网流量的比例已超过一半，因此网页开发实践已经发展，以确保无论设备类型如何，都能提供良好的用户体验。

响应式网页设计

响应式网页设计的兴起改变了网站的构建方式。响应式网页设计通过 CSS 语言的扩展实现，如媒体查询（media queries）和相对单位（relative units）。这些扩展使得网站的展示能够根据显示窗口的大小进行调整。

移动应用和设备

互联网连接的移动应用程序改变了我们对互联网浏览的看法。在智能手机上访问互联网的用户，通常会花费更多时间使用特定的应用程序，而不是使用手机浏览器。

尽管大多数移动应用程序都连接到互联网，但它们并不属于万维网。万维网是通过链接构建的，而移动应用则旨在保持用户的注意力。

如果你想了解移动开发，网页开发是一个很好的起点！虽然大多数移动应用程序是用编程语言（如 iOS 的 Swift）构建的，但越来越多的开发者使用 JavaScript 框架来构建新的应用程序。

html

掌握网页开发技能能够让你将自己的大创意实现出来——无论是一个简单的网站、一个复杂的 web 应用程序，还是甚至一个浏览器游戏——都能在网络上构建出来！

认识一下 Alejandra！她是一名新兴的网页开发者，经营着一家小型旅行社。Alejandra 主要通过口碑来获取客户，但现在她准备通过建立一个网站来扩展她的业务。

在本课中，我们将跟随 Alejandra 学习网页开发的新语言，并看到每一种新技能如何帮助她为自己的网站构建不同的功能。

Alejandra 需要学习的四种主要语言包括：

  • HTML — 结构化网站内容
  • CSS — 为网站应用样式
  • JavaScript — 为网站增加互动性
  • SQL — 让 web 应用程序存储和检索数据

我们将跟随 Alejandra 学习这些语言，从 HTML 开始。

什么是html

Alejandra 知道，构建网站的第一步是学习 HTML。为什么？因为 HTML 是所有网页的骨架。它为网站上的内容提供结构，包括文本、图像、按钮、视频等等。

HTML 是学习编程的一个实用起点。学习一点 HTML 后，你就可以构建基本的网站，包含文本、图像和视频。你可以随时在浏览器中打开你正在进行中的网站，查看你所构建的内容。

HTML 代表超文本标记语言。在接下来的几个练习中，我们将逐个词解析 HTML 这个缩写，深入了解它的真正含义。

html标记

HTML 中的 ML 代表标记语言（Markup Language）。标记是指一种对文本进行注释的方式，这种注释与文本本身区分开来。就像老师可能会通过使用红笔“标记”学生的作文，在主题句下划线并圈出拼写错误，HTML 也通过注释网页中的内容。

老师可能会使用红笔来确保他们的评论与学生的作品区分开来。HTML 通过使用 HTML 标签来区分内容和注释，标签由尖括号（也称为小于号和大于号）表示。

image.png

html元素

HTML 标签是 HTML 的“标记”。它们是注释，用于提供有关它们所包含内容类型的信息。让我们仔细看看 HTML 标签如何围绕内容来创建 HTML 元素的语法。

该图展示了一个 HTML 段落元素。如我们所见，段落元素由一个开始标签（<p>），内容（“Hello World!”文本）和一个结束标签（</p>）组成。

让我们快速回顾一下图中每个部分的含义：

  • HTML 元素 — 在 HTML 文档中，由 HTML 标签和它所包含的文本或媒体构成的内容单元。
  • 开始标签 — 用于启动 HTML 元素的元素名称。标签类型被开口和闭口尖括号括起来。
  • 内容 — 位于 HTML 元素的开始和结束标签之间的信息（文本或其他元素）。
  • 结束标签 — 用于结束 HTML 元素的第二个 HTML 标签。结束标签内含有一个正斜杠（/），紧跟在左尖括号后面。

image.png

超文本和万维网

HTML 中的 H 和 T 代表超文本（Hypertext）。超文本是指与其他文本相链接的文本。这个图示展示了通过链接相互连接的不同网站，链接用箭头表示。

超文本有什么特别之处？前缀“hyper”表示文本超越了传统书写的限制。与从头到尾阅读一本书不同，通过超文本，用户可以浏览。通过点击从一个文档到另一个文档的链接，用户可以导航到他们觉得最有趣的页面，从而在网络中走出一条独特的路径。

许多现代网站提供丰富的用户体验，具有嵌入视频、动画和交互功能，因此不会仅仅感觉是在从一个 HTML 页面浏览到下一个页面。但尽管随着网络的增长发生了许多进步，网络的核心本质仍然是由相互链接的文档组成。

image.png

超链接

让我们通过向一个基本网站添加链接来探索超文本的工作原理！

阅读和修改代码是学习如何为网络构建内容的一个基本步骤。在你从头开始构建网站时，这个练习将帮助你走得更远。

HTML 中的属性提供了关于 HTML 元素的附加信息。它以“名称=值”的结构成对出现。例如，你可以通过属性 width="500" 来指定 HTML 元素的宽度。

链接是通过 HTML 中的 href 属性创建的，href 代表超链接参考。href 属性允许我们指定链接应带用户跳转到的 URL 或网站地址。以下是 href 属性的示例：

当我们在锚标签（简称 <a>）上设置 href 属性时，我们可以指定应该呈现给用户的文本（锚标签内的文本）以及浏览器应导航到的 URL。

使用此代码时，我们将 www.codecademy.com 的值赋给 href 属性。当用户点击这个链接文本（“Learn to code!”）时，他们将被引导到 www.codecademy.com 网站。

<a href="www.codecademy.com">Learn to code!</a>

<a href="/resume.html">25 years of experience</a>

这个 URL 被称为相对路径，它与我们通常看到的完整 URL 看起来略有不同。原因是它实际上是指向同一网站上的另一页面，因此我们可以省略掉第一部分。我们可以将链接简化为 /resume.html，而不是 www.jetsetter.com/resume.html。

CSS

什么是CSS

仅使用 HTML，Alejandra 就已经构建出了一个包含所有她想要展示内容的网站。但它看起来并不太吸引人 —— Alejandra 知道，一个简单的黑白网站无法让她的生意获得足够的可信度，也无法吸引新客户。

这正是 CSS 派上用场的地方！CSS 是为 HTML 页面内容提供样式的语言。这包括颜色、字体、定位、布局等内容！

那为什么我们需要将内容和表现分成两种语言呢？这是计算机科学中一个叫做“关注点分离（Separation of Concerns）”的原则的一个例子。大型代码库在每个部分专注于解决明确的问题时，更容易维护。

由于样式规则是与内容本身分开描述的，所以如果 Alejandra 添加更多的段落、图片或其他形式的内容，这些新内容也会被应用相同的样式。这将在长期内为 Alejandra 节省大量时间，尤其是当她的网站变得越来越复杂时。

image.png

应用CSS

Alejandra 已经学会了 CSS，并创建了她想要的视觉规则，让她的网站看起来时尚又精致。

现在，请打开 style.css 文件，看看她编写的 CSS 代码。

在这个文件中，你会认出许多你已经用过的 HTML 标签 —— 也许还有一些你还没见过的！CSS 使用选择器（selectors）来指定应该应用样式的 HTML 元素，同时通过视觉规则（visual rules）来指定这些内容应该如何显示。

现在是时候使用 HTML 的 <link> 元素将 CSS 文件应用到她现有的网站了。这通过 HTML 的 <link> 标签来完成。HTML 的 <link> 标签通常用于在 HTML 文件和 CSS 文件之间建立连接，并告诉浏览器将这些 CSS 样式应用到 HTML 上。

<link rel="stylesheet" href="style.css">

JavaScript

什么是JavaScript

现在 Alejandra 的网站已经变得更加精美，但她意识到自己还希望网站能够更具交互性。她想要添加一个购物车功能，让用户可以直接在网站上购买旅游套餐。

为了实现这个功能，Alejandra 需要学习 JavaScript。任何提供的不仅仅是静态信息的网站，几乎都在某种程度上使用了 JavaScript。以下是一些常见的、通常由 JavaScript 构建的网站功能示例：

  • 弹出广告
  • 动画图形（2D 或 3D）
  • 交互式音频和视频
  • 使用者定位的地图和其他功能
  • 以及更多！

JavaScript 的一个核心特性是它能够对浏览器事件作出响应。这些事件实时发生，并可以由多种用户交互行为触发，包括：

  • 用户点击按钮
  • 用户按下键盘上的回车键
  • 视频文件加载完成
  • 用户调整浏览器窗口大小
  • 用户将鼠标悬停在网页上的某段文字上

JS函数

在上一个练习中，你已经开始了解 JavaScript 的两个关键构建模块：函数 和 事件。我们来回顾一下：

  • 函数 允许我们编写一段代码一次，并可以重复使用多次。
  • 事件 使 JavaScript 能够响应用户的行为，比如用户将鼠标悬停在某个 HTML 元素上，或者调整浏览器窗口大小。

事件和函数的结合 赋予了 JavaScript 创建交互式体验的能力。当一个事件被触发时，一个函数就会被执行。这个模式在网页开发中被反复使用，用于构建各种交互性的网站。

首先，让我们来看一下 index.html 文件中的 JavaScript 代码。

  <script>
    function getRandomColor(){
      let letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
    function changeColor(){
      let newColor = getRandomColor();
      document.body.style.backgroundColor = newColor;
    }
</script>

JavaScript 代码写在 <script> 标签之间。这个标签会提醒浏览器该页面包含 JavaScript，并且用于将 JavaScript 代码与 HTML 内容分隔开。

找到 JavaScript 函数 changeColor()。这个函数会从一组颜色中选择一个颜色。

那这是怎么实现的呢？

首先，getRandomColor() 函数会生成一串随机的数字和字母，用来创建一个新的十六进制颜色代码。

它会将这个新颜色保存在名为 newColor 的变量中：

let newColor = getRandomColor();

接下来的这行代码使用 document 关键字访问网页的背景颜色，并将其设置为这个新的颜色值：

document.body.style.backgroundColor = newColor;

下一步是将 changeColor() 这个 JavaScript 函数和一个事件关联起来，这样当我们点击“Repaint!”按钮时，背景颜色就会发生变化。

事件是在浏览器中可能发生的动作，比如点击鼠标或悬停。

HTML 属性可以用来设置事件，其中属性名是事件类型，而属性值是我们希望执行的 JavaScript 函数。

在这个例子中，事件名是 onclick，我们可以通过调用 changeColor() 来触发这个函数。

<body>
  <button onclick="changeColor()">Repaint!</button>
</body>

这样当我们点击按钮时，背景颜色就会随机变化

SQL

什么是SQL

现在 Alejandra 已经为她的网站构建好了面向用户的结账功能，她意识到她需要一个地方来存储所有这些信息！她需要她的应用程序能够存储、检索和修改诸如用户名、收货地址、支付信息等数据。

为了实现这些功能，Alejandra 需要学习一些 SQL，它的全称是结构化查询语言（Structured Query Language）。你可能听说过 SQL，它是数据分析师和数据科学家用来查询和分析数据的一种语言。

SQL 以“表格”的形式存储信息，这些表格本质上就是按“行”和“列”组织起来的信息集合。如果你用过 Microsoft Excel 或 Google 表格这类电子表格软件，你可能已经对表格的工作方式有所了解。要从表格中获取信息，你需要编写一个“查询”，也就是一个可以从表中检索数据的程序。

下面是一个查询的例子，它会从名为 page_views 的表中选出所有的列（* 关键字是“全部”的简写）：

sql
复制编辑
SELECT * FROM page_views;

Web 开发者和软件工程师也会使用 SQL 来构建可以保存、修改和访问数据的应用程序。现在还有一个不断发展的新领域叫做“数据工程”，这是一种软件工程的专业分支，专注于确保应用程序能够准确、高效地记录所有所需的数据。

avatar
文章
阅读
粉丝