程大纲

• 什么是浏览器

• 什么是服务器

• 浏览器请求数据的过程

• 什么是URL

• 什么是HTTP协议

• 其它知识储备

什么是浏览器

• 浏览器是安装在电脑里面的一个软件， 能够让将网页内容呈现给用户查看，并让用户与网页交互的一种软件。 就好比QQ一样都是安装在电脑里面的一个软件， 只不过功能不同而已

• 常见主流浏览器

• 浏览器市场份额-国内统计

• 浏览器市场份额-国外统计

• 不同的浏览器有不同的浏览器内核， 浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现

• IE内核 Trident

• 谷歌内核 WebKit / Blink

• 火狐内核 Gecko

• Safarri内核 WebKit

• 欧朋内核 Presto

• 前期上课以后面谷歌浏览器为主，后面将专门详细介绍浏览器兼容问题

什么是服务器

• 服务器也是电脑，只不过是比我们的电脑配置更高的电脑，并且24小时不断电，不关机的计算机

• 服务器是专门用于存储数据电脑， 访问者可以访问服务器获得服务器上存储的资源

• 服务器一旦关机，访问者就无法访问

<h2 id="title3">访问网页原理</h2>

<h3 id="title4">浏览器请求数据的原理</h3>

• 我们是如何通过浏览器查看网页上的内容的？

• 1.打开IE缓存文件夹

• • Jonathan_Lee为个人电脑用户名名称

• 2.清空该文件夹

• 3.用IE打开网页

• 4.发现文件夹下多了很多文件（.html、.css、.js、.png等）， 仔细观察不难发现其实这些文件都是被访问网页上的内容

• 5.结论

• 访问网页时是有真实的、物理的文件传输的

• 网页不是一个文件，而是一堆文件组成的

• 我们之所以平常感觉第二次访问比第一次访问快的原因就是，第一次访问时已经将所有文件缓存到了本地

浏览器请求数据的过程

• 1.按下回车时浏览器根据输入的URL地址发送请求报文

• 2.服务器接收到请求报文，会对请求报文进行处理

• 3.服务器将处理完的结果通过响应报文返回给浏览器

• 4.浏览器解析服务器返回的结果，将结果显示出来

• 请求过程验证

• 3.1请求报文

• 一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分

• 3.2响应报文

• 一个HTTP响应报文由响应行、响应头、响应体组成

• 1.利用chome浏览器打开一个网页

• 2.打开开发人员工具

• 3.打开Network查看请求报文和响应报文

什么是URL

• 1.我们在浏览器的地址栏中输入的地址其实就是URL

• 2.URL格式：

• 127.0.0.1/index.html （浏览器会自动补全http:和：80）

• http://127.0.0.1/index.html （浏览器会自动补全：80）

• http://127.0.0.1:80/index.html （完整格式）

• 协议类型://ip地址:端口号/资源路径/资源名称

• 3.URL拆分

• 网络协议类型 http://

• 服务器IP地址 127.0.0.1

• 服务器端口号 :80

• 资源路径 网页在服务器上的路径

• 资源名称 index.html

• 4.URL拆分后每一部分的作用

• 4.1服务器IP地址 和 服务器端口号它们两的作用：

• 告诉浏览器要去什么地方才能找到对应的服务器， 也就是告诉浏览器服务器的详细地址

• 服务器IP地址相当于现实生活中的地址； 例如：广州市天河区棠安苑

• 服务器端口号相当于现实生活中的门牌号码； 例如： 9栋909室

• 那么如果将地址和门牌号码结合在一起， 就是我的详细地址

• 4.2资源名称它的作用：

• 告诉服务器我需要获取哪一个文件

• 4.3资源名称

• 需要访问的文件名称

• 5.补充

• URL全称Uniform Resource Locator(统一资源定位符)， 互联网上的每一个资源都有一个唯一的URL地址

• 由于IP地址全都是数字， 没有任何的含义，比较难以记忆。 所以在访问网页时最常见的不是IP地址而是“域名”（一串有含义的字母OR数字）

• 好比： http://www.baidu.com AND http://111.13.100.92:80/

什么是HTTP协议

• 1.HTTP是Hypertext Transfer Protocol的缩写, 超文本传输协议

• 2.什么是协议?

• 在现实生活中有很多的协议, 例如租房协议/买卖协议/离婚协议

• 无论是什么协议他们都是一个共同点, 就是用来规范/约束某一类事物

• 3.沟通问题?

• 沟通最常见的问题就是语言不通, 例如中国人和美国人沟通, 一个人说中文, 一个人说英文, 如果两个人都不懂中文或者英文, 那么就会出现沟通问题

• 如果要想解决沟通文件, 是不是需要先拟定规定, 两个人都说中文, 或者两个人都说英文, 或者请一个既懂中文又懂英文的翻译

