主要讲解：

 

　　1.访问网站的过程

 

　　2.开发人员工具

 

　　3.网页渲染的过程

 

　　4.html简介

 

　　5.开始代码之旅

 

　　1.访问网站的过程

 

　　关键字： 浏览器 网址 服务器

 

　　a.常见浏览器

 

　　主流：

 

　　b.用户角度

 

　　我们在电脑上（window下）双击对应的浏览器图标，之后就可以在浏览器的对应的地址栏输入网址访问网页啦！

 

　　c.浏览器内部

 

　　但是对应的浏览器内部实际上完成了很多事情！

 

　　当我们在浏览器的地址栏上面输入内容之后，浏览器会"发送请求"，到"服务器"，"服务器"接收并处理以后，将"请求的页面"读取出来返回到浏览器，浏览器接收到响应回来的内容以后，浏览器的"内核"将内容渲染成一个完整的页面，并且显示出来。

 

　　示意图：

 

　　【？】什么是浏览器：---软件

 

　　浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。

 

　　【？】什么是服务器：---设备

 

　　服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

 

　　【更多信息可参考】

 

　　浏览器市场份额 - 百度统计流量研究院

 

　　我们学习是主要是在 firefox 和 Chrome 下测试

 

　　2.开发人员工具

 

　　（chrome 浏览器中测试）---实际上就是一个前端开发的IDE

 

　　Firefox 中：

 

　　可以看到如下的效果：

 

　　火狐中的效果： 看到的内容即为我们马上要学习的html语言的内容

 

　　谷歌浏览器中的效果：

 

　　点击network 我们可以看到我们访问网页的一次请求过程

 

　　火狐：

 

　　可以看到回应的内容，实际上就是整个web页面

 

　　谷歌浏览器：

 

　　点击文件出现下面的效果

 

　　其中我们可以选择回应信息看看服务器给我们的回应信息：

 

　　以上借助浏览器自带的工具可以较为完整的看到整个访问网页的过程和浏览器做出的反应！

 

　　整个过程实际上就是这样的

 

　　"浏览器" ---发送请求---->服务器------获取请求，将对应网页的内容返回给--->浏览器--->浏览器渲染--->呈现效果

 

　　3.网页渲染的过程

 

　　通过上面的内容我们可以看到 "浏览器"终获得了 所请求网页的内容，由浏览器内核渲染出效果进行呈现！

 

　　注：浏览器内核

 

　　内核（Rendering Engine）：可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。

 

　　内核的分类：

 

　　Trident：ie , 猎豹安全浏览器，360极速浏览器，百度浏览器…

 

　　Gecko：Firefox

 

　　Webkit：Safari

 

　　Blink：Chrome，Opera

 

　　不同的内核在渲染同一内容的时候会有差别。

 

　　问题：为什么浏览器上只显示了一行代码，但是源代码中有6行代码？

 

　　4.html简介

 

　　上图为典型的一个html代码

 

　　Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。

 

　　就是给文本加上含有语义的标签。

 

　　所谓标记语言，就是起到 标识 识别的作用 ，给谁识别呢给 浏览器识别，浏览器根据不同的标记渲染出不同的效果！

 

　　这个标记是给浏览器看的！

 

　　那么对应的html中有很多的标记标签，来帮助我们完成对象的标记！

 

　　接下来应该学习更多具体语义标签：

 

　　5.2html结构（类比于人）

 

　　头部（head）+躯干（body）==>完整的身体 （html）

 

　　猪头猪脑猪身猪尾巴 歌手：香香专辑：《猪之歌》

 

　　5.开始代码之旅

 

　　编写第一个html代码：

 

　　1. 先书写

 

　　2. 内部 包含了 "头部" 和 "主体"

 

　　实现步骤：

 

　　【1】。创建一个 indext.txt文档

 

　　在其中输入下面的内容

 

　　输入完成之后保存退出，将index.txt 改为 index.html