表单标签
form :一定给一个name
input
type(text/password/hidden/checkbox/radio/submit/reset/button/file/image)
button
textarea
select
<form method = "get/post" action = "提交数据的位置">
一个个的表单标签
<input
</form>
表单标签:用于采集用户输入的数据的,用于和服务器的交互
form
action:提交数据的位置,不写的话提交到当前页面
method:指定提交方式俩种 (http:一共七种)
get:
1.请求参数会在地址栏中显示,会封装在请求行中(HTTP协议中讲解)
2.请求参数大小是有限制的
3.不太安全
post:
1.请求参数不会在地址栏中显示,会封装在请求体中(HTTP协议中讲解)
2.请求参数大小是没有限制的
3.相对为安全
4.文件上传请求方式
表单项中的数据要想被提交:必须指定其name属性
***表单项标签
***input:可以通过type属性值,改变元素的展示样式
type属性:
**text:文本输入框
1.palceholder 指定输入框的提示信息,当输入框发生变化,内容会清空
**password:密码输入框
1.palceholder 指定输入框的提示信息,当输入框发生变化,内容会清空
**hidden:用于提交一些信息,隐藏域(页面看不到) 必须有name,value
**ridio:单选框
1.要想实现单选框的效果,则多个单选框的name属性值必须一样。
2.用value当做提交的值,指定其被选中后提交的值
**3.checked默认选中
**checkbox:复选框
1.要想实现单选框的效果,则多个单选框的name属性值必须一样。
2.用value当做提交的值,指定其被选中后提交的值
**3.checked默认选中
reset:重置
**file:文件选择框 文件/图片上传
**submit: 提交按钮
1.提交数据提交到 action指定的位置
**button:普通按钮
一个按钮,配合JS使用
image: 图片按钮
//color:取色器
//date:时间
//datetime - local:时间有分钟
//email:邮箱校验
//number:数字
//label:指定输入项的文字描述信息
//1.label的for属性一般会和input 的id属性值对应,如果对应了，则点击label区域，会让input输入框获取焦点。
select:下拉列表 加上name属性
<option>列表项 加上value值 *** selected默认选中
textarea:文本域 加上name
cols:指定列数,每一行有多少字符
rows:指定行数
button: 按钮
CSS类选择器
div盒子模型
css:页面美化和布局控制
1.概念:层叠样式表Cascding Style Sheets
层叠:多个样式表可以作用在同一个html的元素上,同时生效
2.好处:
1.功能强大
2.内容展示和样式控制分离
降低耦合度
分工协作更容易
提高开发效率
3.css的使用:css/html的使用
1.内联样式: 行内式
<p style = " color:red;"></p>
在标签内使用style属性指定css代码
2.内部样式
<style>
选择器{
color:red;
}
</style>
在<head>标签内定义<style>标签的标签提内容就是css的代码
3.外部样式
<link rel="stylesheet" href="css/a.css">
1.定义css资源文件
2.在<head>标签内定义<link>标签,引入外部的资源文件
行内式: 优先级最高 只能匹配一个标签
内联式: 作用于本页面
外链式: 应用到的所有页面
注意:
1,2,3种方式,css作用范围越来越大
1不常用,2,3常用
css语法格式:
选择器{
属性名:值;
属性名:值;
}
***选择器:筛选具有相似特征的元素
基础选择器
1.*id选择器:选择具体的ID属性值的元素 建议在一个html页面中id唯一
语法: #id名称{}
2.*类选择器: 选择具有相同的class属性值的元素
语法: .class名称{}
注: 类选择器高于元素选择器
3.*元素选择器 :选择具有相同标签的元素
语法: 元素名称{}
注: id选择器高于元素选择器
4.*并列选择器
选择器1,选择器2{}
扩展的选择器
1.全部选择器
语法： *{}
2.并集选择器
语法： 选择器1,选择器2{}
3.*后代选择器 :筛选选择器1下的 选择器2
语法： 选择器1 选择器2{}
4.*子元素选择器 筛选选择器2下的 选择器1 尽量不用div
语法： 选择器1 > 选择器2{}
5.*属性选择器:选择元素名称,属性名=属性值的元素
语法： 元素名称[属性名="属性值"]{}
元素名称[属性名]{}
6.伪选择器:选择一些元素具有的状态
语法： 元素:状态{}
例:<a>
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态
css属性
1.字体 文本
*font-size:字体大小
*color:颜色
text-align:对齐方式
line-height:行高
2.背景
*background - color:背景 复合属性
background:url("图片")
3.边框
*border:边框 复合属性
相框宽度 实线solid 颜色
4.尺寸
width:宽度
height:高度
5.***盒子模型
border 边框
padding 内边距
margin 外边距 auto
默认情况下内边距会影响整个盒子的大小 box-sizing: border-box
***float:浮动
left:左浮动
right:右浮动
|
|
收藏
淘帖
踩
