黑马程序员--.Net学习日记——HTML总结

---------------------- 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/