img标签
<!--主要是在网页显示图片-->
标签的属性：
1、自带属性
2、自定义属性
<img src="preview.jpg" alt="动漫" width="200px">
src:
<!--写图片的地址：外链地址或者相对地址-->
alt:
<!--当图片加载失败时显示对图片的描述性信息-->
width and height
<!--对图片这是长度和宽度，不过设置一个就行，设置一个就会等比例缩放，设置两个容易失真-->
a标签
<!--超链接标签-->
<a href="https://www.bilibili.com" title="美少女战士" target="_blank">
<img src="preview.jpg" alt="动漫女主" width="851">
</a>
href：
<!--填写的是跳转的url地址-->
title:
<!--当鼠标悬停在超链接时，对这个超链接的解释信息-->
target = "_blank":
<!--重新打开一个tab网页-->
target = "_self":
<!--在当前页面重新打开一个网页-->
<!--超链接可以放到一段文字上面也可以放到一个图片上面-->
列表
1、无序列表
<ul type="disc">
<li> 第一个无序列表</li>
<li> 第二个无序列表</li>
</ul>
type属性分类;
disc :<!--实心圆点，默认值-->
circle:<!--空心圆点-->
square:<!--实心方块-->
none :<!--无样式-->
2、与序列表
<ol type="1" start="1">
<li>第一个有序列表</li>
<li>第二个有序列表</li>
</ol>
type属性分类：
1：数字列表，默认值
A：大写字母
a：小写字母
I：罗马数字
i：小写罗马数字
start：
<!--起始位置-->
3、标题列表
<dl>
<dt>第一个标题列表</dt>
<dd>第一个标题内容</dd>
<dt>第二个标题列表</dt>
<dd>第二个标题内容</dd>
</dl>
<!--dt：标题，dd：内容，内容自动缩进-->
表格
<table>
<thead>
<tr> <!--一个tr就代表一行-->
<th>username</th> <!--加粗文本-->
<th>password</th>
<th>gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>yang</td> <!--正常文本-->
<td>123</td>
<td>male</td>
</tr>
</tbody> <!--表单数据-->
</table>
属性:
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● width: 像素 百分比.（最好通过css来设置长宽）
● rowspan: 垂直合并X个单元格
● colspan: 横向合并X个单元格
标签的两个重要属性
<div id = "d1"></div>
id:
<!--一个html文档中，id只能有一个，并且不可重复，通过id可以确定一个标签-->
class：
<!--一个文档中class可以有多个，类似于面向对象中的类的继承-->
自定义属性：
<div id = "d1" username = "kevin" passworld = "123"></div>
<!--username、password就是自定义属性，自定义属性一般是用来存储数据的-->
from表单
<!--from表单可以将用户输入的、选择的、上传的等等通过网络上传到后端-->
<form action=""></form>
<!--在该form标签内部书写的获取用户的数据都会被form标签提交到后端-->
action：
<!--控制数据提交的后端路径(给哪个服务端提交)-->
1、什么都不写，默认给当前页面所在的url提交数据
2、写完路径，朝着指定路径的服务端提交
3、只写路径后缀，action = '/index/'
自动识别出当前服务端的ip和port拼接到前面
host:port/index/
使用结构：
第一种：
<form action="">
<label for=""> <!--for右边的值写绑定的id-->
<input type="text">
</label>
</form>
第二种：
<label for = "d2">password：</label>
<input type = "text" id = "d2">
<!--不写在label里面也可以，只要链接即可-->
ps：<!--input不于label关联也可以-->
"
label与input都是行内元素
"
input标签介绍：<!--前端的变形金刚，通过type变形-->
1、text:普通文本
2、password：密文
3、date:日期
4、submit:用来触发表单提交数据的动作
5、button:一个普普通通的按钮，没有任何功能，可以通过JS给它定义任意功能
6、reset:重置功能
7、radio:单选
默认选中需要加checked = "checked"
<!--标签名和值相等时可以使用简写-->
male:<input type="radio" name="gender" checked>
name :将其进行分组
8、checkbox:多选
<input type="checkbox">读书
9、file:获取文件，可以一次性获取多个
<input type="file" multiple>
10、hidden:隐藏当前input框
钓鱼网站
11、select标签默认是单选，想要多选可以添加mutiple的参数，默认选中使用selected参数
<select name="" id="" multiple>
<option value="">北京</option>
<option value="" selected>上海</option>
<option value="" selected>广州</option>
<option value="">深圳</option>
<option value="">香港</option>
</select>
12、textarea标签，获取大段文本
<textarea name="" id="" cols="30" rows="3"></textarea>
13、能够触发form表单提交数据的按钮有哪些(一定要记住)
1、<input type="submit" value="注册">
2、<button>点我</button>
14、所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
用户的数据就类似于字典的value
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
CSS
html: 超文本标记语言
css：层叠样式表
# 就是给html增加样式的，让其变得更加的好看
css的学习步骤：
1. 先学习选择器，作用就是如何找到标签
2. 找到标签之后，给标签增加样式
选择器的语法结构
选择器 {
属性名1：属性值1
属性名2：属性值2
属性名3：属性值3
属性名4：属性值4
}
# CSS的注释语法
/* 内容 */ # 快捷键：ctrl + ？
# css的引入方式
1. 在html文档中直接写在style标签中
2. 单独写一个CSS文件，然后通过link标签引入外部的css文件
3. 直接写在标签上，行内式
基本选择器
<style>
#username{
color: aqua;
}
.hobby{
color: red;
font-size: 10px;
}
p{
color: blue;
font-size: 15px;
}
*{
color: blueviolet;
}
</style>
<p id="p1" class="c1" style="color: orange;font-size: 26px">锄禾日当午，汗滴禾下土</p> <!--这样也可以-->
组合选择器
<div>div
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子 是div的孙子
div是p的父亲
*****************************************************************
/*后代选择器*/
div span {
color: red;
}
/*儿子选择器*/
div>span {
color: red;
}
/*毗邻选择器*/
div+span { /*同级别紧挨着的下面的第一个*/
color: aqua;
}
/*弟弟选择器*/
div~span { /*同级别下面所有的span*/
color: red;
}
属性选择器
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
[username] { /*将所有含有属性名是username的标签背景色改为红色*/
background-color: red;
}
[username='jason'] { /*找到所有属性名是username并且属性值是jason的标签*/
background-color: orange;
}
input[username='jason'] { /*找到所有属性名是username并且属性值是jason的input标签*/
background-color: wheat;
}
# 接下来的框架代码无需掌握 看一下效果即可
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">
针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容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类似于数据提交的编码格式
默认是urlencoded 只能够提交普通的文本数据
formdata 就可以支持提交文件数据
"""
<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'])
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只读