1.Flask

from flask import Flask,render_template
  
  app = Flask(__name__)
  
  @app.route("/show/info")
  def index():
      # Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
      # 默认：去当前项目目录的templates文件夹中找。
      return render_template("index.html")
  
  if __name__ == '__main__':
      app.run()

2. HTML标签

2.1 H 标题

    
    


    1级标题
    2级标题
    3级标题
    4级标题
    5级标题
    6级标题

2.2 div 块级标签

        一人占一行

  
  
      
      
  
  
      山东蓝翔
      挖掘机哪家强
  
  

2.3 span 行内标签/内联标签

        自己多大占多少

  
  
  
      
      
  
  
      山东蓝翔
      挖掘机哪家强
  
  

2.4 a 超链接

• 默认当前页打开
• 可以引用本地地址
• 设置 target="_blank" 新Tab页打开
• 设置无下划线

  
  
  
      
      
  
  
      a标签，跳转链接，属于行内标签。默认当前页打开
      新Tab页打开
      自动追加本地域名，然后拼接该路径
  
  

2.5 img 图片

• 可以使用外网地址，但要防备防盗链
• 可以使用本地图片
• 设置图片宽高  

•  图片嵌套地址

2.6 列表

• 2.6.1 实心列表

    
    
    
        
        
    
    
       
  
      
  中国移动
      
  中国联通
      
  中国电信
      
    
    

          

• 2.6.2 有序列表

    
    
    
        
        
    
    
      
  
      
  中国移动
      
  中国联通
      
  中国电信
      
    
    

 2.7 表格

    
    


    用户列表
    

        

            

                
ID
                
头像
                
姓名
                
邮箱
                
更多信息
                
操作
            
        

        

            

                
1
                

                    
                
                
武沛齐
                
休息@live.com
                

                    查看详细
                
                

                    编辑
                    删除
                
            
             

                
1
                

                    
                
                
武沛齐
                
休息@live.com
                

                    查看详细
                
                 

                    编辑
                    删除
                
            
        
    

 2.8 input 系列

2.8.1 单选框

    
    


    
        男
    
    
        女
    

2.8.2 复选框

    
    


    
        篮球
    
    
        足球
    

 2.8.3 默认几种输入

2.8.4 提交按钮

2.9 下拉框

2.9.1 单选

    
    


    
    北京
    上海
    深圳
    

2.9.2 复选 

    
    


    
    北京
    上海
    深圳
    

2.10 多行文本

    
    


    我是一个文本框。
    

3 CSS样式

3.1 CSS应用方式

3.1.1 在标签上

中国联通

 3.1.2 在head标签中写style标签

    
    
    


    
用户登录

3.1.3 写到文件中

放到static目录下的css文件

    
    
    3.2 选择器 
3.2.1 id选择器 
id标准写法是id唯一性，所以不太常用
 
 



    
    
    


    
用户登录
    
用户主菜单

 
3.2.2 类选择器 
 



    
    
    


    
用户登录

 
3.2.3 标签选择器 
所有的标签统一设置属性
 
 



    
    
    


    用户登录
    用户注册

 
3.2.3 属性选择器 



    
    
    


      
        
        
      

          
美国
          
日本
          
韩国
      
  

 
 
3.2.4 后代选择器 
找儿子 .类名>儿子标签名
 
找所有后代 .类名>标签名
 



    
    
    


      
          百度
      
          谷歌
      
      

          
美国
          
日本
          
韩国
      
  

 
 
3.3 样式覆盖逻辑 
3.3.1 无重复全部应用。重复内容按照头部顺序覆盖，和标签内顺序无关。 



    
    
    


    中国联通

 
 
3.3.2 声明不要覆盖  



    
    
    


    中国联通

 
 
3.4 背景覆盖无死角 
 
4 块级标签和行内标签 
4.1 宽高 
宽高可以设置百分比
 
块级标签：默认有效（霸道，右侧区域空白，也不给你占用），div
 
行内标签：默认无效，span
 
4.2 综合块级行级属性 
display: inline-block
 



    
    
    


    中国
    联通
    联通
    联通

 
 
5 文字设置  
5.1 文字基本设置 
大小 
font-size: 58px;
 
颜色  
color: #00FF7F;
 
字体 
font-family: Microsoft Yahei;
 
加粗 
font-weight: 50;
 



    
    
    


    中国联通
    中国移动

 
 
5.2 文字对齐方式 
水平方向居中        text-align: center;
 
垂直方向居中        line-height: 59px; 文本框对应高度
 



    
    
    


    智利

 
6 浮动模式 
6.1 行内标签浮动 



    
    


    
        左边
        右边
    

 
 
 6.2 块级标签浮动 
脱离了父类，无法撑起来父类，需要增加
 
 



    
    
    


    
        第一个
        
        
        
        
        
    
    你哦啊呀

 
 
 7 内边距 
内边距，我自己内部设置一点距离。
 
上下左右为统一值，则为：padding: 20px;
 



    
    
    



    听妈妈的话
    小朋友
    行内


 
 
8 外边距  
外边距，我与别人加点距离。
 



    
    
    


    
    

 
9 区域居中 
margin: 0 auto;