前端项目开发-02_邂逅Web开发.pdf

邂逅Web开发

王红元coderwhy

目录

content1电脑配置、推荐软件

2网站和网页的关系

3网页的显示过程

4网页的组成部分

5浏览器和浏览器内核

coderwhy电脑配置–显示隐藏文件和扩展名

coderwhy推荐安装的软件

nChrome浏览器：开发必备浏览器

n/chrome/index.html

nVSCode编辑器：开发推荐编辑器（编写代码）

n/

nXmindZen思维导图：思维导图笔记

n/

nTypora：markdown笔记软件

p见资料分享中

coderwhy认识网页和网站

n什么是网页？

p网页的专业术语叫做WebPage；

p打开浏览器查看到的页面，是网络中的一“页”；

p网页的内容可以非常丰富：包括文字、链接、图片、音乐、视频等等

n网站是什么呢？

p网站是由多个网页组成的；

p通常一个网站由N个网页组成（N=1）；

coderwhy网页的显示过程–用户角度

n1.用户在浏览器输入一个网站；

n2.浏览器会找到对应的服务器地址，请求静态资源（可以存放在世界上任何一个地方）；

n3.服务器返回静态资源给浏览器；

n4.浏览器对静态资源进行解析和展示；

问题：静态资源来自哪里？

coderwhy网页的显示过程–前端工程师

n1.开发项目（HTML/CSS/JavaScript/Vue/React）

n2.打包、部署项目到服务器里面

问题：服务器是什么？

coderwhy服务器是什么？

n我们日常生活接触到的基本都属于客户端、前端的内容：

p比如浏览器、微信、QQ、小程序；

n我们知道自己的手机并不可能存放哪些多的数据和资源：

p比如你用《网易云听音乐》，音乐数据大部分都是存在“服务器”中的；

n那么服务到底是什么呢？

p服务器本质上也是一台类似于你电脑一样的主机；

p但是这个主机有几个特点：

ü二十四小时不关机的（稳定运行）；

ü没有显示器的；

ü一般装的是Linux操作系统（比如centos）；

n那么我以后到公司是不是就看得见服务器了呢？

p目前公司大部分用的是云服务器（比如阿里云、腾讯云、华为云）；

coderwhy世界上第一个网页

n上世纪90年代，Berners-Lee上线了世界上第一个网站：

phttp://info.cern.ch/hypertext/WWW/TheProject.html

n虽然目前我们会认为这个网页简单到不值一提，但是在当时它的发明是“天才之作”。

coderwhy现代的网页已经非常复杂

coderwhy网页的组成

n那么网页是由什么开发出来的呢？

p阶段一：HTML元素；

p阶段二：HTML元素+CSS样式；

p阶段三：HTML元素+CSS样式+JavaScript语言；

coderwhy网页的组成

pHTMLpCSSpJavaScript

ü网页的内容结构ü网页的视觉体验ü网页的交互处理

coderwhy