黑马程序员--HTML小结（下）

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

----------------------列表、表格-----------------------
1.列表：<ul><li>灌水区</li><li>版务区</li></ul>
2.还有有序的列表<ol></ol>，用的很少。
3.表格：<table></table>为表格，在内部通过<tr>创建行，<tr>内部通过<td>创建单元格。可以将table的border属性设为0来隐藏表格线。
a.<tr>的属性：align，水平对齐，可选值left、center；valign，垂直对齐，可选值top、middle、buttom。
b.<td>也有align和valign。子标签默认继承父标签的属性，如果自己单独指定了属性，则会覆盖父标签的属性。
c.还可以使用rowspan、colspan进行单元格的合并，用VS可视化功能来做就行。
d.表头的td可以用th代替，这样就会表头粗体、居中显示。
e.建议将表头用<thead>代替<tr>


------------------------表单-------------------------
1.网络表单与填表
2.<form>标签为表单标签。如果要把数据提交到服务器，则需要将<input>、<textarea>、<select>等表单元素放到form中。
<form action="Register.aspx"></form> action="要提交到的页面"
3.<input>是主要的表单元素，type的可选值：submit（提交按钮）、button（普通按钮）、checkbox（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）、password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）。


----------------------input表单详解----------------------
1.submit：点击submit按钮表单就会被提交给服务器，可以设置value属性修改按钮的显示文本。
2.text：size属性为宽度，value为值，maxlength为可以输入的最大长度，readonly只读。<input type="text" readonly="readonly" />
3.checkbox：checked属性表示是否呗选中，<input type="checkbox" checked="checked">checked、readonly等这种只有一个可选值的属性都可以省略属性值。
4.radio：相同name属性的为一组，不同radio设定不同的value值，这样通过指定name的值就可以知道谁被选中了，不用单独的判断。
5.file：使用file，则form的enctype必须设置为multipart/form-data、method属性为POST。
6.image：使用src属性指定图片的地址，用来实现美化的“登录按钮”


-------------------------<select>标签---------------------
1.用来创建类似于WinForm中的ComboBox或者ListBox。
2.如果size属性大于1就是ListBox，否则就是ComboBox。<select multiple="multiple">，那么就是可以多选的ListBox
3.select中的项是<option>，<option>北京</option>还可以设定项的值<option value="1">北京</option>
4.讲一个option设置为选中：<option value="-1">--不选择--</option>，然后编程判断select选中的值如果是-1就认为是不选择。
5.select分组选项，可以使用optgroup对数据进行分组，分组本身不会被选择，无论对于下拉列表还是列表框都使用。
<select name="Province" size="10">
   <optgroup label="山东">
            <option value="1">潍坊</option>
            <option value="2">青岛</option>
            <option value="3">济南</option>
   </optgroup>
        <optgroup label="山东">
            <option value="1">潍坊</option>
            <option value="2">青岛</option>
            <option value="3">济南</option>
   </optgroup>
        <optgroup label="山东">
            <option value="1">潍坊</option>
            <option value="2">青岛</option>
            <option value="3">济南</option>
   </optgroup>
    </select>

-------------------------其他标签----------------------
1.<textarea>多行文本（也是表单元素）：<textarea>文本</textarea>，cols、rows属性表示行数和列数。
2.<label>：在<input type="text">前可一些普通的文本来修饰，但是单机修饰文本的时候input并不会得到焦点，而用label则可以，for属性指定要修饰的控件的ID，<label for="txt1">asdf</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主要有元素内联、页面嵌入和外部引用三种使用方式。CSS是描述元素的皮肤！
a.元素内联，直接将样式写入元素的style属性中，<input type="text" readonly="readonly" style="background-color:Red" />,适用于样式没有可复用性的场合。
b.页面嵌入：在head中加入
1.<style type="text/css">
input {border-color:Yellow,color:Red;}
 </style>
2.表示页面中所有input都是采用指定的样式。适用于复用，减小页面体积
c.外部引用，将css内容写入css后缀的文件
1.textarea{background:Yellow}
2.探后在页面中引用，在head中加入
3.<link type="text/css" rel="Stylesheet" href="s1.css" />
4.适合于多个页面共享css。

-------------------------常见样式-------------------------
1.css计量单位：css中表示宽度、距离时有多种计量单位：px（像素）、30%（百分比）、em（相对单位）等。
2.background-color:Red; 背景颜色； color:文本颜色
3.border-style:soild;边框风格，实线（默认是没有），还有dotted（点）等值；border-color：边框颜色；border-width：边框宽度（默认是0）。
4.display：元素是否显示，可选值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:Red;}对于指定的标签采用统一的样式。
3.class选择器：以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格。
样式名称开头加"."；
.waring{background:Yellow;}
.hightlight{font-size:xx-large;cursor:help;}
<table><tr><td class="hightlight">aaa</td><td class="waring">bbb</td><td class="hightlight waring">ccc</td></tr></table>
》多个样式中间用空格隔开
》冲突的style覆盖class


-------------------------标签+class选择器------------------------
1.class选择器也可以针对不用的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。
input.accountno{text-align:right;color:Red;}
label.accountno{font-style:italic;}
<input class="accountno" type="text" value="11111111111111111" />
<label class="accountno">22222222222222222222</label>

-------------------------id选择器-----------------------
为指定id的元素设定样式，id前加#
#username
{
font-size:xx-large;
}
<input id="username" type="text" value="11111111111111" />


style、class可以 同时组合使用。
<input id="username" class="accountno" style="font-size:xx-large" type="text" value="11111111111111111" />


-------------------------更多选择器---------------------
1.关联选择器
P strong{background-color:Yellow;}
表示P标签内的strong标签内的内容使用的样式。
<strong>adfadfadf</strong>
<p><strong>adfadf</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:underline}

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------