前端基础(标签,form表单,列表,http协议),flask框架初部了解
1.web本质
浏览器输入网址 朝服务器发送请求
服务器接收请求
服务器返回相应的响应
浏览器接收响应解析渲染展示到屏幕上
2.http协议,设置google浏览器缓存
超文本传输协议,规定了信息基于网络传输的发送及接收格式
google浏览器每次读取数据不经过缓存,都是重新读取数据
1.右键点击检查
2.点击右上角X旁边的3点...
3.选择Shortcuts,然后再settings里选择Preferences
4.在里面Network里选择Disable cache(✔)
3.http状态码
10X 服务器已经接收了你的请求,正在处理,你可以继续提交数据
20X 请求成功
30X 内部重定向
40X 请求错误
50X 服务器错误
4.head内常用标签
title 定义网页标题
link 引入外部css文件
script 在该标签内部直接写js代码,也可以引入外部js文件
style 内部写css样式语句
meta
name='keywords' content='.....................'
5.h1,p,a,img,div,br,hr,b,i,s,u,span标签简介
1.h1~h6标签一般用来显示标题(h1~h6表示不同的大小)
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
2.p标签段落标签(p标签虽然也是块儿级标签,但是它不能嵌套任何块儿级标签,只能嵌套行内标签)
<p>苍茫的天涯是我的爱,绵绵的青山脚下一片海</p>
3.a标签:链接标签,锚点,可以通过target控制是否是当前页跳转
target="_self"(当前页面转跳),target="_blank"(打开一个新的页面转跳)
<a href="https://www.baidu.com" target="_self">click</a>
4.img标签
src:图片地址
alt:图片未加载完成显示信息
title:鼠标悬浮上去显示文本
width:只需要调整一个,另一个自动按比例缩放
height
5.div用于页面布局
6.br用于换行
7.hr 文本分隔符
8.b,i,s,u
<b>加粗</b>
<i>斜体</i>
<s>字体中划线</s>
<u>字体下划线</u>
9.span普通小文本(行级标签一般添加文本内容)
6.特殊符号( ,>,<,®,&,©,¥)
http://www.w3school.com.cn/tags/html_ref_symbols.html
空格
> >
< <
® ®
& &
©©
¥¥
7.列表标签
https://www.cnblogs.com/miraclesakura/p/4285276.html
type disc实心圆,none不使用项目符号,square实心方块,circle空心圆
无需列表
<ul type="circle">
<li ></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
有序列表(i可以换成数字1等)
<ol type="i">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
页面显示结果
i.aaa
ii.bbb
iii.ccc
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容1</dd>
<dd>内容1</dd>
<dt>标题3</dt>
<dd>内容1</dd>
<dd>内容1</dd>
<dd>内容1</dd>
</dl>
显示结果
标题1
内容1
内容2
内容3
8.引入外部标签,拷贝网页html,标签嵌套,分类
1.<script src="index.js"></script>#可以引入外部的js.css等文件
2.谷歌浏览器打开网页比如(百度).右键打开检查.在标签最上面html上右键copy里选择outerhtml就可以copy所有标签样式.
3.!--<div>div1-->
<!--<div>div2-->
<!--<div>div3-->
<!--<p>p-->
<!--<a href="">a-->
<!--<i>i</i>-->
<!--</a>-->
<!--</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
4.标签分类(******)
块儿级标签(独占一行) h1~h6,p,hr,br
1.块儿级标签,可以嵌套其他块儿级标签和行内标签
2.p标签虽然也是块儿级标签,但是它不能嵌套任何块儿级标签,只能嵌套行内标签
行内标签(自身文本多大就占多大) span,b,u,i,s,a,img
1.行内标签肯定不能嵌套块儿级标签,只能嵌套行内标签
2.行内标签 无法设置长宽
标签分类2:
双标签<h1></h1>
自闭和标签<img />
9.表格标签
#table标签里thead一般写表格头tr标签可以可以包含th标签
#tbody表格体 tr标签里包含td标签
#rowspan="2"占2列 colspan="2"占2行
#border="1"外框线 cellspacing="10"外框间距 cellpadding="10"内框间距
<table border="1" cellspacing="10" cellpadding="10">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>小刚</td>
<td>73</td>
<td rowspan="2">戴帽子</td>
</tr>
<tr>
<td colspan="2">小博</td>
<!--<td>9000</td>-->
</tr>
</tbody>
</table>
10.form表单
< 功能:前后数据交互,帮你提交任意的数据 提交数据的input必须要有name参数 input框中value属性就是对应的值 form表单获取用户输入的标签都必须有name属性 form提交数据必须借助于input标签type类型等于submit按钮才能触发提交效果 #action 填写访问的ip和路由地址(控制数据往哪提交,不写默认往当前url地址提交) method 提交方式一般为get和post(控制数据提交的方式,默认是get请求) enctype="multipart/form-data"(数据编码格式)设置后可以传输文件 默认是application/x-www-form-urlencoded laber标签嵌套input标签后点击文本字体username后光标会自动显示在文本框内 type:text 普通文本输入框,password:用户输入不可见,date:日期 比如:获取用户生日 file上传文件(要设置enctype="multipart/form-data",提交方式必须是post),reset:重置,button:按钮 submit:提交 注意:form表单中只有input的type属性是submit才能支持提交 radio:单选 比如:获取用户性别,checkbox:多选 比如:获取用户爱好, select:下拉框 默认是单选,可以通过multiple属性指定为多选, optgroup label="北京" ,可以设置多个选择条件比如:北京,上海等以下城市.进行选择 textarea:大段文本 ,比如可以线评论等/> <form action="http://127.0.0.1:5000/reg" method="post" enctype="multipart/form-data"> <p> <label for="i1">username: <input type="text" id="i1" name="username" > </label> </p> <p>password:<input type="password" name="pwd"></p> <p>birthday: <input type="date" name="birth"> </p> <!--checked属性设置后显示在页面就会直接被选中 没有设置相同的name,选择的时候可以2个都选择,设置后就只能选中一个 --> <p>性别: <input type="radio" name="gender" value="1">男 <input type="radio" name="gender" checked value="2">女 </p> <p>hobby: <input type="checkbox" value="basketball" name="hobby">篮球 <input type="checkbox" value="football" name="hobby">足球 <input type="checkbox" name="hobby" value="doulecolorball">双色球 </p> <p>省市: <select name="province" id=""> <option value="bj">北京</option> <option value="sh">上海</option> <option value="sz">深圳</option> </select> </p> <p>省市多选: <select name="" id="" multiple> <option value="">北京</option> <option value="">上海</option> <option value="">深圳</option> </select> </p> <p>省市2: <select name="" id=""> <optgroup label="北京"> <option value="">朝阳</option> <option value="">海淀</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>自我评价: <textarea name="info" id="" cols="30" rows="10"></textarea> </p> <p>文件资料: <input type="file" name="myfile"> </p> <input type="submit" value='注册'> <input type="reset"> <input type="button" value="按钮"> </form>
11.flask框架初部了解
#flask三行式
from flask import Flask, request, redirect
# 实例化flask对象
app = Flask(__name__)
