Shaw
0%

Web 概述 ⭐

Posted on Edited on In

Web 概述

HTML

超文本标记语言（HTML）是你用来组织你的网络内容，并赋予它意义和目的的代码。例如，我的内容是一组段落还是一个要点列表？我的页面上是否插入了图片？我有一个数据表吗？

CSS

我们仅需使用 HTML 就可以呈现出构成网站的所有静态内容，但是假如我们需要更加舒适的呈现方式，例如，你希望文本是黑色还是红色？内容应该画在屏幕的什么地方？应该用什么背景图片和颜色来装饰你的网站？此时层叠样式表（CSS）就是你用来为你的网站设置样式的代码

JavaScript

JavaScript 是一种编程语言，你用它来给你的网站添加交互功能。例如游戏、当按钮被按下或数据被输入表格时发生的事情、动态造型效果、动画等

处理文件

一个网站包含许多文件：文本内容、代码、样式表、媒体内容，等等。当你建立一个网站时，你需要在计算机上将这些文件以合理的结构组织起来，确保文件之间交互畅通，并在你最终将它们上传到服务器之前使你的所有内容看起来正确。

在我们创建的任何网站项目 web-project 中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹

  1. index.html：这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片
  2. images 文件夹：这个文件夹包含网站上使用的所有图片
  3. styles 文件夹：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）
  4. scripts 文件夹：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）

发布网站

获得主机服务和域名

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

  • 主机服务：在主机服务提供商的Web 服务器上租用文件空间。将你网站的文件上传到这里，然后服务器会提供 Web 用户需求的内容
  • 域名：一个可以让人们访问的独一无二的地址，比如 http://www.mozilla.org或 https://username.github.io/。你可以从域名注册商租借域名

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

使用在线工具如 GitHub

GitHub 是一个“社交编程”网站。它允许你上传代码库并储存在 Git 版本控制系统里。然后你可以协作代码项目，系统是默认开源的，也就是说世界上任何人都可以找到你 GitHub 上的代码。去使用 GitHub，从中学习并且提高自己吧！你也可以对别人的代码那样做！这是一个非常重要、有用的社区，而且 Git/GitHub 是非常流行的版本控制系统 — 大部分科技公司在工作中使用它。GitHub 有一个非常有用的特点叫 GitHub pages，允许你将网站代码放在网上

使用基于Web的集成开发环境
  • JSBin (可以使用 GitHub 账号进行登录)
  • CodePen (可以生成外链内嵌到其他网页中，在以后文章的范例中，我将会使用到这一功能)
  • Glitch (响应时间较长)
  • JSFiddle (无法访问此页面)
通过 GitHub 发布

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

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

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

  4. 然后，将你的网站文件夹里的内容拖拽到你的资源库 ( repository )，再点击 Commit changes

  5. 现在将你的浏览器转到 username.github.io 来在线查看你的网站

Web 如何运作

客户端和服务器

连接到互联网的计算机被称作客户端和服务器。下面是一个简单描述它们如何交互的图表：

  • 客户端是典型的 Web 用户入网设备（比如，你连接了 Wi-Fi 电脑，或接入移动网络的手机）和设备上可联网的软件（通常使用像 Firefox 和 Chrome 的浏览器）
  • 服务器是存储网页，站点和应用的计算机。当一个客户端设备想要获取一个网页时，一份网页的拷贝将从服务器上下载到客户端机器上来在用户浏览器上显示
其他部分

上文所述的客户端和服务器并不能完成全部工作。还有其他必要的部分，我们将在下面讲述

现在，让我们假设 Web 就是一条路。路的一端是客户端，就像你的家。另一端则是服务器，就像你想去的商店。此时你要了解其他部分：

  • 网络连接: 允许你在互联网上发送和接受数据。基本上和你家到商店的街道差不多
  • TCP/IP: 传输控制协议和因特网互连协议是定义数据如何传输的通信协议。这就像你去商店购物所使用的交通方式，比如汽车或自行车（或是你能想到的其他可能）
  • DNS: 域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时，浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器，才能发送 HTTP 请求到正确的地方。就像你要知道商店的地址才能到达那
  • HTTP: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议（protocol）。就像你下订单时所说的话一样

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

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

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

假如你生活在一个封闭的市区叫做“高山市”，该市 ice-cream 远近闻名

  • 互联网：好比地球上众横交错的道路
  • 网络连接：外界的道路接入市区交通网络。从此，市区里的 ice-cream 就可以运出去卖了
  • TCP/IP：为了将市里的 ice-cream 能规范有效的运卖出去而不出问题，市长作出如下规定：“用规格刚好 20 cm * 20 cm * 20 cm 的泡沫箱来装，之后外面又用相应规格的纸箱包裹上，最后打上透明胶”。并且要求，对方收到时，一定要外包装完好，不然就会补发。而且还给对方发了一张发货单，明确说明了，ice-cream 有多少，是用什么方法包装的，只有货和发货单对上了，对方才会确认收货
  • DNS：突然一天，野比大雄想吃 ice-cream，就跟叮当猫说，“我听说高山市（域名）的 ice-cream 好，要他们那个套餐一选项啊！”。叮当猫一听，说好吧大雄，我也不知道高山市在哪。打开地图查（DNS）吧，一查，原来是在日本本州岛岐阜县（IP 地址）。于是叮当猫去了高山市，找了市长，告诉市长，要套餐一，要用时光机快递，并且留下了野比大雄家的地址
  • HTTP：过了几天，野比大雄一看，有快递来了，来了这么一句，“只收‘时光机’，拒收其他快递”。司机忙说，“是时光机，是时光机”，这才对上暗号，野比大雄收下了货
  • 组成文件：送来的货可不止一车，而且也不止一种 ice-cream，有巧克力味的，也有香草味的
    • 代码：有点像，市长事先安排的说明书，让司机到了地方，如何卸车，货放到什么位置，而野比大雄看说明书，知道什么样的 ice-cream 放到什么位置上，怎么样 ice-cream 如何食用最佳，等等
    • 资源：不同种类的 ice-cream
解析组成文件的顺序

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

  • 浏览器首先解析 HTML 文件，并从中识别出所有的 <link> 和 <script> 元素，获取它们指向的外部文件的链接
  • 继续解析 HTML 文件的同时，浏览器根据外部文件的链接向服务器发送请求，获取并解析 CSS 文件和 JavaScript 脚本文件
  • 接着浏览器会给解析后的 HTML 文件生成一个 DOM 树（在内存中），会给解析后的 CSS 文件生成一个 CSSOM 树（在内存中），并且会编译和执行解析后的 JavaScript 脚本文件
  • 伴随着构建 DOM 树、应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件，浏览器会在屏幕上绘制出网页的界面；用户看到网页界面也就可以跟网页进行交互了
DNS 解析

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

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

网页可以通过 IP 地址直接访问。您可以通过在 DNS 查询工具 等工具中输入域名来查找网站的 IP 地址

注：通过 IP 访问和通过域名访问并不完全相同

Reference

  1. Web 开发技术主要包括 HTML, CSS, JavaScript 等。新手入门可以阅读 Learn web development | MDN，会对基本的概念有些认识。
  2. MDN Web Docs 社区提供了中文翻译版 学习 Web 开发 | MDN，可供英文水平欠佳的同学学习使用
  3. 冰菓的主取景地位于日本本州岛岐阜县北部的高山市