前端day02
1.2 HTML标签, 表单标签
表单:用于采集用户的数据,用于和服务器交互
使用标签:form
*属性:
action:指定提交数据的URL
method:指定提交方式
两种常用提交方式(总共有7种): get、 post
*get:
1.请求参数会在地址栏中显示,封装在请求行中
2.URL的长度(请求参数)是有限制的
3.不安全
*post:
1.请求参数不会再地址栏中显示,会封装在请求体中
2.请求参数的大小没有限制
3.安全
*表单项中的数据提交必须指定其name属性
表单项标签:
*input:可以通过type的属性值,改变元素的展示样式
*type属性:
*text:文本输入框
*password:密码输入框
*radio:单选框
1.name属性值必须一样,才能达到单选效果。
2.需要指定value
*checkbox:复选框
*label:指定输入项的文字描述信息
label的for属性一般会和input 的id属性值一致
*file:文件选择框
*hidden:隐藏域,用于提交一些信息
*button:普通按钮
*image:图片,src指定图片位置
*date:时间
*email:邮箱
*number:数字
*select:下拉列表
*子元素:option:指定列表项
*textarea:文本域
*cols:指定列数
*rows:默认多少行
CSS
页面美化和布局控制
1.概念: 层叠样式表Cascading Style Sheets
层叠:多个样式可以运用到同一个html的元素上,同时生效
2.优点:
1.功能强大
2.将元素展示(html)和样式的控制分离(css)
Css与HTML结合方式:
1.嵌套样式:
<div style="color: blue"> 传智播客</div>
2.内部样式:
<style>
div{
color: chartreuse;
}
</style>
3.外部样式:
1.定义css资源文件
2.在head标签内,定义link标签,引入外部的资源文件
div{
color: aqua;
font-size: 50px;
}
css语法:
*格式:
选择器{
属性名1:属性值1;
属性名1:属性值1;
属性名1:属性值1;
...
}
*选择器:筛选具有相似特征的元素
每一对属性需要使用分号隔开,最后一行属性可以不加
1.基础选择器
1.id选择器:选择具体的id属性值得元素,建议在一个html页面中,id值唯一
*语法:#id属性值{ }
2.元素选择器: 选择具有相同标签名称的元素
*语法:标签名称{ }
*注意:id选择器的优先级高于元素选择器
3.类选择器:选择具有相同class属性的元素
*语法:class属性值{ }
*注意:类选择器优先级高于元素选择器
2.扩展选择器
1.选择所有元素:
*语法: *{ }
2.并集选择器:
选择器1,选择器2{ }
3.子选择器:筛选选择器1元素下的选择器2元素
*语法:选择器1 选择器2 { }
4.父选择器:筛选选择器2父元素选择器1
*语法:选择器1>选择器2{ }
5.属性选择器:选择元素名称,属性名=属性的元素
*语法: 元素名称[ 属性名=‘属性值’]{ }
6.伪类选择器:选择一些元素具有的状态
*语法: 元素:状态{ }
如<a>( 超链接):
link:初始化状态
visited:被访问过的状态
active:正在访问的状态
hover:鼠标悬浮的状态
属性:
1.字体、文本:
1.font-size: 字体大小
2.color:字体颜色
3.text-align:对齐方式
4.line-height:行高
2.背景:
3.边框:
border:设置边框,符合属性
border:1px,solid red;
* border:设置边框,符合属性
4. 尺寸
* width:宽度
* height:高度
5. 盒子模型:控制布局
* margin:外边距
* padding:内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box:设置盒子的属性,让width和height就是最终盒子的大小
|
|