静态网页快速学习
网页快速学习好去处 http://www.w3school.com.cn
1. 基本的网页结构
<!DOCTYPE>声明 <html> <head> <!--网页信息--></head> <body> <!--网页内容--> </body> </html>
由于html兼容性很好，因此学习测试时网页可以直接包含元素而不用顾及此结构，方便快捷省事。
2. 注释语法
html文件注释语法 <!-- 注释内容 -->
css文件注释语法
3. 基本元素
html使用标签声明元素，例如图片用<img src="......"></img>，标签要有开头有结束，中间放入你想添加的内容，结束标签在元素类型前加"/"。如果只是单个元素，也可以直接结束，如<img src="......"/>。（"......"表示图片元素的文件位置）
常用元素类型 div(通用块), img(图片), table + tr + th(表格，tr为行，th为列), ul + li(列表，li为列表的单个元素), a(链接，链接地址赋给href属性), p(文字段落)。
3. 直接控制排版样式
一般元素的样式属性可以直接写进该元素的style属性，比如我们声明一个通用块，字体为微软雅黑，字号为18，则为
<div style="font-family:微软雅黑;font-size:18px;">这是第一个通用块元素</div>
注意这句代码的语法，你可以直接把它复制到一个新建的html文件中测试效果。
4. 通过css控制排版样式
当实际构建网页时，元素一般变得很多很复杂，为了剥离复杂性，我们建议把元素的样式写进单独的css文件中，这样会产生一个元素本身和样式的匹配问题，且看如下的代码：
//example.html文件(部分)
<link href="./style.css" rel="stylesheet" type="text/css" />
<div id="box">这是第二个通用块元素</div>
//style.css文件(部分)
#box
{
font-family:微软雅黑;
font-size:18px;
}
元素的id属性在css文件中使用#来匹配，相应的，class属性使用.来匹配，元素类型直接使用名字匹配，具体可以看附件中的css文件。
5. 排版属性
width 宽度，height 高度，left 元素与浏览器左边框的距离，top 上边距；margin 元素与父元素四边框的距离，padding 元素与子元素四边框的距离。
单位一律使用px(像素)，也可使用%(屏幕宽度的百分比)。居中 IE浏览器父元素使用 text-align属性设置为center，非IE浏览器则把子元素的margin-left和margin-right属性设置为auto。
width,height,left,top属性直接赋值即可，text-align属性选择left,center,right，而margin和padding写法较多，拿其中一种举例 " margin:6px 5px 4px 3px; " 四个值分别对应上、右、下、左的边距，大家记着是按顺时针排的就行了。padding和margin写法一样，更多 http://www.w3school.com.cn/css/pr_margin.asp ，更多区别和讲解则可以参考 http://www.w3school.com.cn/css/css_boxmodel.asp 。
6. 边框背景属性
边框背景属性用来调试网页排版非常方便，所以在这里单独拿出来说下。
边框 border，有一种简便的语法参考例子 " border:5px solid #F00; " 从左到右依次指定边框宽度，类型（在此为实心），颜色（可以用red等单词）。
背景 background， 同样举一简单语法参考 " background:red; " 直接指定颜色，也可以是图片，具体及更多语法参考 http://www.w3school.com.cn/css/pr_background.asp 。
附：配套案例文件下载 https://skydrive.live.com/redir?resid=C96C6EC8AD8DCFEA!4793&authkey=!ADxgzMAxbZ1bo4o
