【2022-08-23】python前端开发(二)

python前端开发(二)

表单标签知识补充

  1. 获取用户输入标签的两大重要属性

    ​ name属性：类似于字典的键

    ​ value属性：类似于字典的值

    ​ form表单在朝后端发送数据的时候 标签必须要有name 否则不会发送该标签的值

  2. 获取用户输入的input标签理论上需要有label配合使用

  3. 获取用户输入的input标签也可以添加背景提示

  4. 获取用户输入的标签如果不是让用户自己写而是选择 那么标签需要自己写value

  5. 针对radio和checkbox可以默认选中

  6. 针对option标签也可以默认选中

  7. 针对file和date无需添加value值

    ​ file文件是在用户自行选择文件后才会触发，并且底层会自动把value转换为文件数据发送给后端

    ​ date提供了日历可以让用户自行选择数据进行填写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>  
<form action="">
    <p>
        <label for="t1">username</label>
        <input type="text" name="username" id="t1">
    </p>
    <p>password:
        <input type="text" name="password" placeholder="密码">
    </p>
    <p>
        <input type="radio" name="gender" value="male" checked="checked">male
        <input type="radio" name="gender" value="female">female
        <input type="radio" name="gender" value="others">other
    </p>

    <p>
        <input type="checkbox" name="hobby" value="basketball" checked>篮球
        <input type="checkbox" name="hobby" value="football">足球
        <input type="checkbox" name="hobby" value="running">跑步
    </p>
    <p>
        <select name="province" id="">
            <option value="sh">上海</option>
            <option value="bj" selected="selected">北京</option>
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
        </select>
    </p>
</form>
</body>
</html>

CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS语法

CSS语法结构
	选择器 {
        属性名1:属性值1;
        属性名2:属性值2;
    }

CSS实例

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS注释

/*这是css的语法注释*/

CSS的几种引入方式

行内样式

行内样式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<h1 style="color: aqua">逢人不必言深，孤独自是常态</h1>

内部样式

嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：

    <style>
      h1 {

        color: magenta;
      }
    </style>

外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link rel="stylesheet" href="mycss.css">

CSS基本选择器

标签选择器

/*1.标签选择器:直接编写标签名来查找标签*/
    div {  
        color: green;  /*查找所有的div标签 并将内部的文本颜色变为绿色*/
    }

ID选择器

/*3.id选择器:通过编写id的值来精准查找标签*/
    #d1 {
        color: aquamarine;  /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/
    }

类选择器

/*2.类选择器:通过编写class的值来查找标签*/
    .c1 {
        color:red;  /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
    }

通用选择器

/*4.通用选择器:查找所有的标签*/
    * {
        color: blue;  /*查找所有的标签 并将内部的文本颜色改为蓝色*/
    }

CSS组合选择器

后代选择器

/*后代选择器: 两个选择器之间空格隔开 查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签*/
/*1.查找div标签内所有的span*/
<style>
      #d1 span {
        color: blue;
      }
</style>

儿子选择器

/*儿子选择器 两个选择器之间大于号隔开 查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签*/

/*2.查找div标签内所有的儿子span*/
<style>
    #d1>span {
        color: green;
    }
</style>

毗邻选择器

/*3.查找div标签同级别下面紧挨的span标签*/
<style>
    #d1+span {
        color: red;
    }
</style>

弟弟选择器

/*4.查找div标签同级别下所有的span标签*/
<style>
    #d1~span {
    color: aqua;
    }
</style>

CSS属性选择器

"""
    所有的标签除了有自己默认的属性之外 还可以拥有自定义的任意属性
    默认属性   id class
    自定义属性 a=1 b=2
"""
<style>
    /*1.查找属性名含有name的标签*/
    [name] {
    background-color: aqua;
    }
</style>

	/*2.查找属性名含有name并且值是username的标签*/
    [name='username'] {
       background-color: orange;
    }
	/*3.查找input标签并且 属性名含有name值是username的*/
    input[name='username'] {
        background-color: aqua;
    }
    
	/*4.前面的选择器可以是任意类型的 标签、id、class*/

CSS选择器之分组与嵌套

分组：当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 

 div,p,span {
        color: red;
            }
        
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
    
   #d1,.c1,span {
        color: red;
    }
    
还可以在选择器基础之上添加额外的选择使得查找更精确
	span.c1
	div#d1

CSS选择器之伪类选择器

"""
补充知识
	a标签默认的颜色有两种 紫色跟蓝色
		紫色:链接地址已经被点击过了
		蓝色:链接地址从来没有点击过
"""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      a:link {
        color: blue;
      }
      a:active {
        color: green;
      }
      a:hover {                      /*鼠标悬浮上去之后样式改变 适用于所有含有文本的标签*/
        color: darkcyan;
      }
      a:visited {
        color: bisque;
      }
    </style>
</head>
<body>
<a href="https://www.baidu.com">点击此处访问百度</a>
<a href="https://www.jd.com">点击此处访问京东</a>
<a href="https://www.4399.com">点击此处访问4399</a>
</body>
</html>

CSS选择器之伪元素选择器

通过css代码来操作标签的文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p:first-letter {
          font-size: 48px;
          color: red;
      }
      p:before {
        content:"龙门客栈";
        color:blue;
      }
      p:after {
        content:"赵怀安大战雨化田";
        color:greenyellow;
        }
    </style>
</head>
<body>
    <p>
      寒江孤影，江湖故人，相逢何必曾相识
    </p>
</body>
</html>

伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬

CSS选择器优先级

"""
当多个选择器查找到相同的标签修改不同的样式 那么标签该听谁的
"""
1.选择器相同 引入位置不同
	就近原则
