@前端俊哥儿乐___ 的技术博客

Appearance

Html、Css、Javascript 的万字总结 ​

引言 ​

HTML、CSS 和 JavaScript 概述 ​

HTML 是用于创建网页结构和内容的语言。就像建房子需要框架和墙壁一样，网页也需要有基本结构。HTML 就像是建房子的框架，提供了各种标签和元素，用于定义网页中的标题，段落，列表，链接和图像等内容。下面是一个 HTML 代码片段，用于创建一个简单的网页：

html
<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网页！</h1>
    <p>这是一个简单的网页，由HTML创建。</p>
    <img src="图片地址" alt="图片描述" />
    <a href="https://www.example.com">点击这里访问Example网站</a>
  </body>
</html>

CSS 是用于样式和布局的语言。如果 HTML 是网页的框架，那么 CSS 就是网页的外观和感觉。通过 CSS，你可以更改字体，颜色，背景，边框等等，让你的网页看起来更加漂亮。下面是一个 CSS 代码片段，用于为网页添加样式：

css
body {
  background-color: #f2f2f2;
}

h1 {
  color: red;
  font-size: 24px;
}

p {
  color: black;
  font-size: 16px;
}

img {
  width: 200px;
  height: 200px;
}

a {
  color: blue;
}

JavaScript 是用于创建交互性和动态效果的语言。如果 HTML 是网页的结构，CSS 是网页的样式，那么 JavaScript 就是网页的行为。通过 JavaScript，你可以向网页添加各种交互功能，比如按钮点击、表单验证、动画效果等等。下面是一个 JavaScript 代码片段，用于在点击按钮时更改网页上的文本：

javascript
let myButton = document.querySelector("button");
let myText = document.querySelector("p");

myButton.addEventListener("click", function () {
  myText.textContent = "欢迎来到我的网页！";
});

心智模型的概念和作用 ​

心智模型是人们对外界事物的认知框架，它影响了我们对世界的感知和理解。在技术领域中，心智模型指的是人们对技术知识的认知和理解模式。一个良好的心智模型可以帮助我们更深入地理解技术，更高效地学习和应用技术。

举个例子，如果你想学习怎样打乒乓球，你需要在脑海中建立一个关于乒乓球的心智模型。你需要知道球拍怎么拿，怎样发球和接球，以及球场上的规则等等。这些知识构成了你的心智模型，它可以帮助你更好地理解和掌握打乒乓球的技巧。

当你学习编程语言，比如 HTML、CSS 和 JavaScript 时，同样需要建立一个关于这些技术的心智模型。你需要了解基本概念、语法和规则，以及如何将它们应用到实际项目中去。这个过程可能需要一些时间和努力，但一旦你掌握了心智模型，就能更加自如地应用它们。

本文主题 ​

本文将颠覆你对 HTML、CSS 和 JavaScript 的既有认知，重新构建读者的心智模型，帮助你更好地理解和应用这三个技术。

颠覆你对 HTML 的认知 ​

HTML 的历史和发展 ​

HTML 是 HyperText Markup Language 的缩写，意为超文本标记语言。它是一种用于创建网页结构和内容的标记语言。HTML 的历史可以追溯到 20 世纪 90 年代早期，它是 Web 的基石之一。

在互联网刚刚兴起的时候，人们只是通过一些简单的文本编辑器将一些文本文件上传到 Web 服务器上，再通过浏览器进行查看。这种方式非常不方便，因为没有任何格式化，也没有图片、音频、视频等多媒体内容。为了解决这个问题，人们开始思考一种标记语言，能够将网页文档中的各个元素进行标记和排版，以便在浏览器中呈现出更好的视觉效果。

在 1980 年代初，欧洲核子研究组织（CERN）的研究员 Tim Berners-Lee 开始构思一个互联网信息管理系统，最终演变成了万维网（World Wide Web）的雏形。为了能够在不同计算机之间共享信息，Berners-Lee 开发了一个叫做“超文本标记语言”（Hypertext Markup Language）的标记语言，并使用它来创建了世界上第一个 Web 页面。HTML 语言的最初版本只支持文本格式化，它的主要功能是为文本添加粗体、斜体、下划线等效果。

随着互联网的不断发展，HTML 逐渐发展为一个更加完善的标记语言，不仅支持更多的排版和样式功能，还能嵌入图片、音频、视频等多媒体内容。目前，HTML 已经成为 Web 开发的基础技术之一，也是前端开发中不可或缺的一部分。

HTML 的第一个版本，称为 HTML 1.0，于 1991 年推出。它是一种允许创建基本网页的简单语言。 初始版本仅包括 18 个标签，如 <HTML>、<HEAD>、<TITLE>、<BODY>、<P> 和 <A>。 HTML 1.0 没有被广泛采用，很快在 1995 年被 HTML 2.0 取代。

HTML 2.0 与其前身相比有了重大改进，引入了许多新功能和标签。 一些新标签包括 <IMG>、<TABLE>、<OL> 和 <UL>。 HTML 2.0 还包括对脚本的支持，使创建交互式网页成为可能。 这个版本的 HTML 被广泛采用，并为未来的版本奠定了基础。

