前端篇之html认识
一、html标签概述
1.1 引入
url:协议+域名+路径，是一个请求发给服务器
服务器 #__author: Administrator #date: 2016/10/28 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8089)) sock.listen(5) while True: connection, address = sock.accept() buf = connection.recv(1024) print(buf.decode('utf8')) #connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8")) #connection.sendall(byte(<h1>Hello</h1>))---写到文件里如下hello.html with open('hello.html','rb') as f: data=f.read() connection.sendall(data) connection.close() if __name__ == '__main__': main() 用浏览器访问能看服发的内容
1.2 html语言，标签语言
1.html css js区别：html标签元素，css会布局与色彩 js是动态展示
2.html元素，只有浏览器认识这些标签，浏览器会解析它
<!DOCTYPE html>---固定格式 <html lang="en"> <head> <meta charset="UTF-8">//编码格式 <!--<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">--> <!--<meta http-equiv="Refresh" content="2">--> <title>Yuan</title> <link rel="icon" href="girl.ico"> </head>----与body是平行的 <body> <!--hello yuan--> <!--<h1>yuan</h1>--> <!--<h2>yuan</h2>--> <!--<h3>yuan</h3>--> <!--<h4>yuan</h4>--> <!--<h5>yuan</h5>--> <!--<h6>yuan</h6>--> 窗前明月光<br/> 我叫郭勇昌 <p>窗前明月光</p><p>我叫郭勇昌</p> </body> </html> 元素分层 根元素html head元素 body元素 meta title div p 等
3.html之head及body标签
（1）概述：
head:头标签，浏览器看不到，一些解析相关的内容
body:是展示出来的内容
非自闭合标签
自闭合标签
标签属性：加在标签<>里
<h1 id="xiaohu">yuan</h1>-----id是标签身份证，区分多个h1
（2）标签介绍
嵌套规则：块级的能嵌套内联标签，但内联标签不能嵌套块级的 某些特殊块级的不能嵌套如p h <!DOCTYPE html>--用什么规则展示标签内容，是一个标准，浏览器默认是怪异模式，加上它后变为标准模式 <html> 1.<head>内标签 <meta>---自闭合标签,只有一个,属性只有二个name,http-equiv <meta name="keywords" content="开发者，程序员">---搜索引擎搜的内容命中就会展示他的内容 <meta name="description" content="是一个面向开发者">---是搜索出来展示的描述信息 <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> ---与请求有关，2s后跳转到后面的URL上，若不加URL就2s刷新 <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv='X-UA-Compatible' content="IE-EmulateIE7"/>----兼容IE7的渲染规则，想支持几改为几 <titil>---非自闭合 <titil></titil> <link>---自闭合标签 <link rel='icon' href="//www.id.com/favicon.ico">---打开网页的显示的图片，图片是URL地址 <script>---引入css内容，<link>可引入js </head> 2.<body> 所有标签分为块级标签与内联标签 (1)<h1>yuan</h1>--块级标签 <h2>yuan</h2>----一直到h6,会一级级减小 (2)<p></p>--块级标签，换行与隔行过程，默认不加标签时不认换行， 不在一行会连一起中间空个格，<p>有二个作用，换行及隔行 (3)<br> :换行内联标签 (4)<hr>:加个水平线内联标签 (5)**<div></div> ---块级的，没有功能，没有特殊格式化，这个什么没做主要用与css渲染 <div style="color:rebeccapurple">hello world</div>--内嵌入css代码 css嵌入有四种方法： 1.标签内嵌 2.<head>里的<script> 3.<body>里单独的标签<style></style> <div>hello world</div> <style> div{---是块级标签，它定义的表示一整行都是它的， 对他的处理表示对一整行的处理，而非文本本身大小的处理 color:#cc3399; background-color:yellow;---整行背景变色 } </style> (6)<span></span>---同div,没任何格式化，与div区别，它内联标签 <span>hello span</span> <style> span{ color:#cc3399; background-color:yellow;---标签里的文本背景变 } </style> (7)<b></b>--给字体加粗--内联标签 (8)<em>变成斜体</en>--内联标签 (9)<strike>去除</strike>----内联标签，现在不使用改为<del></del> (10)2<sup>3</sup>--2的3次方，上角标 <sub></sub>--下角标 (11) --特殊符号表一个空格 (12)<img src="路径" width="200px" heigh="200px" alt="失败" title="悬"></img> //图片，内联标签 alt属性表加载图片失败后返回的值 title表鼠标入图片显示的文本 当有img时，会专开一个线程加载图片，其它线程可继续向下执行代码 (13)<a href="http://www.baidu.com">百度</a>---超链接,有二个功能，一个是链接，一个是锚(索引查找) <a href="http://www.baidu.com" target="_blank">百度</a> href放其它标签里不会跳只有a才行 当href为#是不跑但会刷新 锚作用： <a href="#div1">第一章</a>---追踪哪个标签，身份证号前加# <a href="#div2">第二章</a>---直接跳到下面的二章内容 <div id="div2">第一章</div> <div id="div2">第二章</div> <style> #div1{----按身份证找到div,前加#后跟身份证号 color:#cc3399; }f #div2{ heigt=200px--css代码 } </style> (14)列表标签 <div> <ul>--不排序列表,都是块级标签 <li><img></img></li>---固定用这个li引入内容,用于左边目录结构 <li>1</li> <li>1</li>//想它们只重叠放一个位置上， 整体放在div里，把div居中 margin: 0 auth; position:relative对li里的图片做处理，三个都以div做相对位置处理， position:absolute; top:0 left:0 </ul>---结果就是前加点有二行1 <ol>---排序列表 <li>1</li> <li>1</li> <li>1</li> </ol>---结果前有序号，有序号的二行 <dl> <dt>第一章</dt>---标题 <dd>内容<dd>---内容 <dt>第二章</dt> <dd>内容<dd> </dl> (15)table表 <table border="1" cellspacing cellpadding>:<tr>:<td><th> 合并单元格rowspan colspan <thead>--显示字段框 <tr>--表行数据 <th>--表字段值（属性：colspan="#"行合并几格） <tbody>--显示行数据格 <tr>--表行数据 <td>--表行数据 （属性：rowspan="#"列合并几格） (16)form表单,与服务交互使用的，表单用于向服务器传输数据内联标签 表单能够包含input，比如文本字段、单选程，提交按钮等，还可以包含textored select fieldset label元素 <form action="127.0.0.1:8090/index" method="get/post" enctype="multipart/form-data"> input里的内容以method的方式提交active里url里，enctype发送文件可一段段发送 要提交文件必须加enctype,obj = request.FILES.get('fafafa'), 后台要一段段取obj.chunks()再放入文件里,obj是文件对象 <p>姓名：<input type="text" name="username"></p> input自闭合标签,结果是一个输入框, 这时发给服务器的内容是一个字典username:输入到框的内容 <p>密码：<input type="password" name="username"></p> 结果到这只能输入信息无法提交到服务器? 这时输密码会看不到明文，见下： <p><input type="submit" value="press"></p> 页面上会有个提交按钮，能把写的值提交,加上value时提交按钮名变为这个值， 如何提交到服务器？见form属性，提交到form的active里 <p><input type="button" value="press"></p> 也是按钮，但点击后不提交，只有配合js使用才有意义，一般用于绑定函数 <p>篮球<input type="checkbox" name="hobby" value="1"></p> 复选框，有个小方框，可以点中选择，可多选 <p>球<input type="checkbox" name="hobby" value="2"></p> 为什么是复选，因name虽然一样但发的value不同 <p>男<input type="radio" name="sex" value="1"></p> 单选框，如男女只能选一个，是一个圆圈，radio是互次的 <p>女<input type="radio" name="sex" value="2"></p> 只有当name一样里只能选一个，name属性是给服务器看的， 只能给一个值，所以name是定义键值的 <p><input type="file" name="alex"></p> 结果出现一个上传文件的按钮，点击可以上传文件 <p>女<input type="reset" value="重置"></p> 重置按钮，把输的内容都清空 <p>出生地 <select name="city" multiple size="2"> multiple加它表可选多个值,size最多展示几个 <optgroup lable="河北省"> <option value="beijing">廊坊2</option> <option value="beijing">廊坊2</option> </optgroup>----可看到分组，河北下有多个地方 <option value="beijing">北京</option> <option value="tianjing">天津</option>--发给服务端的是city:beijing这样的情况 </select></p>---会出现一个框下拉选择北京或天津也会上传给服务端交互 注：checkbox与radio需要定name与value做字典传服务，其它的定义name就行 <textarea rows="10" cols="10">自我简介</textarea>----10行10列 </form> 实例：服务器如何与前端交互，web框架 前端： index.html .... <form action="ip+port/xiao/" method="get"> ... </form> 后端： urls.py from django.conf.urls import url form django.contrib import admin form app01 import views urlpatterns = { url(r'^admin/',admin.site.urls), url(r'^xiao',views.xiao)--IP+port+xiao在浏览器上访问就可以访问到index.html的内容 } views.py form django.shortcuts import render def xiao(req):--rep是前端提交的数据 print(req.GET) 用get提交的数据，get发数据，点提交时url变为 ip+port+xiao&username=dan&password=123&hobby=football 把url与参数一起传到后端，用url把数据发过来 print(req.POST) 用post提交的数据，会把参数放请求体里发送后端， F12的network里的form Data里把字典数据发到服务端 print(req.FIIES) 提交的文件等封装在这个对象里,req.FLIES={"alex":"文件"} for item in req.FILES:---item是键alex obj=req.FILES.get(item)----会取到文件，若没有也不会报错 filename=obj.name-----取文件名字 f=open(filename,'w') for line in obj.chucks:---把文件一段段上传 f.write(line) return render(req,"index.html") 服务端运行后在浏览器上访问出现表单，里面的表单发给后端要如何处理？ 这里发的内容会发给ip+port+xiao给它后把字典数会交给views.xiao函数去处理， 每一个url都有对应的函数去处理 </body>
1.3 http协议
1.http之请求协议 无状态协议，请求一次后页面返回后就断开了，不是长链接， 每点一次请求一次，每次请求就是新的，服务不会记住上次连接信息， 但当有用户登录时有记忆不是通过http来记的而用的是authkey sesion来记住登录信息及购物记录信息 请求协议F12：---浏览器封装一定格式发给服务器 eg:浏览器会把url：https://www.baidu.com封装成一定格式发给服务器 headers（包括请求头及响应头） Generl Response Headers:响应头 Request Headers:请求头 Request payload:请求体（post） preview:请求返回的内容 response cookies timing 请求协议： 请求首行：// 请求方式 请求路径 协议与版本 GET /index.html HTTP/1.1 请求头信息：// 请求头名称：请求头内容， key:value eg:host:localhost 空行； // 用来与请求体分隔开 请求体。// GET没有请求体，只有POST有请求体。 发给服务器真正的数据，get是通过url发过去的，值通过请求头给的 GET /index.html HTTP/1.1 Host:localhost 注：什么时候用到get: 1.一般输入一个URL就是get提交 2.超链接用GET 3.form默认是get请求 GET请求特性：请求头里的键值对 Accept accept-encoding:压缩 accept-language cache-coatrol:是否有缓存 user-agent:告诉服务器浏览器系统版本等 Aaccept-charset:utf-8,告诉服务器用什么编码 connection:连接成功后不会马上断，默认3s再断有个延时 cookile：第一次登录后退出，想再次登录服务器就不认识了还要再登录， 就出现了cookile,这个cookile是浏览器第一次登录时服务器发给浏览器 的一个字符串存在浏览器的cookile里，再次去访问这个服务器时把 这个cookile发给服务器验证，每个用户的cookile是不同的， 这就是上次服务器返回带给服的 POST请求特性： 1.数据不会出现在地址栏中 2.数据的大小没有上限 3.有请求体（在Request Payload里传） 4.请求体中如果存在中文会使用URL编码！ username=%E5%BC%E2%EB&password=123 Referer:超链接的上一个网址 keyword=hello:请求体长度 Content-Type:opplication/x-www-form-urlencoded:放在请求体里的， 表单的数据类型，会使用Url格式编码数据， url编码数据都是以%为前缀，后跟二位16进制 <meta http-equiv="content-Type" charset=UTF8">--meta就是改请求头里的内容 2.http之响应协议，服务器给浏览器发的内容 响应首行 响应头信息 空行 响应体 HTTP/1.1 200OK Server:服务器版本信息 content-type:响应体使用的编码UTF8 content-length:响应体长度 set-cookie:响应给客户端的cookie 状态码： 200 404：资源找不到 500：服务器内部出错 302：重定向 304：第一次浏请求服，服务会响应200并发一个index.html页面的最后修改时间， 浏览器就会缓存这个页面，当浏再次请求服，比对一个这个页面的修改时间 当一样里服就返回304，浏就在自己的缓存里找
