HTTP and HTML

一、HTTP协议简介

1、互联网=物理连接介质+互联网协议

2、互联网建立的目的？

 用于打破地域限制来进行数据传输

3、什么是上网？

用户上网的过程即浏览器向服务端发送请求，然后将服务端主机的文本文件下载到本地显示的过程。而浏览器与服务端之间是基于http协议工作的。我们学习前端开发就是为了编排好一个文本文件存放到服务端主机，然后提供给浏览器下载显示的，所以在学习前端开发前，我们必须先研究HTTP协议。

4、浏览器：具有套接字客户端功能，以及解析功能（解释器）的应用程序

5、HTTP协议：Hyper Text Transfer Protocol（超文本传输协议）（浏览器与服务端基于HTTP协议通信）

#1、HTTP协议是用于从（WWW:World Wide Web，简万维网 ）服务器传输超文本到本地浏览器的传送协议。

#2、HTTP协议工作于B/S架构上

    浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送请求Request。

    Web服务器根据接收到的请求后，向客户端发送响应信息Response。

#3、HTTP协议是基于TCP/IP通信协议来传递数据的（HTML 文件, 图片文件等）

 

#4 HTTP版本：HTTP/0.9  HTTP/1.0  HTTP/1.1  HTTP2.0

HTTP/1.1 (目前主流的HTTP协议版本)

a、keepalive连接（PERSISTENT CONNECTION、长连接）

       允许HTTP设备在事务处理结束之后将TCP连接保持在打开的状态，以便未来的HTTP请求重用现在的连接，直到客户端或服务器端决定将其关闭为止。

       使得服务器压力减小；客户端传输速度提高

b、请求流水线（PIPELINING）（在长连接的基础上）

       支持持久连接的客户端可以“流水线”它的请求（即，发送多个请求而无需等待每个响应）。服务器必须按照与收到请求的相同顺序来向这些请求发送响应。

c、chunked编码传输

       当响应头里包含Transfer-Encoding: chunked，代表分块编码，会把「报文」分割成若干个大小已知的块，块之间是紧挨着发送的，这样就不需要在发送之前知道整个报文的大小了，也意味着不需要写回Content-Length首部了

d、字节范围请求

       HTTP1.1支持传送内容的一部分。比方说，当客户端已经有内容的一部分，为了节省带宽，可以只向服务器请求一部分。

   #5、HTTPS ：HTTP +SSL；证书认证；CA中心颁发证书

二、HTTP协议之请求REQUEST

1、请求的URL

a、URI:统一资源标识符（Uniform Resource Identifiers, URI）

b、URL:统一资源定位符(UniformResourceLocator)是互联网上用来标识某一处资源的地址。

c、URI与URL：URL是URI的一种规范的具体实现；URI分为URL和URN

d、URL的组成

http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name

#1.协议部分：http://

如果不写，浏览器会自动补全，但必须有

#2.域名部分：www.aspxfans.com 

一个URL中，也可以使用IP地址作为域名使用；域名--DNS--IP; 必须有

#3.端口部分：8080

跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。

端口不是一个URL必须的部分，如果省略端口部分，将采用默认web服务端口80

#4.虚拟目录部分：/news/ 从域名后的第一个“/”开始到最后一个“/”为止。

虚拟目录不是一个URL必须的部分。

#5.文件名部分：index.asp

从域名后的最后一个“/”开始到“？”为止，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。

文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名

#6.参数部分：boardID=5&ID=24618&page=1

从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。

参数部分非必须，主要对数据进行筛选

#7.锚部分：#name

从“#”开始到最后，都是锚部分。用来定位在一个页面中的具体位置。

锚部分也不是一个URL必须的部分

#默认根目录：/var/www/html

2、REQUEST请求的格式

请求行（request line）、请求头部（header）、空行（ ）、请求数据

 

爬虫中最常用的三个头部字段：

User_Agent:用户代理

Cookie: 之前的登录信息、凭证

Referer: 从哪跳转来的

3、HTTP请求的方法

一个URL地址用于描述一个网络上的资源，而HTTP中最基本的四个方法GET, POST, PUT, DELETE就对应着对这个资源的查，改，增，删4个操作

GET与POST的区别

#1、区别1: 参数的组织方式不同

GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连；GET的请求数据为空。

POST方法是把提交的数据放在HTTP包的Body中

#2、区别2：传输数据大小限制

GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制.

#3、区别3：安全性

POST的安全性要比GET的安全性高。

三、HTTP协议之响应Response

HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。

状态码：由三位数字组成，第一个数字定义了响应的类别，共分五种类别:

1xx：指示信息--表示请求已接收，继续处理

2xx：成功--表示请求已被成功接收、理解、接受; 200成功

3xx：重定向--要完成请求必须进行更进一步的操作

4xx：客户端错误--请求有语法错误或请求无法实现

5xx：服务器端错误--服务器未能实现合法的请求

四、HTTP协议完整工作流程

1、客户端连接到Web服务器: 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接

   #传输前已经建好连接

