web学习笔记-web入门

建立第一个网站

一、安装基础软件

文本编辑器： sublime, visual studio code, dreamweaver, webstrom
浏览器： firefox, chrome, opera, safari,
图像编辑器： the GIMP, Paint.Net, Photoshop
版本控制系统： Git，GitHub（基于Git代码托管服务网站）
【版本控制系统是用来管理服务器文件，支持项目中的团队协作，共享代码与资源，避免编辑冲突。】
**FTP工具软件：**旧式使用网络账号管理的服务器常用（现在Git正在取代FTP）

---

安装本地web服务器：

• 前提：互联网如何工作；什么是网络服务器
• 目标： 配置本地测试服务器
  互联网如何工作：
  关键词：路由器、“猫”、ISP
  了解网页，网站，网络服务器和搜索引擎的区别
  网页 web page， 网站 website， 网络服务器 web server ， 搜索引擎 search engine
  网络服务器： 硬件+软件

1. 硬件部分：一台计算机，存储了网络服务软件以及网站的组成文件（html+CSS+javaScript）
2. 软件部分：控制网络用户如何访问托管文件的几个部分，至少是一台HTTP服务器
   （HTTP服务器：能够理解URLS和HTTP。通过服务器上存储的网站的域名可以访问这个服务器，并且他还可以将他的内容分发给最终用户的设备。）
   
   当browser需要一个托管在web server 的文件，browser通过HTTP请求这个文件。当这个请求到达正确的web server，HTTP server接受这个请求，找到被请求的file，并把这个file通过HTTP发送给browser

要发布一个网站，需要一个静态或动态的服务器。

静态网络服务器（static web server），或堆栈。由计算机（软件）和HTTP服务器（软件）组成。“静态”——服务器把它托管文件“保持原样”的传到浏览器。

动态网络服务器（dynamic web server），由静态网络服务器加上额外的软件组成，最普遍的是一个应用服务器和一个数据库。“动态”——服务器把托管文件传送到浏览器之前会对这些托管文件进行更新。

托管文件
通过HTTP交流

超文本传输协议
文本化：所有命令都是纯文本（plain-text）和人类可读（human-readable）
无状态：服务器和客户都不会记住之前的交流

二、网站规划

Step 1 做出计划

• 网页内容
• 主题要展示的信息
• 网页样子

Step 2 为你的设计出一个草稿图
Step 3选择你的内容

1. 文本
2. 主题颜色（插件the color picker）
3. 图像
4. 字体

文件处理

5. 网站存放位置
6. 大小写和空格不能随意使用
7. 网站使用什么结构
   index.html
   images
   styles
   scripts
8. 文件路径
   规则：
   1.引用一个位于调用HTML文件同级目录的目标文件，只需使用文件名
   2.引用子目录文件，在路径前写下目录名并加一个斜杠
   3.引用位于调用的HTML文件的父级目录的目标文件，加上两个点
   4.以上方法可随意组合

HTML基础

CSS 基础

JavaScript基础

三、发布你的网站

方法

获取主机服务和域名

主机服务—— 在主机服务提供商的web服务器上租用文件空间。将网站内容上传到这里，然后服务器会提供web用户需求的内容。
**域名——**一个可以让人们访问的独一无二的地址
**文件传输协议 程序——**不同FTP程序涵盖了不同的范围，通常需要使用主机服务提供商给你的详细信息登录到web服务器。然后程序在两个窗口里分别显示本地文件和服务器文件，这样就可以在它们之间传输

使用在线工具GitHub或Google App Engine

使用像Thimble的基于web的集成开发环境

通过GitHub发布

1.注册GitHub账号
2.创建一个新的资源库repository存放你的文件
3.在Repository name 输入框输入 username.github.io(username是你的用户名)
同时勾选 Initialize this repository with a README，然后create repository
4.将网站文件夹的内容拖到你的资源库repository，再点击commit changes
5.将浏览器转到uesername.github.io在线查看网站

DNS请求如何工作

1.在浏览器地址栏输入mozilla.org
2.你的浏览器询问你的计算机是否已经识别此域名所确定的IP地址（使用本地DNS缓存）。如果是的话，这个域名转换为IP地址，然后浏览器与网络服务器交换内容。结束。
3.如果你的电脑不知道mozilla.org域名背后的IP，它会询问一个DNS服务器，这个服务器的工作就是告诉你的电脑已经注册的域名所匹配的IP
4.现在电脑知道了要请求的IP地址，你的浏览器能够与网络服务器交换内容。

四、万维网怎么工作的

1.客户端和服务器

客户端——web用户入网设备
服务器——存储网页、站点和应用的计算机

2.其他部分

网页连接——允许你在互联网上发送和接受数据
TCP/IP——传输控制协议和因特网互连协议是定义数据如何传输的通信协议
DNS——域名系统服务器像是一本网站通讯录
HTTP——定义客户端和服务器间交流的语言的协议
组成文件——代码(html,css,javascript)，资源（组成网页的图像、音乐、视频、word文件，pdf文件）

3.发生了什么

当你在浏览器输入一个网址：
1.浏览器在域名系统服务器上找出存放网页的服务器的实际地址
2.浏览器发送HTTP请求信息到服务器来拷贝一份网页到客户端。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用TCP/IP协议传输的。
3.服务器同意客户端的请求后，会返回一个“200 OK”信息，意味着“你可以查看这个网页”，然后开始将网页的文件以数据包的形式传输到浏览器。
4.浏览器将数据包聚集成完整的网页然后将网页呈现给你。

4.DNS解析

5.数据包解析

数据在web上传输时，是以成千上万的小数据块的形式传输，大量不同的用户都可以同时下载同一个网页。

（阅读https://developer.mozilla.org/zh-CN/docs/learn后整理）