form表单

"""获取前端用户数据并发送给后端服务器"""

<form action=""></form>  # 需要在form标签内部编写获取用户数据标签

# 1.属性action

	控制数据的提交地址

  	方式1:写全路径

    	action="http://www.aa7a.cn/user.php"

    方式2:写后缀(自动补全IP和PORT)

      action="user.php"

    方式3:不写(朝网页所在的地址提交)

      action=""

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

# 2.input标签

	获取用户各中类型数据的标签(html里面的变形金刚)

  	type属性

    	text					正常展示的普通文本

      password			密文展示

      date					日历展示

      radio					单选

      		可以通过添加checked="checked"设置默认值

        	ps:如果属性名和属性值相同 可以简写checked

      checkbox			多选

      		可以通过添加checked="checked"设置默认值

        	ps:如果属性名和属性值相同 可以简写checked

      email					邮箱格式数据

      file					文件数据

      		可以通过添加multiple属性控制获取单个还是多个文件

      submit				触发form表单提交数据的动作

      		能够触发form表单提交数据动作的标签有两个

        		1.input的type=submit

          	2.button标签

      reset					重置页面填写的数据

      button				普通按钮默认没有任何的功能

      		意味着以后可以给它添加任意的功能(JS事件)

# 3.select标签

	下拉框

  	<select name="province" id="">

            <option value="BJ">北京</option>

            <option value="SH">上海</option>

            <option value="SZ">深圳</option>

   </select>

  	一个个的下拉选项是一个个option标签

		默认是单选 也可以添加multiple变成多选

# 4.textarea标签

	获取大段文本内容

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

  """

  input标签中有两个非常重要的属性

  	1.name属性

  		类似于字典的key(前端程序员写)

  	2.value属性

  		类似于字典的value(用户自己传)

  		如果标签是选择类型的 那么还需要前端程序员自己填写value

  	用于区分具体数据含义

  ps:我们在编写input标签的时候应该添加name属性

  """

# 3.label标签

	专门给input标签配文字说明 也可以不使用

  	方式1

    	<label for="d1">用户名:</label>

    	<input type="text" id="d1">

   	方式2

    	<label>用户名:

        <input type="text">

      </label>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用户注册</title>

</head>

<body>

    <h1>用户注册</h1>

    <form action="">

        <div>用户名:

            <input type="text" name="username">

        </div>

        <div>密码:

                <input type="password" name="password">

        </div>

        <p>性别:

            男<input type="radio" name="gender" checked = checked>

            女<input type="radio" name="gender">

            其他<input type="radio" name="gender">

        </p>

        <p>生日:

            <input type="date">

        </p>

        <p>爱好:

            篮球<input type="checkbox" name="baskeball">

            足球<input type="checkbox" name="football">

            排球<input type="checkbox" name="volleyball">

        </p>

        <p>邮箱:

            <input type="email" name="email">

        </p>

        <p>单个文件:

            <input type="file" name="single_file">

        </p>

        <p>多个文件:

            <input type="file" multiple name="files_list">

        </p>

        <p>省份:

            <select name="province" id="">

                <option value="sh">上海</option>

                <option value="js">江苏</option>

                <option value="zj">浙江</option>

            </select>

        </p>

        <p>好友:

            <select name="friends" id="" multiple>

                <option value="ah">安徽</option>

                <option value="la">六安</option>

                <option value="sh">上海</option>

            </select>

        </p>

        <p>

            <input type="submit" value="注册">

            <button>点击我也可以注册</button>

            <input type="reset" value="重置">

            <input type="button" value="普通按钮">

        </p>

    </form>

</body>

</html>

网络请求方式

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

1.get请求

	朝服务端索要数据

2.post请求

	朝服务端提交数据

# 两种请求都可以携带数据

	get请求是在url后面通过?组织数据

  	url?name=jason&pwd=123&email=123@qq.com

    post请求是在请求体中组织数据

  	HTTP协议请求数据格式

CSS简介

# 1.语法结构

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

# 2.语法注释

	/*注释内容*/

