传智播客 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}