【form表单与CSS简介】

文章目录

      • HTML:form表单
      • Name 属性
      • 表单包含表单元素
      • CSS简介:
      • CSS选择器
        • 基本选择器:
        • 组合选择器:
        • 分组与嵌套:
        • 伪类选择器,
      • 网页设计中常用的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 方法(GETPOST):

<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元素有很多种形态,根据不同的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
用于区分具体数据含义

  1. select标签:下拉框
<select name="province" id="">
            <option value="BJ">北京option>
            <option value="SH">上海option>
            <option value="SZ">深圳option>
   select>

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

  1. 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.语法注释

/*注释内容*/
/*
 多行注释内容
 多行注释内容
*/
  1. 多种引入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>p1p>
	div>
	<p>p2
		<span>span1span>
	p>
	<span>span2span>
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

你可能感兴趣的:(web前端,html5,css,前端)