一.web服务的本质
浏览器敲入网址回车发生了几件事?
1.浏览器朝服务器发送请求
2.服务端接受请求
3.服务端返回相应的响应
4.浏览器接受响应,并根据特定的规则渲染页面展示给用户看
二.HTTP协议
1.http协议是什么
HTTP协议是一种超文本传输协议
规定了浏览器与服务器之间消息传输的格式
2.http协议的四大特性
1.基于请求响应
2.基于TCP/IP之上,并作用于应用层的协议
3.无状态(服务端无法保存用户的状态,不管用户来多少次,都当他是第一次来)
4.无连接(一次请求,一次响应,响应之后立马断开连接,两者之间不再有任何关系)
补充:websocket模块,是HTTP协议的一个大的补丁,它支持长连接
3.请求和响应数据格式
请求:
请求首行(标识HTTP协议版本,当前请求方式)
请求头(一堆k,v键值对)
(/r/n空行)
请求体(携带的是一些敏感信息,如密码,身份证号等)
响应:
响应首行(标识HTTP协议版本,响应状态码)
响应头(一堆k,v键值对)
(/r/n空行)
响应体(返回给浏览器页面的数据,通常响应体都是html页面)
4.请求首行中的请求方式
1.get请求
朝服务端要资源(比如在浏览器中输入www.baidu.com,服务端会返回相应的页面数据)
2.post请求
朝服务端提交数据(比如用户登录时,提交的用户名和密码等)
5.响应首行中的响应状态码
用一串简单的数字来表示一些复杂的状态或提示信息
1xx:服务端成功接收数据,正在处理,可以继续提交数据
2xx:服务端成功响应,返回了相应的数据(请求成功200)
3xx:重定向(比如当访问了一个需要登录之后才能访问的页面时会自动跳转到登录页面 状态码:301,302)
4xx:请求错误(当请求的资源不存在会返回404,请求不合法或权限不够时返回403)
5xx:服务器内部错误(500)
6.URL
url是统一资源定位符,通俗的讲就是网址
1 import socket 2 3 server = socket.socket() 4 server.bind(('127.0.0.1', 8080)) 5 server.listen() 6 7 while True: 8 conn, addr = server.accept() 9 data = conn.recv(1024) 10 print(data) 11 conn.send(b'HTTP/1.1 200 OK ') # 发送HTTP协议版本以及响应状态码后即可发送成功 12 conn.send(b'hello')
三.HTML
1.HTML是什么
HTML是一种超文本标记语言,是一种用于创建网页的标记语言,它不是一种编程语言
本质上是浏览器可识别的规则,要想页面被正常显示出来,就必须遵循HTML标记语法
网页文件的扩展名是:htm或html
2.HTML的文档结构
基本的文档结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
1.<!DOCTYPE html>是声明为HTML5的文档
2.<html> </html>是文档的开始和结束标记,是html页面的根元素,在他们之间是文档的头部(head)和主题(body)
3.<head> <head>定义了html文档的开头部分,他们的内容不会在浏览器的文档窗口显示,这里包含了文档的元数据(meta)
4.<title> <title>定义了网页的标题,在浏览器的标题栏显示
5.<body> </body>之间的文本是网页的主题内容
3.HTML的注释
注释是代码之母
单行注释 <!--注释内容--> 多行注释 <!-- 注释内容 注释内容 -->
一般情况下,html的注释都会按照下面的方式书写
<!--导航条样式开始-->
<!--导航条样式结束
4.HTML的标签
标签的分类1:
1.双标签(<h1></h1>, <a></a>)
2.单标签(自闭和标签 <img/>)
标签的分类2:
1.块儿级标签(独占浏览器一行)
div,p,h
1.块儿级标签可以修改长宽
2.块儿级标签内部可以嵌套任意的块级标签
特例:p标签虽然是块儿级标签,但是它不能嵌套其他块儿级标签,包括自身,但是它能嵌套行内标签
总结:p标签只能嵌套行内标签,其他块儿级可以嵌套任意的块儿级标签
2.行内标签(自身文本多大就占多大)
span,b,s,i,u
div和span通常都是用来构建网页布局的
head内常用的标签
title用来显示网页标题
style用来控制样式,内部支持写css代码
script内部支持写js代码,也支持导入外界的js文件
link专门用来引入外部的css文件
5.body内常用的标签
每一个标签都应该有三个比较重要的属性
1.id值,类似于人的身份证号,在同一个html文档id应该保证唯一不重复
2.class值,该值就类似于面向对象里的继承,可以写多个
3.style(不是必备),支持在标签内直接写css代码,属于行内样式,优先级最高
补充:任何标签都支持自定义属性!!!
1.基本标签
h标签:标题标签
p标签:段落标签
b标签:加粗
i标签:斜体
u标签:下划线
s标签:删除
br:换行
hr:生成一条水平线
2.特殊符号
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
<p>>©你看这个面,&他又长又宽, 你看这个碗,¥他又大又圆®<</p>
3.常用标签
div标签:
用来定义一个块儿级元素,并无实际意义,通过css来赋予实际的意义
span标签:
用来定义一个行内的元素,并无实际意义,通过css来赋予实际的意义
img标签:
<img src="" alt="" title="" height="" width="">
src存放的是图片的路径,可以是本地的,也可以是网上的,还可以存放图片的二进制数据,它会自动转化成图片
alt存放的是当图片加载不出来的时候显示的提示信息
title当鼠标悬浮在图片上显示的信息
height和width当只指定一个参数时,图片会等比例缩放,两个参数都指定就按照指定的参数显示
a标签
<a href="" target="" id="">点击我</a>
herf后面可以存放url,点击之后可以跳转到该url,如果该链接没有被点过,默认是蓝色,点过之后都会编成紫色
target默认是_self在当前页面跳转,_blank是新建一个页面跳转
锚点功能(回到顶部)
herf后除了可以跟url之外还可以跟另一个标签的id值,点击之后就会跳转到对应id值的标签
列表标签
1.无序列表
<ul type="square"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul>
type属性:
disc:实心圆点,默认值
circle:空心圆圈
square:实心方块
none:无样式
2.有序列表
<ol type="A" start="1"> <li>111</li> <li>222</li> <li>333</li> </ol>
type属性:
1数字列表,默认值
A大写字母
a小写字母
I大写罗马
i小写罗马
start属性:指定列表的开始值
3.标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格标签
<table border="1"> <thead> <tr> <td>username</td> <td>password</td> <td>hobby</td> </tr> </thead> <tbody> <tr> <td>sxc</td> <td>123</td> <td rowspan="2" >read</td> </tr> <tr> <td>zzj</td> <td>123</td> <!--<td>jump</td>--> </tr> <tr> <td>zzp</td> <td colspan="2">123</td> <!--<td>sing</td>--> </tr> </tbody> </table>
属性:
border:表格边框
cellpadding:内边距
cellspacing:外边距
像素,百分比
rowspan:单元格竖跨多少行
colspan:单元格横跨多少列
form表单属性
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
表单元素
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
input
<input> 元素会根据不同的 type 属性，变化为多种形态。
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
属性说明:
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用
select标签
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
label标签
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
- label 元素不会向用户呈现任何特殊效果。
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>
属性说明：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用
44