• 4.HTTP协议是用来规范/约束哪一类事物?

• 浏览器访问网页其实就是去服务器请求数据, 所以浏览器需要和服务器沟通, 所以也会存在沟通问题

• HTTP协议就相当于我们让两个人都说中文或者都说英文一样, 就是提前规范两个人之间如何沟通, 也就是规范/约束浏览器和服务器之间如何沟通

其它知识储备

• 1.在Windows系统中如何查看文件的扩展名

• 默认情况下Windows系统是不显示文件的扩展名的, 但是作为一个开发者而言, 查看文件的扩展名是我们的必备技能

• win10: 随便打开一个文件夹—>点击查看—>将文件扩展名的选项勾选上

• 2.电脑上的一个文件是可以”同时”被多个软件打开的, 不同的软件打开可能会有不同的效果

• 例如: 同一个index.html文件可以被多个浏览器和记事本一起打开

• 例如: .html文件通过浏览器打开不可以编辑, 通过记事本打开可以编辑

• 3.什么是纯文本文件?

• 我们Windows电脑上有一款默认安装好的软件叫做记事本. 这款软件就是专门用来打开纯文本文件的, 所以只要能够被记事本打开, 并且能够正常显示的文件都是纯文本文件

• .html的文件可以被记事本打开, 并且能够正常显示,所以.html文件是一个纯文本文件

html区块

●区块元素

大多数html元素被定义为块级元素或内联元素.

块级元素在浏览器显示时,通常以新行来开始(和结束)

例如:<h1>,<p>,<ul>,<table>,<div>等

●内联元素

内联元素在显示时通常不会以新行开始

例如:<b>,<td>,<a>,<img>等

●div元素

html<div>元素是块级元素,它可用于组合其他html元素的容器.

<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.

如果与css一同使用,<div>元素可用于对大的内容块设置样式属性.

●<span>元素

html<span>元素是内联元素,可用作文本的容器.

<span>元素也没有特定的含义.

当与css一同使用时,<span>元素可用于为部分文本设置样式属性.

二 html表单

html表单用于搜集不同类型的用户输入.

<form>标签用于创建供用户输入的html表单.

<form>

...

</form>

使用action属性规定:当提交表单时,向何处发送表单数据.

<form action="url">

</form>

method属性

method属性指定在提交表单时使用的http方法:get或post

下面是两个示例:

<form action="url" method="get">

<form action="url" method="post">

提示:

当你使用get时,表单数据将在页面地址中使用.

如果表单正在更新数据或使用敏感信息(密码),请使用post.post提供更好的安全性,因为提交的数据不会再页面地址中显示.

name属性

name属性指定表单的名称

要接手用户的输入,你需要相应的表单元素,如文本字段.而输入类型是由类型属性(type)定义的,大多数经常被用到的输入类型有:text,password,radio,checkbox,submit等

下面是一个请求用户名和密码的表单例子:

<form>

<input type="text" name="username" /><br/>

<input type="password" name="password" />

</form>

单选框

<input type="radio">标签定义了表单单选框选项

下面是一个单选框的例子:

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

运行效果如下:

注意:没有结束标签,也能正常显示,但是有时候会出现意想不到的情况.所以建议还是要加上结束标签.

复选框

<input type="checkbox">定义了复选框,用户需要从若干给定的选择中选取一个或若干选项.

下面是一个复选框的例子:

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br/>

<input type="checkbox" name="vehicle" value="Car">I have a Car

</form>

运行效果如下:

提交按钮将表单提交到其action属性:

<input type="submit" value="Submit">

运行效果如下:

表单提交后,应该使用服务器端语言(如php)进行数据处理.当完成html和css课程后,你可以试着学习php课程.

三 html颜色

html颜色由一个十六进制符号来定义,这个符号由红色,绿色和蓝色的值组成(rgb)

rgb颜色的最小值是0(十六进制:#000).最大值是255(十六进制:#FFF)

四 html框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面

<iframe>标签规定一个内联框架

一个内联框架被用来在当前html文档中嵌入另一个文档

标记一个内联框架:

<iframe src="url"></iframe>

提示:你可以把需要的文本放置在<iframe>和</iframe>之间,这样就可以应对不支持<iframe>的浏览器.html5中不支持<frame>标签.

定义iframe标签的高度与宽度

height和width属性用来定义iframe标签的高度与宽度.

属性默认以像素为单位,但是你可以指定其按比例显示(如:80%)

下面是一个例子:

<iframe src="url" width="200" height="200"></iframe>

定义iframe表示是否显示边框

frameborder属性用来定义iframe表示是否显示边框

设置属性值为"0"移除iframe的边框:

<iframe src="url" frameborder="0"></iframe>