HTTP and HTML

1、HTTP协议简介

一、互联网=物理链接介质+互联网协议

 

二、互联网创建的目的？

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

 

三、什么是上网？

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

 

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

 

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

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

#二、HTTP协议工做于B/S架构上

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

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

#三、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支持传送内容的一部分。比方说，当客户端已经有内容的一部分，为了节省带宽，能够只向服务器请求一部分。

 

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

 

2、HTTP协议之请求REQUEST

一、请求的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

 

二、REQUEST请求的格式

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

 

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

User_Agent:用户代理

Cookie: 以前的登陆信息、凭证

Referer: 从哪跳转来的

 

三、HTTP请求的方法

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

 

GET与POST的区别

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

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

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

 

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

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

 

#三、区别3：安全性

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

 

3、HTTP协议之响应Response

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

 

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

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

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

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

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

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

 

4、HTTP协议完整工做流程

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

   #传输前已经建好链接

 

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

 

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

 

四、释放链接TCP链接(若connection 模式为keepalive，则该链接会保持一段时间，在该时间内能够继续接收请求)

 

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

 

5、HTTP协议关键性总结

#一、简单快速

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

 

#二、灵活

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

 

#三、无链接

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

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

 

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

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

无状态的缺点：缺乏状态意味着若是后续处理须要前面的信息，则它必须重传。这样可能致使每次链接传送的数据量增大

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

 

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

 

6、前段内容介绍

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

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

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

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

 

7、HTML简介

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

 

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

 

三、“超文本”指的是用超连接的方法，将各类不一样空间的文字信息组织在一块儿的网状文本

 

四、HTML注意事项

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

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

#三、HTML是一个网页的主体部分，也是一个网页的基础。由于一个网页能够没有样式，能够没有交互，可是必需要有网页须要呈现的内容。因此HTML部分是整个前端的基础。

 

五、简而言之

#一、HTML语法很是宽松容错性强;

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

#三、HTML5是HTML的下一个版本因此除了很是宽松容错性强之外,还增长许多新的特性

 

8、HTML标签与文档结构

一、什么是标签

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

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

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

 

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

<!DOCTYPE HTML>

<html>

    <head>...</head>

    <body>...</body>

</html>

 

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

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

#二、<html></html> 称为根标签，全部的网页标签都在<html></html>中。

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

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

 

四、标签间关系

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

    head与body

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

html内有body

 

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

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

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

 

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

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

#三、不是全部标签都支持互相嵌套。

 

六、HTML中标签分类

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

#一、容器类标签: 容器类标签能够简单的理解为能嵌套其它全部标签的标签。

    h系列

    ul>li

    ol>li

    dl>dt+dd

    div

 

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

    p

    span

    strong

    em

    ins

    del

 

七、HTML注释 （Ctrl ？）

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

#一、注释中能够直接使用回车换行。

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

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

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

 

9、经常使用快捷键

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

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

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

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

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

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