1997 年，HTML 3.2 发布。 此版本引入了许多新功能和标签，例如 <FONT>、<CENTER>、<APPLET> 和 <IFRAME>。 HTML 3.2 还增加了对层叠样式表 (CSS) 的支持，这是一种用于设置网页样式的独立语言。

1999 年，HTML 4.01 发布，成为目前使用最广泛的 HTML 版本。 此版本包括许多新功能，例如 <DIV>、<SPAN>、<IFRAME> 和 <SCRIPT>，以及对国际化和字符编码的支持。 HTML 4.01 还引入了文档对象模型 (DOM)，这使得动态操作网页内容成为可能。

HTML 4.01 之后是 2000 年推出的 XHTML（可扩展超文本标记语言）。XHTML 是 HTML 4.01 作为 XML 应用程序的重新表述，旨在更加模块化和可扩展。 XHTML 1.0 之后是 XHTML 1.1，它专为移动设备设计，包含许多新功能和标签。

HTML5 是 HTML 的最新版本，于 2014 年发布。它旨在更加灵活并与现代 Web 技术兼容。 HTML5 包括许多新特性和标签，例如 <VIDEO>、<CANVAS> 和 <SVG>，以及对本地存储和网络工作者的支持。 HTML5 还包括许多新的 API，例如 Geolocation API 和 Drag and Drop API。

HTML 的语法和基本标签 ​

HTML 是一种使用标签和属性的语言，它告诉浏览器如何展示文本、图片、视频和其他内容。以下是一个 HTML 基本结构的示例：

html
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

上面的代码中，<!DOCTYPE html> 表示文档类型，<html> 元素是 HTML 文档的根元素，<head> 元素包含文档的元数据（如标题和链接），而<body> 元素包含文档的主要内容。<h1>和<p> 是 HTML 的基本标签，分别用于创建标题和段落。

HTML5 的新特性 ​

随着时间的推移，HTML 发生了很多变化，其中最重要的是 HTML5。HTML5 是最新的 HTML 规范，包含了许多新的特性，如<video>和<audio>标签、<canvas>元素以及支持离线应用程序的 API。

HTML5 是 HTML 的最新版本，它带来了很多新的特性和标签，使得网页更加丰富和易于开发。

以下是一些 HTML5 的新特性： ​

1.   新的语义化标签 ​

HTML5 引入了很多新的语义化标签，如<header>、<footer>、<nav>、<article>、<section>等，这些标签可以使得网页的结构更加清晰和有意义，同时也可以帮助搜索引擎更好地理解和索引网页的内容。

2.   视频和音频支持 ​

HTML5 引入了新的标签<video>和<audio>，使得网页可以直接嵌入视频和音频，而不需要使用 Flash 或其他插件。这种方式不仅可以提高网页的性能，而且可以更好地支持移动设备。

3.   新的表单控件 ​

HTML5 引入了新的表单控件，如日期选择器、颜色选择器、邮箱验证器、数字输入等，这些控件使得表单更加易于使用和更加符合用户体验。

4.   画布(Canvas) ​

HTML5 的<canvas>标签可以创建出一块画布，并提供了 JavaScript API 来操作画布，从而可以实现很多复杂的图形和动画效果。

5.   地理位置信息 ​

HTML5 提供了新的 API 来获取用户的地理位置信息，可以用来实现一些基于地理位置的应用，如附近的商家、地图导航等。

HTML 的语义化和可访问性 ​

语义化是指 HTML 标签的选择和使用，可以使得网页的结构更加清晰和有意义，从而可以提高搜索引擎的抓取效率，提高用户体验。而可访问性则是指网页能够被更多的人群所访问，包括一些老年人、视障人士等，这对于一个网站的成功运营和广泛传播非常重要。

以下是一些 HTML 语义化的实践技巧： ​

1.使用语义化标签 ​

如<header>、<footer>、<nav>、<article>、<section>等标签，它们可以帮助搜索引擎更好地理解网页的结构，同时也可以提高用户体验。

2.使用正确的标签 ​

如<p>标签用来表示段落，而不是用<br>标签来换行，<ul>和<li>标签用来表示列表，而不是用<table>标签来布局等。

3.使用 alt 属性 ​

<img>标签的 alt 属性用来为图片添加描述，这对于视障人士来说非常重要，可以使得他们了解图片的内容。

4.   合理使用标题 ​

<h1>~<h6>标签用来表示标题，应该按照从大到小的顺序使用

下面是一个 HTML5 示例，它演示了一些常用的 HTML 标签和属性： ​
html
<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <header>
      <h1>Welcome to my web page!</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <article>
          <h2>Article 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </article>
        <article>
          <h2>Article 2</h2>
          <p>
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </article>
      </section>
    </main>
    <footer>
      <p>2023 My Web Page</p>
    </footer>
  </body>
</html>

颠覆你对 CSS 的认知 ​

CSS 的历史和发展 ​