# 3.多种引入css的方式

	1.head内style标签内部直接编写css代码

  	建议在小白学习阶段可以使用 方便查看

  2.head内link标签引入外部css文件

  	工作中一般使用的都是link形式 符合标准

  3.标签内部通过style属性直接编写

  	第三种也称之为"行内式"是最不推荐使用的一种方式

    因为它会将HTML和CSS柔和到一起	 增加了耦合度

CSS查找标签之基本选择器

# 1.标签选择器(范围查找)

	直接通过标签名查找标签

  	h1 {

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

        }

# 2.类选择器(范围查找)

	通过标签的class属性查找标签(关键性符号是句点符)

  	.c1 {

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

        }

# 3.id选择器(精确查找)

	通过标签的id属性查找标签

  	#d1 {

         color: orange;

        }

# 4.通用选择器(了解 几乎不用)

	查找所有的标签

  	* {

      	color: blue;

    }


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<!--    <style>-->

<!--        h1{-->

<!--           color: brown;-->

<!--        }-->

<!--    </style>-->

<!--    <link rel="stylesheet" href="">-->

<!--    <style>-->

<!--        h1{-->

<!--            color: red;-->

<!--        }-->

<!--    </style>-->

    <style>

        .c1{

            color: aqua;

        }

    </style>

    <style>

        #d1{

            color: darkmagenta;

        }

    </style>

</head>

<body>

<!--    <h1 style="color: red">好好学习</h1s>-->

    <h1 class="c1 c2">好好学习</h1>

    <h2 class="c3 c2">好好学习</h2>

    <h3 class="c1">好好学习</h3>

    <h3 id="d1">好好学习</h3>

    <h5 class="c3">好好学习</h5>

    <h1 class="c2">好好学习</h1>

</body>

</html>

CSS查找标签之组合选择器

<div id="d1">div1

	<div>div2

		<p>p1</p>

	</div>

	<p>p2

		<span>span1</span>

	</p>

	<span>span2</span>

</div>


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

1.对于div1来说div2、p2、span2都是儿子

2.对于div2、p2、span2来说div1就是父亲

3.对于p1来说div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)

4.对于span2来说div2、p2是哥哥 span2是弟弟

5.div1内部所有的标签无论层级都可以称之为是div1的后代

ps:判断的时候一定要看层级关系

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

	#d1 > span {  查找id是d1标签内部所有的儿子span

            color: red;

        }

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

	#d1 span {  查找id是d1标签内部所有的后代span

            color: red;

        }

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

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

              color: red;

          }

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

	#d1 ~ a {  查找id是d1标签同级别下面所有a标签

            color: red;

        }


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>组合标签</title>

<!--    <style>-->

<!--        #d1 > span {-->

<!--            color: red;-->

<!--        }-->

<!--    </style>-->

    <style>

        #d1 span {

            color: red;

        }

    </style>

<!--    <style>-->

<!--        #d1 + a{-->

<!--            color: aquamarine;-->

<!--        }-->

<!--    </style>-->

    <style>

        #d1 ~ a{

            color: aquamarine;

        }

    </style>

</head>

<body>

<div id="d1">div1

	<div>div2

		<p>p1</p>

        <span>span4</span>

	</div>

	<p>p2

		<span>span1</span>

	</p>

	<span>span2</span>

	<span>span3</span>

</div>

<a href="">222</a>

<a href="">222</a>

<a href="">222</a>

</body>

</html>

属性选择器

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

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

	[type] {

            background-color: red;

        }

2.方式2:属性名是type并且值是text的标签

  [type='text'] {

            background-color: red;

        }

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

	div[type='text'] {

            background-color: red;

        }

分组与嵌套

# 1.分组

div, p, span {  查找div或者p或者span

           color: red;

        }

# 2.嵌套

#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的儿子标签

伪类选择器

# 1.鼠标悬浮

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

              color: orange;

          }

# 2.获取聚点

	input:focus {  输入框被鼠标左键选中(聚焦)

            background-color: black;

        }

