Web入门

---

title: Web入门
tags: Web入门
category: MDN

安装基本软件

参考文档

专业人员使用哪些工具

1、计算机：Windows，Mac，或者 Linux 系统的台式机或笔记本电脑

2、文本编辑器：用来编写代码。可以是纯文本编辑器（比如 Visual Studio Code）；也可以是混合编辑器（比如 Dreamweaver 或 WebStorm）

3、Web 浏览器，用来测试代码。如今使用最多的浏览器有 Firefox，Chrome，Opera， Safari，Internet Explorer 和 Microsoft Edge）

4、图像编辑器，像 GIMP、Paint.NET、Photoshop 或者 XD，用来编辑网页中的图形图像

5、版本控制系统，用来管理服务器上文件，支持项目团队协作，共享代码资源，以及避免编辑冲突。当今最流行的版本控制工具是 Git，同时 GitHub 以及 GitLab 等基于 Git 的代码托管服务网站也非常流行

6、FTP 工具，老式 Web 托管账户用来管理服务器上文件（正在被 Git 迅速取代）。有很多 (S)FTP 工具软件，比如 Cyberduck、Fetch 和 FileZilla

7、自动化构建工具， 用来自动完成压缩代码和运行测试等重复性任务，比如 Grunt 或 Gulp

8、模板，库，框架等等，可提高效率的工具

设计网站外观

参考文档

第一步：做出计划

开始之前，请考虑以下问题：

1、网站的主题是什么？是狗、上海城市还是吃豆人？

2、基于所选主题要展示哪些信息？写下标题和几段文字，构思一个用于展示的图形。

3、网站采用怎样的外观？用高阶术语说就是，选什么背景色？什么字体（正式的还卡通的，粗体还是细体）？

绘制草图

接下来，拿出纸笔画出网站草图

选定内容

文本

准备好刚才撰写的标题和文字

主题颜色

打开 色彩选择器 挑选心仪的颜色

图像

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

请注意大多数网络图片（包括 Google 图片）都是受版权保护的。为了降低盗版风险，可以使用“Google 许可证过滤器”。点击“工具”按钮，然后在使用权限的选项下选择类似“标记为可再利用”的选项

字体

1、访问 Google Fonts（ 或者 阿里字体素材平台） 。打开右侧边栏可现实选中的字体家族。

2、可通过 Categories（类别）、Languages（语言）、Font Properties（字体属性）过滤想要的字体。

3、在列出的字体风格列表中，选择合适的粗细、是否倾斜等信息。

3、在右侧边栏中可以看到 Google 给出的代码片段，将其复制到文本编辑器就可以使用了。

处理文件

参考文档

网站保存在何处

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

1、确定网站项目储存位置。在该位置下创建一个文件夹（比如 web-projects）。所有网站项目都存在一处。

2、在这个文件夹里再新建一个文件夹（比如 test-site），来存放第一个网站

关于大小写和空格的提示

1、很多计算机，特别是 Web 服务器，是对大小写敏感的

2、浏览器、Web 服务器，还有编程语言处理空格的方式不一致。比如，一些系统会将包含空格的文件名其视为两个。一些服务器将会把文件名里的空格替换为 “%20”（URI 里空格的编码），从而使链接遭到破坏。最好使用中划线，而不是下划线来分离单词

文件夹和文件名使用小写，用短横线而不是空格来分隔。可以避免许多问题

网站应该使用什么结构

最基本、最常见的结构是：一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹

1、index.html ：这个文件一般包含主页内容，即用户第一次访问站点时看到的文本和图像

2、images 文件夹 ：这个文件夹包含站点中的所有图像

3、styles 文件夹 ：这个文件夹包含站点所需样式表（比如，设置文本颜色和背景颜色）

4、scripts 文件夹 ：这个文件夹包含提供站点交互功能的 JavaScript 代码（比如读取数据的按钮）

文件路径

为使文件间正常交互，应为每个文件提供访问路径，让一个文件知道另一个文件的位置

1、若引用的目标文件与 HTML 文件同级，只需直接使用文件名，比如 my-image.jpg 。

2、要引用子文件夹中的文件，要在路径前写下目录名并加一个斜杠，比如 subdirectory/my-image.jpg 。

3、若引用的目标文件位于 HTML 文件的上级，需要加上两个点。比如，如果 index.html 在 test-site 下面的一个子目录而 my-image.png 在 test-site 目录，你可以在 index.html 里使用 ../my-image.png 引用 my-image.png

发布网站

参考文档

有哪些方法可供选择

获取主机服务和域名

有一些免费服务比如 Neocities ， Blogspot 和 Wordpress

如果你想要完全控制你发布的网页，那么你将需要花钱购置：

1、主机服务 —— 在主机服务提供商的 Web 服务器上租用文件空间。将你网站的文件上传到这里，然后服务器会提供 Web 用户需求的内容。

2、域名 —— 一个可以让人们访问的独一无二的地址，比如 http://www.mozilla.org，或 http://www.bbc.co.uk 。你可以从域名注册商租借域名

许多专业的网站通过这种方法接入互联网

此外，你将需要一个 文件传输协议 程序来将网站文件上传到服务器。不同的 FTP 程序涵盖了不同的范围， 但是你通常需要使用主机服务提供商给你的详细信息（比如用户名、密码、主机名）登录到 Web 服务器 。然后程序在两个窗口里分别显示本地文件和服务器文件，这样你就可以在它们之间进行传输