CSS（Cascading Style Sheets）是用于网页样式设计的一种标记语言。在网页设计中，HTML 负责文本、图片等内容的呈现，而 CSS 则负责样式的定义。CSS 的历史背景和发展历程如下：

在 Web 初期，网页的样式只能通过 HTML 标签的 style 属性来设置。这种方式虽然简单，但非常不利于样式的管理和修改，因此很快就被淘汰了。于是，CSS 应运而生。

CSS 最早由 Håkon Wium Lie 和 Bert Bos 于 1996 年提出，是 Web 标准化的重要组成部分。CSS 1 于 1996 年发布，但由于浏览器支持不完善，被广泛忽略。随后，CSS 2 于 1998 年发布，支持了更多的样式属性和选择器，但由于浏览器支持问题和规范更新缓慢，也没有被广泛采用。

到了 2000 年，随着 IE6 和 Mozilla 等浏览器的兴起，CSS 开始成为 Web 设计的重要技术之一。此时，W3C 开始致力于推进 CSS 的规范化，CSS 2.1 于 2004 年成为了 W3C 的推荐标准。

2005 年，W3C 开始研发 CSS 3，这是 CSS 的一个重大升级版本，增加了更多的样式属性和选择器，以及对动画和变形的支持。

CSS 的选择器、属性和值 ​

CSS 选择器： CSS 选择器用于选择网页上的特定 HTML 元素并为其设置样式。 有不同类型的选择器可用于定位特定元素。

最常见的 CSS 选择器是：

  • 元素选择器：根据标签名称选择 HTML 元素，例如 h1、p或 div。
  • ID 选择器：根据其 ID 属性选择 HTML 元素，例如#header 或#menu。
  • 类选择器：根据类属性选择一个或多个 HTML 元素，例如 .btn 或 .nav-link。
  • 属性选择器：根据属性值选择 HTML 元素，例如 [type="text"] 或 [href^="https://"]。

CSS 属性： CSS 属性用于设置所选 HTML 元素的样式。 有许多可用的 CSS 属性可用于调整元素的各种视觉方面，例如颜色、大小、位置等。 一些常见的 CSS 属性是：

  • font-size：调整元素内文本的大小。
  • background-color：改变元素的背景颜色。
  • margin：在元素周围添加空间。
  • padding：在元素内添加空间。
  • border：给元素添加边框。
  • text-align：更改元素内文本的水平对齐方式。
  • display：更改元素的显示类型，例如从块到内联。

CSS 值：用于设置特定 CSS 属性的值。 有不同类型的值，包括：

  • 颜色值：用于设置元素的颜色。 这可以通过使用关键字（如红色或蓝色）或使用 RGB 或十六进制值来完成。
  • 长度值：用于设置元素的大小或长度。 这可以通过使用一个单位来完成，例如px或 em。
  • 位置值：用于设置元素的位置，例如relative、absolute或fixed。
  • 字体值：用于设置元素中文本的字体系列和粗细。
  • 文本值：用于设置各种文本属性，例如text-decoration 或 text-transform。
  • 显示值：用于设置元素的显示类型，block, inline, 或 none。

CSS 是一种强大的工具，可用于创建具有视觉吸引力且有效的网页设计。 通过了解 CSS 选择器、属性和值，可以更好地控制网页的设计并创建更具吸引力的用户体验。

CSS 盒模型和定位 ​

CSS 盒模型 ​

CSS 盒模型是指每个 HTML 元素都可以看做是一个矩形盒子，包括内容区域、内边距、边框和外边距。CSS 盒模型包括两种类型：W3C 标准盒模型和 IE 盒模型。

W3C 标准盒模型 ​

W3C 标准盒模型是指盒子的总宽度包括内容区域、内边距和边框的宽度，但不包括外边距的宽度。下面是一个示例：

css
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
}

在上面的示例中，盒子的总宽度为 200 + 220 + 22 = 244px。

IE 盒模型 ​

IE 盒模型是指盒子的总宽度包括内容区域、内边距、边框和外边距的宽度。下面是一个示例：

css
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
  box-sizing: border-box;
}

在上面的示例中，盒子的总宽度为 200px，box-sizing 属性设置为 border-box 时，盒子的宽度包括边框和内边距的宽度，而不是内容区域的宽度。

盒模型的不同部分 ​

CSS 盒模型包括四个不同的部分：内容区域、内边距、边框和外边距。

  • 内容区域：内容区域指的是盒子中用于展示文本和图像等内容的部分。
  • 内边距：内边距指的是内容区域和边框之间的距离。内边距的大小可以通过 padding 属性进行设置。
  • 边框：边框指的是盒子的边框线。边框的大小、样式和颜色可以通过 border 属性进行设置。
  • 外边距：外边距指的是盒子和其他盒子之间的距离。外边距的大小可以通过 margin 属性进行设置。

CSS 定位 ​

CSS 提供了三种定位方式：相对定位（position: relative）、绝对定位（position: absolute）和固定定位（position: fixed）。

相对定位 ​

