表单标签补充及css层叠样式
表单标签补充及css层叠样式
一、表单知识点补充
1.获取用户输入的标签两大重要属性
name属性：类似于字典的键
value属性：类似于与字典的值
# form表单朝后端发送数据的时候，标签必须得有name,否则不会发送该标签的值，用户输入的数据就会保存到标签的value的属性中
2.获取用户输入的input标签理论上需要有label配合使用
<!-- 鼠标点击username的框就有提示的，label的作用也是使得input不飘黄-->
<label for="d1">username</label>
<input type="text" name="username" id="d1">
3.input添加背景提示
<!--placeholder可以添加背景提示 -->
<input type="password" name="password" placeholder="请输入密码">
4.input让用户选择的时候，需要添加value属性
<!--单选-->
<p>
gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="others">其他
</p>
<!--多选-->
<p>
hobby:
<input type="checkbox" name="hobby" value="read">读书
<input type="checkbox" name="hobby" value="sing">唱歌
<input type="checkbox" name="hobby" value="sleep">睡觉
</p>
<!--下拉选择-->
<p>
province:
<select name="province" id="">
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
<option value="jinhua">金华</option>
</select>
</p>
5.标签的属性如果和属性值相等，那么可以简写
<input type="file" multiple="multiple">
可以写为↓这样
<input type="file" multiple>
6.针对选择类型的标签可以提前设置默认选项
<input type="radio" name="gender" checked="checked">
↓
<input type="radio" name="gender" checked>
<input type="checkbox" name="gender" checked="checked">
↓
<input type="checkbox" name="gender" checked=>
<select>
<option value="" selected="selected">1111</option>
↓
<option value="" selected=>2222</option>
</select>
7.下拉框与文件上传可以复选
<input type="file" multiple>
<select name="" id="" multiple>
二、CSS(Cascading Style Sheet，层叠样式表)
1.css语法
区分两大标签：
1.class属性：
分门别类，主要用于批量查找
2.id属性：
精确查找，主要用于点对点
css样式由两个组成部分，选择器和声明，声明包括属性和属性值，每个声明之后用分号结束
语法结构：
选择器：{
属性名1：属性值1；
属性名2：属性值2；
}
2.css注释语法
只能使用/**/包裹，不管是单行注释函数多行注释
/*注释内容*/
3.编写css的方式
1.内联样式(行内样式)
在标签内通过style设置元素的样式
<p style="color: antiquewhite;font-size: 15px">加油啊</p>
问题：使用内联样式，样式只能对一个标签生效。想影响多个必须在每个标签内都写上，样式的修改不仅麻烦，并且优先级太高，非常不便。（注意：开发时绝对不要使用内联样式）
2.内部样式表
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: #F6F6A7;
font-size: 50px;
}
</style>
</head>
问题：内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用。
3.外部样式表
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
三、css基本选择器
1.css基本选择器
统一的html:
<div id="d1">
111
<span>内部sapn</span>
</div>
<p>pppp</p>
<span>span</span>
<div class="c1">div</div>
1.标签选择器(直接按照标签名查找标签)
div{
color: blue;
font-size: 32px;
}
2.类选择器(直接按照class标签名查找标签)
.c1{
color: aquamarine;
font-size: 16px;
}
3.id选择器(根据标签的id精确查找标签)
#d1{
color: aquamarine;
font-size: 16px;
}
4.通用选择器(直接选择页面所有的标签)
* {
color: blueviolet;
margin: 0 auto;
}
2.css组合选择器
统一的html:
<p>ppp</p>
<p>ppp</p>
<div class="d1">div
<div id="d1">divdiv
<p>divdivp
<span>divdivpspan</span>
</p>
</div>
<p>divp</p>
<span>divspan</span>
</div>
<span>spanspan1111</span>
<p>ppp</p>
<div id="d2">ppp</div>
<span>spanspan</span>
针对标签的上下层级及嵌套有另外的说法：
父标签，后代标签，子标签，弟弟标签，哥哥标签，祖先标签
1.后代选择器(中间加空格)
div span{
color: blueviolet;
}
2.儿子选择器(中间加大于号)
div>span{
color: crimson;
}
3.毗邻选择器(中间放加号)
# 毗邻是紧挨着的
div+span {
color: blue;
}
4.弟弟选择器(小波浪线号)
div~span{
color: brown;
}
3.分组与嵌套
div,p,span{
color: brown;
}
#d1,.d1,span{
color: blue;
}
div.d1{ # 查找class里面含义d1的css
color: blueviolet;
}
div#d1{ # 查找id里面含义d1的css
color: aquamarine;
}
.c1 p.c2 { 查找含有c1样式值里面的含有c2样式值的p标签
color: antiquewhite;
}
4.属性选择器
html代码：
<div username="username">333333333333</div>
<div username="jason">12332</div>
<p username="jason"></p>
<span username="jia"></span>
css代码：
[username]{
background-color: crimson;
color: blueviolet;
}
[username = 'jason']{
background-color: crimson;
color: blueviolet;
}
div[username = 'jason']{
background-color: crimson;
color: blueviolet;
}
5.伪元素选择器
html代码：
<p>在干吗？我要被前端折磨死了，你还好吗？我要写吐了，谁来救救我，</p>
css代码：
p:first-letter{
font-size: 56px;
color: crimson;
}
p:before{
content: '有人吗？';
color: blueviolet;
}
p:after{
content: '我想逃';
color: aqua;
}
6.css伪类选择器
:link:未访问的链接的样式
:visited:已经访问的链接的样式
:hover:鼠标悬停的链接的样式
:active:鼠标点击的链接样式
html代码：
<a href="https://www.jd.com/">点我去京东</a>
<a href="https://www.4399.com/">点我去4399</a>
<a href="https://www.7k7k.com/">点我去7K7K</a>
css代码：
css代码：
<!-- 未访问的链接颜色-->
a:link{
color: blueviolet;
}
/*鼠标悬停的颜色*/
a:hover{
color: blue;
}
/*鼠标点击链接的颜色*/
a:active{
color: bisque;
}
/*已访问的链接颜色*/
a:visited{
color: cornflowerblue;
}
四、css选择器优先级
1.选择器相同，引入位置相同
就近原则，越往下，越靠近选择器就选择哪个
2.选择器不同，导入方式相同
内联样式>id选择器>类选择器>标签选择器
五、样式调节
1.字体样式
1.字体文字：
body{
font-family: "微软雅黑", "Arial", sans-serif;
}
2.字体大小
body{
font-size: 32px;
}
3.字体粗细
body{
font-weight: revert ;
}
属性值：
normal:默认值
bold:粗体
bolder:更粗
lighter:更细
inherit:继承父元素的粗细值
100~900：设置粗细值，400等于normal，700等于bold
4.字体颜色
body{
color: cornflowerblue;
}
1.十六进制：#3d3d3d
2.RGB值：红绿蓝如rgb(115,69,0)
3.颜色名称：如：蓝
4.rgb(115,69,8,0) 最后一个值为透明度，范围在0.0到0.9之间
5.文字属性
body{
color: cornflowerblue;
text-align: justify;
}
1.text-align: justify ：两端对齐
2.text-align: center ：居中对齐
3.text-align: left ：左边对齐
4.text-align: right ：右边对齐
6.文字修饰
body{
color: cornflowerblue;
text-align: justify;
text-decoration: underline;
}
1.text-decoration: none 默认，标准的文本
2.text-decoration: underline 文本下的一条线
3.text-decoration: overline 文本上的一条线
4.text-decoration: line-through; 穿过文本的一条线
5.text-decoration: initial; 继承父元素的text-decoration属性的值
7.text-indent: 32px; 首行缩进
2.背景相关的配置
1.设置设置背景颜色：background-color: #b20dee;
2.背景图片：background-image: url('1.jpg');
3.背景图片平铺排满整个网页：background-repeat: repeat;
4.背景图片只在水平方向上平铺：background-repeat: repeat-x;
5.背景图片只在垂直方向上平铺：background-repeat: repeat-y;
6.背景图片不平铺：background-repeat: no-repeat;
7.背景位置：background-position: center;
表单标签补充及css层叠样式的更多相关文章
- day 31 表单标签，CSS
一. HTML表单标签 HTML表单用于搜集不同类型的用户输入,然后把数据提交给服务器处理. 常用的表单标签: 标签 作用 form 所有表单标签的根标签 input 输入标签,包括单行输入框.密码框 ...
- python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807
html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
- python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- css 表单标签两端对齐
来自:http://demo.doyoe.com/css3/justify/justify-form.htm 侵删 <!DOCTYPE html> <html lang=" ...
- springMVC补充——springMVC的表单标签
同其他标签一样,使用标签的第一步是进行标签库的导入(如果页面频繁导入比较多的标签库,应当专门建立导入标签库的页面,详见ztree的随笔) 导入标签库: <%@ taglib prefix=&qu ...
- SpringMVC 表单标签 & 处理静态资源
使用 Spring 的表单标签 通过 SpringMVC 的表单标签可以实现将模型数据中的属性和 HTML 表单元素相绑定,以实现表单数据更便捷编辑和表单值的回显. form 标签 一般情况下,通过 ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- 【Spring学习笔记-MVC-11--】Spring MVC之表单标签
一.使用方法 1.要使用Spring MVC提供的表单标签,首先需要在视图页面添加: <%@ taglib prefix="form" uri="http://ww ...
随机推荐
- 九、Django3的ASGI
九.Django3的ASGI 9.1.Web应用程序和web服务器 Web应用程序(Web)是一种能完成web业务逻辑,能让用户基于web浏览器访问的应用程序,它可以是一个实现http请求和响应功能的 ...
- 为什么CSS中的calc函数可能会不生效？
前言 在早期如果想要对某一些样式进行动态计算,绝大多数的做法都是使用JavaScript来进行,当时的CSS在面对这种场景显得有点无能为力.但是,当CSS3中新增了calc函数时,面对这种场景,Jav ...
- 机器学习中in-domine, out-domine的区别
in-domine 为域内数据,即为训练模型时使用的数据: out-domine 为域外数据,即为检验模型时使用的数据.
- Oracle数据库的导出和导入
本次数据库的导入导出操作是导出公司环境的Oracle数据库,再导入本地数据库,采用impdp和expdp命令进行导入导出操作. 一.导出52数据库 1.用system用户登录到数据库,查看是否有创建d ...
- 【题解】CF1722F L-shapes
题面传送门 其实这题根本不用搜索,有耐心即可. 可以发现,在 \(n\times m\) 范围内扫,可能合法的只有以下四种情况,其中蓝色代表示是 *,红色表示不能是 *,其中黄色五角星表示当前 \(i ...
- 如何快捷地修改虚拟机镜像——libguestfs-tools工具集介绍
前言 在使用云服务器产品时,由于问题修复.功能添加.软件更新等原因,往往需要对已有系统镜像进行二次修改. 这种情况下,最为简单的做法是:使用原镜像创建实例,在实例中进行修改,修改完毕后再转镜像.这种做 ...
- 嵌入式-C语言基础：数组指针
定义一个数组指针,指向二维数组: int a[3][4]={{1,2,3,4},{5,6,7,8},{9,10,11,12}}; int (*p)[4];//定义二维指针数组 p=a;//指向二维数组 ...
- 浅谈HTTP缓存与CDN缓存的那点事
HTTP缓存与CDN缓存一直是提升web性能的两大利器,合理的缓存配置可以降低带宽成本.减轻服务器压力.提升用户的体验.而不合理的缓存配置会导致资源界面无法及时更新,从而引发一系列的衍生问题.本文将分 ...
- 再见CMS
观察网站最下方,根据备案号搜到这是个齐博CMS,然后百度就可以搜到齐博CMS漏洞了 然后开始利用 首先尝试了在用户信息修改处进行注入,发现好像想不通了,就在博客界面进行注入 Payload: 获取版本 ...
- ArcEngine 释放对象
释放对象 例如IFeatureCursor,IFeatureClass等 ESRI.ArcGIS.ADF.ComReleaser.ReleaseCOMObject(myFeatureCursor); ...