Day51--HTML--02
每日测验
"""
今日考题
1.ascii,gbk,utf-8,gbk的区别
2.请用至少两种方式实现m与n值交换m=10,n=5
3.什么是深浅拷贝
4.什么是HTTP协议
5.列举你所知道的HTML标签
"""
昨日内容回顾
-
Web的本质
""" 浏览器 服务端 文件(html文件) """ 课程web方向 前端 django bbs 路飞 -
HTTP协议
""" HTTP协议的由来(sql语句由来) 浏览器只有一个如何兼容N多个服务端 """ # 四大特性 1 基于请求响应 2 基于TCP/IP作用于应用层之上的协议 3 无状态 无论来多少次 都待你如初见 如何做到保存用户状态？？？ cookie、session、token 4 无/短链接 请求来我响应你 之后就没有联系了 长链接:websocket(群聊功能、服务端主动给客户端发送消息) # 请求数据格式 请求首行(HTTP协议的版本，当前请求方式) 请求头(一大堆k，v键值对) 请求体(并不是所有的请求方式都有请求体,get没有post有) # 响应数据格式 响应首行(HTTP协议的版本，响应状态码) 响应头(一大堆k，v键值对) 响应体(浏览器展示给用户看的内容) # URL 统一资源定位符 类似于坐标 # 请求方式 1.get请求 朝别人要数据(也是可以携带参数的，只不过参数不是放在请求体里面的,而是直接放在url的后面) url?username=jason&password=123 2.post请求 朝别人提交数据 # 响应状态码 """用简短的数字来表示一大串提示性信息""" 1XX:服务端已经成功接收到了你的数据 正在处理你可以继续提交 2XX:请求成功(200 OK) 3XX:重定向(你想访问A页面但是给你调到了B页面) 4XX:请求错误(404请求资源不存在、403请求不符合条件) 5XX:服务端内部错误(500) ps:上述的状态码是HTTP协议规定的，其实到了公司之后每个公司还会自己定制自己的状态及提示信息 公司A 1000: 1001: 1002: 公司B 2001: 2002: 2003: ... -
HTML
""" 超文本标记语言(你在学习它的时候只需要记忆每个标签表示什么意思即可) 书写网页的一套标准 除了HTML可以书写前端页面之外 还有XML也可以书写前端页面 odoo框架内部的前端页面全部是用XML书写 公司内部管理软件 ERP """ # 注释 <!--注释--> # 文档结构 <html> <head></head>：都不是给用户看的 主要是给浏览器看的一些配置信息 <body></body>：body书写的所有的内容 都是给用户看的 </html> -
head内常用标签
title 定义网页标题信息 style 内部支持直接书写css代码 link 引入外部css文件 script 内部可以书写js代码并且也可以引入外部js文件 meta 定义网页源信息 keywords description -
body内基本标签
""" h1～h6 标题标签 p段落标签 u i b s hr br """ # 特殊符号 空格 大于 > 小于 < & ® © ¥ -
常用标签
""" div：网页初期划定区域范围 span：划定文本的 """ # a标签 链接标签 <a href='' target=''></a> href 1.可以放一个url点击自动跳转 2.还可以放其他标签的id值 锚点功能 target 控制是否在当前页跳转 _self（默认） _blank # img标签 图片标签 <img src='' alt='' title='' height='' width=''/> src 1.可以放图片的路径 本地或者线上 2.还可以放一个url 会自动朝该url提交get请求获取图片数据展示(暂时不考虑) alt 图片加载不出来的时候 展示的提示信息 title 鼠标悬浮在图片上之后展示的提醒信息 height、width 单独调整某一个 另外一个会自动等比例缩放 如果两个都调整了 可能会出现图片的失真 # 标签一般情况下都需要有两个重要的属性 id值 唯一标示 同一个页面不能有重复 class值 类似于类的继承 可以有多个 -
标签的分类
""" 分类1: 双标签 <h1></h1> 单标签 <img/> 分类2: 块儿级标签:独占一行 可以设置长宽 div p 注意：块儿级标签内部可以嵌套任意的行内标签和块儿级标签 但是p标签只能嵌套行内标签 行内标签:自身文本多大就占多大 不能设置长宽 span a img PS：上述的规定只是HTML书写规范 如果你不遵循 不会报错 浏览器会自动帮你解除嵌套关系 """ -
列表标签
ul li 页面上只要是带有规则的排序文字 一般用的都是无序列表 ol li 有序列表 dl dt dd 标题列表
今日内容概要
- 表格标签(只要是展示数据 一般都可以使用表格标签)
- 表单标签(重要:获取前端用户数据发送给后端)
- 偷窥一下后端框架的基本使用(flask)
- css层贴样式表(选择器)
今日内容详细
1.表格标签
jason 123 read
egon 123 dbj
tank 123 hecha
...
<table> </table> 标签
<table>
<thead>
<tr> 一个tr就表示一行
<th>username</th> 加粗文本
<td>username</td> 正常文本
</tr>
</thead> 表头(字段信息)
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>read</td>
</tr>
</tbody> 表单(数据信息)
</table>
<table border="1"> 加 表格外边框
<td colspan="2">egon</td> 水平方向占多行 列合并
<td rowspan="2">DBJ</td> 垂直方向占多行 行合并
# 表格标签不一定都要讲thead 和 tbody 都写出来，可以只有表单 tbody
# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看
属性:
border: 表格边框.
cellpadding: 内边距 （文字距离内框线的距离）
cellspacing: 外边距 （内框线和外框线的距离）
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
2.表单标签（重要）
"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action属性:控制数据提交的后端路径(给哪个服务端提交数据)
1.什么都不写 默认就是朝当前页面所在的url提交数据
2.写全路径:https://www.baidu.com 朝百度服务端提交
3.只写路径后缀action='/index/' 自动识别出当前服务端的ip和port拼接到前面
eg:host:port/index/
# 1.label标签
<label> 标签为 input 元素定义标注（标记）。
<label> 标签不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
# 2.input标签 就类似于前端的变形金刚 通过type属性变形
type属性
text:普通文本
password:密文
date:日期
submit:用来触发form表单提交数据的动作按钮
button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
reset:重置内容的按钮
radio:单选框
默认选中，要加checked='checked'
<input type="radio" name="gender" checked='checked'>男
当标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked>女
checkbox:多选 # check的意思是 打钩
<input type="checkbox" checked>DBJ
file:获取文件 也可以一次性获取多个
<input type="file" multiple>
hidden:隐藏当前input框
钓鱼网站 设置一些输入框的默认值（nama/vaule)，再把输入框隐藏，则提交数据时，就篡改了你的数据
其他属性：
name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type="button", "reset", "submit"时，为按钮上显示的文本内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox中为默认被选中的项
readonly：只读 （该输入框既不能输入，但向后端提交显示的数据 text和password设置只读）
disabled：禁用 （该输入框既不能输入，也不会向后端提交数据 所有input均适用）
placeholder：背景占位提示符 （在输入框中，背景显示的提示信息）
#input标签常与label标签联合使用
# 第一种 直接讲input框写在label内部 （建议这种，结果清晰）
<label for="d1">
username:<input type="text" id="d1">
</label>
#第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label关联也没有问题
"""
label 和 input都是行内标签
"""
# 3.select标签 默认是单选 可以加mutiple参数变多选 默认选中selected # select的意思是 选择
<select name="" id="" multiple>
<option value="" selected>新垣结衣</option> # option：选项
<option value="" selected>斯佳丽</option>
<option value="">明老师</option>
</select>
# 4.textarea标签 获取大段文本
<textarea name="" id="" cols="30" rows="10"></textarea>
# 能够触发form表单提交数据的按钮有哪些(一定要记住)
1、<input type="submit" value="注册">
2、<button>点我</button>
# 所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
用户的数据就类似于字典的value
# 需要用户选择的标签 你需要自己加上value值
radio
checkbox
option
ps:如果你给获取用户输入的标签加了value值 那么就类似于默认值
3.验证form表单提交数据
# 接下来的flask框架代码无需掌握 看一下效果即可
pip3 install FLASK
# form表单默认提交数据的方式 是get请求 数据是直接放在url后面的
http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
# 你可以通过method指定提交方式
<form action="http://127.0.0.1:5000/index/" method="post">
# 针对用户选择的标签(radio/checkbox/select) 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" checked value="female">女
<input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" checked name="hobby" value="football">足球
<input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province：
<select name="province" id="">
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
<option value="sz">深圳</option>
</select>
</p>
"""
form表单提交文件需要注意：
属性设置
1.method必须是post
2.enctype="multipart/form-data"
enctype类似于数据提交的编码格式
默认是form-urlencoded 只能够提交普通的文本数据
form-data 就可以支持提交文件数据
"""
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
"""下面的代码无需掌握 你只需要关心form表单即可"""
from flask import Flask, request
app = Flask(__name__)
# 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求
@app.route('/index/',methods=['GET','POST'])
# route：路线的意思，第一个参数就是ip+端口，之后的路径。一般是视图名，特别注意 前后都有'/'
def index():
print(request.form) # 获取form表单提交过来的非文件数据
# ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
print(request.files) # 获取文件数据,是字典类型
file_obj = request.files.get('myfile.png')
file_obj.save(file_obj.name)
return 'OK'
app.run()
# 针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
disable 禁用
readonly只读
