前端知识与基础应用#2
标签的分类
关于标签我们可以分为 ：
单标签：img, br hr
双标签：a，h,div
按照属性可分为：
块儿标签（自己独自占一行）：h1-h6, p,div
行内（内联）标签（自身多大就占多少）：a, span,u,i,b
当我们输入h标签和a标签时可以看到
我们所输入的结果是这样的，其实这就是块儿标签和行内标签的区别
div标签和span标签
div和span标签单独拿出来是没有任何意义的，主要的作用是页面布局，在布局当中
div的作用是占位置布局
span是文本布局
标签的嵌套
标签之间是可以互相嵌套的，块儿级元素是可以嵌套所有的标签，要注意的是p标签不能嵌套块儿级元素，但是可以 嵌套行内元素
行内元素只能嵌套行内元素，不能嵌套块儿级元素
针对前端来说不会轻易的报错，如果我们写的不对，只会没有对应的效果
例：
我们以小米商城为例：在小米商城中可以发现这些都是使用div用来占位的，而span是文本占位
并且使用了标签的嵌套。
img标签
关键字 src
img标签是展示图片的 ，如果width设置了width=“500px” height=“200”，如果不一致则会出现变形失真，所以一般情况下只写一个就行。
当图片损坏时，在alt中填写内容时会发现
我们也可以不使用外链，使用本地的图片
这样就出来了
当地址文件不在当前文件夹内时，我们可以使用
如果在上一级时，也可以使用
总结：src：
1. 可以使用外链的地址
2。 可以使用本地的地址
title：
鼠标悬浮的时候显示的内容(是所有标签都要的)
width: 图片的宽度
height：图片的高度alt：当图片不存在的时候，显示的内容
a标签
关键字 href
target 后面如果是_self 自己直接跳转到页面了，但是如果是_blank 则会新建页面然后跳转
标签自带的两种属性
id 值：一个文本中只能有唯一的id值，id值不能重复
class 值：一个标签可以有多个class值，一个class值可以被多个标签使用
当我们使用标签c1来找，可以找到d1，d3 和d4.想要使用id值，必须使用#查找
想要使用class值时使用点（.查找）
<div id="d1" class="c1"></div>
<div id="d2" class="c2"></div>
<div id="d3" class="c1 c2 c3"></div>
<div id="d4" class="c1"></div>
列表
关键字<ul>
无序列表
<body> <ul><li>第一个</li><li>第二个</li><li>第三个</li> </ul></body>
可以更改上面的符号
<body> <ul type="circle"><li>第一个</li><li>第二个</li><li>第三个</li> </ul></body>type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
有序列表
关键字：<ol><ol>
区别就是加上了序号，使用type可以更改
<ol type="I"><li>第一个</li><li>第二个</li><li>第三个</li> </ol>type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
标题列表
关键字<dl>
</ol><dl><dt>标题1</dt><dd>内容1</dd><dt>标题2</dt><dd>内容2</dd></dl> </body>
表格
添加多行数据：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <table border="2"><thead><tr><th>id</th><th>name</th><th>age</th><th>gender</th><th>salary</th></tr></thead><tbody><tr><td>1</td><td>kiki</td><td>21</td><td>female</td><td>22222</td></tr><tr><td>2</td><td>kiki1</td><td>22</td><td>male</td><td>12222</td></tr> <tr><td>3</td><td>lll</td><td>25</td><td>female</td><td>22242</td></tr></tbody> </table></body> </html>加上边框结果<table 属性>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
form表单标签
input加上属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <form action=""> <!-- 使用div或p都可以--><div> <!-- <lable for=""></lable>点击后直接选中填写，绑定id值--><label for="1">账号:<input type="text" id="1"></label></div><div><label for="2"> <!-- type=password：所填密码使用密文显示-->密码：<input type="password" id="2"></label><p><label for="3"> <!-- type=date：表示日期-->日期：<input type="date" id="3"></label></p><p><lable>这是按钮：<input type="button" value="普通按钮"></lable></p><p> <!-- 添加复选(多选)--><input type="checkbox"> 读书<input type="checkbox"> 游戏<input type="checkbox"> 足球</p><p> <!-- 添加单选，需要id一致--><input type="radio" name="gender" /> 男<input type="radio" name="gender" /> 女<input type="radio" name="gender" /> 未知</p><p><input type="submit" value="登录"><input type="reset"> <!-- 选择单个文件--> <!-- <input type="file">--> <!-- 选择多个文件--><input type="file"multiple></p><p><select name="" id=""><option value="">上海</option><option value="">北京</option><option value="">安徽</option></select></p></div></form> </body> </html>结果：
<input> 元素会根据不同的 type 属性，变化为多种形态
属性说明:
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用
select标签
<p><select name="" id=""><option value="">上海</option><option value="">北京</option><option value="">安徽</option></select></p>属性：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
验证form表单朝后端提交数据
!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <form action="http://127.0.0.1:5000/index"> <!-- 使用div或p都可以--><div>后端：
from flask import Flask,request app = Flask(__name__)#路由：网络的路径 @app.route('/index',methods=['GET','POST']) # 默认情况下只允许get提交加上methods=['GET', 'POST'] def index():print('sasas')print(request.form) # 接受post提交过来的数据print(request.files) # 接受文件的return'index' app.run(<form action="">
action: 填写的是后端提交的地址这里你写什么地址就朝这个地址提交数据，应该填写后端的地址
1. 什么都不写：朝当前地址提交
2. 全写：http://127.0.0.1:5000/index/ 朝这个地址提交
3. 只写后缀
/index/-------->IP:PORT/index后端的结果就是所填的内容
form表单要想把数据提交到后端，每一个标签都要有一个name属性
name的属性值就是提交到后端数据的key值，用户输入的内容就是value值
针对于复选框、单选框标签都应该有一个value属性，用于区别前端用户选择的哪个选项
1. 请求方式必须是post
2. 数据编码方式：
1. application/x-www-form-urlencoded
2. multipart/form-data
3. json
3. 编码方式必须是multipart/form-data才能提交问价
4. urlencoded只能够提交不是文件的数据，form-data是可以提交普通数据和文件数据
5. urlencoded形式的数据长什么样子：
username=&password=&date=&hidden=123&myfile=&city=
6. form-data编码格式的数据：
username=&password=&date=&hidden=123&myfile=&city=
boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy
文件数据
"""对于form-data提交的数据，后端还是在form里面去普通数据，而在files里面去文件数据"""
7. form表单不能够提交json数据
8. 如果想提交json格式的数据：Ajax技术、第三方的api工具postman
