Skip to content

Latest commit

 

History

History
217 lines (130 loc) · 10.7 KB

WebTechnologies.md

File metadata and controls

217 lines (130 loc) · 10.7 KB

Introduction to Web Development

1. How does the Internet work?

  • The Internet is a wire

    两台计算机之间必须通过有线（网线）或无线方式（WiFi 或蓝牙）「连接」起来，才能相互通信。互联网就是把计算机互相连接起来的一个大型的网络，所以互联网的本质就是一根「线」(五分钟告诉你互联网是如何工作的@Aaron Titus)，在理解互联网的工作原理时，无线连接和有线连接概念类似。

Full Internet stack

  • 路由器

    通常一个网络不仅限于两台计算机。假设有 10 台计算机，每台计算机由 9 个插头，将任何两台计算机两两连接需要45根线。为了减少线的数目，网络上的每台电脑需要链接到一个叫做**路由器（router）**的专用计算机。路由器的工作是，确保从一台电脑上发出的一条信息可以到达正确的电脑。为了把信息发送给电脑B，电脑A必须把信息发送给路由器，路由器将收到的信息转发给电脑B，并且确保信息不会发送给电脑C。

    把路由器加入到这个系统后，网络中只要10条网线（每台电脑一个插口，路由器上十个插口），就可以实现网络中的这 10 台计算机的相互通信。

  • 网络中的网

    但是，要连接成千上万，数以亿计的计算机呢？路由器本身也是一台计算机，因此，可以把两个路由器彼此连接。把计算机连接在路由器上，然后路由器连接路由器，网络规模就会变得很大。

    我们可以通过已有的电话基础设施相互连接。为了利用使用电线连接的「电话网络」来传递网络信息，我们需要一个可以将网络信息和电话基础设施可以处理的信息相互转换的基础设备——调制解调器（modem）。

    接下来，为了把信息从自己的网络发送到目的地，我们需要把自己的网络连接到互联网服务提供商（ISP）。ISP是一家可以管理一些特殊的路由器的公司，这些路由器连接其他ISP的路由器. 你的网络消息可以被ISP捕获并发送到相应的网络。互联网就是由这些所有的网络设施所组成。

  • 通过 IP 地址和域名寻找电脑

    任何连接在网络中的计算机都必须有一个唯一的地址，来标记它是哪台计算机。这个地址叫做 IP 地址，IPv4 版本的地址形如192.168.3.11，长 32 位。IP协议的最新版本是 IPv6，长 48 位，能够标识更多的计算机。

    我们通过浏览器上网时，通常使用**域名（Domain Name）**去访问一个网站。这是为了方便人类的使用，把 IP 地址映射成容易识读记忆的域名，并通过 DNS 协议完成两者的转换。

    比如，我们在命令行使用 ping 命令，获取域名为www.apple.com（苹果公司官网）对应的 IP 地址，可以得到一个 IP 地址182.247.227.19。

    ping www.apple.com
PING e6858.e19.s.tl88.net (182.247.227.19): 56 data bytes

  • 互联网和网络不一样

    互联网（Internet）是基础设施，而网络（Web）和邮箱及 IRC 等等，都是建立在这种基础设施上的服务。

2. 万维网的工作原理

重要概念 解释
网页
网站
URL
域名
网络服务器
搜索引擎
超链接
ISP

3.开发工具

软件工具 作用 备注
文本编辑器 编写代码，纯文本或混合编辑器均可 Visual Studio Code
图像编辑器 编辑网页中的图形图像 GIMP(免费)
媒体编辑器 向网站中添加音频或视频 音频 Audacity、Wavorsaur，视频 PiTiVi等
浏览器 测试代码 Chrome，Firefox，Safari ，Brave，Microsoft Edge，Lynx
版本控制 管理服务器上的文件，共享代码，团队合作，避免编辑冲突 Git（主流）
代码托管 基于 Git 的代码托管服务 GitHub、GitLab
发布工具 将本地硬盘上的文件上传到远程 Web 服务器 FTP 客户端、rsync或Git
自动化构建 自动完成压缩代码和运行测试等重复性任务 Grunt、Gulp
模板 提高效率
库 提高效率
框架 提高效率

注：初学 Web 开发掌握一款文本编辑器和几款现代主流浏览器即可。

