文章目录
- HTML:form表单
- Name 属性
- 表单包含表单元素
- CSS简介:
- CSS选择器
- 基本选择器:
- 组合选择器:
- 分组与嵌套:
- 伪类选择器,
- 网页设计中常用的CSS属性
HTML:form表单
表单:用于搜集不同类型的用户输入
<form>
.
form elements
.
</form>
-
action属性:控制数据的提交地址。
方式1:写全路径
action=“http://www.aa7a.cn/user.php”
方式2:写后缀(自动补全IP和PORT)
action=“user.php”
方式3:不写(朝网页所在的地址提交)
action=“”
‘’‘URL:统一资源定位符(网址)’‘’ -
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元素,单选框,复选框,提交按钮等等。
- <input>元素,重要的表单元素。input元素有很多种形态,根据不同的type属性,常见的type属性如下:
类型 | 描述 |
---|---|
text | 正常展示的普通文本 |
password | 密文展示 |
radio | 单选可以通过添加checked="checked"设置默认值 ps:如果属性名和属性值相同 可以简写checked |
submit | 触发form表单提交数据的动作 |
date | 日历展示 |
checkbox | 多选 |
邮箱格式数据 | |
file | 文件数据 可以通过添加multiple属性控制获取单个还是多个文件 |
reset | 重置页面填写的数据 |
botton | 普通按钮默认没有任何的功能 |
input标签中有两个非常重要的属性
1.name属性
类似于字典的key(前端程序员写)
2.value属性
类似于字典的value(用户自己传)
如果标签是选择类型的 那么还需要前端程序员自己填写value
用于区分具体数据含义
- select标签:下拉框
<select name="province" id="">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="SZ">深圳</option>
</select>
一个个的下拉选项是一个个option标签
默认是单选 也可以添加multiple变成多选
- 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.语法注释
/*注释内容*/
/*
多行注释内容
多行注释内容
*/
- 多种引入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
最后
以上就是简单茉莉最近收集整理的关于【form表单与CSS简介】的全部内容,更多相关【form表单与CSS简介】内容请搜索靠谱客的其他文章。
发表评论 取消回复