我的学习之路_第二十四章_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: 内边框 (可以四个值都设置)