Python之前端

 标签的分类

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标签

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

 a标签

点我
​
href属性指定目标网页地址。该地址可以有几种类型：
● 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
● 相对URL - 指当前站点中确切的路径（href="index.htm"）
● 锚URL - 指向页面中的锚（href="#top"）
​
target：
● _blank表示在新标签页中打开目标网页
● _self表示在当前标签页中打开目标网页

标签的两个自带重要属性

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




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

列表

    
有序列表1
    
有序列表2




    
有序列表1
    
有序列表2




    
有序列表1
    
有序列表2




    
无序列表1
    
无序列表2




    
无序列表1
    
无序列表2



    
无序列表1
    
无序列表2



    
无序列表1
    
无序列表2






    男

ul是unordered lists的缩写 (无序列表)

li是list item的缩写 （列表项目）

ol是ordered lists的缩写（有序列表）

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写（自定义列表描述）

nl是navigation lists的英文缩写 （导航列表）

tr是table row的缩写 （表格中的一行）

th是table header cell的缩写 （表格中的表头）

td是table data cell的缩写 （表格中的一个单元格）

    type属性：
        disc（实心圆点，默认值）
        circle（空心圆圈）
        square（实心方块）

        none（无样式）

表格

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:属性值;
}
​
CSS注释:
    /*这是注释*/
HTML注释：
    
注释符号的快捷键是：ctrl + ?
​

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

CSS选择器

"""如何学习CSS?"""
1. 先学习如何找到标签
2. 找到标签之后在进行属性操作
​
选择器种类非常之多，但是，大多数都是了解的，用的最多的也就几个，对我们来说，只需要掌握这几个就可以了
基本选择器：
    ID选择器
        
    类选择器
    元素选择器
    通用选择器
    
组合选择器
    后代选择器
    
使用亲属关系表示标签之间的关系

     
 div是p的父
        
 p是a的父，a是p的子
            点我把
        
        div
        我会不会变颜色呢 a是p的兄弟
    
​
    
 p是div的兄弟
        哈哈哈哈