相对定位是相对于元素自身原来的位置进行定位。比如，一个元素在没有使用相对定位时，它的位置是在页面中的默认位置。使用相对定位，我们可以通过 top、bottom、left 和 right 属性，将元素相对于其原来的位置进行移动。需要注意的是，相对定位不会改变页面的布局。

下面是一个相对定位的示例代码：

html
<div class="relative">
  <p>这是一个相对定位的段落。</p>
</div>
css
.relative {
  position: relative;
  left: 50px;
  top: 30px;
}
绝对定位 ​

绝对定位是相对于最近的非静态定位（即 position 不等于 static）的父元素进行定位。如果没有符合条件的父元素，则相对于文档的根元素进行定位。绝对定位可以通过 top、bottom、left 和 right 属性进行定位。需要注意的是，绝对定位会改变页面的布局。

下面是一个绝对定位的示例代码：

html
<div class="relative">
  <div class="absolute">
    <p>这是一个绝对定位的段落。</p>
  </div>
</div>
css
.relative {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #eee;
}

.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: #ccc;
}

在这个例子中，我们为父元素设置了相对定位，然后在父元素中创建了一个绝对定位的子元素。子元素会相对于父元素的位置进行定位。

固定定位 ​

固定定位是相对于浏览器窗口进行定位，因此无论页面如何滚动，它都会保持在同一位置。固定定位也可以通过 top、bottom、left 和 right 属性进行定位。

下面是一个固定定位的示例代码：

html
<div class="fixed">
  <p>这是一个固定定位的段落。</p>
</div>
css
.fixed {
  position: fixed;
  top: 30px;
  right: 30px;
}

在这个例子中，我们为元素设置了固定定位，因此它会相对于浏览器窗口的位置进行定位。

响应式设计和媒体查询 ​

在移动设备和不同屏幕尺寸的电脑上，Web 页面的呈现方式可能存在很大的差异。为了解决这个问题，Web 开发者们开始使用响应式设计来构建可适应多种屏幕大小和设备类型的 Web 应用程序。其中一个关键技术就是媒体查询。

什么是响应式设计？

响应式设计是一种 Web 设计技术，它可以使 Web 页面根据不同的屏幕大小和设备类型自动调整布局和呈现方式。在响应式设计中，Web 开发者通过使用灵活的布局和媒体查询技术，实现不同设备上 Web 页面的适应性和美观性。

媒体查询是什么？

媒体查询是 CSS3 中的一个功能，可以根据不同的媒体类型和特定的设备特性来为不同设备定义不同的样式。使用媒体查询可以针对不同的设备，使用不同的样式，以实现适应不同设备的响应式设计。常见的媒体查询包括屏幕宽度、屏幕方向、设备像素比等。

媒体类型 ​

在使用媒体查询时，可以通过媒体类型（Media Type）来指定查询的对象。常用的媒体类型有：

  • all：所有设备。
  • print：打印机和打印预览。
  • screen：电脑屏幕、平板和智能手机屏幕。
  • speech：屏幕阅读器等语音合成器。

媒体特性 ​

媒体特性（Media Feature）是媒体查询的核心。媒体特性用来描述设备或者屏幕的特性，如屏幕尺寸、分辨率、方向等。

媒体特性有以下几种：

  • width：视口宽度。
  • height：视口高度。
  • aspect-ratio：宽高比。
  • device-width：设备宽度。
  • device-height：设备高度。
  • device-aspect-ratio：设备宽高比。
  • orientation：屏幕方向，横向或纵向。
  • resolution：屏幕分辨率。
  • color：颜色位数。
  • color-index：颜色数量。
  • monochrome：单色位数。
  • scan：扫描方式，渐进或隔行。

媒体查询语法 ​

媒体查询的语法由媒体类型和媒体特性组成，可以根据需要组合使用。例如，以下代码表示在视口宽度小于等于 480 像素时应用样式：

css
@media screen and (max-width: 480px) {
  /* 样式代码 */
}

其中，@media是媒体查询的声明，screen是媒体类型，and是媒体特性的逻辑运算符，(max-width: 480px)是媒体特性。

还可以使用逗号分隔的多个媒体查询，例如以下代码表示在视口宽度小于等于 480 像素或大于等于 768 像素时应用不同的样式：

css
@media screen and (max-width: 480px), screen and (min-width: 768px) {
  /* 样式代码 */
}

响应式设计的实现 ​

响应式设计的实现离不开媒体查询。通过设置不同的媒体查询条件和相应的样式，可以使得网页在不同设备和屏幕尺寸下都具有较好的显示效果。

以下是一个简单的响应式设计示例：

首先，我们需要在 HTML 文件头部添加一些 meta 标签，以便浏览器正确地显示页面。这些标签告诉浏览器页面的缩放比例和宽度等信息。

html
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

接下来，我们需要为不同的屏幕大小设置不同的 CSS 样式。这可以通过媒体查询来实现。媒体查询是 CSS 的一个特性，它允许根据屏幕宽度、高度、方向等特征来应用不同的样式。我们可以为不同的屏幕宽度设置不同的 CSS 样式。例如：

