前端基础(标签,form表单,列表,http协议),flask框架初部了解

(http://www.w3school.com.cn/h.asp)

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:鼠标悬浮上去显示文本
只需要调整一个,另一个自动按比例缩放
height
​
5.div用于页面布局
​
6.br用于换行
​
7.hr 文本分隔符
​
8.b,i,s,u
<b>加粗</b>
<i>斜体</i>
<s>字体中划线</s>
<u>字体下划线</u>
9.span普通小文本(行级标签一般添加文本内容)

6.特殊符号(&nbsp,&gt,&lt,&reg,&amp,&copy,&yen)

http://www.w3school.com.cn/tags/html_ref_symbols.html

 空格
> >
&lt; <
&reg; ®
&amp; &
&copy;©
&yen;¥

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__)
​
​
@app.route('/reg', methods=['GET', 'POST'])
def reg():
    #获取post提交过来的name和value
    # print(request.form)
    # print(request.form["username"])
    #获取文件对象,存储文件
    print(request.files)
    obj= request.files['myfile']
    obj.save('abc.jpg')
​
    return '收到了'
​
​
@app.route('/home')
def home():
    # return "abc"
    return redirect("https://www.baidu.com")
​
​
if __name__ == '__main__':
    app.run()
​