day023 html&css
1 Html其他标签
1.1 html的表单标签
HTML 表单用于搜集不同类型的用户输入。简单记就是可以让用户输入信息,获取到这些信息并提交到指定位置;
使用form标签表示表单;
Action:用于指定表单提交的路径;(就是表单的数据交给谁)
Enctype:用于指定表单的提交编码格式;(后面使用,用于文件上传)
Method:用于指定表达的提交方式;(后面使用,用于在服务器中获取表单的数据及乱码处理)
1.1.1 表单项--input(重点)
在表单中,可以收集用户信息的具体标签;例如:输入框,下拉框,多选框,单选框;
在表单项中使用input表示普通的表单项;具体类型有input标签的type属性决定;
Type=”具体值”;
具体值的可用范围:
button 代表一个按钮(需要我们自己绑定事件才有效果)
checkbox 代表一个多选框
file 代表一个文件上传项
hidden 代表一个隐藏域,可以保存我们程序员需要使用的数据
image 代表图片提交按钮
password 代表一个密码框
radio 代表一个单选框;注意,多个单选框的name属性值必须一致,才会认为是一组;
reset 重置按钮
submit 提交按钮(提交效果与image一样,样式不如image好看而已)
text 普通文本
扩展:
Date 可以自动添加一个日期插件;(谷歌浏览器可以使用)
所有表单项的通用属性:
1:name属性,用于将来表单提交的时候,作为参数名使用;必须加,如果不加,这个表单项的值将不会提交;
2:value属性,用于给表单项规定一个默认值;(多选框和单选框必加)
3:disabled=”disabled” 可以控制这个 表单项无效,无效的表单项不会提交数据;
4:checked=”checked” 可以让单选框或多选框默认选中;
1.1.2 表单项--下拉框(重点)
可以让用户选择一个固定的信息;
使用select标签表示.,里面使用option标签表示下拉选项;
格式:
如果里面没有value提交的时候就直接提交元素体，写上value提交的时候就提交value值。
可选择的属性:
Multiple="multiple" 规定可选择多个选项。（使用的时候按住ctrl可以多选）
size ="数字" 规定下拉列表中可见选项的数目。
1.1.3 表单项--文本域
可以输入很多信息;
使用textarea表示文本域:
常用属性:
1.1.4 按钮标签--了解
直接使用button标签,可以也可以出现一个按钮标签,需要在按钮的元素体中添加文字,才会显示到按钮上;
1.2 Html的div标签
Div是html的块标签,块的区域可大可小,完全取决于我们自定义,因此通常需要配合css样式才有效果;
2 CSS
2.1 css概述
Css是层叠样式表(英文全称：Cascading Style Sheets);
可以对html页面中的标签进行统一的样式控制,或个性化控制,也可以配合各种脚本语言,对html的样式进行控制;
2.2 css的语法规则
基本格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器的作用就是选中页面上的html标签,让这些选中的标签使用我们编写的样式;
属性名是css中固定的一堆具体名称;
属性值也是css固定好的一些具体的值;
注意事项:
1: 选择器严格区分大小写;
2: 属性名和属性值不区分大小写;
3: 属性名和属性值之间使用冒号分割,多个键值对之间,使用分号分割,最后一个键值对可以省略分号,建议写上;
4: 属性名都是直接写,属性值如果本身代表的是一个值,由多个单词组成时,必须加引号,其他情况不能加引号;
5: css虽然也是一个编程语言,但是需要配合html才能执行,不能独立运行;
2.3 CSS与html结合的3种方式
1: 标签内样式:
在html的开头标签中,直接使用style="属性名1:属性值1;属性名2:属性值2;"
2: 文档内样式
在head标签中,使用style标签,即可独立的编写样式:
3: 外部样式
(1):单独编写一个后缀名是.css的文件,在文件内,直接编写css代码即可
例如:
选择器{
属性名1:属性值1;
属性名2:属性值2;
...
}
(2):在html页面中使用标签引入已经编写好的css文件到页面中;
注意事项:
如果3种方式对同一个标签的样式控制出现冲突的时候,以就近原则为主;
标签内样式 > 文档内样式 > 外部样式
2.4 css的基本选择器(重点)
基本选择器有:
1:id选择器（不常用，因为以后用的JavaScript的使用，我们一般需要id唯一）
#ID的值{
属性名1:属性值1;
属性名2:属性值2;
...
}
2:标签选择器(元素选择器)
Html的标签名{
属性名1:属性值1;
属性名2:属性值2;
...
}
3:类选择器（常用）
.class的属性值{
属性名1:属性值1;
属性名2:属性值2;
...
}
2.5 Css的扩展选择器(知道)
1:根据标签的属性选择信息
基本选择器[标签的属性名=属性值]{
属性名1:属性值1;
属性名2:属性值2;
...
}
2:根据父标签下选择子标签
基本选择器A 其他选择器B{
属性名1:属性值1;
属性名2:属性值2;
}
意思是：在A选择器的内部选择B
2.6 CSS的属性(知道)
常用属性:
背景相关的:
| background-color |
设置元素的背景颜色。 |
| background |
在一个声明中设置所有的背景属性。 |
文本相关的:
| color |
设置文本的颜色。 |
| text-align |
规定文本的水平对齐方式。 |
字体相关的:
| font-family |
规定文本的字体系列。 |
| font-size |
规定文本的字体尺寸。 |
边框相关的:
| border |
在一个声明中设置所有的边框属性。 |
尺寸相关的:
| width |
设置元素的宽度。 |
| height |
设置元素高度。 |
特殊的用法:
Backgroud:url(“图片路径”) 可以使用图片作为背景
border:像素 线型 颜色
2.7 CSS对html标签的转换操作(了解)
Css中的display属性,可以将html的标签进行行与块的转换,也可以让标签隐藏;
取值:
Block 转成块
Inline 转成行
None 隐藏这个元素
2.8 Css浮动效果(了解)
浮动可以让元素从原始层次浮动到上一个层次,浮动的时候,也可以控制左右上下的元素等;
使用css的Float属性名可以完成浮动效果;
#d2{
/*让div2向右侧浮动*/
float: right;
/*不希望我的右侧有内容*/
clear: right;
} 2.9 CSS盒子模型(框模型)
可以通过padding-top,padding-left....控制具体方向的内边距,同理也可以控制外边距;
3 用户注册页面的案例
3.1 需求
写一个表单页面,使用css样式控制,具体的效果
3.2 技术分析
1:使用div作为最大的背景图片;
2:在大div中,写一个小div,作为表单的背景色;需要使用盒子模型调整距离
3:在小div中写form表单;
4:将表单的每一个表单项添加到表格的td中;
3.3 案例的代码实现