前端基础

Http协议

 

1.http概述

HTTP（hypertext transport protocol），即超文本传输协议。这个协议详细规定了浏览器和万维网服务器之间互相通信的规则。

HTTP就是一个通信规则，通信规则规定了客户端发送给服务器的内容格式，也规定了服务器发送给客户端的内容格式。其实我们要学习的就是这个两个格式！客户端发送给服务器的格式叫“请求协议”；服务器发送给客户端的格式叫“响应协议”。

特点：

  • HTTP叫超文本传输协议，基于请求/响应模式的！
  • HTTP是无状态协议。

URL：统一资源定位符，就是一个网址：协议名://域名:端口/路径，例如：http://www.oldboy.cn:80/index.html

2.请求协议

(浏览器----->server)

请求协议的格式如下：

请求首行；  // 请求方式 请求路径 协议和版本，例如：GET /index.html HTTP/1.1
请求头信息；// 请求头名称:请求头内容，即为key:value格式，例如：Host:localhost
空行；     // 用来与请求体分隔开
请求体。   // GET没有请求体，只有POST有请求体。

 

1.GET请求

HTTP默认的请求方法就是GET
     * 没有请求体
     * 数据必须在1K之内！
     * GET请求数据会暴露在浏览器的地址栏中

GET请求常用的操作：
       1. 在浏览器的地址栏中直接给出URL，那么就一定是GET请求
       2. 点击页面上的超链接也一定是GET请求
       3. 提交表单时，表单默认使用GET请求，但可以设置为POST

 

1.请求协议 （浏览器---->server）
url:www.baidu.com?a=1
url:www.baidu.com?username=yuan&pwd=123&            get存放信息         用&分割字符
(1)请求首行  GET /favicon.ico HTTP/1.1
(2)请求头信息  (发完一次请求跟server端等待3000毫秒，然后断开)
        ...

Host: 127.0.0.1:8081
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36
Accept: */*
Referer: http://127.0.0.1:8081/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8
cookie(): 存一堆键值对的，对应每个server端的信息

注释：
  • GET 127.0.0.1:8090/login  HTTP/1.1：GET请求，请求服务器路径为  127.0.0.1:8090/login ，协议为1.1；
  • Host:localhost：请求的主机名为localhost；
  • *User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0：与浏览器和OS相关的信息。有些网站会显示用户的系统版本和浏览器版本信息，这都是通过获取User-Agent头信息而来的；
  •  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8：告诉服务器，当前客户端可以接收的文档类型，其实这里包含了*/*，就表示什么都可以接收；
  • Accept-Language: zh-cn,zh;q=0.5：当前客户端支持的语言，可以在浏览器的工具选项中找到语言相关信息；
  • Accept-Encoding: gzip, deflate：支持的压缩格式。数据在网络上传递时，可能服务器会把数据压缩后再发送；
  • Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7：客户端支持的编码；
  • Connection: keep-alive：客户端支持的链接方式，保持一段时间链接，默认为3000ms；
  • Cookie: JSESSIONID=369766FDF6220F7803433C0B2DE36D98：因为不是第一次访问这个地址，所以会在请求中把上一次服务器响应中发送过来的Cookie在请求中一并发送去过；这个Cookie的名字为JSESSIONID。
  • Referer: http://localhost:8080/hello/index.jsp：请求来自哪个页面，例如你在百度上点击链接到了这里，那么Referer:http://www.baidu.com；如果你是在浏览器的地址栏中直接输入的地址，那么就没有Referer这个请求头了；

(3)空行
(4)请求体（请求数据）---------get请求体不存在   post存放信息

 

 2.POST请求

(1). 数据不会出现在地址栏中
(2). 数据的大小没有上限
(3). 有请求体
(4). 请求体中如果存在中文，会使用URL编码！

 

 3.响应协议

 1.响应内容

响应协议的格式如下：

响应首行；
响应头信息；
空行；
响应体。

响应内容是由服务器发送给浏览器的内容，浏览器会根据响应内容来显示。遇到<img src=''>会开一个新的线程加载，所以有时图片多的话，内容会先显示出来，然后图片才一张张加载出来。

  • HTTP/1.1 200 OK：响应协议为HTTP1.1，状态码为200，表示请求成功，OK是对状态码的解释；
  • Server:WSGIServer/0.2 CPython/3.5.2：服务器的版本信息；
  • Content-Type: text/html;charset=UTF-8：响应体使用的编码为UTF-8；
  • Content-Length: 724：响应体为724字节；
  • Set-Cookie: JSESSIONID=C97E2B4C55553EAB46079A4F263435A4; Path=/hello：响应给客户端的Cookie；
  • Date: Wed, 25 Sep 2012 04:15:03 GMT：响应的时间，这可能会有8小时的时区差；

 2.状态码

 

  • 200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；
  • 404：请求的资源没有找到，说明客户端错误的请求了不存在的资源；
  • 500：请求资源找到了，但服务器内部出现了错误；
  • 302：重定向，当响应码为302时，表示服务器要求浏览器重新再发一个请求，服务器会发送一个响应头Location，它指定了新请求的URL地址；
  • 304：

 

  当用户第一次请求index.html时，服务器会添加一个名为Last-Modified响应头，这个头说明了
  index.html的最后修改时间，浏览器会把index.html内容，以及最后响应时间缓存下来。当用户第
  二次请求index.html时，在请求中包含一个名为If-Modified-Since请求头，它的值就是第一次请
  求时服务器通过Last-Modified响应头发送给浏览器的值，即index.html最后的修改时间，
  If-Modified-Since请求头就是在告诉服务器，我这里浏览器缓存的index.html最后修改时间是这个,
  您看看现在的index.html最后修改时间是不是这个，如果还是，那么您就不用再响应这个index.html
  内容了，我会把缓存的内容直接显示出来。而服务器端会获取If-Modified-Since值，与index.html
  的当前最后修改时间比对，如果相同，服务器会发响应码304，表示index.html与浏览器上次缓存的相
  同，无需再次发送，浏览器可以显示自己的缓存页面，如果比对不同，那么说明index.html已经做了修
  改，服务器会响应200。

         

 3.其他响应头

