Published

- 13 min read

[学习笔记]从零开始的前端学习笔记（1）

笔记 前端
Thumbnail

前端学习笔记：从零开始构建的第一个网页（1）

网页的本质：不仅仅是文本

首先，我们需要理解什么是网页。网页的本质是什么呢？简单来说，网页就是一个文本文件。我们可以通过一个简单的实验来理解这个概念。

  1. 在桌面新建一个文本文档，输入任意文字（例如“哔哩哔哩干杯”），然后保存。
  2. 我们可以使用浏览器打开这个文本文件。只需将文件拖拽到浏览器窗口即可。

你会发现，浏览器可以像打开普通网页一样打开这个文本文件。这说明，浏览器能够解析并显示文本文件的内容。但这并不意味着所有的文本文件都是网页，要成为一个真正的网页，我们还需要进行一些关键的步骤。

将文本文件转化为网页：两步走

第一步：修改文件扩展名

我们知道，不同的文件类型有不同的扩展名，例如 .txt 代表文本文件，.jpg 代表图片文件。要让浏览器将我们的文本文件识别为网页，我们需要将其扩展名修改为 .html 或 .htm。

  • 如果你看不到文件扩展名，可以在“我的电脑”中启用“文件扩展名”选项（Windows 10/11），或在“文件夹选项”中取消勾选“隐藏已知文件类型的扩展名”（Windows 7/8）。
  • 右键点击文件，选择“重命名”，将 .txt 改为 .html。

修改完成后，你会发现文件图标变成了浏览器图标，双击该文件，它将默认使用你的浏览器打开。

结论：浏览器会默认打开 HTML 或 HTM 后缀名的文件。

第二步：添加 HTML 标签

仅仅修改文件扩展名还不够，我们还需要在文件中添加一些特殊的标记，也就是 HTML 标签，来告诉浏览器如何展示内容。

  • 右键点击 .html 文件，选择“打开方式”，然后选择“记事本”。

现在，我们将添加一些基本的 HTML 标签：

<html>
<head>
  <title>这是我的第一个网页</title>
</head>
<body>
  哔哩哔哩干杯
</body>
</html>
  • <html> 和 </html>：定义了网页的开始和结束，所有网页内容都应该放在这对标签之间。
  • <head> 和 </head>：包含了网页的头部信息，例如标题。
  • <title> 和 </title>：定义了网页的标题，它会显示在浏览器的标签页上。
  • <body> 和 </body>：包含了网页的主体内容，也就是用户实际看到的内容。

保存文件，然后再次双击打开。你会发现，“哔哩哔哩干杯”显示在页面内容区域，而“这是我的第一个网页”则显示在浏览器的标签页上。

结论：浏览器会根据标签将网页内容进行不同形式的显示。

添加图片：让网页更生动

单纯的文字网页未免有些单调，我们来尝试添加一张图片。

  1. 从网页上保存一张图片到你的电脑桌面，例如哔哩哔哩的 logo。
  2. 在 <body> 标签中，添加一个 <img> 标签：
<html>
<head>
  <title>这是我的第一个网页</title>
</head>
<body>
  哔哩哔哩干杯
  <img src="logo.png">
</body>
</html>
  • <img>：是一个单标签，用于插入图片。
  • src：是 <img> 标签的一个属性，用于指定图片的路径。这里我们假设图片文件名为 logo.png，并且与 HTML 文件在同一个目录下。

保存并刷新网页，你会看到哔哩哔哩的 logo 图片出现在了页面上。

HTML：超文本标记语言

通过上面的实验，我们对 HTML 有了一个初步的认识。现在，让我们正式介绍一下 HTML。

HTML，全称 HyperText Markup Language，即超文本标记语言。

  • 超文本： 指的是 HTML 不仅可以显示文本，还可以支持图片、链接、视频等多种媒体内容，从而实现超越普通文本的功能。
  • 标记语言： 指的是 HTML 使用一系列的标签（例如 <html>, <head>, <body>, <img> 等）来描述网页的结构和内容。这些标签就像一个个标记，告诉浏览器如何解释和显示网页内容。

学习 HTML 的本质就是学习各种标签及其用法。

HTML 标签的规则

HTML 大约有 100 多个标签，常用的约占 80%。在后续的学习中，我们将逐步学习这些标签。这里先介绍一下 HTML 标签的一些基本规则：

  1. 尖角号： 标签通常由尖角号 < 和 > 包围，例如 <html>。
  2. 双标签和单标签：
    • 双标签： 成对出现，有开始标签和结束标签，例如 <body> 和 </body>。结束标签与开始标签相同，只是在标签名前面加上一个斜杠 /。
    • 单标签： 只有一个标签，没有对应的结束标签，例如 <img>。通常在标签的最后加上一个斜杠表示自闭合，例如 <img />，但这不是必须的。
  3. 嵌套： 标签可以嵌套，但不能交叉嵌套。例如，<div><p>这是段落</p></div> 是正确的嵌套，而 <div><p>这是段落</div></p> 是错误的交叉嵌套。
  4. 属性： 标签可以包含属性，属性用于提供关于标签的额外信息。属性通常以“名称=值”的形式出现，例如 <img src="logo.png"> 中，src 是属性名，logo.png 是属性值。
  5. 大小写： 标签名不区分大小写，<HTML> 和 <html> 是等效的，但通常推荐使用小写。

