前端标签

标签的分类

1. 单标签
	img br hr 
    
2. 双标签
	a h p div 
3. 按照标签属性分类
	1. 块儿标签
    	# 自己独自占一行
        h1-h6 p div
    2. 行内(内联)标签
    	# 自身文本有多大就占多大
        a span u i b s

div标签和span标签

这两个标签它是没有任意意义的，主要用来'布局'页面
div一般用在占位置布局
span一般用在占文本布局

标签的嵌套

标签之间是可以互相嵌套的，标签套标签
块儿级元素是可以嵌套所有的标签的
p标签不能够嵌套块儿级元素，但是它可以嵌套行内元素
行内元素只能嵌套行内元素，不能够嵌套块儿级元素，非写了嵌套，也不报错，只不过是没有效果
"""针对于前端来说，不会轻易的报错! 如果你写的不对，只会没有对应的效果"""

img标签

展示图片的
https://img2.baidu.com/it/u=464791776,3312333293&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1698771600&t=9777764d1fe6560f394478126fb7563b



src：
	1. 内部的图片地址
    2. 写外链的地址
title：
	鼠标悬浮的时候显示的内容(是所有标签都要的)
width: 图片的宽度
height：图片的高度
### 一般情况下只写一个，等比例缩放
alt：当图片不存在的时候，显示的内容

a标签

点我

href属性指定目标网页地址。该地址可以有几种类型：
● 绝对URL - 指向另一个站点（比如 href="/links.html?l=MnA1RTl1RnZEQmJvSHlsQW5hcnRNaUU5MG1SU2wvbGJIMGl3eXRZSUlRVE1JRlZqUGpkL3JjN3ZDSGV2WU83Q3UvemxpT0pWdzVJYXVjMFBoYWpJK2RiMnV5Mnk5dlZIM2lsUVBrM2xlMHBJc0pXRmI3bDVtUT09"index.htm"）
● 锚URL - 指向页面中的锚（href="/links.html?l=WGE1dWh5STlsREpJc0pXRmI3bDVtUT09"）

target：
● _blank表示在新标签页中打开目标网页
● _self表示在当前标签页中打开目标网页

标签的两个自带重要属性

id 值: 相当于是人的身份证，一个文档中，id值不能够重复，必须唯一
class 值：是可以有多个的，一个标签可以有多个class值，一个class值也可以被多个标签拥有




#d1
.c1
要想使用id值，必须使用#开头
要想使用class值，必须使用 .开头

列表

1.无序列表
	

      
第一项
      
第二项
	
    type属性：
    ● disc（实心圆点，默认值）
    ● circle（空心圆圈）
    ● square（实心方块）
    ● none（无样式）
    
2.有序列表
3.标题列表

表格

id     name    age   gender    salary
1      kevin   20     male     2000
1      kevin   20     male     2000
1      kevin   20     male     2000
1      kevin   20     male     2000
1      kevin   20     male     2000
1      kevin   20     male     2000

table标签

  

  

    
序号
    
姓名
    
爱好
  
  
  

  

    
1
    
jason
    
杠娘
  
  

    
2
    
Yuan
    
日天
  
  


属性:
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● width: 像素 百分比.（最好通过css来设置长宽）
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列（即合并单元格）

form表单标签

    

        
            username: 
        

    
    

        
            password: 
        
    
     

        
            password: 
        
    
    

         read
         music
         tangtou
    
    

         read1
         music1
         tangtou1
    
    

         男
          女
          未知
    
    

        
    
    

        
    
    

        
            上海
            北京
            河南
        
    
            
    
    

        
        

    



属性说明:
● name：表单提交时的“键”，注意和id的区别
● value：表单提交时对应项的值
  ○ type="button", "reset", "submit"时，为按钮上显示的文本年内容
  ○ type="text","password","hidden"时，为输入框的初始值
  ○ type="checkbox", "radio", "file"，为输入相关联的值
● checked：radio和checkbox默认被选中的项
● readonly：text和password设置只读
● disabled：所有input均适用

select属性
属性说明：
● multiple：布尔属性，设置后为多选，否则默认单选
● disabled：禁用
● selected：默认选中该项
● value：定义提交时的选项值

验证form表单朝后端提交数据

	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

CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
"""CSS就是对HTML标签做样式的，让不好看的变得更加的好看"""
CSS语法：
选择器 {
    属性名1:属性值;
    属性名2:属性值;
    属性名3:属性值;
    属性名4:属性值;
    属性名5:属性值;
}

CSS注释:
    /*这是注释*/
HTML注释：
	
注释符号的快捷键是：ctrl + ?

CSS的几种引入方式:
    行内样式:
        
Hello world.
        
    内部样式：
    	
            
            
            
        
        
     外部样式：
    	

CSS选择器

"""如何学习CSS?"""
1. 先学习如何找到标签
2. 找到标签之后在进行属性操作

选择器种类非常之多，但是，大多数都是了解的，用的最多的也就几个，对我们来说，只需要掌握这几个就可以了
基本选择器：
	ID选择器
    	
    类选择器
    元素选择器
    通用选择器
    
组合选择器
	后代选择器
    
    
 """
 我们使用亲戚关系表示标签之间的关系
     
 div是p的父亲，p是div 的儿子
        
 p是a的父亲，a是p的儿子，a是div的孙子
            点我把
            点我把
            点我把
        
        div
        我会不会变颜色呢 a是p的兄弟
    

    
 p是div的兄弟
        哈哈哈哈
    
 """

效果 代码

html




    
    
    






    

      
第一项
      
第二项
	
    

        

            
                username:


            
        
        

            
            passwork:
            
        
        

            多选框
            多选框
            多选框
        
        

            
                时间：
            
        
        

            单选框
        
        

            文本选择
        
        

            提交
        
        

            重置
        
        

            
                 上海
                 杭州
                 北京

            
        
        

            
        

    


        
练习
    
    

      

          

            
序号
            
姓名
            
爱好
          
      
      

          

            
1
            
jason
            
杠娘
          
      

            
2
            
Yuan
            
日天
      
      

py文件



from  flask import Flask,request
app=Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
    print(request.form)

    print(request.files)

    return 'index'



app.run()