Day 50 前端开发

1、表单标签知识补充

获取用户输入的标签两大重要属性
name属性
类似于字典的键

Value属性
类似于字典的值

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

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

<p>
<label for="username"> # 这一步 可以让 输入框前的 注释 能够被点击 
账号：<input type="text" name="username" placeholder="账号" id="username">label>p>
1
2
3

获取用户输入的jinput标签 也可以添加背景提示
placeholder

<p>
<label for="pwd"> 密码：<input type="text" name="password" placeholder="密码" id="pwd">label>   
p>
1
2
3

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

<p>
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女
p>

<p>
	<input type="checkbox" name="hoby" value="basketball" checked="checked">篮球
p>

<select name="province" id="">
            <option value="sh">上海option>
select>
1
2
3
4
5
6
7
8
9
10
11
12

针对radio 和 checkbox 可以默认选中

checked="checked" 如果属性名和属性值 相等 那么可以简写成checked

<p>
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female" checked>女
p>
1
2
3
4

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

2、CSS层叠样式表

调整标签样式
语法结构

选择器 {
	属性名1;属性值1;
	属性名2;属性值2;
}
1
2
3
4

注释语法

/*注释内容*/
1

三种编写CSS的方式

1. head 中style标签内部直接编写（学习阶段使用 方便）
2. head 中link标签引入外部css文件（最正规）
3. 直接在标签内部通过style属性编写（不推荐）

3、CSS选择器

3.1、CSS基本选择器

标签选择器
直接编写标签名来查找标签

/*查找所有的div标签 并将内部的文本颜色变为绿色*/
div {
	color:green; 
}
1
2
3
4

类选择器
通过编写class值来查找标签

/*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
.c1 {
    color:red; 
}
1
2
3
4

id选择器
通过编写 id的值来精确查找标签

/*查找id值是d1的标签 并将内部的文本颜色 改为青色*/
#d1 {
    color: aquamarine;
}
1
2
3
4

通用选择器
查找所有的标签

查找所有的标签 并将内部的文本颜色改为蓝色
* {
    color:blue;
}
1
2
3
4

3.2、CSS组合选择器

储备知识

 <p>p>
 <div id="d1">   /*现嵌套在div中的 p和span标签 都称之为 该div标签的后代*/
 	<p>   /* 该p标签称之为 div标签的子代*/
 		<span>span>  /*该span标签 称之为 上一层p标签的子代*/
 	p>
 div>
 <p>p> /* 上下的p标签 都称之为 div 的兄弟标签 在其之后的称之为弟弟
1
2
3
4
5
6
7

后代选择器
两个选择器之间空格隔开 查找前面选择器获取到的标签捏所有符合 空格后面选择器要求的标签

/*查找div标签内部所有的 span （后代）*/
#d1 span {
    color:blue;
}
1
2
3
4

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

/*朝朝div标签内所有的儿子span*/
#d1>span {
    color:orange
}
1
2
3
4

毗邻选择器
两个选择器 加号隔开 查找前面选择器取到的标签下方 紧挨着的一个 符合加号后面选择器要求的标签

#d1+span {
    color: red;
}
1
2
3

弟弟选择器
两个选择器 波浪隔开 查找 前面选择器取到的标签下方 所有的符合波浪后面选择器要求的标签

#d1~span {
    color:green;
}
1
2
3

3.3、CSS属性选择器

所有标签除了有自己默认的属性之外 还可以拥有自定义的任意属性

• 默认属性：id class
• 自定义属性： x=1 y=2

查找属性名含有name的标签

[name] {
    background-color:red; /*背景色设为 红色*/
}
1
2
3

查找属性名含有那么 并且值是username的标签

[name='username'] {
    background-color:blue;
}
1
2
3

查找input标签并且 属性名含有name值是username的

input[name='username'] {
    background-color:aqua;
}
1
2
3

3.4、选择器之分组与嵌套

当多个选择器找到的标签需要调整相同的样式 那么可以合并

div,p,span {
    color:red;
}
1
2
3

并且合并的选择器彼此不干扰 也没有类型限制

#d1,c1,span {
    color:red;
}
1
2
3

还可以在选择器基础上添加额外的选 使得查找更精确

span.c1 {
    color:red;
}

div#d1 {
    color:blue;
}
1
2
3
4
5
6
7