设置本地测试服务器

文件 地址 备注
本地文件 file://本地文件路径 测试文件具有异步请求、服务端代码会导致问题
远程文件 http://或https://开头， 通过 HTTP 协议传输
服务器端语言（本地运行） 网络框架
Python 服务器端代码 Diango Web Framework（Python）、Flask
Node.js（JavaScript）服务器端代码 Express 或直接使用 Node
PHP服务器端代码 MAMP、AMPPS、LAMP

运行一个简单的本地 HTTP 服务器：使用 Python 的 SimpleHTTPServer 模块解决异步请求的问题。

  1. 安装 Python（Linux 或 macOS 系统默认已经安装）。

  2. 打开终端进入示例目录，并启动服务器。默认在本地 Web 服务器的 8000 端口上运行目录的内容，你也可以在命令中指定端口（如 7800），通过在浏览器地址栏输入localhost:7800可以访问这个服务器。

    cd 示例目录

# Python 3.x使用以下命令启动服务器
$ python -m http.server 7800

# Python 2.x使用以下命令启动服务器
$ python -m SimpleHTTPServer 7800
    Serving HTTP on 0.0.0.0 port 7800 ...
127.0.0.1 - - [20/Feb/2021 14:09:19] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [20/Feb/2021 14:09:19] code 404, message File not found
127.0.0.1 - - [20/Feb/2021 14:09:19] "GET /favicon.ico HTTP/1.1" 404 -

测试结果：

image-20210220141738942

4. 处理文件

文本、代码、样式表、媒体内容等多种文件共同组成了网站。构建站点时，要确保文件夹结构组织合理，文件之间交互通常，没有明显错误，然后再上传至服务器。

image-20210220233922884

  • 将网站保存在单独的文件夹

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

  • 使用小写命名和连字符分隔单词

    Web服务器对大小写敏感，另外浏览器、Web 服务器和编程语言处理空格的方式不一致。因此，所有的文件夹名和文件都应该使用小写字母，且没有空格。文件名中应使用连字符-。谷歌搜索引擎把连字符当做单词分隔符。

  • 网站基本结构

    结构 描述
    index.html 主页内容（用户访问站点时首先看到的文本和图像）
    images文件夹 站点中的所有图像
    styles文件夹 站点所需样式表（颜色，字体等）
    scripts文件夹 提供站点交互功能的 JavaScript 代码

  • 文件路径的通用规则

    根据引用的目标文件与 HTML 文件的层级关系，分别适用以下规则（可组合）：

    层级关系 规则
    同级 直接使用文件名，如my-image.jpg。
    子文件夹 在路径前写上目录名并加一个斜杠，在写文件名，如subdirectory/my-image.jpg。
    上级 加上两个点，如../my-image.jpg。

重要的 HTML 元素：

  • <!DOCTYPE>元素：定义正在使用的 HTML 版本
  • <title>元素：描述网页的内容，标题应简短且具有可描述性。标题会出现在搜索引擎列表、窗口的标题栏、用户的书签中。
  • <h1>元素：描述网页中最上层的标题。为了是搜索引擎或其他软件能够“理解”网页结构，务必把<h1>用于最顶层的标题。

网站品质

CSS 样式表

  • 勿用<font>标签
  • 勿用固定的字体尺寸（使用相对值）
  • 勿用很小的默认字体尺寸
  • 使用一致的背景颜色

可读性

  • 颜色对比：白底黑字、黑底白字、灰底黑字、淡蓝底黑字……
  • 字母间距：适中
  • 行距：适中
  • 避免花哨字体
  • 少用斜体

易用性

  • WAI
  • 字体大小可调节
  • 使用“alt”属性

国际化

  • 网络无国界（本地化）

  • 国际字符集

    国际日期：国际标准化（ISO）为日期定义的国际标准格式是“yyyy-mm-dd”，yyyy是年，mm是月，dd 是日。

  • HTML 标准

  • CSS 标准

  • web验证

  • WAI（无障碍网页协议，Web Accessibility Initiative）: 技术、指导方针、工具、教育、研究以及开发。

参考资料：

  1. MDN Web Docs

  2. 五分钟告诉你互联网是如何工作的

  3. 《计算机网络》（谢希仁）