CSS基本知识 以前的 概述:开始使用web 下一个 CSS(层叠样式表)是为web内容设置样式的代码。CSS基本知识介绍你需要开始做的事情。我们将回答这样的问题:如何将文本设置为红色?我如何使内容显示在(网页)布局的特定位置?我如何装饰我的网页与背景图像和颜色?CSS是什么?和HTML一样，CSS也不是一种编程语言。它也不是一种标记语言。CSS是一种样式表语言。CSS是您用来选择性地样式化HTML元素的工具。例如，这个CSS选择段落文本，将颜色设置为红色: p ｛ 颜色：红色的； ｝ 复制到剪贴板 让我们试一试!使用文本编辑器，将上面的三行CSS粘贴到一个新文件中。将文件保存为style.css在一个名为风格． 为了使代码工作，我们仍然需要将这个CSS(上面的)应用到HTML文档中。否则，样式化不会改变HTML的外观。(如果你还没有关注我们的项目，请在这里停下来阅读处理文件和HTML基础知识.） 打开你的index . html文件。把下一行粘贴在头部(中间)< >头和< / >头标签): 复制到剪贴板 保存index . html然后把它载入你的浏览器。你应该会看到这样的结果: 如果你的段落文本是红色的，恭喜你!您的CSS正在工作。CSS规则集的剖析让我们剖析一下红色段落文本的CSS代码来理解它是如何工作的: 整个结构称为a规则集． (这个词规则集经常被称为正义吗规则)。请注意各个部件的名称:选择器这是规则集开头的HTML元素名。它定义了要被样式化的元素(在这个例子中，< p >元素)。要设置不同元素的样式，请更改选择器。宣言这是一条简单的规则颜色:红色;． 它指定了哪个元素属性你想要风格。属性这些是您可以样式化HTML元素的方法。(在这个例子中,颜色的属性是< p >元素)。在CSS中，您可以选择希望在规则中影响哪些属性。属性值在属性的右边——冒号之后——有一个属性值． 它从许多可能的表象中为给定的属性选择一种。(例如，有很多颜色除了价值红色的.） 注意语法的其他重要部分: 除了选择器之外，每个规则集都必须用花括号括起来。（{}） 在每个声明中，必须使用冒号(：)将属性与其一个或多个值分开。 在每个规则集中，您必须使用分号(；)，将每个声明与下一个声明分开。 如果要在一个规则集中修改多个属性值，可以用分号分隔，如下所示: p ｛ 颜色：红色的； 宽度：500 px； 边境：1 px固体黑色； ｝ 复制到剪贴板选择多个元素您还可以选择多个元素，并将一个规则集应用于所有元素。用逗号分隔多个选择器。例如: p, li h1 ｛ 颜色：红色的； ｝ 复制到剪贴板不同类型的选择器有许多不同类型的选择器。上面的例子使用元素选择器，它选择给定类型的所有元素。但我们也可以做出更具体的选择。下面是一些更常见的选择器类型: 选择器的名字 它选择了什么 例子 元素选择器(有时称为标记或类型选择器) 指定类型的所有HTML元素。 p选择< p > ID选择器 页面上具有指定ID的元素。在给定的HTML页面上，每个id值应该是唯一的。 #我的身份证选择< p id = "我的身份证" >或 类选择器 具有指定类的页面上的元素。同一类的多个实例可以出现在一个页面上。 .my-class选择< p class = "我班”>和“我的课” 属性选择器 页面上具有指定属性的元素。 img (src)选择< img src = " myimage.png " >但不是< img > 伪类选择器 指定的元素，但仅当处于指定状态时。(例如，当光标停留在一个链接上时。) 答:徘徊选择，但仅当鼠标指针悬停在链接上方时。 还有更多的选择器有待发现。要了解更多信息，请参见MDN选择器指南．字体和文本现在我们已经了解了一些CSS基础知识，让我们通过向style.css文件。 首先,找到字体输出你之前保存的你的网站看起来会是什么样子?． 添加元素在index . html的头部(任何在< >头和< / >头标签)。它看起来像这样: 复制到剪贴板这段代码将您的页面链接到一个样式表，该样式表将为您的网页加载Open…

HTML基础知识 以前的 概述:开始使用web 下一个 HTML (HypText米arkupl(语言)是用来构建网页及其内容的代码。例如，可以将内容结构化为一组段落、一组要点列表或使用图像和数据表。正如标题所示，本文将让您对HTML及其功能有一个基本的了解。那么HTML是什么呢?HTML是一个标记语言它定义了内容的结构。HTML由一系列元素，你用它来包裹或包裹内容的不同部分，以使其呈现出某种方式或表现出某种方式。封闭标签可以将一个单词或图像超链接到其他地方，可以对单词进行斜体化，可以使字体变大或变小，等等。例如，下面这行内容: 我的猫脾气很坏 如果我们想让行独立存在，可以通过将它括在段落标签中来指定它是一个段落: 我的猫脾气很坏 复制到剪贴板解析HTML元素让我们进一步研究这个段落元素。 我们的元素的主要部分如下: 开始标记:它包含元素的名称(在本例中是p)，用开始和结束分隔尖括号． 它声明元素在哪里开始或开始生效——在本例中是段落在哪里开始。 关闭标签:这与开始标记相同，除了它包含一个正斜杠在元素名之前。这表示元素的结束位置——在本例中是段落的结束位置。没有添加结束标记是初学者的标准错误之一，可能会导致奇怪的结果。 内容:这是元素的内容，在本例中只是文本。 元素:开始标记、结束标记和内容一起组成元素。 元素也可以有如下的属性: 属性包含有关元素的额外信息，您不希望这些信息出现在实际内容中。在这里,类是属性的名字和编者注是属性价值． 的类属性允许您为元素指定一个非唯一标识符，该标识符可用于定位元素(以及其他具有相同标识符的元素)类价值)与样式信息和其他东西。 一个属性应该始终具有以下内容: 它和元素名之间有一个空格(如果元素已经有一个或多个属性，则是前面的属性)。 属性名后面跟一个等号。 由开始和结束引号包围的属性值。 注意:不包含ASCII空格(或任何字符)的简单属性值＂ ＇ ｀ ＝ )可以不加引号，但建议您用引号括起所有的属性值，这样可以使代码更加一致和易于理解。 嵌套的元素您也可以将元素放入其他元素中——这被称为嵌套． 如果我们想说我们的猫是非常臭脾气，我们可以把"非常"这个词用< >强元素，意思是这个词要被强烈强调: 我的猫是非常脾气暴躁。 复制到剪贴板 不过，您确实需要确保元素被正确嵌套。在上面的例子中，我们打开< p >元素，然后< >强元素;因此，我们必须关闭< >强元素，然后< p >元素。以下是不正确的: 我的猫是很暴躁。 复制到剪贴板 元素必须正确地打开和关闭，这样它们才能清楚地彼此在内部或外部。如果它们像上面显示的那样重叠，那么你的浏览器会试图猜测你想说什么，这可能会导致意想不到的结果。所以不要这样做!空元素有些元素没有内容而被调用空元素． 取< img >元素，我们已经在我们的HTML页面: 复制到剪贴板 这包含两个属性，但没有关闭< / img >没有内部内容。这是因为图像元素不会包装内容来影响它。它的目的是在HTML页面中出现图像的地方嵌入图像。解析HTML文档以上介绍了单个HTML元素的基本知识，但是单独使用它们并不方便。现在，我们将看看如何将单个元素组合成一个完整的HTML页面。让我们回顾一下我们放入的代码index . html我们第一次在处理文件文章): 我的测试页面 复制到剪贴板 在这里，我们有以下内容: ——doctype。这是一个必要的序言。在HTML还很年轻的时候(1991/92年左右)，文档类型的作用是作为一组规则的链接，HTML页面必须遵循这些规则才能被认为是好的HTML，这可能意味着自动错误检查和其他有用的东西。然而现在，它们做的不多，基本上只需要确保文档的正确行为。你现在只需要知道这些。 < html > < / html >- - -< html >元素。这个元素包装了整个页面上的所有内容，有时也称为根元素。 < / >头- - -< >头元素。这个元素作为一个容器，包含您想要包含在HTML页面上的所有内容不是显示给页面浏览者的内容。这包括以下内容关键字你想要在搜索结果中出现的页面描述，样式化内容的CSS，字符集声明等等。 < meta charset = " utf - 8 " >-这个元素设置你的文档应该使用的字符集为UTF-8，包含了绝大多数文字语言的大部分字符。实际上，它现在可以处理您可能添加到它上的任何文本内容。没有理由不设置它，它可以帮助避免以后的一些问题。 < /名称>- - -元素。这将设置页面的标题，即加载页面时出现在浏览器选项卡中的标题。它也可以用来描述书签/收藏的页面。 < /身体>- - -元素。这包含了所有当用户访问你的页面时，你想要显示给他们的内容，无论是文本，图像，视频，游戏，可播放的音频轨道，或其他任何内容。 图片让我们把注意力转向< img >元素: 复制到剪贴板 如前所述，它将图像嵌入到页面中显示的位置。它通过src(source)属性，它包含图像文件的路径。 我们还包括了alt(替代)属性。在这个属性中，您为无法看到图像的用户指定描述性文本，可能是因为以下原因: 他们有视力障碍。有严重视力障碍的用户经常使用一种叫做屏幕阅读器的工具来为他们读出替换文本。 有些东西出了问题，导致图像不能显示。例如，尝试故意改变路径在您的src属性使其不正确。如果你保存并重新加载页面，你应该会看到这样的图片:…

