表单标签知识补充
1.获取用户输入的标签的两大重要的属性
1.1name属性
类似于字典的键
1.2value属性
类似于字典的值
'form表单在朝后端发送数据时，标签必须要有name，否则不会发送该标签的值'
2.获取用户输入的input标签理论上需要有label配合使用
<label for="某个input标签的id值"></label>
3.获取用户输入的input标签也可以添加背景提示
<input type="text" name="password" placeholder="密码">
4.获取用户输入的标签如果不是让用户自己写而是选择，那么标签需要自己写value
<input type="radio" name="gender" value="male">男
<input type="checkbox" name="hobby" value="basketball">篮球
<select name="province" id="">
<option value="sh">上海</option>
</select>
5.针对radio和checkbox可以默认选中
checked="checked"如果属性名和属性值相等，那么可以简写(checked)
6.针对option标签也可以mr选中
selected="selected"简写为(selected)
css
css层叠样式表
1.CSS可以调整HTML标签样式
2.语法结构
选择器{属性名1:属性值1;
属性名2:属性值2;}
3.注释语法
/*注释内容*/
4.三种编写CSS的方式
4.1head中style标签内部直接编写(学习阶段使用 方便)
4.2head中link标签引入外部css文件(最正规)
4.3直接在标签内部通过style属性编写(不方便修改 不推荐)
CSS基本选择器
1.标签选择器:直接编写签名来查找标签
<style>
div {color: green;} /*查找所有的div标签并修改内部文本颜色*/
2.类选择器:通过编写class的值来查找标签
.c1 {color: blue;} /*查找所有class属性中含有c1的标签并修改内部文本颜色*/
3.id选择器:通过编写id的值来精准查找标签
#d1 {color: brown;} /*查找id值为d1的标签，并修改内部文本颜色*/
4.通用选择器:查找所有的标签
* {color: chartreuse} /*查找所有标签，并修改内部文本颜色*/
</style>
CSS组合选择器
1.准备
<body>
<p>p</p>
<div id="d1">p下面的div
<span>div里的span</span>
<p>div里的p
<span>div里的p里的span</span>
</p>
</div>
<span>div下面的span</span>
<p>div下面的p</p>
<span>p下面的span</span>
</body>
2.根据div查找span
<style>
2.1后代选择器：两个选择器之间空格隔开，查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签
#d1 span {color: blue;} /*查找div标签内部所有的(后代)span*/
2.2儿子选择器，两个选择器之间大于号隔开，查找前面选择器获取到的标签内部第一层级符合大于号后面的选择器要求的标签
#d1>span {color: brown;} /*查找div标签内部所有的(儿子)span*/
2.3毗邻选择器
#d1+span {color: chartreuse;} /*查找div标签同级别下面紧挨着的一个span标签(弟弟)*/
2.4弟弟选择器
#d1~span {color: seagreen} /*查找div标签下面所有的span标签(弟弟)*/
</style>
CSS属性选择器
1.所有的标签除了有自己默认的属性之外，还可以拥有自定义的任意属性
1.1默认属性 id class
1.2自定义属性 x=1 y=2
2.查找属性名含有name的标签
[mame] {background-color: lime}
3.查找属性名含有name并且值是username的标签
[name='username'] {background-color: orange}
4.查找input标签并且属性名含有name值是username的
input[name='username'] {background-color: aqua}
5.前面的选择器可以是任意类型的标签、id、class
CSS选择器之分组与嵌套
1.当多个选择器查找到的标签需要调整相同的样式，我们可以通过在多个选择器之间使用逗号分隔成分组
div,p,span {color: blue;}
2.合并的选择器彼此之间互不干扰也没有类型的限制
#d1,c1,span {color: blue;}
3.还可以多个选择器混合起来使用，在选择器基础之上添加额外的选择使得查找更精准
span.c1 {color: red;}
CSS选择器之伪类选择器
1.a标签默认的颜色有两种，紫色跟蓝色
1.1紫色:链接地址已经被点击过了
1.2蓝色:链接地址没有被点击过
2.鼠标悬浮上去之后样式改变，适用于所有含有文本的标签
a:hover {color: aqua}
CSS选择器之伪元素选择器
1.通过css代码来操作标签的文本内容
1.1修改p标签内容的大小与颜色
p:first-letter {font-size: 48px;color: brown}
1.2在p标签左边增加内容
p:before {content: "在左边";color: aqua;}
1.3在p标签右边增加内容
p:after {content: "在右边";color: lime;}
'伪元素选择器可以用在解决标签浮动带来的负面影响，也可以用来做数据的防爬'
CSS选择器优先级
'当多个选择器查询到相同的标签修改不同的样式'
1.选择器相同，引入位置不同
就近原则
2.选择器不同的情况
行内>id选择器>类选择器>标签选择器
3.还可以通过添加!important方式来强制让样式生效，但会使样式文件混乱不易维护，不推荐使用
字体样式
1.width属性可以作为元素设置宽度
height属性可以为元素设置高度
块级标签才能设置宽度，行内标签的宽度由内容来决定
2.文字字体
body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}
3.字体大小
p {font-size: 16px;}
4.font-weight设置字体的字重(粗细)
p {font-weight: bold;} 粗体
p {font-weight: bolder;} 更粗
p {font-weight: lighter;} 更细
5.文本颜色
p {color: red;
color:rgb();
color:#3e3e3e;
color:rgba(1,1,1,0.5)}
6.文字对齐
p {text-align:center;} 居中对齐
7.文字装饰
a {text-decoration: none;} 定义标准的文本
8.首行缩进
p {text-indent: 32px;} 首行缩进32像素
背景属性
1.背景颜色
body {background-color: red;}
2.背景图片
body {background-image: url('https://img2.baidu.com/it/u=4038334073,1988528171&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=613');}
3.background-repeat: 背景重复
repeat(默认):背景图片平铺满整个网页
repeat-X:背景图片只在水平方向上平铺
repeat-Y:背景图片只在垂直方向上平铺
no-repeat;:背景图片不平铺
4.背景重复
background-position: 200px 200px; 调整图片位置
background-position: center center; 居中
5.支持简写
background:#336699 url('1.png') no-repeat left top;
边框属性
1.设置边框
p {border-width: 2px; 边框宽度
border-style: solid; 边框样式
border-color: red;} 边框颜色
2.设置长为高的一半即可得到一个圆形
border-radius: 50%
display属性
1.控制标签是否隐藏
以隐藏某个元素，且隐藏的元素不会占用任何空间
display: none
浙公网安备 33010602011771号