前端基础知识

安装软件

文本编辑器，用来编写代码。纯文本编辑器如 Sublime、Brackets、Atom、Visual Studio Code；混合的编辑器如 Dreamweaver、WebStorm。Office文档编辑器不适合在此使用，因为他们依赖的隐藏元素会干扰浏览器渲染机制。
浏览器，用来测试你的代码。Firefox、Chrome、Opera、Safari、Internet Explorer、Microsoft Edge。你同时需要在移动设备和任何你的目标用户可能使用的老式浏览器（如 IE 8-10）中测试你的网页表现如何。
图像编辑器，用来编辑你的网页所需的图像。The GIMP、Paint.NET、Photoshop
版本控制系统，用来管理服务器文件，支持项目中的团队协作，共享代码与资源，以及避免编辑冲突。Git、GitHub
FTP 工具软件，在旧式使用网络账户管理的服务器上，通常我们使用 FTP 进行文件管理（Git 正在取代 FTP）。Cyberduck、Fetch、FileZilla。
自动化构建工具，用来自动完成重复的任务，例如压缩代码和运行测试。Grunt、Gulp
模板，库，框架

开始之前，你需要回答这些问题：
- 你的网页内容是什么？你喜欢狗狗，纽约或者吃豆人吗？
- 你的主题中要展示什么信息？编写一个标题和几个段落，再想几张你想展示出来的图片。
- 你的网页长得什么样？用高级一点的术语来说就是，你的背景颜色是什么？什么字体合适：正式的，卡通的，粗犷的，还是精细的？
设计草稿图，使用笔和纸
选择你的内容
- 文本
- 主题颜色，https://codepen.io/pen/?&editable=true
- 图像
- 字体，https://www.iconfont.cn/，http://www.google.com/fonts
- 图标，https://www.iconfont.cn/，https://fontawesome.com/?from=io，http://fontello.com/

很多计算机，特别是 Web 服务器，是对大小写敏感的。浏览器，Web服务器，还有编程语言不能一致处理空格。举个例子，如果你在文件名里使用空格，一些系统会把它这个文件名视为两个文件名。一些服务器将会把你的文件名里的空格替换为 “%20”（URI 里空格的编码），破坏你所有的链接。

应该在文件名中使用 连字符。谷歌搜索引擎把连字符当作一个词的分隔符，但不会以这种方式处理下划线。基于这些原因，至少在你知道自己在做什么之前，最好养成在文件夹和文件名中使用小写，并且使用短横线而不是空格来分隔的习惯。这样可以避免你在以后碰到一些问题。

创建一个文件夹，在文件夹中创建以下文件或文件夹

index.html ：这个文件通常将包括你的主页内容，也就是说，人们第一次进入你的网页看到的文本和图像。使用你的文本编辑器，创建一个名为 index.html 的新文件并将其保存在 test-site 文件夹。
images 文件夹 ：这个文件夹包含你网页上所有使用的图像。在 test-site 文件夹内创建一个 images 文件夹。
styles 文件夹 ：这个文件夹包含了为你的内容添加样式的样式表（比如，设置文本颜色和背景颜色）。在 test-site 文件夹内创建一个 styles 文件夹。
scripts 文件夹 ：这个文件夹包含了所有为你网页添加交互功能的 JavaScript 代码（比如点击时读取数据的按钮）。在 test-site 文件夹内创建一个 scripts 文件夹。

要引用一个位于调用的 HTML 文件 同级目录的目标文件，只需直接使用文件名，比如 my-image.jpg 。
要引用一个 子目录的文件，在路径前写下目录名并加一个斜杠，比如 subdirectory/my-image.jpg 。
要引用一个位于调用的 HTML 文件的 父级目录的目标文件，加上两个点。举个例子，如果 index.html 在 test-site 下面的一个子目录而 my-image.png 在 test-site 目录，你可以在 index.html 里使用 ../my-image.png 引用 my-image.png 。
你可以随意组合以上方法，比如 ../subdirectory/another-subdirectory/my-image.png.