处理文件 以前的 概述:开始使用web 下一个 一个网站由许多文件组成:文本内容、代码、样式表、媒体内容等等。当你建立一个网站时，你需要在你的本地计算机上把这些文件组装成一个合理的结构，确保它们可以相互交谈，并在你最终之前让所有的内容看起来正确将它们上传到服务器．处理文件讨论一些你应该知道的问题，这样你就可以为你的网站建立一个合理的文件结构。你的网站应该放在电脑的什么位置?当您在本地计算机上处理一个网站时，应将所有相关文件保存在一个文件夹中，该文件夹反映了服务器上发布的网站的文件结构。这个文件夹可以放在你喜欢的任何地方，但你应该把它放在你容易找到的地方，可能在你的桌面，在你的家庭文件夹，或在你的硬盘的根目录。 选择一个地方来存储你的网站项目。在您选择的位置中，创建一个新文件夹，名为web项目(或类似的)。这是所有你的网站项目将居住的地方。 在第一个文件夹中，创建另一个文件夹来存储你的第一个网站。叫它试验场地(或者更有想象力的东西)。 关于套管和间距的一个问题您会注意到，在本文中，我们要求您将文件夹和文件命名为完全小写，不包含空格。这是因为: 许多计算机，特别是网络服务器，是区分大小写的。举个例子，如果你在你的网站上放了一张图片试验场地/ MyImage.jpg然后在另一个文件中，您尝试调用图像为试验场地/ myimage.jpg，它可能不会起作用。 浏览器、web服务器和编程语言不能一致地处理空格。例如，如果你在文件名中使用空格，一些系统可能会将文件名视为两个文件名。一些服务器将用“%20”(url中空格的字符代码)替换文件名中的区域，导致所有链接被破坏。用连字符分隔单词比用下划线更好:my-file.htmlvs。my_file.html． 简单的回答是，您应该在文件名中使用连字符。谷歌搜索引擎将连字符视为单词分隔符，但不以这种方式视为下划线。由于这些原因，最好养成这样的习惯:将文件夹和文件名写成小写，不带空格，用连字符分隔，至少在您知道自己在做什么之前是这样的。这样你以后遇到的问题就会更少。你的网站应该有什么样的结构?接下来，让我们看看测试站点应该具有什么样的结构。在我们创建的任何网站项目中，最常见的东西是一个索引HTML文件和包含图像、样式文件和脚本文件的文件夹。现在让我们创建这些: index . html这个文件通常包含你的主页内容，也就是人们第一次访问你的网站时看到的文本和图像。使用文本编辑器，创建一个名为index . html保存在你的试验场地文件夹中。 图片文件夹:此文件夹将包含您在网站上使用的所有图像。创建一个名为图片,在你试验场地文件夹中。 风格文件夹:这个文件夹将包含用于样式化你的内容的CSS代码(例如，设置文本和背景颜色)。创建一个名为风格,在你试验场地文件夹中。 脚本文件夹:这个文件夹将包含所有的JavaScript代码用于添加到您的网站的交互功能(例如，按钮加载数据时点击)。创建一个名为脚本,在你试验场地文件夹中。 注意:在Windows计算机上，您可能很难看到文件名，因为Windows有一个名为隐藏已知文件类型的扩展名默认开启。通常，您可以通过转到Windows资源管理器，选择文件夹选项…选项,取消勾选隐藏已知文件类型的扩展名复选框，然后单击好吧． 有关你的Windows版本的更多具体信息，你可以在网上搜索。 文件路径要使文件相互通信，您必须在它们之间提供一个文件路径——基本上就是一个路由，以便一个文件知道另一个文件的位置。为了演示这一点，我们将在我们的index . html文件，并使其显示您在文章中选择的图像“你的网站会是什么样子?”或者，您可以选择一个现有的图像，您的处置，在您的计算机上或从网络，并使用它在以下步骤: 将前面选择的图像复制到图片文件夹中。 打开你的index . html文件，并将以下代码插入到文件中，如图所示。现在不要担心这一切意味着什么——我们将在本系列的后面更详细地查看这些结构。 我的测试页面 复制到剪贴板 这条线

