HTML基础知识总结
几个工具：
IETester：多版本IE测试
Expression Web
DreamWeaver 美工页面
XHTML：符合XML标准的HTML。
标签成对出现。比如<br></br>是符合XML的，而<br />是不符合XML的。
1.属性值：用单引号或者双引号括起来
注释：<!-- -->
特殊字符：< > Space 需要转义
< < less than
> > greater than
空格 no-break space
2.<br>与<p> 段落之间有空白。
<br>：换行，行前空白比较小。
<p>：分段，段前有比较大的空白。
3.URL
/ 表示网站根目录
../ 表示父目录
../../ 表示父目录的父目录
./或不写 表示相对当前路径的目录，站内引用最好用相对URL。
<a>的target属性设定为"_blank"可以在新窗口中打开超链接，默认在当前页面打开超链接
<a href="http://www.baidu.com"> 百度</a>
<a name="Last"><a>设置瞄点
<a href="#Last">跳到最后</a>
4.<img>图片标签
alt属性为图片无法显示时的显示的文本
<img src="/Images/123.jpg" height="40%" width="40%" alt="图片无法显示" />
最好指定width和height。因为网页先加载，图片后加载，先占位。
图片缩略图：
<a href="/Images/123.jpg" target="_blank">
<img src="/Images/123.jpg" height="20%" width="20%" />
</a>
这种方式，仍然会下载大图，再由浏览器缩小显示。流量仍然是下载大图不变。
另一种方式：
两张图，分别存储缩略图和大图。先加载缩略图，点击后再请求大图。
5.列表
<ul> un-ordered list 圆点列表，没序号
<ol> ordered list 有序列表，有序号
6.文件选择框：自带“浏览”按钮
<input type="file" />
7.FieldSet 将控件划分一个区域，类似GroupBox效果
8.样式表
CSS（层叠样式表）是用来美化页面的，可以对页面元素进行更精细的设置，样式主要描述原色的字体颜色、背景颜色、边框等。
CSS有三种方式：
（1）元素内嵌
直接将样式写入元素的style属性中。适用于样式没有可复用性的场合。
例子：
<input type="text" value="123"
style="border-style:double; border-color:Yellow; border-width: 3;
background-color:Blue; height: 24px; width: 152px;" />
（2）页面嵌入
在head中加入：
<style type="text/css">
input{border-color:Yellow,color:Red;}
</style>
例子：
<style type="text/css">
input
{
background-color: Red;
border-color: Black;
}
div
{
background-color: Yellow;
}
p
{
background-color: Green;
}
</style>
表示页面中所有input都是采用指定的样式，适合于样式复用，减小页面体积。
（3）外部引用
将css内容写入css后缀的样式文件，然后在页面中引用，在head中加入。
<link type="text/css" rel="Stylesheet" href="s1.css" />
适合于多个页面共享CSS。
（4）常见样式
（a）css计量单位
px（像素） 30%（百分比） em（相对单位）
width；30px
（b）background-color:Red 背景颜色
color:文本颜色
（c） 边框
border-style:solid;
border-color: 边框颜色
border-width:默认为0
（d）display：元素是否显示
可选none（不显示）
inline（显示为内联元素，元素前后没有换行符）
block（显示为块级元素，元素前后会带有换行符）
（e）cursor：鼠标在元素上时显示的光标图标
可选：
cursor：默认光标
pointer：超链接上的手
text：输入Bean
wait：忙沙漏
help：帮助
……
（f）LI不显示圆点
LIST-STYLE-TYPE:none，一般设在li或者ul上
9.div和span
（1）div：层
div类似panel。
<div> </div>将内容放到层中，整体处理，整体移动
div将所有内容包成一个方块。将内容放在一个矩形的区块中，会影响布局
（2）span：块
<span></span>
span只是把一段内容定义成一个整体进行操作，但不影响布局和显示。
10.样式选择器
对于非元素内联的样式需要定义样式选择器，也就是说明样式适合哪些元素。一共有三种CSS选择器：
（1）标签选择器
对于指定的标签采用统一的样式
input{border-color:Yellow;}
（2）class选择器
以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格
样式名称开头要加点（.)
.warming{background:Yellow;}
<div class="warming"><div>
（3）id选择器
为指定id的元素设定样式，id前加#
#username
{
font-size:xx-large;
}
<input id="username" type="text" value="aaaa" />
（4）标签+class选择器
class选择器可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。
input.account{color:Red;text-align:right;}
label.account{color:Blue;text-align:left;}
<input class="account" type="text" value="1111" />
<label class="account">2222</label>
id、style、class可以同时组合使用：
<input id="username" class="account" style="font-size:xx-large type="text" value="12345" />
（5）关联选择器
P strong{background-color:Blue;}
表示P标签内的strong标签内的内容使用的样式。
（6）组合选择器
同时为多个标签设定一个样式
h1,h2,h3,input{background-color:green;}
（7）伪选择器
为标签的不同状态下设定不同的样式
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}
上面这个模板一般是写死的，link.css ，同一个项目内共享CSS，所有超链接都一样。
11.样式选择器优先级
内联样式会覆盖标签样式。
<div style="background:Yellow;"></div>