HTML基础知识总结

几个工具：

IETester：多版本IE测试
Expression Web
DreamWeaver  美工页面

XHTML：符合XML标准的HTML。
标签成对出现。比如<br></br>是符合XML的，而<br />是不符合XML的。

1.
属性值：用单引号或者双引号括起来
注释：<!-- -->
特殊字符：<  >  Space   需要转义
<   &lt;  less than
>   &gt;  greater than
空格   &nbsp;  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>