css
/* 当屏幕宽度小于 768 像素时应用以下样式 */
@media only screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

/* 当屏幕宽度大于等于 768 像素且小于 992 像素时应用以下样式 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 16px;
  }
}

/* 当屏幕宽度大于等于 992 像素时应用以下样式 */
@media only screen and (min-width: 992px) {
  body {
    font-size: 18px;
  }
}

这个例子中，我们为不同的屏幕宽度设置了不同的字体大小。

最后，我们需要为移动设备设计一个自适应的布局。这可以通过使用弹性盒子布局（Flexbox）来实现。Flexbox 允许我们在容器内自动布局和对齐项目。我们可以使用 Flexbox 来设计一个自适应的导航菜单，例如：

html
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
css
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav li {
  margin: 0 10px;
}

.nav a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

这个例子中，我们使用 Flexbox 实现了一个导航菜单，其中每个菜单项之间都有 10 像素的间距，并且菜单项之间的空间被均匀分配。

颠覆你对 JavaScript 的认知 ​

JavaScript 的历史和发展 ​

JavaScript 的起源 ​

JavaScript 的起源可以追溯到 1995 年，当时网景公司（Netscape Communications）的开发团队需要一种能够在浏览器中运行的脚本语言，用来实现动态的网页效果。他们找到了布兰登·艾奇（Brendan Eich）这位年轻的工程师，让他设计和开发一种名为 Mocha 的脚本语言。后来 Mocha 改名为 LiveScript，最终被改名为 JavaScript。

1996 年，Netscape 将 JavaScript 提交给欧洲计算机制造商协会（ECMA）进行标准化。ECMA-262 标准规范化了 JavaScript，成为了 JavaScript 的第一个版本。从此，JavaScript 成为了一种标准化的脚本语言，并广泛应用于 Web 开发中。

JavaScript 的发展历程 ​

1996 年，JavaScript 1.1 发布，增加了正则表达式支持、浮点数格式化、错误处理等功能。

1997 年，JavaScript 1.2 发布，增加了 iframe、layer、cookie、图片滚动等功能，并开始向 ECMA（欧洲计算机制造商协会）提交标准化。

1998 年，ECMA 发布了 ECMAScript 1.0，作为 JavaScript 的第一个官方标准。这个标准定义了语言的语法、类型、语句、关键字、保留字、操作符和对象。

1999 年，ECMAScript 3.0 发布，成为最普遍的 JavaScript 实现标准。ECMAScript 3.0 新增了 try/catch 语句、正则表达式、更好的 JSON 支持、更好的字符串处理、更好的代码封装等功能。

2005 年，Ajax（Asynchronous JavaScript and XML）的概念提出，使得 Web 应用程序能够异步更新内容，而不需要重新加载整个页面。Ajax 是由 JavaScript、XMLHttpRequest、HTML 和 CSS 等技术组成，极大地促进了 Web 应用程序的发展。

2009 年，ECMAScript 5.0 发布，增加了严格模式、属性存取器、JSON 对象、更好的数组操作、更好的函数处理等功能。ECMAScript 5.0 的发布使得 JavaScript 成为一个更加成熟的语言。

2015 年，ECMAScript 6.0 发布，也被称为 ECMAScript 2015 或 ES6。这个版本引入了一些重要的新特性，如 let 和 const 声明、箭头函数、模板字符串、解构赋值、类和模块等。

自此，JavaScript 的发展历程也迎来了一个新的阶段。随着新版本的发布和不断地发展，JavaScript 成为了 Web 开发中必不可少的一部分。从最初的简单脚本语言，到如今已经发展成为一个功能强大的编程语言，JavaScript 已经走过了漫长而成功的历程。

JavaScript 的数据类型、变量和函数 ​

数据类型 ​

在 JavaScript 中，数据可以分为以下几种类型：

  • 基本类型：包括数字、字符串、布尔值、null和undefined。
  • 引用类型：包括对象、数组和函数。

其中，基本类型的值存储在栈中，而引用类型的值存储在堆中，栈中存储的是引用类型的地址。

数字 ​

数字是 JavaScript 中的基本数据类型之一，可以通过以下方式来表示：

javascript
let num = 123;
let floatNum = 3.14;
let expNum = 1.23e5;

在 JavaScript 中，数字可以进行各种数学运算，包括加、减、乘、除等。

字符串 ​

字符串也是 JavaScript 中的基本数据类型之一，可以通过以下方式来表示：

javascript
let str = "Hello, world!";

在 JavaScript 中，字符串可以进行各种操作，比如字符串连接、截取等。

布尔值 ​

布尔值是 JavaScript 中的基本数据类型之一，只有两个值：true和false。

null 和 undefined ​

null和undefined都是 JavaScript 中的特殊值，表示“空”的含义，但两者还是有所区别：

  • null表示一个空对象引用，即没有指向任何对象。
  • undefined表示一个未定义的变量或属性。
对象 ​

对象是 JavaScript 中的引用数据类型，可以通过以下方式来创建一个对象：

