前端基础

zoukankan html css js c++ java

前端基础
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 %s" %data.encode('gbk')) 12 # conn.send(b"HTTP/1.1 200 OK <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 ","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: 鼠标悬浮时的提示信息. 图片的宽 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>
　　

列表标签
  <u1> <li>111</li> <li>222</li> <li>333</li> </u1>  <ol> <li>111</li> <li>222</li> <li>333</li> </ol>  <dl> <dt>标题</dt> <dd>item</dd> <dd>item</dd> <dd>item</dd> </dl>
　　

表格标签 <table>

表格概念
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：
<table border="2px" cellpadding="10px" cellspacing="0px">   ---table data    <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: 外边距. 像素百分比.（最好通过css来设置长宽） rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格）
　　

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

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

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

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

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

相关阅读:
Android学习---- 十月
 第17章使用PHP和MySQL实现身份验证
 第13章 MySQL高级编程
 第12章 MySQL高级管理
 第11章使用PHP从Web访问MySQL数据库
 第10章使用MySQL数据库
 第9章创建Web数据库
 第5章代码重用与函数编写
 NOIP模拟赛-奶牛晒衣服(dry)
BZOJ1008 ／乘法原理＋快速幂解题报告

原文地址：https://www.cnblogs.com/jiangshitong/p/6856611.html

Http协议

1.http概述

2.请求协议

1.GET请求

2.POST请求

3.响应协议

1.响应内容

2.状态码

3.其他响应头

4.HTML指定响应头

HTML

定义

结构

标签

<!DOCTYPE> 标签

<head> 内常用标签

<meta>标签

非meta标签

<body> 内常用标签

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

<div>和<span>

图形标签: <img>

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

列表标签

表格标签 <table>

　　<meta>标签

　　非meta标签

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

　　<div>和<span>

　　图形标签: <img>