HTML基础
HTTP协议
HTTP（hypertext transport protocol超文本传输协议）。这个协议详细规定了浏览器和万维网服务器之间互相通信的规则。
HTTP就是一个通信规则，通信规则规定了客户端发送给服务器的内容格式，也规定了服务器发送给客户端的内容格式。
注：比较值得注意的两点，首先HTTP叫超文本传输协议，基于请求/响应模式的。再者，HTTP是无状态协议（所以才有cookie啊）。
请求协议
格式：
请求首行； // 请求方式 请求路径 协议和版本，例如：GET /index.html HTTP/1.1
请求头信息；// 请求头名称:请求头内容，即为key:value格式，例如：Host:localhost
空行； // 用来与请求体分隔开
请求体。 // GET没有请求体，只有POST有请求体。
get请求（HTTP的默认请求方法）：
1.无请求体，
2.数据必须在1K之内，
3.GET请求数据会暴露在浏览器的地址栏中（这就很不安全了）
get请求常用于的操作：
1. 在浏览器的地址栏中直接给出URL，那么就一定是GET请求；
2. 点击页面上的超链接也一定是GET请求；
3. 提交表单时，表单默认使用GET请求，但可以设置为POST（一般也是默认为post，因为相对安全）；
请求报文（get）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。
HTTP无状态：无状态是指协议对于事务处理没有记忆能力，服务器不知道客户端是什么状态。从另一方面讲，打开一个服务器上的网页 和你之前打开这个服务器上的网页之间没有任何联系 如果你要实现一个购物车，需要借助于Cookie或Session或服务器端API（如NSAPI and ISAPI）记录这些信息，请求服务器结算页面时同时将这些信息提交到服务器 当你登录到一个网站时，你的登录状态也是由Cookie或Session来“记忆”的，因为服务器并不知道你是否登录 优点：服务器不用为每个客户端连接分配内存来记忆大量状态，也不用在客户端失去连接时去清理内存，以更高效地去处理WEB业务 缺点：客户端的每次请求都需要携带相应参数，服务器需要处理这些参数 容易犯的误区： 1、HTTP是一个无状态的面向连接的协议，无状态不代表HTTP不能保持TCP连接，更不能代表HTTP使用的是UDP协议（无连接） 2、从HTTP/1.1起，默认都开启了Keep-Alive，保持连接特性，简单地说，当一个网页打开完成后，客户端和服务器之间用于传输 HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接 3、Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间
post请求：
1.数据不会出现在地址栏中；
2.数据的大小没有上限；
3.请求体中如果存在中文，会使用URL编码：
username=%E5%BC%A0%E4%B8%89&password=123
我们都知道Http协议中参数的传输是"key=value"这种简直对形式的，如果要传多个参数就需要用“&”符号对键值对进行分割。如"?name1=value1&name2=value2"，这样在服务端在收到这种字符串的时候，会用“&”分割出每一个参数，然后再用“=”来分割出参数值。 针对“name1=value1&name2=value2”我们来说一下客户端到服务端的概念上解析过程: 上述字符串在计算机中用ASCII吗表示为： 6E616D6531 3D 76616C756531 26 6E616D6532 3D 76616C756532。 6E616D6531：name1 3D：= 76616C756531：value1 26：& 6E616D6532：name2 3D：= 76616C756532：value2 服务端在接收到该数据后就可以遍历该字节流，首先一个字节一个字节的吃，当吃到3D这字节后，服务端就知道前面吃得字节表示一个key，再想后吃，如果遇到26，说明从刚才吃的3D到26子节之间的是上一个key的value，以此类推就可以解析出客户端传过来的参数。 现在有这样一个问题，如果我的参数值中就包含=或&这种特殊字符的时候该怎么办。 比如说“name1=value1”,其中value1的值是“va&lu=e1”字符串，那么实际在传输过程中就会变成这样“name1=va&lu=e1”。我们的本意是就只有一个键值对，但是服务端会解析成两个键值对，这样就产生了歧义。 如何解决上述问题带来的歧义呢？解决的办法就是对参数进行URL编码 URL编码只是简单的在特殊字符的各个字节前加上%，例如，我们对上述会产生奇异的字符进行URL编码后结果：“name1=va%26lu%3D”，这样服务端会把紧跟在“%”后的字节当成普通的字节，就是不会把它当成各个参数或键值对的分隔符。
Referer: http://localhost:8080/hello/index.jsp：请求来自哪个页面，例如你在百度上点击链接到了这里，那么Referer:http://www.baidu.com；如果你是在浏览器的地址栏中直接输入的地址，那么就没有Referer这个请求头了；
Content-Type: application/x-www-form-urlencoded：表单的数据类型，说明会使用url格式编码数据；url编码的数据都是以“%”为前缀，后面跟随两位的16进制。
Content-Length:13：请求体的长度，这里表示13个字节。
keyword=hello：请求体内容！hello是在表单中输入的数据，keyword是表单字段的名字。
响应协议
响应格式：
响应首行； 响应头信息； 空行； 响应体。
响应内容是由服务器发送给浏览器的内容，浏览器会根据响应内容来显示。遇到<img src=''>会开一个新的线程加载，所以有时图片多的话，内容会先显示出来，然后图片才一张张加载出来。
Request URL:http://127.0.0.1:8090/login/ Request Method:GET Status Code:200 OK Remote Address:127.0.0.1:8090 Response Headers view source Content-Type:text/html; charset=utf-8 Date:Wed, 26 Oct 2016 06:48:50 GMT Server:WSGIServer/0.2 CPython/3.5.2 X-Frame-Options:SAMEORIGIN <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/login/" method="post"> 用户名：<input type="text" name="username"/> <input type="submit" value="提交"/> </form> </body> </html>
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小时的时区差；
状态码：
响应头对浏览器来说很重要，它说明了响应的真正含义。例如200表示响应成功了，302表示重定向，这说明浏览器需要再发一个新的请求。
200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；
404：请求的资源没有找到，说明客户端错误的请求了不存在的资源；
500：请求资源找到了，但服务器内部出现了错误；
302：重定向，当响应码为302时，表示服务器要求浏览器重新再发一个请求，服务器会发送一个响应头Location，它指定了新请求的URL地址；
当用户第一次请求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。
web服务的本质其实是基于网络编程的c/s架构，就是b/s（Browser-server）架构。
import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8081)) sock.listen(5) while True: print("server is working.....") conn, address = sock.accept() request = conn.recv(1024) conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello Yuan</h1>","utf8")) conn.close() if __name__ == '__main__': main()
HTML
超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。就是使用他的一套规则，浏览器认识的规则。
浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（就是我们通常说的兼容性问题），造成兼容性的问题通常就是渲染引擎或者是内核的不同导致的。
我们能看到网页其实就是浏览器向iis web服务器（提供网页浏览服务）发送请求。
HTML的标准结构
< ! doctype html> 声明文档类型（渲染引擎知道使用html来解析） <html> 根标签 <head> 头标签 <title></title> 标题标签 </head> <body> 主体标签（用户看的上面的是给浏览器看的） </body> </html>
HTML和htm是一样的，后缀名不能决定文件的格式只能决定打开文件的方式。
HTML的标签分为单标签和双标签两种。
简单介绍几种常见的标签：
<!-- 五五开牛逼 -->
<!DOCTYPE> 声明位于文档中的最前面的位置。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode(解析类型)：
- BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
- CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat。
换行标签:<br>。
水平线标签:<hr>。
<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部，不包含任何内容。<meta>提供的信息是用户不可见的meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性name属性:主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 <metaname="keywords"content="meta总结,htmlmeta,meta属性,meta跳转">竞价的关键字<metaname="description"content="老男孩培训机构是由一个很老的男孩创建的">搜索到时页面现实的文字http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。<metahttp-equiv="Refresh"content="2;URL=https://www.oldboy.com">//(注意后面的引号，分别在秒数的前面和网址的后面)2秒后跳转至老男孩页面<metahttp-equiv="content-Type"charset=UTF8">页面解码使用utf8<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>
<p>标签，上下自动生成空白行。
<hn>标签即标题标签，h1 在一个页面里只能出现一次。
<font>文本标签。<font size="6" color="blue">文本内容</font>
文本格式化标签：<b>，<strong>文本加粗标签。
文本倾斜标签：<em><i>
删除线标签:<del><s>
下划线标签:<ins><u>
<sup>和<sub>: 上角标 和 下角表
<strike>: 为文字加上一条中线
<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ width: 150px; height: 200px; } </style> </head> <body> <a href="http://www.xiaohuar.com/hua/"> <img src="meinv.jpg" alt="美女" title="美女"> </a> <a href="lesson1.html">点我</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #part1{ background-color: red; height: 500px; color: white; font-size: 30px; } #part2{ background-color: green; height: 500px; color: white; font-size: 30px; } #part3{ background-color: gold; height: 500px; color: white; font-size: 30px; } </style> </head> <body> <p id="part1">第一章</p> <p id="part2">第二章</p> <p id="part3">第三章</p> <a href="#part1">返回第一章</a> </body> </html>
<!-- 链接外部样式表文件 --> <link rel="stylesheet" href="1.css"> <!-- icon图标 --> <link rel="icon" href="favicon.ico">
href 去往的路径（跳转的页面） 必写属性 title 提示文本 鼠标放到链接上显示的文字 target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面） Target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面） 例： 超链接 <a href="E:\老男孩\01-HTML-基础班\1.html基础一上课资料\1.html基础一上课视频\test.html">超链接</a> 锚链节 先定义一个锚点，再超链接到锚点。 <p id="xx">我是最帅的丑开<p></p> <a href="#xx">回到顶部</a> <base target="_blank">让所有的超链接都在新窗口打开
列表标签
<ul type="square"> <li> 列表项 </li> <li> 无序，重要性一样 </li> </ul> type=”square” 小方块 Type=”disc” 实心小圆圈 Type=”circle” 空心小圆圈
<ol> <li> 列表项 </li> <li> 无序，重要性一样 </li> </ol> type=”1,a,A,i,I” type的值可以为1,a,A,i,I start=”3” 决定了开始的位置。
<dl> <dt> 小标题 </dt> <dd> 解释标题 </dd> </dl>
表格标签
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
<table> <tr> <td>标题</td> <td>标题</td> </tr> <tr> <td>内容</td> <td>内容</td> </tr> </table>
表格内的参数：
caption：表头，表格的标题
th：文本加粗居中
border: 表格边框.
cellpadding: 内边距 ，文字与单元格之间的距离
cellspacing: 外边距.，单元格与单元格之间的距离。
align:“center”
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ，tr或者td内容居中。
内容垂直对齐：Valign=”top | middle | bottom”
bgcolor=”red” 背景颜色。
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" bordercolor="red" width="300" height="300"> <tr> <td colspan="3"></td> <!-- <td></td> <td></td> --> </tr> <tr> <td valign="middle"> 张三</td> <td></td> <td rowspan="2"></td> </tr> <tr> <td></td> <td></td> <!-- <td></td> --> </tr> </table> </body> </html>
表单标签<form>：
功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互。
<form name="form_name" action="url" method="get|post">…</form>
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea（输入大量文字使用）、select（下拉菜单）、fieldset（表单分组与legend同用）和 label标签。
表单属性： action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web。用来指定表单处理程序的位置（服务器端脚本处理程序）。
method: 表单的提交方式 post/get默认取值就是get。
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
<input>标签
表单的类型：type
text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用.)
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
name：表单提交项的键。
注意和id属性的区别：name属性是和服务器通信时使用的名称，而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
checked: radio 和 checkbox 默认被选中
disabled设置当前控件的状态是否激活
readonly: 只读. text 和 password
<select> name:表单提交项的键. size：选项个数 multiple：multiple <optgroup>为每一项加上分组 <option> 下拉选中的每一项属性： value:表单提交项的值. selected: selected下拉选默认被选中
<textarea> <form id="form1" name="form1" method="post" action=""> <textarea cols=“宽度” rows=“高度” name=“名称”> 默认内容 </textarea> </form>
<label> 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。 <form method="post" action=""> <label for=“username”>用户名</label> <input type=“text” name=“username” id=“username” size=“20” /> </form> <fieldset> <legend>登录吧</legend> <input type="text"> </fieldset>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="1.php" method="post"> <!-- 网址控件 --> <!-- <input type="url"> --> <!-- 日期控件 --> <!-- <input type="date"> --> <!-- 时间控件 --> <!-- <input type="time"> --> <!-- 邮件控件 --> <!-- <input type="email"> --> <!-- 数字控件 --> <!-- <input type="number" step="5"> --> <!-- 滑块控件 --> <!-- <input type="range"> --> <input type="submit"> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="1.php" method="post"> <fieldset> <legend>分组信息</legend> <!-- 文本输入框 --> 用户名:<input type="text" maxlength="6" name="username" value="大前端"> <br> <br> <!-- 密码输入框 --> 密码:<input type="password" name="pwd"> <br> <br> <!-- 单选框 --> <input type="radio" name="gender" checked="checked">男 <input type="radio" name="gender">女 <br><br> <!-- 下拉列表 --> 省(市)： <select> <option>河北</option> <option>山西</option> <option>山东</option> <option selected="selected">北京</option> </select> <!-- 下拉列表多选 --> <select multiple="multiple"> <option>河北</option> <option>山西</option> <option>山东</option> <option selected="selected">北京</option> </select> 市(区):<select> <!-- 下拉列表信息分组 --> <optgroup label="北京市"> <option>昌平区</option> <option>海淀区</option> <option>朝阳区</option> <option>大兴区</option> </optgroup> <optgroup label="广州市"> <option>昌平区</option> <option>海淀区</option> <option>朝阳区</option> <option>大兴区</option> </optgroup> </select> <br><br> <!-- 多选框 --> <input type="checkbox" checked="checked">喝酒 <input type="checkbox" checked="checked">抽烟 <input type="checkbox" checked="checked">烫头 <!-- 多行文本框 --> <textarea cols="130" rows="10"></textarea><br><br> <!-- 文件上传控件 --> <input type="file"> <br><br> <!-- 文件提交按钮 --> <!-- <input type="submit"> --> <!-- 普通按钮 --> <!-- <input type="button" value="普通按钮"> --> <!-- 图片按钮 --> <input type="image" src="按钮.jpg"> <!-- 重置按钮 --> <input type="reset"> </fieldset> </form> </body> </html>