3.5、CSS选择器之伪类选择器

**a标签 默认的颜色有两种 紫色跟蓝色 **
紫色：谅解地址一家被点过了
蓝色：链接地址从来灭有点击过

/*鼠标悬浮上去 之后样式改变 适用于所有含有文本的标签*/
a:hover {
    color: blue;
}
a
1
2
3
4
5

3.6CSS选择器 之伪元素选择器

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

/*将文本第一个字 修改样式*/
p:first-letter {
      font-size: 30px;
      color: red;
    }

/*在文本前面 添加文本 内容 且该内容 不会被选中*/
p:before {
        content:"哈哈哈哈!";
        color:red;
    }

/* 在文本后面添加 内容 且 该文本不会被选中*/
p:after {
      content: "哦哦哦";
      color: aqua;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

3.7、选择器优先级

当多个选择器查找到相同的标签 改不同的样式 那么标签该听谁的

1. 选择器相同 引入位置不同

   就近原则 覆盖上面 内容

2. 选择器不同的情况

   行内 > id选择器 > 类选择器 > 标签选择器
   越精确 优先级越高

强制修改标签样式的操作 ！important

div {  
    color:red  !import 
}
1
2
3

4、字体样式

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

/* 设置 文本 字体 一般不用改*/
body {
    font-family:  "微软雅黑";
}

/* 设置 字体大小*/
p {
    font-size: 30px;
}

/* 设置 字体更细*/
p {
    font-weight: lighter;
}

/*设置字体颜色样式*/
p {
    color: red; /*字体颜色*/
    color: rgb(61, 25, 21);  /*三基色 设定颜色*/
    color: #153d2f;  /*十六进制设置颜色*/
    color: rgba(252, 190, 6, 0.84);  /*设置颜色透明度（最后一位数）*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

设置文本居中

p {
      text-align: center;
}
1
2
3

取消文本下划线

a {
    text-decoration: none;
}
1
2
3

首行缩进

p {
    text-indent: 32px;  字标签 默认16px 这里首行缩进两字符
}
1
2
3

5、背景属性

设置背景颜色

body {
      background-color: #b7b6b6;
}
1
2
3

设置图片为背景

div#d1 {
        height:1000px;  /*调整块 高度*/
        width: 1000px;  /*调整长度*/
        background-image: url("https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c" );
        background-position: -342px 0px  /* 图片 漂移
}
1
2
3
4
5
6

• 可以通过 网页开发者工具 来调整 图片移动

填充

div#d1 {
    height:1000px;
    width: 1000px;
    background-image: url("https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c" );
    /*background-position: center center ;*/  /*居中*/
    /*background-repeat: repeat-x;*/   /*以x轴填充*/
    background-repeat: repeat-y;      /*以y轴填充*/
    /*background-position: -342px 0px;*/    /*手动设定图片微移*/
}
1
2
3
4
5
6
7
8
9

• 多个 关键字重复 可以合并 一个关键字 写完

5、边框属性

给上下左右设定 边框

#d2 {
    height:1000px;
    width: 1000px;
    background-image: url("https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c" );
    border: 5px solid black;
}
1
2
3
4
5
6

给边框单独设置样式

#d2 {
    height:1000px;
    width: 1000px;
    background-image: url("https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c" );
    /*border: 5px solid black;*/
	border-left: 10px solid red;  /**给左边 边框设置样式/
    border-top: 10px solid blue;  /**给上边边 边框设置样式/
    border-right: 10px solid green;  /**给右边 边框设置样式/
    border-bottom: 10px solid red;  /**给下面边 边框设置样式/
}
1
2
3
4
5
6
7
8
9
10
11

**画圆形 **
border-radius: 50%;

#d2 {
    height:500px;
    width: 500px;
    background-image: url("https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c" );
    /*border: 5px solid black;*/
    background-position: center center;
    border-radius: 50%;  /*在块儿级标签 画圆*/
}
1
2
3
4
5
6
7
8

6、display

隐藏标签
display: none

1
2
3
4
5

• 多用于非法用途 将原本的 显示的 账户 输入窗口的 的k值 清除
• 创建一个隐藏标签 来绑定一个账户 用户已提交 提交的是该kv数据

使元素同时具备行内元素和块级元素的特点
display:"inline-block"