---------------------- Windows Phone 7手机开发、Net培训、期待与您交流! ----------------------
黑马程序员--.Net学习日记——HTML总结
表单:
1.<form>标签为表单标签,如果要把数据提交到服务器,则需要将<input>
,<textarea>,<select>等表单元素放到form中.
2.<input>是主要的表单元素,type的可选值:submit(提交按钮),button(
普通按钮),checkbox(复选框),file(文件选择),hidden(隐藏字段),image(图片
按钮),password(密码框),radio(单选按钮),reset(重置按钮),text(文本框).
input表单详解:
1.submit:点击submit按钮表单就会被提交给服务器,中文IE下默认按钮
文本为"提交查询",可以设置value属性修改按钮的显示文本.
2.text:size属性为宽度,value为值,maxlenght为可以输入的最大长
度,readonly只读.<input type="text" readonly/>或者<input type="text"
readonly="readonly"/>
3.checkbox:checkbox属性表示是否被选中,<input type="checkbox"
checked/>或者<input type="checkbox" checged="checked" />
4.radio: 相同name属性的为一组,不同radio设定不同的value值,这样通
过取指定name的值就可以知道谁被选中了,不用单独的判断.
5.file:使用file,则form的enctype必须设置为
mmultipart/form=data,method属性为post
6.image:使用src属性指定图片的地址,用来实现美化的"登陆按钮".
<select>标签
1.用来创建类似于WinForm中的ComboBox或者ListBox.
2.如果size属性大于1就是ListBox.否则就是ComboBox.<select
multiple>或者<select multiple="multiple">,那么就是可以多选的ListBox.
3.select中的项是<option>,<option>北京</option>还可以设定项的值
<option value="1">北京</option>.
4.将一个option设置为选中:<option selected>333</option>或者
<option selected="selected">333</option>就可以将这个项设定为选择项
5.如何实现不选择,添加一个<option value="-1">--不选择--
</option>,然后编程判断select选中的值如果是-1就认为是不选择.
6.select分组选项,可以使用optgroup对数据进行分组,分组本身不会被
选择,无论对于人下拉列表还是列表框都适用.
其他标签
1.<textarea>多行文本(也是表单元素):<textarea>文本
</textarea>,cols,rows属性表示行数和列数
2.<label>:在<input type="text">前可以写普通的文本来修饰,但是单
击修饰文本的时候input并不会得到焦点,而用label则可以,for属性指定要修饰
的控件的id,<label for="txt1">123</label>
3.fieldset:GroupBox效果,将空间划分一个区域,看起来更规整
<fieldset>
<legend>常用</legend>
<input type="text">
</fieldset>
层(div),块(span)
1.层:<div></div>将内容放到层中,就以将这些呢绒当成一个整体进行处
理,比如整体隐藏,整体移动.div非常强大和常用.类似于WinForm的Panel.
2.span:div是将内容放到一个举行的区块中,会影响布局,而span只是把
一段内容定义成一个整体进行操作,但不影响布局,显示.
样式表,css
1.css(层叠样式表)是用来美化页面的,可以对页面元素进行更江西的设
置,样式主要描述元素的字体颜色,背景颜色,边框等.css主要由元素内联,页面
嵌入和外部引用三种使用方式.
(1).元素内联,直接将样式写入元素的style属性中,<input
type="text" readonly="readonly" style="backgroung-color:#ffooff" />,
适用于样式没有可复用性的场合.
(2).页面嵌入:在head中加入
<style type="text/css">
input{border-color:Yellow;color:Red;}
</style>
表示页面中所有的input都是采用指定的样式.适合于样式复用,减小
页面面积
(3).外部引用,将css内容写入css后缀的文件
textarea{background:yellow}
然后在页面中引入,在head中加入
<link type="text/css" rel="Stylesheet" href="s1.css" />
适用于多个页面共享css
常见样式
1.css计量单位:css中表示宽度,距离时有多种计量单位:px(像素),30%(
百分比),em(相对单位)等.
2.background-color:Red;背景颜色;color:文本颜色
3.border-style:soid;边框风格,实线,还有dotted(点)等值;border-
color:边框颜色;border-width:边框宽度
4.displsy:元素是否显示,可选值none(不显示),block(显示为块级元素
,此元素前后会有换行符.),inline(显示为内联元素,元素前没有换行符)等.
5.cursor,鼠标在元素上时显示的光标图标,可选值:cursor(默认光
标),pointer(超链接上的手),text(输入Bean),wait(忙沙漏),help(帮助)等.
6.Li不显示圆点:list-style-type:none;一般设在li或者ul上
样式选择器:
1.对于非元素内联的样式需要定义样式选择器,通俗的说就是这个样式
适合于哪些元素,三种:标签选择器,class选择器和id选择器.
2.标签选择器 input{border-color:Yellow;color:Rea},对于指定的标
签采用统一的样式.
3.class选择器,以定义一个命名的样式,然后用到它的时候设定元素的
class属性为央视的名称,还可以同时设定多个class名称之间加空格.样式名称
开头加"."
标签+class选择器:
class选择器也可以针对不同的标签,实现同样的央视名对于不同的标签
有不同的样式,只要样式明前加标签名即可.
input.accountno{text-align;clor:Red;}
label.accountno{text-align;clor:Red;}
id选择器:
为指定的id的元素设定样式,id前加#
#username
{
font-size:xx-large;
}
<input id="username" type="text" value="aaaaaaaa" />
class,style可以同时组合使用
<input id="username" class="accountno" style="font-size:xx-
large" type="text" value="aaaaaaa" />
更多选择器:
1.关联选择器
P strong{background-color:Yellow}
表示P标签内的内容使用的样式
<strong>asdfghjk</strong>
<p><strong>asdfgh</strong></p>
2.组合选择器,同时为多个标签设定一个样式
H1,H2,input{background-color:Green}
<h1>nihao</h1>
<input type="text" value="test">
伪选择器:
为标签的不同状态设定不同的样式;
A:visited:超链接点击过的样式;A:active:选中超链接似的样
式;A:link:超链接未被访问时的状态;A:hover:鼠标移到超链接时的状态.
A:visited{TEXT-DECORATION:none}
A:active{TEXT-DECORATION:none}
A:link{TEXT-DECORATION:none}
A:hover{TEXT-DECORATION:none}
---------------------- Windows Phone 7手机开发、Net培训、期待与您交流! ----------------------
详细请查看:http://net.itheima.com/