你的网站看起来会是什么样子? 以前的 概述:开始使用web 下一个 你的网站看起来会是什么样子?讨论在写代码之前你必须为你的网站做的规划和设计工作，包括“我的网站提供什么信息?”，“我想要什么字体和颜色?”和“我的网站做什么?”最重要的是:计划在做任何事情之前，你需要一些想法。你的网站应该做什么?一个网站基本上可以做任何事情，但是，对于你的第一次尝试，你应该保持简单。我们首先创建一个带有标题、图像和几个段落的简单网页。 首先，你需要回答以下问题: 你的网站是关于什么的?你喜欢狗、纽约还是吃豆人? 关于这个主题，你提供了什么信息?写一个标题和几个段落，然后想一个你想在你的页面上显示的图像。 你的网站是什么样的，用简单的高级术语来说?底色是什么?什么样的字体比较合适:正式的、卡通的、醒目的、含蓄的? 注意:复杂的项目需要详细的指导方针，包括颜色、字体、页面条目之间的间距、适当的写作风格等所有细节。这有时被称为设计指南、设计系统或品牌手册，你可以在Firefox光子设计系统． 画出你的设计草图接下来，拿起笔和纸，大致勾勒出你想要的网站外观。对于你的第一个简单的网页，没有太多的草图，但你现在应该养成这样做的习惯。这真的很有帮助——你不必非得是梵高! 注意:即使是在真实的、复杂的网站上，设计团队通常从纸上的粗略草图开始，然后使用图形编辑器或网络技术构建数字模型。 网络团队通常包括一个图形设计师和一个用户体验(用户体验)设计师。平面设计师将网站的视觉效果整合在一起。用户体验设计师在处理用户将如何体验和与网站互动方面扮演着更抽象的角色。 选择你的资产现在，最好开始把最终会出现在网页上的内容放在一起。文本你应该仍然保留之前的段落和标题。把这些放在身边。主题颜色要选择颜色，请转到颜色选择器找一个你喜欢的颜色。当你点击一个颜色，你会看到一个奇怪的六个字符的代码，比如# 660066． 这就叫做十六进制代码(十六进制的简称)，表示你的颜色。先把代码复制到安全的地方。 图片要选择图像，请转到谷歌图片然后寻找合适的东西。 当您找到您想要的图像时，单击该图像以获得其放大视图。 右键单击图像(Ctrl +在Mac上单击)，选择将图片保存为……，并选择一个安全的地方保存图像。或者，复制图像的网址从您的浏览器的地址栏供以后使用。 请注意，web上的大多数图像，包括谷歌图像，都是受版权保护的。为了减少侵犯版权的可能性，您可以使用谷歌的许可过滤器。点击工具按钮，然后就得到结果使用权选项出现在下面。你应该选择这个选项Creative Commons许可． 字体选择字体: 去谷歌字体找一个你喜欢的。 将谷歌提供给您的代码行复制到文本编辑器中，以便保存以备以后使用。 有关使用谷歌字体的详细信息，请参见这个页面 以前的 概述:开始使用web 下一个 在这个模块 安装基本软件 你的网站看起来会是什么样子? 处理文件 HTML基础知识 CSS基本知识 JavaScript基础知识 发布你的网站 网络是如何运作的 发现这个页面有问题吗?编辑上的GitHub源上GitHub将此内容报告为问题GitHub想自己解决这个问题吗?看到我们的贡献指南．最后修改:2022年2月2日,由MDN贡献者

