blob: de8f9956f5b8226659e692feccf52712e3836a63 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
title: 安装基础软件
slug: Learn/Getting_started_with_the_web/Installing_basic_software
tags:
- 初学者
- 安装
- 工具
- 文本编辑器
- 浏览器
- 设置
translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
---
<p>{{LearnSidebar}}</p>
<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
<div class="summary">
<p>本小节将介绍常用 web 开发工具的种类和安装方法。</p>
</div>
<h2 id="专业人员使用哪些工具？">专业人员使用哪些工具？</h2>
<ul>
<li><strong>计算机，</strong>虽然显而易见，但是还有些人会通过手机或者公共计算机来阅读这篇文章。严肃的 Web 开发，最好还是使用运行 Windows，Mac，或者 Linux 系统的台式机或笔记本电脑。</li>
<li><strong>文本编辑器</strong>，用来编写代码。可以是纯文本编辑器（比如 <a href="https://code.visualstudio.com/">Visual Studio Code</a>、<a href="https://www.sublimetext.com/">Sublime Text</a>、<a href="https://atom.io/">Atom</a>、<a href="http://brackets.io/">Brackets</a>、<a href="https://www.gnu.org/software/emacs/">GNU Emacs</a> 或 <a href="https://www.vim.org/">VIM</a>）；也可以是混合编辑器（比如 <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a> 或 <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>）。Office 文档编辑器并不适用，因为它们依赖的隐藏元素会干扰浏览器渲染机制。</li>
<li><strong>Web 浏览器</strong>，用来测试代码。如今使用最多的浏览器有 <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>，<a href="https://www.google.com/chrome/browser/">Chrome</a>，<a href="http://www.opera.com/">Opera</a>， <a href="https://www.apple.com/safari/">Safari</a>，<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 和 <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>。另外，还需测试网站在移动设备和老式浏览器（如 IE 8-10）上的表现。还有 <a href="https://lynx.browser.org/">Lynx</a>, 一个基于文本的终端 Web 浏览器，可用于测试视力障碍用户的浏览体验。</li>
<li><strong>图像编辑器</strong>，像 <a href="http://www.gimp.org/">GIMP</a>、<a href="http://www.getpaint.net/">Paint.NET</a>、<a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> 或者 <a href="https://www.adobe.com/products/xd.html">XD</a>，用来编辑网页中的图形图像。</li>
<li><strong>版本控制系统</strong>，用来管理服务器上文件，支持项目团队协作，共享代码资源，以及避免编辑冲突。当今最流行的版本控制工具是 <a href="http://git-scm.com/">Git</a>，同时 <a href="https://github.com/">GitHub</a> 以及 <a href="https://gitlab.com/">GitLab</a> 等基于 Git 的代码托管服务网站也非常流行。</li>
<li><strong>FTP 工具</strong>，老式 Web 托管账户用来管理服务器上文件（正在被 <a href="http://git-scm.com/">Git</a> 迅速取代）。有很多 (S)FTP 工具软件，比如 <a href="https://cyberduck.io/">Cyberduck</a>、<a href="http://fetchsoftworks.com/">Fetch</a> 和 <a href="https://filezilla-project.org/">FileZilla</a>。</li>
<li><strong>自动化构建工具，</strong> 用来自动完成压缩代码和运行测试等重复性任务，比如 <a href="http://gruntjs.com/">Grunt</a> 或 <a href="http://gulpjs.com/">Gulp</a>。</li>
<li>模板，库，框架等等，可提高效率的工具。</li>
<li>还有很多！</li>
</ul>
<h2 id="哪些是当务之急？">哪些是当务之急？</h2>
<p>上面的列表太冗长了，不过幸运的是，初学 Web 开发并不需要面面俱到。本文将列出一个尽可能短的开发工具清单——一款文本编辑器和几款现代 Web 浏览器。</p>
<h3 id="安装文本编辑器">安装文本编辑器</h3>
<p>大多系统都会默认配备一款基本的文本编辑器。比如 Windows 的 <a href="https://en.wikipedia.org/wiki/Notepad_%28software%29">记事本</a>， macOS 的 <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>，Ubuntu 的 <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a>，Linux 发行版各不相同。</p>
<p>Web 开发中可以使用比记事本和 TextEdit 更好的工具。 推荐从 <a href="https://code.visualstudio.com/">Visual Studio Code</a> 开始，免费且提供实时预览和代码提示。</p>
<h3 id="安装现代_Web_浏览器">安装现代 Web 浏览器</h3>
<p>然后，针对不同操作系统，安装几款用来测试的桌面 Web 浏览器：</p>
<ul>
<li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="http://www.opera.com/">Opera</a>、<a href="https://brave.com/">Brave</a>。</li>
<li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="http://www.opera.com/">Opera</a>、<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>（Windows 7 及以上版本可以安装 Internet Explorer 11）、<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>（Windows 10 的默认浏览器，采用 Chromium 内核）、<a href="https://brave.com/">Brave</a>。</li>
<li>macOS: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="http://www.opera.com/">Opera</a>、<a href="https://www.apple.com/safari/">Safari</a>（macOS 和 iOS 的默认浏览器）、<a href="https://brave.com/">Brave</a>。</li>
</ul>
<p>要至少准备两款或以上的浏览器用于测试。</p>
<div class="blockIndicator note">
<p>Internet Explorer 对一些现代 Web 功能兼容性不佳，运行现代工程可能会失败。</p>
</div>
<h3 id="安装本地_Web_服务器">安装本地 Web 服务器</h3>
<p>一些示例需要通过 Web 服务器运行才能正常工作。阅读 <a href="/zh-CN/docs/Learn/Common_questions/set_up_a_local_testing_server">如何设置本地测试服务器？</a>了解更多。</p>
<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
<h2 id="本章目录">本章目录</h2>
<ul>
<li id="Installing_basic_software"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a></li>
<li id="What_will_your_website_look_like"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">设计网站外观</a></li>
<li id="Dealing_with_files"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a></li>
<li id="HTML_basics"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 基础</a></li>
<li id="CSS_basics"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基础</a></li>
<li id="JavaScript_basics"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基础</a></li>
<li id="Publishing_your_website"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website">发布网站</a></li>
<li id="How_the_web_works"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web 工作机制</a></li>
</ul>
|
