传智播客 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>则表示不选择
<textarea>表示多行文本(也是表单元素)属性有cols和rows
<label>使单击修饰文本的时候可以得到焦点，for属性指定
要修饰的控件的id
为被修饰的控件设置一个唯一的id
<label for="ma">婚否</label>
<input id="ma" type="checkbox"/>
将控件划分一个区域：
<fieldset>
<legend>常用</legend>
<input type="text"/>
是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要
描述元素的字体颜色、背景颜色、边框等。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"/>
层：<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}
用来创建类似于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主要有元素内联、页面
嵌入和外部引用三种使用方式
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></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}