在线工具

1、GitHub 有一个非常有用的特点叫 GitHub pages，允许你将网站代码放在网上

2、Google App Engine是一个让你可以在Google的基础架构上构建和运行应用的强劲平台——无论你是需要从头开始构建多级web应用还是托管一个静态网站

基于 Web 的集成开发环境

有许多web应用（JSFiddle、Thimble、JSBin、CodePen）能够仿真一个网站开发环境。你可以在这种应用——通常只有一个标签页——里输入 HTML、CSS 和 JavaScript 代码然后像显示网页一样显示代码的结果。通常这些工具都很简单，对学习很有帮助，而且至少有免费的基本功能，它们在一个独特的网址显示你提交的网页。不过，这些应用的基础功能很有限，而且应用通常不提供空间来存储图像等内容

通过GitHub发布

1、首先， 注册一个GitHub账号， 并确认你的邮箱地址。

2、接下来，你需要创建一个新的资源库( repository )来存放你的文件。

3、在这个页面上，在 Repository name 输入框里输入 username.github.io，username 是你的用户名。比如，我们的朋友 bobsmith 会输入 bobsmith.github.io。同时勾选 Initialize this repository with a README ，然后点击 Create repository。

4、然后，将你的网站文件夹里的内容拖拽到你的资源库( repository )，再点击 Commit changes（提示: 确保你的文件夹有一个 index.html 文件.）

5、现在将你的浏览器转到 username.github.io 来在线查看你的网站。比如，如果用户名为chrisdavidmills, 请转到 chrisdavidmills.github.io。（提示: 你的网站可能需要几分钟的时间才能投入使用。 如果它不能立即工作，你可能需要等待几分钟，然后再试一次。）

Web 如何运作

参考文档

客户端和服务器

1、客户端是典型的Web用户入网设备（比如，你连接了Wi-Fi的电脑，或接入移动网络的手机）和设备上可联网的软件（通常使用像 Firefox 和 Chrome的浏览器）

2、服务器是存储网页，站点和应用的计算机。当一个客户端设备想要获取一个网页时，一份网页的拷贝将从服务器上下载到客户端机器上来在用户浏览器上显示

其他部分

现在，让我们假设 Web 就是一条路。路的一端是客户端，就像你的家。另一端则是服务器，就像你想去的商店

1、网络连接: 允许你在互联网上发送和接受数据。基本上和你家到商店的街道差不多。

2、TCP/IP: 传输控制协议和因特网互连协议是定义数据如何传输的通信协议。这就像你去商店购物所使用的交通方式，比如汽车或自行车（或是你能想到的其他可能）。

3、DNS: 域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时，浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器，才能发送 HTTP 请求到正确的地方。就像你要知道商店的地址才能到达那。

4、HTTP: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议（protocol ）。就像你下订单时所说的话一样。

5、组成文件: 一个网页由许多文件组成，就像商店里不同的商品一样。这些文件有两种类型：

• 代码 : 网页大体由 HTML、CSS、JavaScript组成，不过你会在后面看到不同的技术

• 资源 : 这是其他组成网页的东西的集合，比如图像、音乐、视频、Word文档、PDF文件

• 运作过程

  当你在浏览器里输入一个网址时（在我们的例子里就是走向商店的路上时），运作顺序如下：

  1、浏览器在域名系统（DNS）服务器上找出存放网页的服务器的实际地址（找出商店的位置）。

  2、浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端（你走到商店并下订单）。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。

  3、服务器同意客户端的请求后，会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器（商店给你商品，你将商品带回家）。

  4、浏览器将数据包聚集成完整的网页然后将网页呈现给你（商品到了你的门口 —— 新东西，好棒！）

  解析组成文件的顺序

  当浏览器向服务器发送请求获取 HTML 文件时，HTML 文件通常包含 “link” 和 “script” 元素，这些元素分别指向了外部的 CSS 样式表文件和 JavaScript 脚本文件。了解这些文件被浏览器解析的顺序是很重要的：

  1、浏览器首先解析 HTML 文件，并从中识别出所有的 “link” 和 “script” 元素，获取它们指向的外部文件的链接。

  2、继续解析 HTML 文件的同时，浏览器根据外部文件的链接向服务器发送请求，获取并解析 CSS 文件和 JavaScript 脚本文件。

  3、接着浏览器会给解析后的 HTML 文件生成一个 DOM 树（在内存中），会给解析后的 CSS 文件生成一个 CSSOM 树（在内存中），并且会编译和执行解析后的 JavaScript 脚本文件。

  4、伴随着构建 DOM 树、应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件，浏览器会在屏幕上绘制出网页的界面；用户看到网页界面也就可以跟网页进行交互了

  DNS解析

  真正的网址看上去并不像你输入到地址框中的那样美好且容易记忆。它们是一串数字，像 63.245.217.105。

  这叫做 IP 地址，它代表了一个互联网上独特的位置。然而，它并不容易记忆，不是吗？那就是域名系统（DNS）被发明的原因。它们是将你输入浏览器的地址（像 “mozilla.org”）与实际 IP 地址相匹配的特殊的服务器

  数据包详解

  我们用 “包” 来描述数据从服务器到客户端传输的格式。当数据在 Web 上传输时，是以成千上万的小数据块的形式传输的。大量不同的用户都可以同时下载同一个网页。

  如果网页以单个大的数据块形式传输，一次就只有一个用户下载，无疑会让 Web 非常没有效率并且失去很多乐趣