【form表单与CSS简介】

HTML:form表单

表单：用于搜集不同类型的用户输入

<form>
 .
form elements
 .
</form>

1. action属性：控制数据的提交地址。

   方式1:写全路径
   action=“http://www.aa7a.cn/user.php”
   方式2:写后缀(自动补全IP和PORT)
   action=“user.php”
   方式3:不写(朝网页所在的地址提交)
   action=“”
   ‘’‘URL:统一资源定位符(网址)’‘’

2. Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">

<form action="action_page.php" method="POST">

何时使用 GET？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST？

您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

表单包含表单元素

表单元素：不同类型的input元素，单选框，复选框，提交按钮等等。

1. <input>元素,重要的表单元素。input元素有很多种形态，根据不同的type属性，常见的type属性如下：

类型	描述
text	正常展示的普通文本
password	密文展示
radio	单选可以通过添加checked="checked"设置默认值 ps:如果属性名和属性值相同 可以简写checked
submit	触发form表单提交数据的动作
date	日历展示
checkbox	多选
email	邮箱格式数据
file	文件数据 可以通过添加multiple属性控制获取单个还是多个文件
reset	重置页面填写的数据
botton	普通按钮默认没有任何的功能

input标签中有两个非常重要的属性
1.name属性
类似于字典的key(前端程序员写)
2.value属性
类似于字典的value(用户自己传)
如果标签是选择类型的 那么还需要前端程序员自己填写value
用于区分具体数据含义

2. select标签：下拉框

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

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

3. textarea标签:获取大段文本内容

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

​ 4. lable标签:专门给input标签配文字说明 也可以不使用

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

CSS简介：

CSS指的是层叠样式表，一种用来表现HTML或XML等文件样式的计算机语言，是可以做到网页和内容进行分离的样式语言。作用是：可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制；使页面的字体变得更漂亮，更容易编排。

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;
    }

组合选择器:

<div>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;
        }

​

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

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;
        }

网页设计中常用的CSS属性

文字或元素的颜色 color

背景颜色 background-color

背景图像 background-image

字体 font-family

文字大小 font-size

列表样式 list

鼠标样式 cursor

边框样式 border

内边距 padding

外边距 margin