学习web开发|青训营笔记

学习web开发安装软件

准备计算机（windows、macOS、Linux台式或笔记本电脑）

文本编辑器（写代码用）visual studio code、sublime text、atom、GNU Emacs、VIM。混合编辑器（Dreamweaver、WebStorm）

网络浏览器（测试代码用）Firefox、Chrome、Opera、Safari、Internet Explorer、Microsoft Edge。

图形编辑器（GIMP、Figma、Paint.NET、Photoshop、Sketch、XD）

版本控制系统（Git、GitHub、GitLab）

FTP工具（Cyberduck/Fetch/FileZilla）

自动化构建工具（Webpack、Grunt、Gulp）

设计网站外观主题颜色

使用色彩选择器挑选心仪的颜色。当选中某种颜色时，会显示一个六位神秘代码，类似于#660066。它是一个十六进制数，用于表示颜色。将其复制并暂存。

图像

访问 Google图像搜索 来搜索合适的图片。

当找到你想要的图像时，点击该图像以获得其放大的视图。右键单击图像（Mac 上为 Ctrl + 单击），选择将图像另存为 ... ，并选择一个安全的地方来保存你的图像。或者，从浏览器地址栏中复制图片的网址，以便以后使用。

注意: 网络上的大多数图片，包括谷歌图片中的图片，都是有版权的。为了减少侵权的可能性，可以使用谷歌的许可证过滤器。点击工具按钮，然后点击下面出现的使用权限选项。你应该选择知识共享许可这个选项。

字体

要选择一种字体：

访问 Google Fonts 选择一种喜欢的字体。将谷歌给你的代码行复制至文本编辑器中，以保存备用。更多细节，请参见developers.google.com/fonts/docs/…处理文件网站应该保存在哪里？

本地网站：所有相关文件放在一个单独的文件夹中，可以映射出服务器端站点文件结构。

选择一个地方来存储你的网站项目。在你选择的地方，创建一个名为 web-projects（或类似）的新文件夹。这是你所有的网站项目的存放地。在这个文件夹中，创建另一个文件夹来存放你的第一个网站。称之为 test-site（或更有想象力的东西）。关于大小写和空格

要求完全使用小写字母命名文件夹和文件，没有空格。这是因为：

许多计算机，特别是网络服务器，是区分大小写的。浏览器、网络服务器和编程语言对空格的处理并不一致。最好用连字符（-）而不是下划线（_）来分隔单词。

文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符，但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写网站路径大小写，用短横线来分隔。这可以避免许多问题。

网站结构

在创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们来创建这些：

index.html ：这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器网站路径大小写，创建一个名为index.html的新文件，并将其保存在test-site文件夹内。images 文件夹：这个文件夹包含网站上使用的所有图片。在 test-site 文件夹内创建一个名为 images 的文件夹。styles 文件夹：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 test-site文件夹内创建一个名为 styles 的文件夹。scripts 文件夹：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 test-site 文件夹内创建一个名为 scripts 的文件夹。文件路径

文件路径的一些通用规则：

注意：Windows 的文件系统使用反斜杠而不是正斜杠，例如： C:\Windows 。这在 HTML 中并不重要——即使你在 Windows 系统上进行开发，你也应该在代码中使用正斜杠。