前端HTML2
内容回顾:
json序列化非默认数据结构
第一种 手动转字符串
第二种 继承JsonEncoder重写它的default方法
什么是前端
任何跟用户直接交互的界面都可以称之为前端
为什么学前端
因为我们是python全栈开发,技多不压身!
web本质
浏览器输入网址 朝服务器发送请求
服务器接收请求
服务器返回相应的响应
浏览器接收响应解析渲染展示到屏幕上
http协议
超文本传输协议,规定了信息基于网络传输的发送及接收格式
http状态码
10X 服务器已经接收了你的请求,正在处理,你可以继续提交数据
20X 请求成功
30X 内部重定向
40X 请求错误
50X 服务器错误
html
超文本标记语言,规定了前端页面的书写标准
html注释
单行注释<!--这里写注释-->
多行注释<!--
这就是多行注释
-->
html文档结构
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
head内常用标签
title 定义网页标题
link 引入外部css文件
script 在该标签内部直接写js代码,也可以引入外部js文件
style 内部写css样式语句
meta
name='keywords' content='.....................'
今日内容
body常用标签
基本标签
h1~h6
p
a
img
b,u,i,s
br
hr
特殊符号
>
<
®
&
©
¥
常用标签(******)
div用于页面布局
span普通小文本
a标签:链接标签,锚点,可以通过target控制是否是当前页跳转
img标签:
src:图片地址
alt:图片未加载完成显示信息
title:鼠标悬浮上去显示文本
width:只需要调整一个,另一个自动按比例缩放
height
列表标签
无序列表
ul>li
type disc,none,square,circle
有序列表
<ol type="i">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
标题列表
<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>
表格标签
<table>
<thead></thead>
<tbody></tbody>
</table>
table内 tr标签表示一行,tr里面可以放td,thead
form表单(*******)
功能:前后数据交互,帮你提交任意的数据
input通过控制type属性来展示不同的获取用户输入的页面效果
type属性总结:
text:纯文本
password:用户输入不可见
date:日期 比如:获取用户生日
radio:单选 比如:获取用户性别
checkbox:多选 比如:获取用户爱好
file:文件 获取用户上传文件
submit:提交 注意:form表单中只有input的type属性是submit才能支持提交
reset:重置
button:按钮
select:下拉框 默认是单选,可以通过multiple属性指定为多选
textarea:大段文本
label标签
本身没有任何实际意义,主要是配合input标签
<label for="">username:
<input type="text">
</label>
<label for="i1">username:
<input type="text" id="i1">
</label>
flask框架初窥
flask安装命令
pip install Flask
flask三行式
请求方式
获取数据 get请求
提交数据 post请求
标签分类(******)
块儿级标签(独占一行) h1~h6,p,hr,br
1.块儿级标签,可以嵌套其他块儿级标签和行内标签
2.p标签虽然也是块儿级标签,但是它不能嵌套任何块儿级标签,只能嵌套行内标签
行内标签(自身文本多大就占多大) span,b,u,i,s,a,img
1.行内标签肯定不能嵌套块儿级标签,只能嵌套行内标签
2.行内标签 无法设置长宽
标签分类2:
双标签<h1></h1>
自闭和标签<img />
URL:网址(uniform resource locator)
专业一点:统一资源定位符
url的组成:
https://www.baidu.com/
form表单中
action属性. 控制数据往哪提交,不写默认往当前url地址提交
method属性 控制数据提交的方式,默认是get请求,可以通过method该属性指定其他提交
提交数据的input必须要有name参数
input框中value属性就是对应的值
如果要提交文件数据
1.修改提交数据编码格式enctype
2.提交方式必须是post
form表单注意事项:
action
method默认是get
enctype数据编码格式
form表单获取用户输入的标签都必须有name属性
form提交数据必须借助于input标签type类型等于submit按钮才能触发提交效果