javascript
let obj = {
  name: "Alice",
  age: 20,
  sayHello: function () {
    console.log("Hello, world!");
  },
};

对象可以包含属性和方法，可以通过点号或方括号来访问对象的属性和方法：

javascript
console.log(obj.name); // Alice
console.log(obj["age"]); // 20
obj.sayHello(); // Hello, world!
数组 ​

数组也是 JavaScript 中的引用数据类型之一，可以通过以下方式来创建一个数组：

javascript
let arr = [1, 2, 3, 4, 5];

数组可以包含多个元素，可以通过下标来访问数组的元素：

javascript
console.log(arr[0]); // 1
console.log(arr[1]); // 2
函数 ​

函数是 JavaScript 中的引用数据类型之一，可以通过以下方式来定义一个函数：

javascript
function sayHello() {
  console.log("Hello, world!");
}

在 JavaScript 中，函数可以像变量一样使用，可以被赋值、作为参数传递和作为返回值：

javascript
let func = sayHello;
func(); // Hello, world!

变量和函数 ​

当我们在编写 JavaScript 代码时，经常需要创建和使用变量来存储和操作数据。JavaScript 中的变量具有动态类型，这意味着同一个变量可以在不同的时间存储不同类型的值。要声明变量，我们使用 var、let 或 const 关键字。

var 关键字是在 ES5 中引入的，是早期的变量声明方式，但其作用域规则相对复杂，使用时需要注意。例如：

javascript
var a = 1;
function foo() {
  var a = 2;
  console.log(a); // 输出2
}
foo();
console.log(a); // 输出1

let 和 const 是在 ES6 中引入的，是新的变量声明方式。let 声明的变量拥有块级作用域，const 声明的变量是常量，一旦被赋值后就不能被重新赋值。例如：

javascript
let a = 1;
function foo() {
  let a = 2;
  console.log(a); // 输出2
}
foo();
console.log(a); // 输出1

const b = 10;
b = 20; // 报错：常量不能被重新赋值

JavaScript 中有许多内置函数，如 console.log、alert 等。我们也可以自己定义函数，使用 function 关键字来声明。例如：

javascript
function add(a, b) {
  return a + b;
}

console.log(add(1, 2)); // 输出3

JavaScript 中的函数也是一种数据类型，可以作为变量的值进行传递。例如：

javascript
function foo() {
  console.log("Hello, World!");
}

let bar = foo;
bar(); // 输出Hello, World!

在 JavaScript 中，函数也可以被定义为匿名函数，即不需要使用函数名进行声明。匿名函数通常用于回调函数或作为参数传递给其他函数。例如：

javascript
let arr = [1, 2, 3];
arr.forEach(function (item) {
  console.log(item);
});

setTimeout(function () {
  console.log("Time is up!");
}, 1000);

JavaScript 中的函数也支持函数表达式，即在运行时将函数定义为变量的值。函数表达式通常用于创建闭包、IIFE 等场景。例如：

javascript
let add = function (a, b) {
  return a + b;
};

console.log(add(1, 2)); // 输出3

JavaScript 中的函数也可以作为对象的方法进行调用。例如：

javascript
let obj = {
  name: "Alice",
  sayHello: function () {
    console.log("Hello, my name is " + this.name);
  },
};

obj.sayHello(); // 输出Hello, my name is Alice

JavaScript 的 DOM 操作和事件 ​

DOM (Document Object Model) 文档对象模型，是一种表述和操作 HTML、XML 等文档的方法。在 JavaScript 中，可以使用 DOM 来操作网页的元素和属性，以达到改变网页内容、结构和样式的目的。

DOM 树 ​

DOM 树是用来表示文档结构的一种树形结构。在 DOM 树中，每个 HTML 元素都是一个节点，节点之间存在父子关系和兄弟关系。通过遍历 DOM 树，可以访问和操作网页中的任意元素。

获取 DOM 元素 ​

获取 DOM 元素是 DOM 操作的基础。JavaScript 提供了多种方法来获取 DOM 元素，下面介绍一些常用的方法：

getElementById() ​

通过 id 属性获取元素，返回一个元素对象。该方法适用于获取唯一的元素，如果有多个元素具有相同的 id，只返回第一个匹配的元素。

html
<div id="example"></div>
javascript
const example = document.getElementById("example");
console.log(example); // <div id="example"></div>
getElementsByTagName() ​

通过标签名获取元素，返回一个元素集合。该方法适用于获取多个元素，标签名可以是大写也可以是小写。

html
<div>example1</div>
<div>example2</div>
javascript
const divs = document.getElementsByTagName("div");
console.log(divs); // HTMLCollection [ <div>, <div> ]
getElementsByClassName() ​

通过 class 属性获取元素，返回一个元素集合。该方法适用于获取多个元素，class 属性可以是多个类名，类名之间用空格分隔。

html
<div class="example">example1</div>
<div class="example">example2</div>
javascript
const examples = document.getElementsByClassName("example");
console.log(examples); // HTMLCollection [ <div class="example">, <div class="example"> ]
querySelector() ​

