我的学习之路_第二十四章_form表单以及div+css

from表单标签+dir+css

【from表单标签】

<from></from>

常用属性: action:提交地址
method:提交的方法
get: 默认提交方式
参数会追加到url后面 ? 参数名=参数值 & 参数名=参数值
数据最大不能超过1kb

post: 没有数据大小限制
不会跟在url后面(网址上面不显示你提交的信息)
较为安全

常用子标签:

input : 输入框

属性: type(有10种)

text:默认输入框 password:密码框
radio:单选框 checkbox:多选框
file:上传文件 checked:默认选项
button:普通按钮 submit:提交按钮
reset:重置按钮 image:图片作为按钮
hidden:隐藏域

点击提交按钮 发生表单提交事件,提交数据
在url后面跟上一个问号?参数名字=参数值
如果有多个参数&连接

select:下拉选择框
常用子标签:option
textarea:文本域标签
属性:rows:行 cols:列

通过属性:1:name属性
1.给单选框,多选框,分组
2.如果你想要提交数据 必须给标签一个name属性,并且必须赋值
2:value属性
1.给按钮类标签起名
2.单选多选框 提交数据的时候,你想要提交自己的想要值 value值 必须赋值

设置默认值:
1.普通文本框,密码框 hidden设置默认值,给一个value属性值 必须赋值
2.给单选框 多选框设置默认值 给它设置一个checked(默认)属性
3.给select下拉选择框设置默认值,给她的子标签optuin设置 selected属性(默认选择)
4.给textarea设置默认值 直接在标签体内写内容即可

【div + css】

div标签: 独占一行 块级标签 必须结合css样式进行渲染

span标签: 行内标签 组织行内元素

引入方式 有一个就近原则

如果用id或class来标记<div>,那么该标签的作用会变得更加有效

● css (美化页面) cascading style sheet : 指层叠样式表

样式: 给html标签添加需要显示的效果
层叠:使用不同的添加方式,给同一个html标签添加样式,最后所有的样式都叠加在一起,共同作用域该标签.

css语法:

选择器{ css属性名:属性值;css属性名:属性值 }

css引入方式:

方式一:内联样式表
通过标签的style属性来引入<xxx style="css属性名:css属性值" />

方式二:内部样式表
通过head的子标签style引入
方式三:外部样式表
通过head的子标签link引入

css选择器:

id选择器
html:需要标签上给一个id属性值 必须赋值 <xxx id= "x"/>
css:以#打头x #x{ ... }
class选择器
html:需要在标签上,给一个class属性 必须赋值<xxx class="y"/>
css:以.打头y .y{ ... }
元素选择器:
html:<xxx />
css:xxx{ ... }
属性选择器:
html:需要在标签上 随意随便给一个属性值 <xxx zzz="z"/>
css:xxx[zzz="z"]{ ... }

伪类选择器:
锚伪类选择器:查看文档,粘贴复制
是一个超链接 (会变色的)
派生选择器
分组选择器
选择器1,选择器2

后代选择器
父类选择器 后代选择器
在父选择器的基础上值 在起后代中选中符合第二个选择器的元素
(就是一个父类中,颜色标注子类,那么这个类中所有相容的子类都会变色)
css属性:
文本属性:颜色 (background-color)对齐方式(text-align) 样式(font-family)

文字属性:大小(font-size) 风格(font-style) 粗细(font-weight)

背景相关属性: 图片背景(background-image)
边框属性: border(大小,样式,颜色)
宽度属性: width
高度属性: height
浮动属性清除浮动属性:

浮动属性格式: float : 属性值 属性值有:left(左浮动) right(右) none(不浮动)

清除浮动属性:clear:属性值 属性值有: left(不能左浮动) right(不右) both(清除左右两边浮动)

display: 控制元素的显示与否 显示样式

display : initial(不显示元素)

盒子模型:
margin: 外边框
padding: 内边框 (可以四个值都设置)