Python工程师的成长————form表单、css简介、css选择器

最新推荐文章于 2024-07-20 21:41:48 发布

絵飛的

最新推荐文章于 2024-07-20 21:41:48 发布

阅读量414

点赞数

分类专栏：前端HTML+css+js 文章标签： html css 学习开发语言

本文链接：https://blog.csdn.net/fonnt/article/details/124408972

版权

前端HTML+css+js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今日学习目标

掌握form表单、css知识点，熟悉并掌握

学习内容

form表单
CSS简介
CSS选择器

一、 HTML标签——form表单

简介

form表单是一个包含表单元素的区域，允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。是前后端交互的重要标签。

实现语法：

<form action=""></form>

常用属性

name：规定表单的名称。
action：规定当提交表单时，向何处发送表单数据。默认为当前页面
method：规定如何发送表单数据（即提交方式，常用get或post），默认get

1.属性action

控制数据的提交地址：

方式1:写全路径
```
  action="http://www.aa7a.cn/user.php"
```
方式2:写后缀(自动补全IP和PORT)
```
action="user.php"
```
方式3:不写(朝网页所在的地址提交)
```
action=""
```

URL:统一资源定位符(网址)

常用标签

input：输入，选择或发出指令
textarea：文本域，用于输入大批量的数据
select：下拉选择框
button：按钮
label：提示标签

1.input标签

用于输入，选择或发出指令。根据其type属性值的不同，呈现不同的状态，具体如下：

text：文本输入框，常用属性如下
placeholder：提示文本
value：默认值
name：名称
readonly：只读，布尔属性
required：必须输入，布尔属性
disabled：不可用，布尔属性，input,select,textarea的通用属性
minlength：最小长度，提交时判定
maxlength：最大可输入的长度
pattern：正则匹配
antocomplete ：自动记录输入，以后输入时可以自动选择完成。可选值为on/off，默认on
其中的value,name,readonly,required,disabled是input,select,textarea的通用属性，但属性value,name的含义可能会有不同
password：密码输入框，属性和text一样，主要区别是，会自动隐藏输入的内容
button：普通按钮，通常用来触发脚本代码，常用属性value，表示按钮的提示文字
submit：提交按钮，用来将表单数据提交到后台。常用属性同普通按钮
radio：单选按钮，常用属性如下：
name：名称，必须有，相同name的单选会作为一组，会相互排斥
checked：默认选中，布尔属性（ps:如果属性名和属性值相同可以简写checked）
value：选项对应的值
其中name="sex"的和name="age"的是不同的两组单选按钮，而男和女由于其name都为sex，所以属于同一组，会互斥
```
 <form>
 	<input type="radio" name="sex" checked>男
 	<input type="radio" name="sex">女 <br>
 	<input type="radio" name="age">1-8
 	<input type="radio" name="age">9-18
 	<input type="radio" name="age" checked>18+
</form>
```
checkbox：复选按钮，基本和单选按钮一样，只是多选按钮中相同name的不会再互斥，但相同name的还是作为同一组
file：文件上传按钮，可以通过添加multiple属性控制获取单个还是多个文件
image：图片按钮，作用同提交按钮一样，只是用属性src替换了value，表示图片地址
reset：重置按钮，将表单所有组件输入的内容全部还原为初始状态。常用属性同普通按钮
email ：邮箱格式数据

3.select标签

下拉选择框，其选项写在子标签option中，常见属性如下：

multiple：多选，布尔属性
size：显示的选项数
option标签的value属性表示选项对应的值

下拉框

<select name="province" id="">
	<option value="BJ">北京</option>
	<option value="SH">上海</option>
	<option value="SZ">深圳</option>
</select>

一个个的下拉选项是一个个option标签，默认是单选也可以添加multiple变成多选

4.textarea标签

文本域，用于输入大批量的文本，属性和用法大致和文本框一样，主要区别如下：

其是双标签，所以默认内容不再是写在value属性中，而是直接写再标签里。
自有属性col（列数）和row（行数），这两个主要用于调整文本域大小，不会限制输入的文本。

获取大段文本内容

<textarea name="desc"></textarea>

3.lable标签

提示标签，主要用于提示后面组件的含义/作用

属性for的值是：要提示的组件的id

方式1

<label for="d1">用户名:</label>
<input type="text" id="d1">

方式2

<label>用户名:
<input type="text">
</label>

网络请求方式

最常见的网络请求方式有两种

