zoukankan html css js c++ java

day44天 HTTP协议和前端html协议

web服务器的本质(***)

import socket


sk = socket.socket()

sk.bind(("127.0.0.1", 8080))
sk.listen(5)


while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OK

")
    conn.send(b"<h1>Hello world!</h1>")
    conn.clos

代码

在浏览器中敲入网址发生了几件事情

1.浏览器向服务端发送请求数据

2.服务端接收请求发送响应数据

3.服务端发送响应数据

4.浏览器接收响应根据特定的规则来渲染页面给用户展示(响应数据跳转页面)

HTTP协议(***)

超文本传输协议

规定服务器与浏览器消息传输的数据格式

四大特性:(***)

1.基于请求响应

2.基于TCP(传输协议)/IP( 地址) 之上的作用于应用层的协议

3.无状态(服务端不保存用户的状态)

4.无连接(请求一次,就响应一次,之后就立马端来连接,两者无任何关系)

如QQ,陌陌,之类的交友软件,用的是WEBSOCKET,相当于是HTTP协议的一个大的补丁,支持长连接.

格式(***)

请求数据格式

<!DOCTYPE html>请求数据首行
用来标识HTTP协议版本,当前请求方式
<head>、</head>请求头
一大堆   k:v键值对
<body>、</body>请求体
一些敏感信息

响应数据格式

<!DOCTYPE html>响应数据首行
标识HTTP协议版本,当前响应方式
<head>、</head>响应头
一大堆 k:v键值对
<body>、</body>响应体
返回给浏览器页面的数据,通常响应体都是HTML页面

响应状态码(***)

用一串简单的数字来表示一些复杂的状态或提示信息
1XX:服务端已经成功接受了你的数据,正在处理,你可以继续提交数据

2XX:服务端成功响应你想要的数据 (200:请求成功)

3XX:重定向(当你在访问一个需要登录的页面时,你会发现跳转到登录页面     301   302   )

4XX:请求错误(404:请求资源不存在,403:q请求资源不合法,或)

5XX:服务器内部错误(500)

请求方式(***)

get请求

朝服务器要资源

如:在浏览器中输入www.baidu.com

post请求

朝服务器提交资源

如:用户登录时,提交用户和密码

URL:统一资源定位符(网址)

HTML

超文本标记语言

要想让你的页面能够被浏览器正常显示出来,就的遵守HTML协议

也就是说,所有能够被浏览器显示的页面,内部都是HTML代码

浏览器只认识 html , css , ml

网页文件的扩展名：.html或.htm

web本质

浏览器与服务器

文件 (后缀以 .html 结尾的文件是前端页面文件)

文件的后缀名只是为了给人看 ,知道哪种类型文件,而相对于计算机来讲,只是一堆二进制数据

html注释

写网页的一套规范

注释:

单行注释

<!--单行注释-->

多行注释

<!--
多
行
注
释
-->

一般情况下 html的注释都会按照下面的方式书写
<!--导航条样式开始-->

<!--导航条样式结束-->

HTML文档结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    定义一些配置,是用来给浏览器看的,不是给用户展示的
</head>
<body>
    是浏览器给用户展示的内容
</body>
</html>

打开HTML页面的俩种方式

1.找到文件路径,选择浏览器打开

2.用pycharm快捷方式打开

标签的分类(1)

单标签

标签是单独呈现的

自闭和标签    <img/>    <br/>、<hr/>

双标签

第一个标签是开始，第二个标签是结束。结束标签会有斜线

<a></a>
<p></p>
<h3></h3>
<h2></h2>

head内常用标签

title    显示网络标题
style    控制样式,内部支持写css代码
script    内部支持写js代码,也支持外部导入js代码
link    专门用来引入外部的css文件
meta    定义网页原信息

重要属性

id:
    定义标签的唯一ID，在一个html文档中id应该保证唯一不重复
    
class:
    为html元素定义一个或多个类名（classname）(CSS样式类名)
    
style:
    规定元素的行内样式（CSS样式） 属于行内样式 优先级最高
任何标签都支持自定义属性!!!

标签的分类(2)

块级标签