2.选择器不同的情况
	行内 > id选择器 > 类选择器 > 标签选择器
	
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p {
        color: blue;
      }
    </style>
    <link rel="stylesheet" href="mycss.css">

</head>
<body>
      <p style="color: greenyellow">大鹏一日同风起，扶摇直上九万里</p>
</body>
</html>

!important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

作用：提升指定样式规则的应用优先权，即!important提供了一个增加样式权重的方法，让浏览器首选执行这个语句。
使用方法：选择器 {样式：值 !important}
比如，在CSS中给了.box{color:red !important;}这个属性，就意味着类名为box的这个标签具有最高优先级，不管你把默认的颜色设置为什么，他最终只会显示红色。

HTML部分代码：

<div id="test1">

      <div class="aa">Linux入门到精通附带项目实战</div>

      <div class="bb">Linux入门到精通附带项目实战</div>

  </div>
  
  
CSS部分代码：

  #test1 div{

       color:red;

  }

  .aa{

       color:blue;

  }

  .bb{

       color:blue !important;

  }
  
  
  
默认情况下，ID选择器的优先级高于类选择器，所以，第二行中即使用class重定义了自身样式，也无法生效，所以继承父级属性，这行字还是红色。 但是，第三行中，用了important，是其具有最高的优先级，所以这里的css样式生效了，字变为了蓝色。

CSS属性相关知识

宽和高

  • width属性可以为元素设置宽度。
  • height属性可以为元素设置高度。
  • 块级标签才能设置宽度，内联标签的宽度由内容来决定。

字体属性

文字字体
font-family用来设置文字字体，如微软雅黑、楷体等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p {
      font-family: "kai ti", "楷体", "Arial", sans-serif;
    }
    span {
      font-family: "kai ti", "楷体", "Arial", sans-serif;
    }
  </style>
</head>
<body>
    <p>吃饭了吗</p>
    <span>吃过了，你呢</span>
</body>
</html>
字体大小
font-size用来设置字体的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p {

      font-size: 24px;
    }
    span {

      font-size: 24px;
    }
  </style>
</head>
<body>
    <p>吃饭了吗</p>
    <span>吃过了，你呢</span>
</body>
</html>
字重粗细
font-weight用来设置字体的字重（粗细）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p {

      font-weight: bold;
    }
    span {

      font-weight: bolder;
    }
  </style>
</head>
<body>
    <p>吃饭了吗</p>
    <span>吃过了，你呢</span>
</body>
</html>
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100-900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
文本颜色
  • 颜色属性被用来设置文字的颜色。
  • 颜色是通过CSS最经常的指定：
  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red
  • 还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间
p {
    color:red;
    color:rgb();
    color:#3e3e3e;
    color:rgba(1,1,1,0.5)
}

文字属性

文字对齐
  • text-align 属性规定元素中的文本的水平对齐方式
值 描述
left 左对齐，默认值
right 右对齐
center 居中对齐
justify 两端对齐
文字装饰
  • text-decoration 属性用来给文字添加特殊效果
值 描述
none 默认值，定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
inherit 继承父元素的text-decoration属性的值
首行缩进
  • 将段落的第一行缩进 32像素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p {

      font-weight: normal;
        color: black;
        text-indent: 32px;
    }

  </style>
</head>
<body>
    <p>1975年二三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。</p>
</body>
</html>

背景属性

/*背景颜色*/background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/* 
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      /*p {*/
      /*    font-size: 28px;*/
      /*    font-weight: bolder;*/
      /*}*/
    /*body {*/
    /*  !*background-color: bisque;*!*/
    /*  !*  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F17409242%2Fb82a16b5838e41f3e6374dbc27bde0da.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTc0MDkyNDIvYjgyYTE2YjU4MzhlNDFmM2U2Mzc0ZGJjMjdiZGUwZGEuanBn%2Fsign%2Fae9ef6271af886c0aef0e00475d11d0a.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663853015&t=d2a6ee48e5bc0f323be3dad1c54cacd1");*!*/
    /*}*/
      div {
          height: 1200px;
          width: 1200px;
          background-image: url("https://img0.baidu.com/it/u=2471949583,3673126699&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=640");
      }
  </style>
</head>
<body>
<!--        <p>1975年二三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。</p>-->
<div></div>
</body>
</html>

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      height: 200px;
      width: 800px;
      background-color: green;
      border-left-color: bisque;
      border-left-width: 10px;
      border-bottom-style: dashed;

      border-top-color: blue;
      border-top-width: 20px;
      border-top-style: dotted;
      
      /*border: 5px solid black;*/
    }
  </style>
</head>
<body>
    <div></div>
</body>
</html>

边框样式

值 描述
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框

border-radius

  • 用这个属性能实现圆角边框的效果。
  • 将border-radius设置为长或高的一半即可得到一个圆形。
    p {
      height: 400px;
      width: 400px;
      background-color: orangered;
      border: 5px solid black;

      border-radius: 50%;
      background-image: url("https://img0.baidu.com/it/u=2471949583,3673126699&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=640");

      background-position: center center;
    }

display属性

用于控制HTML元素的显示效果

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    span {
        display: block;
    }
    p {
      display: inline;
    }
  </style>
</head>
<body>
    <p><input type="text"></p>
    <p><input type="text"></p>
    <p><input type="text" style="display: none" name="username" value=张三></p>
    <p><input type="text"></p>
      <span>123</span>
      <span>321</span>
      <span>666</span>

      <p>123</p>
      <p>321</p>
      <p>666</p>
</body>
</html>
值 描述
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
posted @ 2022-08-23 22:58  dy12138  阅读(151)  评论(0)    收藏  举报