get请求
朝服务端索要数据
post请求
朝服务端提交数据

两种请求都可以携带数据

get请求是在url后面通过?组织数据
url?name=jason&pwd=123&email=123@qq.com
post请求是在请求体中组织数据
HTTP协议请求数据格式

补充

get请求虽然可以携带数据但是一般只用于不重要的数据携带，并且get请求携带数据的大小有限制最多只能携带2KB左右
form表单中有一个method属性用于控制提交的方式有两个选项默认是get请求

二、CSS简介

语法结构

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

语法注释

/*注释内容*/

一个正常的网页css样式是非常多的就算专门开设css文件存储也很乱
这个时候就可以在css文件中通过注释来辅助辨别与查找
eg:

/*博客园样式表*/
/*导航条样式*/

多种引入css的方式

head内style标签内部直接编写css代码
建议在小白学习阶段可以使用方便查看
head内link标签引入外部css文件
工作中一般使用的都是link形式符合标准
标签内部通过style属性直接编写
第三种也称之为"行内式"是最不推荐使用的一种方式
因为它会将HTML和CSS柔和到一起增加了耦合度

三、CSS选择器

CSS查找标签之基本选择器

标签选择器(范围查找)
直接通过标签名查找标签

h1 {        
	color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/        
}

类选择器(范围查找)
通过标签的class属性查找标签(关键性符号是句点符) .

.c1 {         
	color: greenyellow;  /*将所有class属性中含有c1的标签内部字体颜色改为亮绿色*/        
}

id选择器(精确查找)
通过标签的id属性查找标签
```
#d1 {         
	color: orange;        
}
```
通用选择器(了解几乎不用)
查找所有的标签
```
* {       
 	 color: blue;    
}
```

CSS查找标签之组合选择器

举例说明：

标签关系

<div>div1
<div>div2
	<p>p1</p>
</div>
<p>p2
	<span>span1</span>
</p>
<span>span2</span>
</div>

分析：
通过嵌套层级来表示亲属关系

对于div1来说div2、p2、span2都是儿子
对于div2、p2、span2来说div1就是父亲
对于p1来说div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
对于span2来说div2、p2是哥哥 span2是弟弟
div1内部所有的标签无论层级都可以称之为是div1的后代

儿子选择器(关键符号是大于号)

#d1 > span {  查找id是d1标签内部所有的儿子span
      color: red;
  }

后代选择器(关键符号是空格)

#d1 span {  查找id是d1标签内部所有的后代span
      color: red;
  }

毗邻选择器(关键符号是加号)

#d1 + a {  查找id是d1标签同级别下面紧挨着第一个a标签
        color: red;
    }

弟弟选择器(关键符号是小波浪号)

#d1 ~ a {  查找id是d1标签同级别下面所有a标签
     color: red;
 }

属性选择器

根据标签内部的属性名和属性值查找标签(关键符号是中括号)

方式1:直接通过属性名查找

[type] {
      background-color: red;
  }

方式2:属性名是type并且值是text的标签
```
[type='text'] {
     background-color: red;
 }
```

方式3:属性名是type并且值是text的div标签

div[type='text'] {
      background-color: red;
  }

分组与嵌套

分组

div, p, span {  查找div或者p或者span
    color: red;
 }

嵌套

#d1, .c1, span {  查找id是d1或者class包含c1或者span
 			color: red;
}

特殊组合
组合1

div#d1		查找id是d1的div标签
div.c1		查找class包含c1的div标签

组合2

div #d1   查找div内部id是d1的后代标签
#d1>.c1	  查找id是d1的内部class包含c1的儿子标签

常用伪类选择器

鼠标悬浮

p:hover {  鼠标移动到p标签上方 字体颜色动态修改为橙色
       color: orange;
   }

获取聚点

input:focus {  输入框被鼠标左键选中(聚焦)
     background-color: black;
 }

絵飛的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Python工程师的成长————form表单、css简介、css选择器

今日学习目标掌握form表单、css知识点，熟悉并掌握文章目录今日学习目标学习内容一、 HTML标签——form表单简介常用属性1.属性action常用标签1.input标签3.select标签4.textarea标签3.lable标签网络请求方式二、CSS简介语法结构语法注释多种引入css的方式三、CSS选择器CSS查找标签之基本选择器CSS查找标签之组合选择器属性选择器分组与嵌套常用伪类选择器学习内容form表单CSS简介CSS选择器一、 HTML标签——form表单简介
复制链接

扫一扫