通过 CSS 选择器获取元素，返回一个元素对象。该方法适用于获取唯一的元素，如果有多个元素匹配选择器，只返回第一个匹配的元素。

html
<div class="example">example1</div>
<div class="example">example2</div>
javascript
const example = document.querySelector(".example");
console.log(example); // <div class="example">example1</div>
querySelectorAll() ​

通过 CSS 选择器获取元素，返回一个元素集合。该方法适用于获取多个元素。

html
<div class="example">example1</div>
<div class="example">example2</div>
javascript
const examples = document.querySelectorAll(".example");
console.log(examples); // NodeList [ <div class="example">, <div class="example"> ]

异步编程，Promise ​

JavaScript 是一种单线程的语言，这意味着一次只能执行一个任务。这在某些情况下会成为限制，例如在执行长时间运行的任务时，这可能会导致页面冻结，用户体验变差。异步编程允许我们在执行耗时的操作时不会阻塞 JavaScript 执行，从而提高了性能和响应性。

异步编程可以通过回调函数、事件监听、Promise 和 async/await 等方式来实现。其中，回调函数和事件监听是异步编程的基础，而 Promise 和 async/await 是更现代的方法。

使用回调函数来实现异步编程时，我们将要执行的代码作为一个回调函数传递给某个 API，当操作完成时，API 将调用该函数。这种方法的问题在于它可能会导致回调地狱，即由于回调函数嵌套过多而难以阅读和维护代码。

事件监听是另一种实现异步编程的方式，它允许我们注册事件处理程序，当事件发生时，事件处理程序会被调用。这种方法适用于需要在某个条件满足时才能执行的操作。

Promise 是 ECMAScript 6 中引入的一种处理异步操作的方法，它允许我们在异步操作完成后处理结果。Promise 有三种状态：pending（进行中）、resolved（已完成）和 rejected（已失败）。当 Promise 进入 resolved 或 rejected 状态时，我们可以使用 then() 和 catch() 方法来处理结果或错误。

async/await 是 ES2017 引入的语言特性，它允许我们在异步代码中使用同步的语法，从而提高了代码的可读性和可维护性。async/await 基于 Promise 实现，async 函数返回一个 Promise 对象，我们可以使用 await 关键字来等待异步操作完成并获取结果。使用 async/await 时，我们不需要像使用 Promise 那样调用 then() 和 catch() 方法来处理结果或错误。

其中 Promise 是 JavaScript 异步编程中最常用的方法之一。下面我们来详细介绍一下 Promise 的使用方法和原理。

Promise 是一种对象，它可以将异步操作封装为一个对象，使得异步操作更加易于管理和控制。Promise 可以表示一个异步操作的最终完成或者失败，并返回一个包含操作结果的对象，让开发者可以更方便地对异步操作进行后续处理。

Promise 对象有三种状态：pending、fulfilled 和 rejected。当一个 Promise 对象刚被创建时，它的状态为 pending。当异步操作完成并成功返回结果时，Promise 对象的状态会变为 fulfilled。当异步操作失败时，Promise 对象的状态会变为 rejected。Promise 对象状态的变化是不可逆的，一旦变为 fulfilled 或者 rejected 状态，就无法再次变为 pending 状态。

Promise 对象有两个方法：then() 和 catch()。当异步操作成功时，then() 方法会被调用，它的参数是一个回调函数，用来处理异步操作成功时的结果；当异步操作失败时，catch() 方法会被调用，它的参数也是一个回调函数，用来处理异步操作失败时的结果。then() 和 catch() 方法可以链式调用，让开发者可以更方便地对异步操作进行后续处理。

下面是一个使用 Promise 的示例代码：

javascript
function doSomethingAsync() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve("foo");
    }, 3000);
  });
}

doSomethingAsync()
  .then(function (result) {
    console.log(result);
  })
  .catch(function (error) {
    console.error(error);
  });

在上面的代码中，我们首先定义了一个名为 doSomethingAsync() 的函数，它返回一个 Promise 对象。在 Promise 的构造函数中，我们使用 setTimeout() 函数模拟一个耗时 3 秒的异步操作，并在异步操作完成时调用 resolve() 函数，将操作的结果传递给 then() 方法。

在代码的最后，我们对 doSomethingAsync() 函数返回的 Promise 对象调用了 then() 和 catch() 方法，分别用来处理异步操作成功时和失败时的结果。在 then() 方法中，我们将异步操作的结果输出到控制台；在 catch() 方法中，可以处理 Promise 对象抛出的错误。如果在 Promise 对象执行过程中出现错误，会导致 Promise 对象进入 rejected 状态。此时，可以通过 catch() 方法捕获到这个错误，然后进行相应的处理。

除了 catch() 方法，Promise 对象还提供了 finally() 方法。该方法不管 Promise 对象最终的状态如何，都会在最后执行一次，可以用来做一些清理工作，比如关闭文件、释放资源等。

示例 2：

javascript
function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(Error(xhr.statusText));
      }
    };
    xhr.onerror = () => reject(Error("Network Error"));
    xhr.send();
  });
}

