传智播客 Html基础知识学习笔记2

一.<select>标签
用来创建类似于WinForm中的ComboBox(下拉列表)或者LisBox
如果size大于1就是LisBox,否则就是ComboBox;
<select multiple="multiple">表示多选的LisBox
select中的项就是<option>,将一个option设置为选中:
<option selected="selected">111</option>
如果是<option value="-1">不选择</option>则表示不选择

select可以使用欧冠optgroup对数据进行分组


二.其他标签
<textarea>表示多行文本(也是表单元素)属性有cols和rows
<label>使单击修饰文本的时候可以得到焦点,for属性指定
要修饰的控件的id
为被修饰的控件设置一个唯一的id
<label for="ma">婚否</label>
<input id="ma" type="checkbox"/>
将控件划分一个区域:
<fieldset>
   <legend>常用</legend>
   <input type="text"/>

</filedset>


三.CSS(层叠样式表)
是用来美化页面用的,可以对页面元素进行更精细的设置,样式主要
描述元素的字体颜色、背景颜色、边框等。CSS主要有元素内联、页面
嵌入和外部引用三种使用方式
1)元素内联:直接将样式写入元素的style属性中,如:
<input type="text" readonly="readonly" style="background-color:#FF00FF"/>
适用于样式没有可复用性的场合
2)页面嵌入:在head中加入
<style type="text/css">
input{border-color.Yellow.color.Red;}
</style>
表示页面中所有input都是采用指定的样式,适合于样式复用,减小页面体积
3)外部引用,将CSS内容写入css后缀的文件
textarea{background-color:yellow},然后再页面中引用,在head中加入
<link type="text/css" rel="Stylesheet" href="s1.css"/>

适用于多个页面共享CSS 


四.层(div)和块(span)
层:<div></div>将内容放到层中,就是将这些内容当成一个整体进行处理,类似
于WinForm的Panel.
span:div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容
定义成一个整体进行操作,但不影响布局和显示
CSS计量单位:px(像素)、30%(百分比)、em(相对单位)。如:width:50Px
border-style边框风格;border-color边框颜色;border-width边框宽度(默认是0)
display:元素是否显示。可选none(不显示)、block(显示为块级元素,元素前后带有换行符)、
inline(显示为内联元素,元素前后没有换行符)等等
cursor:鼠标在元素上时显示的光标图标,可选值:cursor(默认光标)、pointer(超链接上的手)、
text(输入bean)、wait(沙漏)、help(帮助)等
li不显示圆点:list-style-type:none;一般设在li或者ul上
样式选择器:有三种分别是标签选择器、class选择器、id选择器
标签选择器input{border-color:red;color:blue;}对于指定的标签采用统一的样式
class选择器:定义一个命名的样式,然后在用到它的时候设定元素class属性为样式
的名称,还可以同时设定多个class,名称之间加空格;样式名称开头加"."
.warning{backgroundcolor:red;}
.highlight{font-size:xx-large;cursor:help;}
<table><tr><td class="highlight">aaa</td><td class="warning">bb</td>
<td class="highlight warning">ccc</td></tr><table>
class选择器也可以针对不同的标签,实现同样的样式名对于不同的标签有不同的样式
只要在样式名前加标签名即可,如:
input.warning{backgroundcolor:red;}
label.warning{font-size:xx-large;cursor:help;}
<input class="warning" type="text" value="121212121212"/>
<label class="warning">dwadadssada</label>
id选择器为指定id的元素设定样式,id前加#
#username
{
 font-size:xx-large;
}
关联选择器:p strong{background-color:yellow;}表示p标签内的strong标签内的内容
使用的样式
组合选择器:同时为多个标签设定的一个样式,如h1,h2,input{background-color:red;}
伪选择器:为标签的不同状态设定不同的样式
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}

posted on 2015-04-23 20:11  anyuan9  阅读(117)  评论(0编辑  收藏  举报

导航