网页的基本结构：像熊猫一样可爱

一个完整的 HTML 网页通常包含以下几个部分：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  网页内容
</body>
</html>
  • <!DOCTYPE html>：文档类型声明，告诉浏览器这是一个 HTML5 文档。
  • <html> 和 </html>：网页的根元素，所有其他元素都包含在其中。
  • <head> 和 </head>：网页的头部，包含一些元信息，例如网页标题、字符编码等。
  • <body> 和 </body>：网页的主体，包含用户实际看到的内容。

我们可以把网页的结构想象成一只熊猫：

  • <html> 就像熊猫的整体轮廓，限定了网页的边界。
  • <head> 就像熊猫的头部，包含了一些重要的信息。
  • <body> 就像熊猫的身体，承载了网页的主要内容。
  • <title> 就像熊猫的眼睛，点亮了整个网页。

标签之间的关系：

  • 兄弟关系： <head> 和 <body> 处于同一层级，互为兄弟关系。
  • 父子关系： <title> 位于 <head> 内部，<title> 是 <head> 的子标签，<head> 是 <title> 的父标签。

浏览器：网页的舞台

网页和浏览器的关系就像电影和电影院，网页是内容，浏览器是播放内容的工具。

浏览器内核：核心中的核心

浏览器内核负责解析网页代码并将其渲染成用户看到的界面。不同的浏览器可能使用不同的内核，常见的内核包括：

  • WebKit： 开源引擎，被 Safari、Chrome（早期版本）等浏览器使用。
  • Blink： 由 Google 基于 WebKit 开发，被 Chrome 和 Edge 等浏览器使用。
  • Trident： 微软 IE 浏览器的内核。
  • Gecko： Firefox 浏览器的内核。

国内的许多浏览器，例如 UC、QQ、百度等，通常采用双核引擎，即 Trident + WebKit 或 Blink。

为什么选择 Chrome？

根据百度流量统计研究院的数据，Chrome 浏览器的市场份额较大。而且，其他许多国内主流浏览器也采用了与 Chrome 相同的 WebKit 内核。因此，使用 Chrome 进行开发和调试可以确保网页在大多数浏览器上都能正常显示。

浏览器内核和网页标准

不同的浏览器内核对网页的解析标准可能存在差异，导致同一个网页在不同浏览器上显示效果不同。为了解决这个问题，万维网联盟（W3C）制定了一系列的网络标准，包括 HTML、CSS、XML 等，旨在让所有浏览器都能按照相同的标准来解析和渲染网页。

开发工具：告别记事本

虽然我们可以使用记事本编写 HTML 代码，但这并不是一个高效的方式。专业的开发工具可以大大提高我们的开发效率。

文本编辑器：

  • VS Code： 免费、开源、功能强大的代码编辑器。
  • Sublime Text： 付费、轻量级、高度可定制的代码编辑器。
  • EditPlus、Notepad++、Atom Editor： 其他常用的文本编辑器。

集成开发环境（IDE）：

  • WebStorm、HBuilder X、Dreamweaver： 专门为 Web 前端开发设计的 IDE。
  • PyCharm、IntelliJ IDEA、Visual Studio、Eclipse： 可以用于后端开发和其他编程语言的 IDE，也支持 Web 开发。

在本次学习笔记中，我们选用 HBuilder X，它是一款国产免费的 IDE，对初学者非常友好。

安装 HBuilder X：开启高效开发之旅

  1. 访问 HBuilder 官网，下载 HBuilder X。
  2. 解压下载的文件到指定目录。
  3. 打开 HBuilder X，你可以根据需要调整字体大小等设置。
  4. 新建一个项目，选择一个存放项目的目录，并为项目命名。
  5. 在项目中新建一个 HTML 文件，例如 index.html。

HBuilder X 会自动生成 HTML 文件的基本结构，你只需要在 <body> 标签中编写你的网页内容即可。

HBuilder X 提供了多种预览方式：

  • 直接在浏览器中打开 HTML 文件。
  • 在 HBuilder X 中点击“运行”按钮，选择“运行到浏览器”。
  • 在 HBuilder X 中点击“运行”按钮，选择“运行到内置浏览器”。

总结与作业

在本节学习笔记中，我们学习了：

  • HTML 的基本概念
  • 网页的基本结构
  • 浏览器和网页的关系
  • 安装并使用 HBuilder X 作为开发工具

作业：

  1. 安装 HBuilder X 开发环境。
  2. 创建你的第一个网页，内容为一首你喜欢的古诗，网页标题为古诗的名称。

感谢大家的阅读，我们下期再见！