2、发送HTTP请求: 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器

3、服务器接受请求并返回HTTP响应: 服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器

4、释放连接TCP连接(若connection 模式为keepalive，则该连接会保持一段时间，在该时间内可以继续接收请求)

5、客户端浏览器解析HTML内容: 浏览器将该 html 文本并显示内容

五、HTTP协议关键性总结

#1、简单快速

客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。

#2、灵活

HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

#3、无连接

HTTP无连接说的是：当某个客户机在短时间多次次请求同一个资源，服务器并不能区别是否已经响应过用户的请求。

针对http无连接，人们设计了非持久连接和持久连接（长连接）

#4、无状态：http是无状态协议，是说http协议没法保存客户机信息

无状态的优点：在服务器不需要先前信息时它的应答就较快。

无状态的缺点：缺少状态意味着如果后续处理需要前面的信息，则它必须重传。这样可能导致每次连接传送的数据量增大

关于http无状态阻碍了交互式应用程序的实现。比如记录用户浏览哪些网页、判断用户是否拥有权限访问等。于是，两种用于保持HTTP状态的技术就应运而生了，一个是Cookie，而另一个则是Session

#5、支持B/S及C/S模式。

六、前段内容介绍

1、HTML：HTML，全称“Hyper Text Markup Language（超文本标记语言）”。HTML是网页的结构

2、CSS：全称“（层叠样式表）。CSS是网页的外观

3、JavaScript: JavaScript是一门脚本语言。JavaScript是页面的行为

4、学前端一半工作在考虑兼容性，目前html5在兼容性方面解决的比较好

七、HTML简介

1、浏览器也必须有一套自己能识别的标记文本的规范，该规范被称为HTML。

2、“标记”指的是在编辑文本时用特殊的记号标记一下各部分内容的意义，该记号称之为标签，比如用标签h1标记标题，用标签p标签段落

3、“超文本”指的是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本

4、HTML注意事项

#1、记号/标签是不会显示出来的。

#2、虽然用<h1>标记的文本在显示时会被加大加粗，但请务必记住，HTML的作用只有一个它是专门用来对文件做记号来标识其语义的（语义指的是该文本是做什么用的），加大和加粗这种为文本添加样式的操作并不是HTML擅长的，虽然早期的时候确实也用HTML来制作样式，但以后我们专门用CSS来做这件事，这也是一种解耦合的思想

#3、HTML是一个网页的主体部分，也是一个网页的基础。因为一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容。所以HTML部分是整个前端的基础。

5、简而言之

#1、HTML语法非常宽松容错性强;

#2、XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;

#3、HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性

八、HTML标签与文档结构

1、什么是标签

#1、在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<head>`、`<body>`都是标签，

#2. HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，开始标签和结束标签之间的就是标签的内容。

#3、有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如:<br/> <hr/> <input/> <img/>

2、固定的文档结构组织（！Tab）

<!DOCTYPE HTML>

<html>

    <head>...</head>

    <body>...</body>

</html>

3、固定的文档结构组织--各部分解释

#1、<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

#2、<html></html> 称为根标签，所有的网页标签都在<html></html>中。

#3、<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍，<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

#4、在<body>和</body>标签之间的内容是网页的主要内容，最终会在浏览器中显示出来。

4、标签间关系

#1、并列（兄弟／平级）

    head与body

#2、嵌套（父子／上下级）

html内有body

5、HTML标签详细语法与注意点

<标签名 属性1=“值1” 属性2=“值2” ......>内容部分</标签名>

<标签名 属性1=“值1” 属性2=“值2” ....../>

#1. HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，大部分程序员都以小写为准。

#2. 标签之间是可以嵌套的。例如：<div><p>段落</p></div>,但不能交叉<div><p></div></p>

#3、不是所有标签都支持互相嵌套。

6、HTML中标签分类

单从是否可以嵌套子标签的角度去分，标签分为两类

#1、容器类标签: 容器类标签可以简单的理解为能嵌套其它所有标签的标签。

    h系列

    ul>li

    ol>li

    dl>dt+dd

    div

#2、文本类标签: 文本级的标签对应容器级标签，只能嵌套文字/图片/超链接的标签。

    p

    span

    strong

    em

    ins

    del

7、HTML注释 （Ctrl ？）

<!--这里是注释的内容-->

#1、注释中可以直接使用回车换行。

#2、习惯用注释的标签把HTML代码包裹起来

#3、HTML注释不支持嵌套。

#4、HTML注释不能写在HTML标签中。

九、常用快捷键

1、 ！ Tab   ----快速生成文档结构

2、 SETTINGS-EDITOR-LIVE TEMPLATES   ---定义模板、快捷键

3、 (h$)*6  Tab   ---六个标题标签 h1,h2,h3,h4,h5,h6

4、 p*n  Tab   ---多个段落标签 p, p, ...

5、 div > span  Tab   ---嵌套父子模式

6、 div >(span+a)   ---嵌套兄弟模式