fetchData("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => console.log(response))
  .catch((error) => console.log(error));

在实际编程中，我们可以根据情况选择不同的异步编程方式。在处理简单异步任务时，可以使用回调函数或事件监听，而在处理复杂异步任务时，可以使用 Promise 或 async/await 来提高代码的可读性和可维护性。

重新构建你的心智模型 ​

HTML、CSS 和 JavaScript 总结 ​

HTML ​

HTML 代表超文本标记语言，用于创建网页。 它是一种标记语言，用于定义网页的结构和内容。 HTML 由标记、属性和内容组成。

标签用于定义网页的不同元素，例如标题、段落、图像和链接。 属性用于提供有关元素的附加信息，例如其大小、颜色或链接目标。 内容是网页上显示的实际文本或媒体。

语义标记是 HTML 中的一个重要概念。 这是使用标签的做法，其意义不仅仅在于其视觉外观。 例如，将 <h1> 标签用于网页的主标题，而不是仅仅通过 CSS 更改字体大小。 这对可访问性和 SEO（搜索引擎优化）具有重要意义，因为它有助于屏幕阅读器和搜索引擎理解网页内容。

要练习使用 HTML 构建简单的网页和表单，请从学习 HTML 文档的基本结构开始。 HTML 文档以 声明开始，然后是 <html> 标记，其中包含 <head> 和 <body> 部分。 <head> 部分包含有关网页的元信息，例如标题和描述，而 <body> 部分包含实际内容。

CSS ​

CSS 代表层叠样式表，用于向网页添加样式和视觉效果。 CSS 由选择器、属性和值组成。

选择器用于定位网页上的特定元素，例如标题或段落。 属性用于定义元素的样式，例如颜色、字体大小或背景图像。 值是属性的特定设置，例如颜色为红色或字体大小为 20px。

盒子模型是 CSS 中的一个重要概念。 这是 CSS 将网页上的每个元素视为矩形框的方式。 此框由内容、填充、边框和边距组成。 了解盒模型对于控制网页上元素的布局和定位非常重要。

响应式设计是 CSS 中的另一个重要概念。 这是设计可以适应不同屏幕尺寸和设备的网页的做法。 媒体查询用于根据屏幕或设备的大小将不同的样式应用于网页。

要练习使用 CSS 设计网页样式，请从学习 CSS 的基本语法开始。 可以使用外部样式表或内部样式表将 CSS 应用于 HTML 文档。 选择器用于定位特定元素，属性和值用于定义样式。

JavaScript ​

JavaScript 是一种编程语言，用于向网页添加交互性和功能。 它是唯一可以在客户端执行的编程语言，这意味着它直接在浏览器中运行。

JavaScript 由变量、数据类型和函数组成。 变量用于存储数据，例如用户名或当前时间。 数据类型是可以存储的不同类型的数据，例如字符串、数字和布尔值。 函数用于将代码组合在一起并执行特定任务。

文档对象模型 (DOM) 是 JavaScript 中的一个重要概念。 这是 JavaScript 与网页上的 HTML 和 CSS 交互的方式。 网页上的每个元素都表示为 DOM 中的一个对象，可以使用 JavaScript 对其进行操作以更改网页的内容或样式。

事件和事件侦听器是 JavaScript 中的另一个重要概念。 事件是网页上发生的操作，例如单击或按键。 事件侦听器用于检测事件何时发生并触发函数作为响应。 这允许创建响应用户输入的交互式网页。

要练习使用 JavaScript 构建简单的交互式网页，请从学习 JavaScript 的基本语法开始。 可以使用脚本标签或外部文件将 JavaScript 包含在 HTML 文档中。 可以使用 let 或 const 关键字声明变量，可以使用 function 关键字定义函数。

如何形成和加强心智模型 ​

学习完基础知识和技术后，建议练习实战项目，如制作简单的网页、制作动画效果、制作交互式页面等等，通过实践加深理解和掌握技术。可以通过 GitHub 等平台寻找相关的项目。

加强心智模型的方法有很多，比如阅读相关书籍、参加培训班、参加在线课程、看视频教程等等。此外，建议通过项目实践，不断总结和反思，逐步形成自己的心智模型。

最重要的是坚持学习和实践，不断积累经验，不断加强心智模型。

最后 ​

本文从 HTML、CSS、JavaScript 的历史和发展出发，介绍了它们的语法和基本特性，想重新构建大家对这三种技术的认知。还讲解了心智模型的概念和作用，为大家提供了更好的学习方式和思路。并讲解了如何形成和加强心智模型，以帮助大家更好地掌握 HTML、CSS、JavaScript 的知识。

心智模型是学习任何一种技术的重要工具，能够帮助我们更好地理解和掌握复杂的概念和语法。在未来，学习 HTML、CSS、JavaScript 的道路将越来越广阔，我们需要不断学习和更新心智模型，以跟上技术发展的步伐。

最后，希望我们都能不断学习和实践，不断加强自己的心智模型。同时，我们也要保持谦虚和勇于接受挑战的态度，才能在这个快速发展的技术领域中不断成长和进步。