前端开发 1.HTML 1.1标签

1.2划分

- 块级标签
  

  

- 行内标签
  
   需要进行重开界面 可以
  

1.3标签的嵌套使用

1.4 列表标签

无序列表

  
Python
  
Java
  
C/C++


有序列表

  
Python
  
Java
  
C/C++

1.5 表格

 表头 border ="1"加上一个边框
     内容
    

  
 
      
ID
 
        
姓名
 
          
年龄
 
    
  
  
 
      
1
 
        
廖凡
 
         
22
 
    
    
    
 
      
2
 
         
小牛
 
          
21
    
  

1.6 input系列

    
 单选
  男
  女


 复选框
  篮球
  足球
  乒乓球


 普通按钮
 提交表单

1.7 下拉框

 
下拉框
    
        湖南
        湖北
        广东
    

1.8 多行文本

  rows 设定其有多少行

案列：基于Flask的注册案例

from flask import Flask , render_template, request

app = Flask(__name__)

@app.route("/register", methods=['GET', 'POST'])
def register():
    if request.method == 'GET':
        return render_template("register.html")
    else :
        # 1.接收用户通过POST请求到的数据
        print(request.form)
        # 2.返回结果
        return "注册成功"

if __name__ == '__main__':
    app.run()

HTML 代码

    
    


    
用户注册


    

        用户名:
        
    
    

        密 码 :
        
    
    

        
    

    

        性别:
        男
        女
    

    

        爱好:
        LOL
        Sing
        Play
    

    

        城市:
        
            长沙
            广州
            深圳
        
    

    

        技能:
        
            Python
            Java
            C/C++
        
    

    

        更多：
        
    

页面上的数据，想要提交到后台：

• form标签包裹要提交的数据标签
  • 提交方式：method = 'GET'
  • 提交地址：action = '/xxx/xxx'
  • 在form标签里面必须要有表当提交的==submit标签==
• 在form里面的一些标签: input/select/textarea
  • 一定要写name属性
• 在form中的： radio/select/checkbox 标签
  • 一定要写value属性

总结

1. 称呼

   - HTML标签
   
   什么是HTLM？超文本传输语言（与浏览器配合）
   

2. HTML标签（默认格式样式，可以通过其他方式修改）

3. HTML标签与编程语言无关

   • Java + HTML
   • python + HTML
   • php + HTML
   • c# + HTML

4. HTML的标签比较多， 标签还有很多，不必逐一学习

2.CSS基础知识 2.1 快速了解

2.2 CSS应用方式 1.在标签上

2.在head标签中写style标签（*）

3.在文件中写（*）

.c1{
    height:100px;
}

.c2{
    color:red;
}

注意在Flask中只可以在static文件下写css文件

案列:flask中的应用

    
    
    


登录界面

    

        账号:
        
    
    

        密码:
        
    
    

.c1{
    height: 50px;
    color: burlywood;
}
.c2{
    color: aquamarine;
}

问题：Flask框架开发不方便

• 每次都需要重新启动
• 规定有些文件必须要存放在特定文件目录中
• 新创建一个页面
  • 新建 route
  • 新建HTML

2.3 CSS选择器

• ID选择器

  #c2{
              color: blue;
  	}
  

• 类选择器

  .c1{
              color: red;
  	}
  

• 标签选择器

  li{
              color:hotpink;
     }
  

• 属性选择器

  input[type='text']{
      border :1px solid red
  }
  .v1[xx='456']{
              color: darkmagenta;
  }
  

  
  
  
  asdf
  asdf
  asdf
  

• 后代选择器

  选择yy类下子孙中的所有li标签
  .yy li{ 
              color: aqua;
  }
  选择yy类下的直接子元素 a
  .yy>a{
              color: blueviolet;
  }
  选择yy类下的子孙元素 a
  .yy a{
              color: blueviolet;
  }
  

  关于选择器

  多：类，标签，后代

  少：属性，ID

• 多个样式&覆盖

  与在style标签中的定义顺序有关，后定义的会覆盖先定义的

  注意：使用!important;可以防止覆盖发生

2.4 样式 1. 高度和宽度

.c1{
            height: 300px;
            width: 50%;
            border :1px solid red;
}

注意：

• 宽度，高度支持百分比设置
• 行内标签：默认无效
• 块级标签：默认有效（霸道，右侧的空白无法使用）

2.块级和行内标签

• 块级 display:block
• 行内display:inline
• css样式 ：标签-> display:inline-block

    
    
    


    
我是块级标签

    我是行内标签

    我是一个块级&行内标签

    我是另外一个块级&行内标签

注意：块级 + 块级&行内 使用的频率高

3.字体设置

• 颜色

• 大小

• 缩放

• 字体格式

  
  
  
      
      
      
  
  
      
  我是一行文字
  
  
  

4.文字对齐方式

    
    
    

    
LiaoFan

注意：

水平居中:text-align: center;

垂直方向居中:line-height: 100px;

5. 浮动

div标签默认为块级标签，而如果浮动起来就不一样了

    
    
    



    
        1
        2
        3
        4
        5
    

出现的问题：如果让标签浮动起来，就会脱离文档流

解决的办法加入

    
1
    
2
    
3
    
4
    
5
    

6.内边距

内边距：我自己的内部设置一些距离，这会扩充div的大小

    
    
    


    我是一段文字
        
            第一段文字
        
        
            第二段文字
        
    

padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;

等价于 ==>

padding ：20px

等价于 ==>

padding : 20 px, 10 px ,10px 20 px(顺时针 上右下左)

7.外边距

外边距： 自生与其他标签的边距， 不会使自生标签改变

总结

• body标签，默认有一个边距，造成四周有空白边距，解决办法：

  body{
  	margin:0
  }
  

• 内容居中

  • 文本居中

    
        xxxx
    
    

  • 区域局中，必须设置宽度 +margin-left: auto;margin-right: auto

    .container{
    	width: 980px;
    	margin: - auto;
    }
    
    
        xxxxxx
    
    

• 父亲没有高度或者宽度，会被孩子支撑起来

• 如果有浮动一定需要加如xxx