HTML表单
表单的创建
<form method=“get或者post” action=“向何处发送表单数据”> <!-- 创建表单 -->
<input type=“” placeholder=“” name=“” value=“”/> <!– 输入框 -->
属性 type 定义输入框的类型
文本框 type="text“ 密码框 type=“password“
提交框 type=“ submit“ 和 <button>提交按钮</button> 一样
按钮框 type=“button“ 单纯的按钮
重置框 type=“reset”清空的效果
属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
属性 name 必须设置,否则在提交表单时,用户在其中输入的数据不会被发送给服务器
属性 value 值
</form>
Get和Post的区别
Form当中method的post和get的区别?
1. get是从服务器上获取数据,post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4(Internet Information Service 互联网信息服务)中最大量为80KB,IIS5中为100KB
5. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。
什么是CSS
英文全名:cascading style sheet 层叠样式表 WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制, 简单说就是如何修饰网页信息的显示样式。 目前推荐遵循的是W3C发布的CSS3.0. 用来表现XHTML或者XML等样式文件的计算机语言。 1998年5月21日由w3C正式推出的css2.0
CSS的语法
CSS语法注意点
1)每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值;
2)属性必须放在花括号中,属性与属性值用冒号连接。
3)每条声明用分号结束。
4)当一个属性有多个属性值的时候,属性值与属性值不分先后顺序,用空格隔开。
5)在书写样式过程中,空格、换行等操作不影响属性显示。
样式表的创建
行内样式的创建
缺点:1.结构样式没有分离 不利于后期维护 2.样式不能重复使用(推荐不使用)
内部样式的创建
优点: 1、结构样式分离 好维护 2、样式重用 缺点: 只能在一个页面中使用css样式 适合案例书写
外部样式的创建
优点: 1.结构化样式分离,好维护 2.样式重用 多个页面使用 适合整站开发和长页面的书写
Link和import的区别
扩展知识点:link和import之间的区别?
差别1:本质的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。
差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
差别3:兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom(document o bject model文档对象模型 )控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的.
选择器的分类
为什么要用选择器?
要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器
选择器整体分为5大类: 基本选择器、层次选择器、伪类选择器、属性选择器、伪对象(伪元素)选择器
基本选择器
类型选择器(标签选择器) 以文档对象html中的标签作为选择符
1.什么时候用? 想改变某个元素的默认样式时或者统一文档某个元素的显示效果时
2.语法? 标签{属性:属性值;} 例如:div{width:200px;}
Class选择器(类选择器)
1.什么时候用? 想要区分某个标签的时,比如想要区分2个div。
2.语法?<标签 class=“box”></div> .Class名字{属性:属性值;} 例如:.box{width:300px;}
3.Class可以给多个属性值,多个属性值之间用空格隔开。例如:<div class=“box a1 a3”></div>
ID选择器
1.什么时候用?想要区分某个标签的时,比如想要区分2个div。
2.语法? <标签 id=“box1”></div> #ID名字{ 属性:属性值;} 例如:#box1{width:200px;}
3.注意点:ID有唯一性,属性值只能是1个。
通配符
1.什么时候用? 想让所有的标签同时改变样式的时候
2.语法? *{属性:属性值;} 例如: *{margin:0;padding:0;} 清除所有标签自带的间距
群组选择器
1.什么时候用? 当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。
2.语法? 选择器1,选择器2,选择器3{属性:属性值;} 例如: .box,p,#a2{width:300px;}
3.好处:需要使用相同样式的地方只需要书写一次,可以减少代码量,改善CSS代码的结构,提高网页的性能
层次选择器
1. 后代选择器(包含选择器)
A.什么时候用? 想要改变某个父元素下面所有的后代元素(包括儿子,孙子,重孙子.....)的时候
B.语法? 父元素 子元素{} 例如 div p{} .box .a1{}
2. 子选择器
A.什么时候用? 想要改变某个父元素下面所有的儿子元素的时候。
B.语法? 父元素>子元素{} 例如 ul>li{} .box>p{}
3. 相邻兄弟选择器
A.什么时候用? 想要改变某个元素后面紧挨着的元素的时候。
B.语法? 某某1+某某2{} 例如 div+p{}
4. 通用兄弟选择器
A.什么时候用? 想要改变某个元素后面所有的元素的时候。
B.语法? 某某1~某某2{} 例如 div~p{}
CSS的层叠性
CSS层叠性是指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠。
解析规则1:当不同选择符的样式设置有冲突的时候,高权重选择 符的样式会覆盖低权重选择符的样式
解析规则2:相同权重的选择符,样式遵循就近原则:哪个选择符最后定义,就采用哪个选择符样式。
权重