安装基本软件 概述:开始使用web 下一个 在安装基本软件，我们将向您展示您需要什么工具来进行简单的web开发，以及如何正确安装它们。专业人士使用什么工具? 一台电脑． 也许这对一些人来说是显而易见的，但你们中的一些人正在用手机或图书馆的电脑阅读这篇文章。对于严肃的网页开发，最好投资一台运行Windows、macOS或Linux的台式机或笔记本电脑。 一个文本编辑器，用来写代码。这可以是一个文本编辑器(例如。Visual Studio代码，notepad++，崇高的文本，原子，GNU Emacs,或VIM)，或混合编辑器(例如。Dreamweaver或WebStorm)． Office文档编辑器不适合这种用途，因为它们依赖于隐藏的元素，会干扰web浏览器使用的渲染引擎。 Web浏览器，来测试代码。目前，最常用的浏览器是火狐，铬，歌剧，Safari，Internet Explorer和微软的优势． 您还应该测试您的站点在移动设备和目标用户可能仍在使用的旧浏览器(如IE 8-10)上的表现。猞猁，一个基于文本的终端web浏览器，可以很好地看到你的网站是如何被视障用户体验的。 图形编辑器,就像GIMP，Figma，油漆。净，Photoshop，草图或XD，为你的网页制作图像或图形。 一种版本控制系统制造技术例如，管理服务器上的文件、与团队合作项目、共享代码和资产以及避免编辑冲突。现在,Git最流行的版本控制系统是什么GitHub或GitLab托管服务。 FTP程序，用于旧的虚拟主机帐户，以管理服务器上的文件(Git正越来越多地取代FTP)。有大量的(S)FTP程序可用，包括Cyberduck，获取和FileZilla． 一个自动化系统,就像Webpack，咕哝着说,或狼吞虎咽地吃自动执行重复的任务，例如最小化代码和运行测试。 库、框架等，以加快编写常用功能。库往往是一个现有的JavaScript或CSS文件，提供现成的功能供您在代码中使用。而框架则更倾向于这种想法，它提供了一个带有一些自定义语法的完整系统，让你可以在此基础上编写一个web应用。 更多的工具除了! 我现在真正需要的工具是什么?这看起来像是一个可怕的列表，但幸运的是，你可以在不了解这些内容的情况下开始web开发。在本文中，我们将为您设置一个最小值—一个文本编辑器和一些现代的web浏览器。安装文本编辑器您的计算机上可能已经有了一个基本的文本编辑器。默认情况下，Windows包括记事本macOS也随之而来文本编辑． Linux发行版有所不同;Ubuntu提供了中用户默认情况下。 对于网页开发，你可能会找到比Notepad或TextEdit更好的工具。我们建议从Visual Studio代码这是一个免费的编辑器，提供实时预览和代码提示。安装现代网络浏览器现在，我们将安装两个桌面网络浏览器来测试我们的代码。请选择以下的操作系统，并按相关连结下载你喜爱的浏览器的安装程序: Linux:火狐，铬，歌剧，勇敢的． 窗口:火狐，铬，歌剧，Internet Explorer，微软的优势，勇敢的(Windows 10默认带有Edge;如果你有Windows 7或以上版本，你可以安装ie11;否则，您应该安装一个替代浏览器)。 macOS:火狐，铬，歌剧，Safari，勇敢的(macOS和iOS系统默认带有Safari浏览器)。 在继续之前，您至少应该安装两个这样的浏览器，并为测试做好准备。 注意:Internet Explorer与一些现代网络功能不兼容，可能无法运行您的项目。你通常不需要担心让你的网络项目与它兼容，因为很少有人仍然在使用它——当然，在你学习的时候不要太担心它。有时您可能会遇到需要支持的项目。 安装本地web服务器有些例子需要通过web服务器运行才能成功工作。你可以找到如何做这个如何设置本地测试服务器? 概述:开始使用web 下一个 在这个模块 安装基本软件 你的网站看起来会是什么样子? 处理文件 HTML基础知识 CSS基本知识 JavaScript基础知识 发布你的网站 网络是如何运作的 发现这个页面有问题吗?编辑上的GitHub源上GitHub将此内容报告为问题GitHub想自己解决这个问题吗?看到我们的贡献指南．最后修改:2022年2月3日,由MDN贡献者

