Python基础day47
img标签
图片，在网页显示图片的
标签会有属性：
1. 自带的属性
2. 自定义的属性
<img src="img/123.png" alt="你看我是什么东西" width="800px" height="200px">
src:写图片的地址
1. 外链地址
2. 相对地址
alt：
当图片地址加载失败的时候，显示的描述性信息
width="800px" height="200px"
控制图片的大小，但是注意，二者是等比例缩放
a标签
超链接
<a href="http://www.baidu.com" title="你看是什么" target="_blank">点我一下啊</a>
href：填写的是跳转的地址
id值，锚点，我们用不到，是一种效果，一般是前端来写
● 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
● 相对URL - 指当前站点中确切的路径（href="index.htm"）
target="_blank"
跳转的时候新开一个tab页面
title="你看是什么"
当鼠标悬浮的时候展示的内容
列表
1. 无序列表(掌握) <ul type="disc"> <li>第一个</li> <li>第一个</li> <li>第一个</li> <li>第一个</li> <li>第一个</li> <li>第一个</li> <li>第一个</li> </ul> type属性： ● disc（实心圆点，默认值） ● circle（空心圆圈） ● square（实心方块） ● none（无样式） 2. 有序列表(了解) <ol type="I" start="3"> <li>第一个</li> <li>第一个</li> <li>第一个</li> <li>第一个</li> <li>第一个</li> <li>第一个</li> <li>第一个</li> </ol> type属性： ● 1 数字列表，默认值 ● A 大写字母 ● a 小写字母 ● Ⅰ大写罗马 ● ⅰ小写罗马 3. 标题列表(了解) <dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格（重要）
id name age gender salary
1 kevin1 18 male 1000
2 kevin2 18 male 1000
3 kevin3 18 male 1000
4 kevin4 18 male 1000
5 kevin5 18 male 1000
6 kevin6 18 male 1000
table
thead
tr----->代表一行
td(th)------>代表的是一列
tbody
tr----->代表一行
td------>代表的是一列
属性:
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● width: 像素 百分比.（最好通过css来设置长宽）
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列（即合并单元格）
标签的两个重要属性
<div id="d1"></div> <!--id--> <!-- 一个html文档中，id只能有一个，并且不能重复，通过这个id可以唯一确定一个标签--> <!--class--> <!-- 一个html文档中，class值是可以有多个的，可以重复--> <!--自定义属性--> <div id="d1" username='kevin' password='123'></div> <!-- 属性名可以自己来定，自定义属性一般用来存储数据的-->
form表单（重要）
form表单可以把用户输入的、选择的、上传的等都通过网络提交到后端 <form></form> <label></label> # 通过id值绑定 <label for="username">用户名</label> <input type="text" id="username"> input: 通过改变input的属性type来达到不同的输入类型 text 单行输入文本 <input type=text" /> password 密码输入框 <input type="password" /> date 日期输入框 <input type="date" /> checkbox 复选框 <input type="checkbox" checked="checked" /> radio 单选框 <input type="radio" /> submit 提交按钮 <input type="submit" value="提交" /> reset 重置按钮 <input type="reset" value="重置" /> button 普通按钮 <input type="button" value="普通按钮" /> hidden 隐藏输入框 <input type="hidden" /> file 文本选择框 <input type="file" /> 属性说明: ● name：表单提交时的“键”，注意和id的区别 ● value：表单提交时对应项的值 ○ type="button", "reset", "submit"时，为按钮上显示的文本年内容 ○ type="text","password","hidden"时，为输入框的初始值 ○ type="checkbox", "radio", "file"，为输入相关联的值 ● checked：radio和checkbox默认被选中的项 ● readonly：text和password设置只读 ● disabled：所有input均适用 # 每一个单选框、复选框标签都应该有一个属性叫name <input type="submit" value="登录"> # 把前端数据提交表单到后端 <input type="button" value="登录"> # 不能够提交表单，就是一个空白的按钮，事件 <button>登录</button> # 提交表单的功能，但是，必须写在form表单里 <form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </form> 属性说明： ● multiple：布尔属性，设置后为多选，否则默认单选 ● disabled：禁用 ● selected：默认选中该项 ● value：定义提交时的选项值
验证form表单提交数据到后端
用的是flask框架做后端语言 # 代码不需要掌握，你只需要看下后端如何结合前端把数据提交到后端的 pip install flask # flask框架，Django框架 <form action=""> action: 1. 什么都不写，默认提交到当前地址 2. 全写，绝对地址：http://www.baidu.com/login/ 3. 只写后缀 /index/ # 它会自动拼接当前计算机的ip+port http://127.0.0.1:5000/index/ 文件的提交： '''必须满足两个条件''' 1. 请求方式必须是post 2. enctype必须是form-data form表单提交数据的编码方式： application/x-www-form-urlencoded 1. urlencode:普通文本框提交的都是这个格式的，只能提交普通文本数据，不能够提交文件数据 multipart/form-data 2. form-data：提交文件使用的必须是这个方式，可以提交普通文件数据，也可以提交文件数据 3. json # form表单不能提交json格式的数据 urlencode staticpage=https%3A%2F%2Fwww.baidu.com%2Fcache%2Fuser%2Fhtml%2Fv3Jump.html&charset=UTF-8&token=20cc339caa83933ae3baa6dda5465d09&tpl=mn&useranme=123&password=123 from flask import Flask,request app = Flask(__name__) # 路由，网址的后缀 baidu.com/index/ @app.route('/index/', methods=['GET', 'POST']) # 默认使用的是GET请求 def index(): # 如何拿到前端提交过来的数据 # 前端以post请求方式提交的 print(request.form) # 只能拿到post请求的数据 # print(request.args) # 拿到get请求的数据 # 如何接收文件数据 print(request.files) file_obj = request.files.get('myfile') print(file_obj.filename) # 965_001_dq3_3600_5400.jpg with open(file_obj.filename, 'wb') as f: for line in file_obj: f.write(line) return 'OK' app.run()
CSS
用的是flask框架做后端语言 # 代码不需要掌握，你只需要看下后端如何结合前端把数据提交到后端的 pip install flask # flask框架，Django框架 <form action=""> action: 1. 什么都不写，默认提交到当前地址 2. 全写，绝对地址：http://www.baidu.com/login/ 3. 只写后缀 /index/ # 它会自动拼接当前计算机的ip+port http://127.0.0.1:5000/index/ 文件的提交： '''必须满足两个条件''' 1. 请求方式必须是post 2. enctype必须是form-data form表单提交数据的编码方式： application/x-www-form-urlencoded 1. urlencode:普通文本框提交的都是这个格式的，只能提交普通文本数据，不能够提交文件数据 multipart/form-data 2. form-data：提交文件使用的必须是这个方式，可以提交普通文件数据，也可以提交文件数据 3. json # form表单不能提交json格式的数据 urlencode staticpage=https%3A%2F%2Fwww.baidu.com%2Fcache%2Fuser%2Fhtml%2Fv3Jump.html&charset=UTF-8&token=20cc339caa83933ae3baa6dda5465d09&tpl=mn&useranme=123&password=123 from flask import Flask,request app = Flask(__name__) # 路由，网址的后缀 baidu.com/index/ @app.route('/index/', methods=['GET', 'POST']) # 默认使用的是GET请求 def index(): # 如何拿到前端提交过来的数据 # 前端以post请求方式提交的 print(request.form) # 只能拿到post请求的数据 # print(request.args) # 拿到get请求的数据 # 如何接收文件数据 print(request.files) file_obj = request.files.get('myfile') print(file_obj.filename) # 965_001_dq3_3600_5400.jpg with open(file_obj.filename, 'wb') as f: for line in file_obj: f.write(line) return 'OK' app.run()
基本选择器
<style> /*#p1 {*/ /* color: red;*/ /* font-size: 30px;*/ /*}*/ /*.c1 {*/ /* color: yellow;*/ /* font-size: 25px;*/ /*}*/ /*p {*/ /* color: green;*/ /*}*/ /** {*/ /* color: orange;*/ /*}*/ </style> id class 标签选择器 通用选择器 <p id="p1" class="c1" style="color: orange;font-size: 26px">锄禾日当午，汗滴禾下土</p> <p id="p2" class="c1">锄禾日当午，汗滴禾下土</p> <p id="p3" class="c1" style="color: red;font-size: 20px">锄禾日当午，汗滴禾下土</p>
组合选择器
<style> /*ul li .c1 {*/ /* color: red;*/ /*}*/ div>p { color: red; } </style>
属性选择器
<style> [username] { color: red; } [username=kevin] { color: red; } input[username=kevin] { color: red; } </style>
分组和嵌套
div, p, span {
color: red;
}