告诉浏览器不要缓存的响应头：

  • Expires: -1；
  • Cache-Control: no-cache；
  • Pragma: no-cache；

自动刷新响应头，浏览器会在3秒之后请求http://www.baidu.com：

  • Refresh: 3;url=http://www.baidu.com 

 4.HTML指定响应头

 在HTMl页面中可以使用<meta http-equiv="" content="">来指定响应头，例如在index.html页面中给出<meta http-equiv="Refresh" content="3;url=http://www.baidu.com">，表示浏览器只会显示index.html页面3秒，然后自动跳转到http://www.baidu.com.

 

 1 import socket
 2 sock=socket.socket()
 3 sock.bind(("127.0.0.1",8081))
 4 sock.listen(5)
 5 
 6 while 1:
 7     conn,addr = sock.accept()
 8     data1=conn.recv(1024)
 9     with open('22.html','r') as f:
10         data=f.read()
11     conn.sendall(b"HTTP/1.1 200 OK\r\n\r\n %s" %data.encode('gbk'))
12     # conn.send(b"HTTP/1.1 200 OK\r\n\r\n  <h1>hello yuan<h1> <img height=200px width=400px src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494840589725&di=964514ef529db3ca2b9b99c89c8d70c3&imgtype=0&src=http%3A%2F%2Fcms-bucket.nosdn.127.net%2F7495b4a398a44c7b83411eb17b3bbaf020170420112852.jpg'>")
13     # conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf-8"))
14     # conn.sendall(data)
15     # conn.send(b"<H1>yuan</H1>")      #变大字体
16     conn.close()

 

HTML

定义

  • 超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则
  • 浏览器按顺序渲染网页文件（渲染顺序：从上到下，从左至右），然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
  • 静态网页文件扩展名：.html 或 .htm

 

结构

 

 

  • <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
  • <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
  • <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
  • <title></title>定义网页标题，在浏览器标题栏显示。 
  • <body></body>之间的文本是可见的网页主体内容

 标签

标签的语法：

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

 

 <!DOCTYPE> 标签

 

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

  1. BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
  2. CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat

 

 

<head> 内常用标签

　　

　　<meta>标签

　　

meta介绍
<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 

(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。    

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">  　　　　##搜索中关键字查找
 　　
<meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">　　　　 ##网页搜索中显示信息　　

(2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)
 
<meta http-equiv="content-Type" charset=UTF8">
 
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

 

　　非meta标签

　　

    <title>oldboy</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">   ##icon显示网页图标,加载favicon.ico显示图片
    <link rel="stylesheet" href="css.css">　##rel 该属性规定当前文档与被链接文档之间的关系。但是，只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持 
    <script src="hello.js"></script>　     ##加载外部js脚本

 

 <body> 内常用标签

 　　基本标签(块标签和内联标签)

 

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

特殊字符：
      < &gt；&quot；©®

　　

 　　<div>和<span>

 

<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现. 
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

 

 　　图形标签: <img>

 　　

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

　　

 超链接标签(锚标签) <a> </a>

 

 

<a href="" target="_blank" >click</a>

href属性指定目标网页地址。该地址可以有几种类型：

    绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
    相对 URL - 指当前站点中确切的路径（href="index.htm"）
    锚 URL - 指向页面中的锚（href="#top"）

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{

        }

        #part1{
            background-color: red;
            height: 500px;
            font-size: 30px;
            color: white;
        }
        #part2{
            background-color: green;
        }
        #part3{
            background-color: yellow;
        }


    </style>
</head>
<body>

<p id="part1">第一章</p>
<p id="part2">第二章</p>
<p id="part3">第三章</p>
<a href="#part2">返回第一章</a>


</body>
</html>

　　

 

 

 列表标签

<!--无序列表  有序列表  定义列表-->

<!--无序列表  unorder list-->
<u1>
    <li>111</li>
    <li>222</li>
    <li>333</li>

</u1>

<!--有序列表 order list-->
<ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>

</ol>

<!--定义列表 define list-->
<dl>
    <dt>标题</dt>
    <dd>item</dd>
    <dd>item</dd>
    <dd>item</dd>
</dl>

　　

表格标签 <table> 

 

表格概念
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：

 

<table border="2px" cellpadding="10px" cellspacing="0px">
    <!--<tr>-->
        <!--<td>语文</td>-->   ---table data
        <!--<td>数学</td>-->
        <!--<td>音乐</td>-->
    <!--</tr>-->
    <tr>
        <th>语文</th>   ---table head
        <th>数学</th>
        <th>音乐</th>
    </tr>
    <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
    <tr>
        <td rowspan="2">111</td>
        <td>222</td>
        <td>333</td>
    </tr>
    <tr>
        <td>444</td>
        <td>222 <img src="meinv.jpg" alt="美女" width="200px" title="美女"></td>
        <td>333</td>
    </tr>

</table>

　　

 

属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列（即合并单元格）

　　

HTML 表格有两种单元格类型：

 

表头单元格 - 包含头部信息（由 <th> 元素创建）

标准单元格 - 包含数据（由 <td> 元素创建）

<th> 元素中的文本通常呈现为粗体并且居中。

<td> 元素中的文本通常是普通的左对齐文本。

 

posted @ 2017-05-15 15:32  samyoung  阅读(163)  评论(0)  编辑  收藏  举报