HTML&CSS

HTML
表单标签:
概念:用于采集用户输入数据的。用于和服务器进行交互。
使用的标签:from
属性:
Action:指定提交数据的URL
Method:指定提交的方式
action:指定提交的URL
method:指定提交的方式
分类:一共7种:
get:
请求参数会在地址中显示
url长度是由限制的
get不太安全
post:
请求参数不会在地址中显示
请求参数的大小没有限制
较为安全
表单中的数据要想被提交,必须指定其name属性

表单项标签:
Input:可以通过type属性值,改变元素展示的样式
Type属性:
Text:文本输入框,默认值
Placeholder:指定输入框的提示信息,当输入框的内容发生变化,会走的清空信息。
Password:密码输入框
Radio:单选框(要想)
注意: 1要想让多个单选框实现单选的效果,则多个单选框的name属性必须一样
2一般会给每一个单选框提供一个value属性,指定其被选中后提交的值
3 checked属性,可以指定吗,默认值
Checkbox:复选框
注意:
1.要想让多个单选框实现单选的效果,则多个单选框的name属性必须一样
2一般会给每一个单选框提供一个value属性,指定其被选中后提交的值
3.checked属性,可以指定吗,默认值
File:文本选择框
Hidden:隐藏域,用于提交一些信息。
按钮:
Submit:提交按钮,可以要提交表单
Button:普通按钮
Image:图片提交按钮
Src属性:指定图片的路径
Lable:指定输入项的文字描述信息
注意:lable的for属性一般会和input的id属性值对应,如果对应了。则点击lable区域,会让input输入框获取焦点。
Select:下拉列表:
子元素:option,指定列表项

Textarea:文本域:
Cols:指定列数。每一行有多少字符,
Rows:默认多少行

Select:下拉列表
Textarea:文本域

CSS
概念:层叠样式
层叠:多个样式可以作用在同一个HTML的元素上,同时生效

好处:
功能强大
将内容展示和样式控制分离
降低解耦
让分工协作更容易
提高开发效率

CSS的使用:CSS和HTML结合方式:
内联样式:
在标签内指定style属性指定CSS代码
内部样式:
在head标签内,定义style标签,style标签体内就是CSS 代码
外部样式:
1.定义CSS源文件
2.在head标签内,定义link标签,引入外部的资源文件
注意:1 2 3 方式css作用范围越来越大且第一种不常用

CSS语法:
格式:
选择器{
属性名1,属性值1;
属性名2,属性值2;
。。。。
}

选择器:筛选具有相似特征的元素
注意:每一对属性需要使用;隔开,最后一对可以不加;

选择器:
分类:
基础选择器:
id选择器:选择具体id属性值的元素,建议在HTML页面中id值唯一
语法: #id属性值
元素选择器:选择具有相同标签名称的元素选择器
语法:标签名称{}
注意:类选择器优先级高于元素选择器
类选择器:选择具有相同class属性值的元素
语法:.class属性值{}

扩展选择器:
A:选择所要元素:
语法: * {}
B:并集选择器:
语法:选择器1,选择器2{}
C:子选择器:筛选选择器1元素下的选择器2元素
语法:选择器1 选择器2{}
D:子选择器:筛选选择器1元素下的选择器2元素
语法:选择器1 选择器2{}
E:属性选择器:选择元素名称,属性名=属性值的元素
语法:元素名称[属性名=“属性值”]
F:伪类选择器:选择一些元素具有的状态
语法:元素:状态{ }

属性:
字体:
Font—size:字体大小
Color:文本颜色
Text—align:对齐方式
Line—height:行高
背景:background
边框:
Border:设置边框,符合属性
尺寸: width:宽度
Height:高度
盒子模型:
Margin:外边框
Padding:内边框
默认情况下内边距会影响整个盒子大小
Box-sizing:border—box;设置了盒子的属性,让width和height就是最最盒子大小
Float:浮动
Left
Right

你可能感兴趣的:(前端)