form表单与CSS选择器和样式操作的更多相关文章

  1. 1113 form表单与css选择器

    目录 1.form表单 form元素 特点 参数 form元素内的控件 1.input的使用 2.select标签 3.textarea元素 4.autofocus属性 2.CSS 1.基础语法 cs ...

  2. form表单与css选择器

    目录 form表单 action属性 input标签 lable标签 select标签 textarea标签 补充 网络请求方式 CSS简介 CSS基本选择器 组合选择器 属性选择器 分组与嵌套 伪类 ...

  3. 前端-form表单与CSS

    目录 form表单 表单属性 label标签 input标签 select 下拉框标签 textarea多行文本 提交 Flask 结合form表单 初探 CSS介绍以及基本选择器 基本选择器 组合选 ...

  4. form表单，css简介，css选择器，css样式操作

    form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...

  5. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  6. （day43）form表单、css

    目录 昨日回顾 一.HTTP协议 (一)四大特性 (二)数据格式 (1)请求格式 (2)响应格式 (三)响应状态码 二.HTML (一)什么是HTML (二)注释 (三)文档结构 (四)head内标签 ...

  7. 前端form表单与css

    form表单(******) 能够获取用户输入(输入,选择,上传的文件) 并且将用户输入的内容全部发送给后端 参数 action 控制数据提交的地址 三种书写方式 1.不写 默认就是朝当前这个页面所在 ...

  8. form表单和CSS

    一.form表单 1. form表单有什么用 能够获取用户输入的信息(输入,选择, 上传的文件),并且将这些数据全部发送给后端 2. form表单的用法 (1)有两个重要参数: action : 控制 ...

  9. 前端之form表单与css（1）

    目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...

随机推荐

  1. 小米手机BL解锁连接不上手机

    解锁工具下载页面:http://www.miui.com/unlock/download.html 线刷工具下载页面:http://www.miui.com/shuaji-393.html 额外注意说 ...

  2. Python这些位运算的妙用，绝对让你大开眼界

    位运算的性能大家想必是清楚的,效率绝对高.相信爱好源码的同学,在学习阅读源码的过程中会发现不少源码使用了位运算.但是为啥在实际编程过程中应用少呢?想必最大的原因,是较为难懂.不过,在面试的过程中,在手 ...

  3. 电源PCB布板的10个基本法则

    电容模型 电容并联高频特性 电感模型 电感特性 镜象面概念 高频交流电流环路 过孔 (VIA) 的例子 PCB板层分割 降压式(BUCK)电源:功率部分电流和电压波形 降压式电源排版差的例子 电路等效 ...

  4. 前端工作面试HTML相关问题

    前端工作面试HTML相关问题 Q: doctype(文档类型)的作用是什么? A: 在HTML中 doctype 有两个主要目的. 对文档进行有效性验证: 它告诉用户代理和校验器这个文档是按照什么DT ...

  5. Episode 3：我们想要更好的社交网络

    我们为什么爱看评论?怎样的人类文字最有效率?更「好」的手机设计.APP 设计?APP Store 已经十年了?这是 WEB VIEW 的第三期节目<我们想要更好的社交网络>. 链接描述 s ...

  6. 有关placeholder在ie9中的一点折腾

    有关placeholder在ie9中的一点折腾. placeholder属性定义: placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述). 问题 ...

  7. Hadoop 3.1.2报错：xception in thread "main" org.apache.hadoop.fs.UnsupportedFileSystemException: No FileSystem for scheme "hdfs"

    报错内容如下: Exception in thread "main" org.apache.hadoop.fs.UnsupportedFileSystemException: No ...

  8. Idea导出jar包和使用自定义API

    自定义jar简单实现案例 学习内容 1. 自定义工具类 2. 导出jar 3. 加载Jar包 4. 调用自定义的API方法 总结 学习内容 1. 自定义工具类 新建一个java项目,然后创建包和工具类 ...

  9. input禁止输入空格 以及 input各种输入限制

    1.禁止输入空格 方法1:  oninput="value=value.replace(/\s+/g,'')"   在 ios中  用手机原生键盘  输入  会出现bug,  就是 ...

  10. coolshell-初见

    首页:https://coolshell.cn/tag/programmer 我是怎么招聘程序员的 https://coolshell.cn/articles/1870.html 程序员需要具备的基本 ...