独占浏览器一行
如: <div></div>  <h></h>系列的   <p></p>     
1.快级标签 可以修改长度
2.p标签 不能嵌套其他块级标签,也不能嵌套p标签,但可以嵌套行内标签

总结:

只要是块级标签,都可以嵌套行内标签

p标签只能嵌套行内标签,其他块级标签可以嵌套任意的块级标签

行内标签

文本有多大,就占多大,由文本的内容撑开
<span></span>    <b>加粗</b>    <i>斜体</i>    <u>下划线</u>    <s>删除</s>

div标签用来定义一个块级元素,span标签用来定义内联(行内)元素

div标签和span 标签通常是用来构建网页布局的

body内标签

基本标签

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<!--换行-->
<br>  换行标签
<hr/> 分割线标签
<!--水平线--><hr>

View Code

转义字符

空格  &nbsp
>    &gt
<    &lt
版权    &copy
注册    &reg
&    &amp     
¥    &yun

常用标签

<div></div>      "架构"标签
<span></span>    行文本标签
<p></p>            段落标签
<img/>            图片标签
<a></a>            超链接标签

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">


src存放的是图片的路径(该路径可以是本地的也可以是网上的)
　　1.也可以放url(会自动请求该url获取相应数据)
　　2.也可以直接放图片的二进制数据 会自动转换成图片
					
alt当图片加载不出来的时候 显示的提示信息
				
　　title当鼠标悬浮在图片上 提示的信息
				
height,width 当你只指定一个参数的时候 另外一个会等比例缩放

a标签

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
<a href="" id="d1">顶部</a>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2" class="c1">中间</a>
<div style="height: 1000px;background-color: green"></div>
<a href="#d2">会到中间</a>
<div style="height: 1000px;background-color: yellow"></div>
<a href="#d1" username="jason" password="123">点我回到顶部</a>

href后面存放url的时候  点击跳转到该url
如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色
								
target 默认是_self当前页面跳转
blank新建页面跳转
				
锚点功能(回到顶部)
    href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签

列表标签

1.无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>


type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

2.有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性：

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

3.标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

表格标签(**)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="20" cellpadding="10" cellspacing="10">
    <thead>
        <tr>
            <th>username</th>
            <th>password</th>
            <th>hobby</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">tank</td>
<!--            <td>123</td>-->
            <td rowspan="2">生蚝</td>
        </tr>
    <tr>
            <td>egon</td>
            <td>123</td>
<!--            <td>足疗</td>-->
        </tr>
    <tr>
            <td>jerry</td>
            <td>123</td>
            <td>大保健</td>
        </tr>
    </tbody>
</table>
</body>
</html>

View Code

<table>
    <thead></thead>
     <tbody></tbody>
 </table>

tr表示一行
     th和td都是文本
     建议在thead内用th
     tbody内用td
    
属性:

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

表单标签(***)

能够接收用户输入(输入选择上传)并将其发送给后端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>注册页面</h2>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
    <p><label for="d1">username:<input type="text" id="d1" name="username"></label></p>
    <p><label for="d2">password:<input type="password" id="d2" name="password"></label></p>
    <p>
        <label for="d3">birthday:</label>
        <input type="date" id="d3" name="birth">
    </p>
    <p>性别:
        <input type="radio" name="gender" checked value="male">男
        <input type="radio" name="gender" value="female">女
    </p>
    <p>爱好:
        <input type="checkbox" name="hobby" value="basketball">篮球
        <input type="checkbox" name="hobby" value="football">足球
        <input type="checkbox" name="hobby" checked value="doublecolorball">双色球
    </p>
    <p>省市:
        <select name="province" id="">
            <option value="sh">上海市</option>
            <option value="bj">北京市</option>
            <option value="sz">深圳市</option>
        </select>
    </p>
    <!--<p>伴侣:-->
    <!--    <select name="" id="" multiple>-->
    <!--        <option value="" selected>新垣结衣</option>-->
    <!--        <option value="" selected>斯嘉丽</option>-->
    <!--        <option value="">明老师</option>-->
    <!--    </select>-->
    <!--</p>-->
    <!--<p>省市1:-->
    <!--    <select name="" id="">-->
    <!--        <optgroup label="上海">-->
    <!--            <option value="">嘉定区</option>-->
    <!--            <option value="" selected>浦东新区</option>-->
    <!--            <option value="">静安区</option>-->
    <!--        </optgroup>-->
    <!--        <optgroup label="北京">-->
    <!--            <option value="">朝阳区</option>-->
    <!--            <option value="">海淀区</option>-->
    <!--            <option value="">昌平区</option>-->
    <!--        </optgroup>-->
    <!--        <optgroup label="安徽">-->
    <!--            <option value="">芜湖市</option>-->
    <!--            <option value="">合肥市</option>-->
    <!--            <option value="">安庆市</option>-->
    <!--        </optgroup>-->
    <!--    </select>-->
    <!--</p>-->
    <p>头像:
        <input type="file" name="avatar">
    </p>
    <p>个人简介:
        <textarea name="info" id="" cols="30" rows="10"></textarea>
    </p>
    <!--<p>隐身-->
    <!--    <input type="hidden">-->
    <!--    -->
    <!--</p>-->
    <input type="submit" value="注册1">
    <input type="button" value="注册2">
    <input type="reset" value="注册3">
    <button>button标签</button>


    

