HTTP协议
超文本传输协议HyperText Transfer Protocol
四大特性:
1、HTTP是一个简单的请求-响应协议。
2、基于TCP协议,作用于应用层上。
3、无状态:HTTP是一种无状态协议,即服务器不保留与客户交易时的任何状态。
4、无连接:客户与服务器之间的HTTP连接是一种一次性连接,它限制每次连接只处理一个请求,当服务器返回本次请求的应答后便立即关闭连接,下次请求再重新建立连接。
数据格式:
1、请求格式(4行) 请求首行(请求方式、协议版本) 请求头(key--value键值对) 空行 请求体(携带的数据此处有可能为空,要视请求方式而定)
请求方式:
get请求(向服务端索要数据,例如打开网址) post请求(向服务端提交数据,例如登录功能)
2、响应格式(4行) 响应首行(响应状态码) 响应头(key--value键值对) 空行 响应体(浏览器展示给用户看的数据)
响应状态码:
1xx 表示服务端已经收到客户端的数据,正在处理,可以继续提交数据。 2xx:其中200表示请求成功服务端已返回请求的数据。 3xx: 重定向(本来访问的是A,结果转到了B)。4xx :其中403表示不具备请求的条件,没资格访问; 404:表示请求的资源不存在。5xx 其中500表示服务器内部错误
HTML
超文本标记语言(HyperText Markup Language)
浏览器能识别的语言 html、xml、css、javascript
xml也可以书写前端页面,主要运用于odoo框架,常用于编写企业内部的管理软件(ERP)
html中要写注释,<!-- 这里是注释,可以写多行 -->
由于HTML写法复杂,一般都要以注释来分隔代码块,如
<!-- 左侧菜单栏样式开始 -->
<!-- 左侧菜单栏样式结束 -->
HTML文档结构
<html> <head></head> head里面的参数,是给浏览器识别并做相应操作的 <body></body> body里面的参数,是展示给用户的花里胡哨的页面数据 </html>
标签分类:双标签 和 自闭合标签
标签分类2:块标签 和行内标签
块标签(h、p、br、hr、div)可以嵌套块标签和行内标签,但是块标签<p>最好不要嵌套块标签,不推荐。
行内标签(u、i、s、b、span)什么都不能嵌套,自身文本多大就占多大。
<head> </head>中常见的标签
title 、style 、link、 script 、meta
title 定义网页标题 。 style支持在标签中直接写css代码。 link 支持引入css文件。 script可以在标签中写js代码,也可以通过src属性引入js文件。 meta,通过name属性定义keywords和description。
URL:(Uniform Resource Locator)统一资源定位符
在WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL(Uniform Resource Locator,统一资源定位符),它是WWW的统一资源定位标志,就是指网络地址。
<body></body>中常见的标签
基本标签
h1--h6:标题标签
s:删除线 u:下划线 i:斜体 b:加粗 p独占一行 br换行 hr分割线
其中br和hr单独使用。
特殊符号
空格 大于号 > 小于号< &符号& 人民币符号¥ 版权标识符号© 注册商标®
常用标签
块级标签<div></div> 行内标签<span></span> 多用于页面布局
图片标签 <img>标签 单独使用,不成对
src参数:可以写入一个网站图片地址、本地图片地址、或url连接(向url发送请求,索要数据)
alt: 当图片加载不出来的时候,显示alt后面的信息
title:鼠标悬浮在图片上时,显示的信息
width和height:如果只修改一个值,另一个值会等比例缩放,如果两个值都改,图片可能会失真
链接标签 <a></a>
href属性:跳转到url所对应的资源
target属性:‘_blank’是新打开一个窗口访问,如果不写,默认的是‘_self’。
此外,<a>标签还有锚点功能,配合id一起使用
标签应具备的属性:
id属性和class属性,id属性在一个页面中要保证唯一。class属性可直接引用别的类的样式。
列表标签
无序列表
ul中也可以设置 type="None",去掉无序列表开头的小黑点
有序列表
标题列表
表格标签
固定写法(<th>加粗,常用于<thead>表头;<td>不加粗,常用于<tbody>表体;一个<tr></tr>表示一行)
<table border="1"> <thead> <tr> <th>这里是标题1</th> <th>这里是标题2</th> <th>这里是标题3</th> </tr> </thead> <tbody> <tr> <td>这里是内容1</td> <td>这里是内容2</td> <td>这里是内容3</td> </tr> <tr> <td>this 1</td> <td>this 2</td> <td>this 3</td> </tr> </tbody> </table>
如果要合并单元格, 跨行的合并用 ,即列方向的竖向合并,用rowspan,并且需要手工注释被合并的单元格
<table border="1"> <thead> <tr> <th>这里是标题1</th> <th>这里是标题2</th> <th>这里是标题3</th> </tr> </thead> <tbody> <tr> <td rowspan="2">这里是内容1</td> <td>这里是内容2</td> <td>这里是内容3</td> </tr> <tr> <!-- <td>this 1</td>--> 被手工注释 <td >this 2</td> <td>this 3</td> </tr> </tbody> </table>
如果要合并单元格, 跨列的合并用 ,即行方向的横向合并,用clospan,并且需要手工注释被合并的单元格,此时注释本行的单元格,在同一个<tr>中
<table border="1"> <thead> <tr> <th>这里是标题1</th> <th>这里是标题2</th> <th>这里是标题3</th> </tr> </thead> <tbody> <tr> <td rowspan="2">这里是内容1</td> <td colspan="2">这里是内容2</td> <!-- <td>这里是内容3</td>--> </tr> <tr> <!-- <td>this 1</td>--> <td >this 2</td> <td>this 3</td> </tr> </tbody> </table>
表单标签(很重要)
form标签
可以获取用户输入(包括获取输入内容、选择内容、上传的文件),并将其打包发送给后端。
action参数:用来控制参数提交的路径。
action参数有三种写法 1、如果action为空,默认提交数据到当前页面所在地址。 2、写上准确的绝对路径。 3、只写路径的后缀名/index/
method参数有 get 和 post 等。method = 'get' 时,会将输入的信息展示在浏览器的地址栏,不安全。method= ‘post’ 时,地址栏中不会出现输入信息。
ecctype参数是encode_type的简写,含义是 发送到服务器之前应该如何对表单数据进行编码,当表单中含有文件上传时,必须指定为 enctype='multipart/form-data'
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
label标签常常结合input标签一起使用,<label for=' ' ><input type=' ' ></label>, for用来表示input的id值。input外部加上lable后,点击label内的任意内容,都会跳转到input中去,即让input标签聚焦。
通过<input>标签来获取用户输入
input的type属性
text普通文本框
password界面看不到输入内容
date 日期插件
radio多选一,通过关键字checked来设置一个默认值
checkbox多选多,通过关键字checked来设置一个或多个默认值
file 打开文件上传
submit 出发form表单提交的动作, 通过value='XX'设置按钮的名字,注意:<input type='submit' value=’‘提交> 和<button>提交<button>效果是一样的。
reset 重置表单中的所有内容,通过value='XX'设置按钮的名字
button 一个没有任何功能的按钮,只起到占位的作用,通过value='XX'设置按钮的名字
通过select来获取用户选择的内容
<select><option></option></select> option中的内容就是选项,
可以在select标签中加入multiple改成多选,可以在option标签中加selected进行默认
通过textarea设置大文本框
<textarea cols=' ', rows = ' '> </textarea>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> </head> <body> <p>登录界面</p> <form action=""> <p> <label for="d1">用户名 <input type="text" id="d1" name="username"></label> </p> <p><label for="d2">密码 <input type="password" name="password" id="d2"> </label></p> <p> <label>性别: <input type="radio" name="gender" checked>男 <input type="radio" name="gender">女 <input type="radio" name="gender">其他 </label> </p> <p><label for="d4">爱好 <input type="checkbox" name="hobby" checked>唱 <input type="checkbox" name="hobby" checked>跳d <input type="checkbox" name="hobby" checked>rap <input type="checkbox" name="hobby" checked>篮球 </label></p> <p><label for="d4">出生日期 <input type="date" id="d4" name="birthday"> </label></p> <p><label for="d89">选人 <select name="province" id="d89" multiple> <option value="" selected>张三</option> <option value="" selected>李四</option> <option value="">浙江</option> <option value="">广东</option> </select></label></p> <p><label for="06">附件 <input type="file" id="06"> </label></p> <p><label for="07">用户名 <input type="text" id="07"> </label></p> <p><label>省份 <select name="province" id="d8"> <option value="">上海</option> <option value="" selected>江苏</option> <option value="">浙江</option> <option value="">广东</option> </select> </label></p> <p> <label for="009">简介<textarea name="简介" id="009" cols="30" rows="10"></textarea></label> </p> <p> <input type="submit" value="register"> <input type="reset" value="chogngzhi"> <!-- <input type="text" value="">--> <input type="button" value="闲置"> <button>点我提交</button> </p> </form> </body> </html>