学习网站开发欢迎来到MDN学习领域。本系列文章旨在指导完全的web开发初学者，告诉他们开始编写网站所需的一切。 MDN这一领域的目标不是让您从“初学者”变成“专家”，而是让您从“初学者”变成“熟练”。从那里，你应该能够开始自己的道路，学习剩下的MDN，以及其他需要大量之前知识的中级到高级资源。 如果你是一个完全的初学者，web开发可能是具有挑战性的-我们将握着你的手，并提供足够的细节，让你感到舒适和正确地学习主题。无论您是一个学习web开发的学生(自己学习还是作为课堂的一部分)，一个寻找课堂材料的老师，一个业余爱好者，或者只是想了解更多关于web技术如何工作的人，您都应该感觉像在家里一样。 想成为前端网页开发者? 我们整合了一门课程，其中包含了你为实现目标所需要的所有基本信息。 开始 从哪里开始完整的初学者如果你是一个完全的web开发初学者，我们建议你开始通过我们的开始使用网络模块，为web开发提供了一个实用的介绍。除了基础知识如果你已经有了一点知识，下一步就是学习超文本标记语言和CSS具体:从我们做起介绍HTML模块，继续我们的CSS的第一步模块。移动到脚本如果您已经熟悉HTML和CSS，或者您主要对编码感兴趣，那么您将希望继续学习JavaScript或服务器端开发。从我们开始JavaScript的第一步和服务器端第一步模块。框架和工具在掌握了基本的HTML、CSS和JavaScript之后，您应该学习以下内容客户端web开发工具，然后考虑深入调查客户端JavaScript框架,网站服务器端编程． 注意:我们的术语表提供了术语的定义。此外，如果您对网络开发有什么具体的问题，我们的常见问题小组也许能帮到你。 随机词汇表条目 TLDTLD (顶级域名)是互联网分级DNS(域名系统)中最通用的域名。TLD是域名的最后一个组成部分，例如“org”developer.mozilla.org．主题下面是我们在MDN学习领域中涉及的所有主题的列表。 开始使用网络 为完全初学者提供了web开发的实用介绍。 HTML——构建网络 HTML是一种语言，我们使用它来构造内容的不同部分，并定义它们的意义或目的。本主题详细地教授HTML。 CSS -样式化网页 CSS是一种语言，我们可以用它来设计和布局我们的网页内容，以及添加动画等行为。本主题将全面介绍CSS。 JavaScript——动态客户端脚本 JavaScript是一种脚本语言，用于为网页添加动态功能。本主题教授了熟悉编写和理解JavaScript所需的所有基本知识。 Web表单——处理用户数据 Web表单是与用户交互的有力工具——通常，它们用于从用户那里收集数据，或者允许用户控制用户界面。在下面列出的文章中，我们将涵盖结构化、样式化和与web表单交互的所有基本方面。 可访问性——让网络为每个人所用 可访问性是指让尽可能多的人可以使用web内容，而不考虑残疾、设备、地点或其他差异因素。这个主题给了你所有你需要知道的。 Web性能-使网站快速和响应 Web性能是确保Web应用程序快速下载和响应用户交互的艺术，而不考虑用户的带宽、屏幕大小、网络或设备性能。 工具和测试 本主题涵盖了开发人员用来促进其工作的工具，如跨浏览器测试工具、测试器、格式化器、转换工具、版本控制系统、部署工具和客户端JavaScript框架。 网站服务器端编程 即使您专注于客户端web开发，了解服务器和服务器端代码特性是如何工作的仍然是有用的。本主题介绍了服务器端如何工作，并详细介绍了如何使用两个流行的框架:Django (Python)和Express (Node.js)构建服务器端应用。 获取我们的代码示例您将在学习区域中遇到的代码示例都是GitHub上可用． 如果你想把它们全部复制到你的电脑上，最简单的方法是下载最新的主代码分支的ZIP． 如果你喜欢以一种更灵活的方式复制回购，允许自动更新，你可以遵循更复杂的说明: 安装Git在您的机器上。这是GitHub工作的底层版本控制系统软件。 打开你的电脑命令提示符(视窗)或终端机(Linux，macOS）. 要将学习区域repo复制到你的命令提示符/终端所指向的当前位置的一个名为learning-area的文件夹中，使用以下命令:git克隆https://github.com/mdn/learning-area复制到剪贴板 现在，您可以进入该目录并找到您要查找的文件(使用Finder/File Explorer或cd命令）. 你可以更新学习区GitHub上的主版本的任何更改都可以通过以下步骤进行: 在命令提示符/终端中，进入学习区目录使用cd． 例如，如果你在父目录中:cd学习区复制到剪贴板 使用如下命令更新存储库:git拉复制到剪贴板 联系我们如果你想和我们联系，最好的方法是在我们的话语论坛． 我们希望听到您关于任何您认为在网站上错误或缺失的东西，关于新的学习主题的请求，关于您不理解的项目的帮助请求，或任何其他问题或担忧。 如果您有兴趣帮助开发/改进内容，请查看如何提供帮助保持联系!我们非常乐意与您交谈，无论您是学习者，教师，有经验的web开发人员，或其他有兴趣帮助改善学习经验的人。另请参阅 Mozilla开发人员通讯 我们的通讯为web开发人员，这是一个优秀的资源，为所有级别的经验。 学习JavaScript 一个优秀的资源，为有抱负的web开发人员-学习JavaScript在一个互动的环境，简短的课程和交互式测试，由自动评估指导。前40节课是免费的，完整的课程只需要一次性支付少量费用就可以了。 Web启发 这是一系列解释网络基础的视频，针对网络开发的绝对初学者。由杰雷米Patonnier． Codecademy 一个学习编程语言的互动网站。 BitDegree 基于游戏化学习过程的基本编码理论。主要针对初学者。 Code.org 基本的编码理论和实践，主要针对儿童/完全初学者。 EXLskills 免费和开放的课程，学习技术技能，导师和基于项目的学习。 freeCodeCamp.org 交互式网站与教程和项目学习web开发。 网络文化地图 一个入门级网络素养和21世纪技能的框架，它还提供了按类别分类的教学活动。 Edabit 成千上万的交互式JavaScript挑战。 发现这个页面有问题吗?编辑上的GitHub源上GitHub将此内容报告为问题GitHub想自己解决这个问题吗?看到我们的贡献指南．最后修改:2022年3月15日,由MDN贡献者

总阻塞时间(TBT)是首次渲染时间(FCP)和可互动时间(TTI)之间的这段时间内，用户无法和浏览器交互的时间。

可交互时间(Time to Interactive TTI) 是指从页面加载开始到主要资源加载完成，并且能够快速可靠地响应用户输入的这段时间。

首次内容渲染(FCP)是指从页面开始加载，到页面上的任何内容在屏幕上呈现的时间。对于这个指标，“内容”指的是文本、图像(包括背景图像)、SVG图像，甚至是非空白的Canva对象。