</form>
</body>
</html>

View Code

action

action控制数据提交的目的地
   1.不写的情况下 默认提交到当前页面所在的路径
   2.写全路径(https://www.baidu.com)
   3.路径后缀(/index/)

input

<input> 元素会根据不同的 type 属性，变化为多种形态。

type
  text:普通文本
  password:密文 不展示明文
  date:日期
  submit:触发提交动作
  button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作
  reset:重置表单内容
  radio:单选  可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked)  checked="checked"
  checkbox:多选 同上 可以设置默认值
  file:获取用户上传的文件
  hidden:隐藏输入框(防呆标签)
属性说明:

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type="button", "reset", "submit"时，为按钮上显示的文本按钮内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

select

默认是单选  可以通过multiple变成多选
如果想默认选择  用selected  (selected="selected")

label

定义：<label> 标签为 input 元素定义标注（标记）。
说明：

label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同

textarea标签

获取用户输入的大段文本
属性说明：

name：名称
rows：行数
cols：列数
disabled：禁用

小结:

form表单默认是get请求 你需要通过method参数 换成post提交
form表单中 要想触发提交动作 
  只有两种情况可以
     1.input标签type指定成submit
     2.直接写button标签
            
获取用户输入(输入 选择 上传...)的标签 都必须有一个name属性
这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value
             
        
 <input type="text" id="d1" name="username" value="默认值">
    name就相当于是字典的key
    value就是字典的值
    获取都的用户输入都会被放入value属性中
        
form表单传文件的时候 需要指定enctype参数

flask小试

from flask import Flask,request


app = Flask(__name__)
@app.route('/index/',methods=["GET","POST"])
def index():
    print(request.form)  # 获取前端form表单提交过来的数据
    print(request.files)
    file_obj = request.files.get("avatar")
    file_obj.save('xxx.pdf')
    return '收到了'

app.run()

查看全文

相关阅读:
【CodeVS 3290】【NOIP 2013】华容道
 【UOJ #20】【NOIP 2014】解方程
 【UOJ #17】【NOIP 2014】飞扬的小鸟
 【UOJ #147】【NOIP 2015】斗地主
 【UOJ #150】【NOIP 2015】运输计划
 【POJ 3241】Object Clustering 曼哈顿距离最小生成树
 【COGS 254】【POI 2001】交通网络图
 【CodeVS 2083】Cryptcowgraphy 解密牛语
 1654 方程的解
 2124: 等差子序列

原文地址：https://www.cnblogs.com/komorebi/p/11456235.html

day44天 HTTP协议 和前端html协议

web服务器的本质(***)

HTTP协议(***)

四大特性:(***)

格式(***)

请求数据格式

响应数据格式

响应状态码(***)

请求方式(***)

HTML

web本质

html注释

HTML文档结构

打开HTML页面的俩种方式

标签的分类(1)

head内常用标签

重要属性

标签的分类(2)

body内标签

基本标签

转义字符

常用标签

img标签

a标签

列表标签

表格标签(**)

表单标签(***)

action

input

select

label

textarea标签

flask小试

day44天 HTTP协议和前端html协议