前端知识与基础应用#2

标签的分类

关于标签我们可以分为 :

单标签:img, br hr

双标签:a,h,div

按照属性可分为:

块儿标签(自己独自占一行):h1-h6, p,div

行内(内联)标签(自身多大就占多少):a, span,u,i,b

当我们输入h标签和a标签时可以看到

前端知识与基础应用#2_第1张图片

我们所输入的结果是这样的,其实这就是块儿标签和行内标签的区别前端知识与基础应用#2_第2张图片

div标签和span标签

div和span标签单独拿出来是没有任何意义的,主要的作用是页面布局,在布局当中

div的作用是占位置布局

span是文本布局

标签的嵌套

标签之间是可以互相嵌套的,块儿级元素是可以嵌套所有的标签,要注意的是p标签不能嵌套块儿级元素,但是可以 嵌套行内元素

行内元素只能嵌套行内元素,不能嵌套块儿级元素

针对前端来说不会轻易的报错,如果我们写的不对,只会没有对应的效果

例:

我们以小米商城为例:在小米商城中可以发现这些都是使用div用来占位的,而span是文本占位

并且使用了标签的嵌套。

前端知识与基础应用#2_第3张图片前端知识与基础应用#2_第4张图片

img标签

关键字 src

img标签是展示图片的 ,如果width设置了width=“500px” height=“200”,如果不一致则会出现变形失真,所以一般情况下只写一个就行。

前端知识与基础应用#2_第5张图片

前端知识与基础应用#2_第6张图片

当图片损坏时,在alt中填写内容时会发现

我们也可以不使用外链,使用本地的图片

前端知识与基础应用#2_第7张图片

这样就出来了

当地址文件不在当前文件夹内时,我们可以使用

如果在上一级时,也可以使用

总结:src:

1. 可以使用外链的地址

2。 可以使用本地的地址

title:
    鼠标悬浮的时候显示的内容(是所有标签都要的)
width: 图片的宽度
height:图片的高度

alt:当图片不存在的时候,显示的内容

a标签

关键字 href

target 后面如果是_self 自己直接跳转到页面了,但是如果是_blank 则会新建页面然后跳转

前端知识与基础应用#2_第8张图片

标签自带的两种属性

id  值:一个文本中只能有唯一的id值,id值不能重复

class 值:一个标签可以有多个class值,一个class值可以被多个标签使用

当我们使用标签c1来找,可以找到d1,d3 和d4.想要使用id值,必须使用#查找

想要使用class值时使用点(.查找)

列表

关键字

    无序列表

    
    
    • 第一个
    • 第二个
    • 第三个

    前端知识与基础应用#2_第9张图片

    可以更改上面的符号

    
    
    • 第一个
    • 第二个
    • 第三个

    type属性:

    • disc(实心圆点,默认值)
    • circle(空心圆圈)
    • square(实心方块)
    • none(无样式)
    有序列表

    关键字:

        区别就是加上了序号,使用type可以更改

        1. 第一个
        2. 第二个
        3. 第三个

        type属性:

        • 1 数字列表,默认值
        • A 大写字母
        • a 小写字母
        • Ⅰ大写罗马
        • ⅰ小写罗马

        标题列表

        关键字

          
      标题1
      内容1
      标题2
      内容2

      表格

      添加多行数据:

      
      
      
          
          Title
      
      
      
      id name age gender salary
      1 kiki 21 female 22222
      2 kiki1 22 male 12222
      3 lll 25 female 22242

      加上边框结果

      前端知识与基础应用#2_第10张图片

      属性:

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

      form表单标签

      input加上属性

      
      
      
          
          Title
      
      
      

      这是按钮:

      读书 游戏 足球

      未知

      结果:

      前端知识与基础应用#2_第11张图片

      元素会根据不同的 type 属性,变化为多种形态

      前端知识与基础应用#2_第12张图片

      属性说明:

      • 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表单朝后端提交数据

      !DOCTYPE html>
      
      
          
          Title
      
      
      

      后端:

      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(


          action:        填写的是后端提交的地址

      这里你写什么地址就朝这个地址提交数据,应该填写后端的地址
              1. 什么都不写:朝当前地址提交
              2. 全写:http://127.0.0.1:5000/index/ 朝这个地址提交
              3. 只写后缀
                  /index/-------->IP:PORT/index

      后端的结果就是所填的内容

      前端知识与基础应用#2_第13张图片

      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

      你可能感兴趣的:(前端)