一、HTML基本语法HTML类似XML，页面上的每个节点用一对标签表示，例如
源代码 [ HTML ]
标签的开始标记与结束标记都是放在一对尖括号中，不同的是结束标记多一个正斜杠（/） -
不要与反斜杠（\）弄混淆，实际上除了windows的路径分隔符、转义字符串里的转义符 - 其他地方基本都是使用正斜杠（例如：网址、网页中的路径分隔符、或者表示除法、分隔命令行参数，以及HTML标签结束标记等等）。
HTML的一些常用标签请查看手册：
http://bbs.aau.cn/doc/html/dhtml/objects.html表示表示图片的 表示换行的
则没有结束标记 - 这种叫空标签，在XML里空标签必须要补一个斜杠，但HTML里没有这规定，所以HTML比较随意没有XML那样严格的规范，也正因为如此，有了接近XML的XHTML1.0 规范，这个XHTML当年曾经很火甚至有人断言HTML5不会出生，但是后来越搞越复杂到不向下兼容的XHTML2.0终于被HTML5击败（HTML5向下兼容HTML4.0, XHTML1.0).
HTML标签的开始标记内部还可以使用一个或多个键值对表示节点的属性，例如:
源代码 [ HTML ]
<img src="图片路径" width="100" height="100"> |
HTML 属性名可以使用除
空白字符,双引号,单引号,'/','>','\0'以外的所有可打印字符，HTML 的属性值可选包含在一对双引号、或单引号内,注意不要使用有歧义的表示即可，例如值包含单引号就应当放在一对双引号内。所以类似下面这样的写法虽不常见但仍然是合法的：
源代码 [ HTML ]
HTML中标签名、属性名、属性值都是忽略大小写的，但因为浏览器众多实现上有细节的差异，为保持良好的兼容性，应当都使用小写。
二、HTML标准规范、DOCTYPE说到HTML标准，实际上目前兼容性最好的还是HTML4.0以及XHTML1.0,
编写一个网页使用什么样的标准 一般 在HTML的第一行使用 声明，这个语句比较复杂，例如HTML4.0兼容标准的声明为
源代码 [ HTML ]
注意开始的尖括号后面有一个感叹号 - 表示这是一个声明语句而不是普通节点，
而紧接在DOCTYPE后的HTML表示文档的根节点是HTML, 后面是指明使用什么规范。
如果不想搞太复杂，可以写一个最简单的DOCTYPE声明（ 完全不写会导致IE以IE5的怪异模式显示网页 ）：
源代码 [ HTML ]
现在很多编辑器（例如notepad++)支持 zencoding或emmet，可以比较快的生成一个简单的包含DOCTYPE的HTML代码，几个常用的缩写如下：
html:4s 严格的HTML4.0
html:4t 兼容性的HTML4.0(就是要求不那么严格）
html:xt 使用XHMTL1.0标准
一个完整的的HTML页面源码如下：
一个标准的HTML页面包含几个必要的标记
为其他节点的根节点，而 html一般 包含两个子节点, body节点里面放显示内容，而head节点里放页面的其他参数（例如窗口标题，页面编码等等）
而head节点与body节点又可以包含其他的子节点，子节点又可以包含子节点，就象一棵树：
html是树干是根节点，而head节点包含的内容总是默默无闻的不可见部份，
body则包含所有显示在页面上的内容。
四、盒子模型所有的节点都可以用CSS来定义外观，CSS可以写到节点的style属性里，也可以写到CSS文件里。
所有可显示的节点的显示模式都可以用盒子模型来表示，如下图：
每一个盒子有内容区，有边框（CSS的border属性）
边框里面是内边距（ 或者叫内补白、即CSS的padding属性）
边框外面则是外边距（或者叫外边界，即CSS的margin属性）
当然还有节点的宽度、高度等等，有有的浏览器中宽度高度整的是包含border的节点大小，而在有的浏览器中指的是内容区大小，关于盒子模型请参考文章：
了解CSS 盒子模型五、CSS选择器如果你还不知道什么是CSS选择器，请参考教程
CSS选择器语法详解 以及
HTMLayout快速入门六、块节点、内联节点HTML是以流的模式来显示节点的，所有节点分为两类。
块节点：可以指定高度、宽度（当然也支持上面所说的盒子模型的所有属性,例如内边距、外边距等等），多个块节点总是在页面上自上向下的垂直流动（块节点总是独占一行，默认的两个块节点不会显示在同一行内，无法在同一行内联接）
内联节点：内联节点总是在页面上自左向右的水平流动，一行放不下来才会流动到下一行，内联元素显示在行内，其高度受限于行距的高度，一个典型的例子就是文本，内联节点不能指定垂直方向的外边距（但是可以指定水平方向的外边距）、虽然也可以指定边框以及内边距（但在垂直方向上受行距高度的限制，边框以及内边距在垂直方向上设置的再大也不能改变行距高度，多余的内边距会被忽略，而多余的边框会溢出到上一行或下一行重叠显示），内联节点也不能指定高度（受行距高度的限制），也不能指定宽度（即内联节点在水平方向上只有外边距是正常起作用的，垂直方向上内外边距、边框等都显示不正常受制于行距高度）
块节点通常用来布局、建立网页的框架、调整网页的结构，最重要的块节点就是div节点。
内联节点通常用来显示内容(文本和图像）、最常见的内联节点是span，注意显示图像的img也是内联节点。
在严格的HTML4规范中，body下面只能包含块节点，所有内联节点都应当放到块节点中。
所以div如此重要，甚至HTML布局可以简称 div+css 布局。
块节点中的兄弟节点默认是自上向下流动的，我们来看一个例子：
源代码 [ AAuto ]
003 | var winform = ..win.form( bottom=555;scroll=1;right=511;text="自上向下流动的块节点" ) |
008 | var wb = web.form( winform ); |
运行上面的代码，你会看到这样的显示效果：
红色边框的 #header 节点在上面，
蓝色边框的 #main-box 节点在下面，
他们自上向下流动，注意上下两个块节点之间的上下外边距会自动合并，#header 节点的下边距是20像素，#main-box的上边距是10像素，那他们之间的边距不是总和的30像素，而是重叠后的最大边距20像素。
#a,#b,#c,#d 四个绿色边框的兄弟节点也是自上向下流动的，不论他们是多大的宽度，始终占据独立的一行。
块节点如果在CSS的float属性中指定浮动属性，
那么他会脱离默认的垂直向下的显示流，向左或向右横向浮动（这样就可以水平布局块节点了）
我们把a节点向右浮动看看效果，也就是在CSS代码中加上：
源代码 [ CSS ]
完整源码如下：
源代码 [ AAuto ]
var winform = ..win.form( bottom=555;scroll=1;right=511;text="自上向下流动的块节点" ) |
var wb = web.form( winform ); |
运行后的效果如下：
注意上图中的 #a 节点漂移到了页面的右侧，他脱离了原来的文档流，
而他后面的其他节点就完全当他不存在，继续自管自的从下向下流动，在一些浏览器中 #b #c 会显示在#a的后面，也就是 #a不但是浮动到了右侧也浮动到了他们的上面（ 这时候可以通过指定左侧块节点的右边距 - 也就是 margin-right 避免重叠 ）
注意 #a虽然是浮动的节点，但是他不会影响他前面的节点、以及他的父亲节点（这就象孙悟空逃不出如来佛的手掌心 ），
而对于他后面的节点，他无视他们的存在，
如果你希望 #c节点在 #a节点的下面，那么就要在 #c的CSS属性中加上 clear:right 清除右浮动，也就是不允许任何节点浮动到他的右侧，在上面的代码里加下下面的CSS代码：
源代码 [ CSS ]
修改以后运行网页，显示效果如下：
其他清除浮动的方法：也可以在浮动节点的父节点CSS中应用 diaplay:inline-block; 或设置 overflow（值为visible以外的值,IE6必须触发haslayout才能生效），position:absolute,float 等使父节点产生独立的包裹性以清除子节点的浮动影响。
内联节点默认是自左向右水平流动的，看一个示例代码：
源代码 [ AAuto ]
003 | var winform = ..win.form( bottom=555;scroll=1;right=511;text="自左向右流动的内联节点" ) |
008 | var wb = web.form( winform ); |
显示效果如下：
可以看到，内联节点 #a,#b #c #d 都是span，自左向右流动。
内联节点默认的是不能指定高度的（在IE6怪异模式下可以指定宽度），这称为内联块节点( display: inline-block )
内联节点也可以指定边框边距这些 - 如果是纯粹的inline（内联）节点垂直方向上高度有关的外观属性会受制于行距高度，而inline-block（内联块） 可以不受行距高度限制，而且内联节点也可以向左或向右浮动，常见的如文本环绕图片的效果就是使用浮动属性实现，示例如下：
源代码 [ AAuto ]
var winform = ..win.form( bottom=555;scroll=1;right=511;text="向各浮动的内联节点" ) |
var wb = web.form( winform ); |
显示效果如下：
可以看到 img 节点通过在CSS里指定 float:right; 向右浮动，然后本该水平流动的文本环绕在他周围。
CSS属性里批定 position:static，将按默认的文档流定位节点，
也就是前面几节讲的块节点自上向下流，而内联节点自左向右流动。
所以这是节点的默认position属性（ 不指点position属性他的值默认就是 static ）
看一个简单的源码。
源代码 [ AAuto ]
var winform = ..win.form( bottom=555;scroll=1;right=511;text="按默认文档流定位( position:static )" ) |
var wb = web.form( winform ); |
块节点自左上角开始，自上向下流动，显示效果如下：
如果在节点的CSS属性中指定 position:absolute; 则节点会脱离默认的文档流并使用绝对坐标定位。
绝对坐标指的是：left指定左坐标,top指定顶坐标,right指定右坐标,bottom指定底坐标，如果仅指定right,top属性则是相对于最近的一个position为relative或absolute的父元素进行定位（默认为 body 节点，也就是相对于页面左上角定位）。
使用前面一节的示例代码，我们为 div#main-box 节点加上下面的CSS:
源代码 [ CSS ]
修改后的完整源码如下：
源代码 [ AAuto ]
var winform = ..win.form( bottom=555;scroll=1;right=511;text="绝对定位( position:absolute )" ) |
var wb = web.form( winform ); |
显示效果如下：
注意absolute并不一定是相对body的左上角定位，他会向上查找最近的一个position为relative或absolute的父元素作为坐标参考点。请运行下面的示例代码：
源代码 [ AAuto ]
winform = win.form(text="position定位测试";right=599;bottom=399;) |
wbLayout = web.layout(winform); |
运行后的效果如下：
注意看 蓝色边框的#b 节点是相对红色边框 #a节点定位（ #a节点的样式中定义了 position:relative ），并非是相对body节点。如果去掉 #a节点样式中的 position:relative 结果就不一样了。代码如下：
源代码 [ HTML ]
<div id="a" style = "margin:50px;border:1px red solid;width:300px;height:300px;" > |
<div id="b" style = "position:absolute;left:40px;top:80px;border:1px blue solid;width:100px;height:100px;" >绝对定位</div> |
这时候#b节点就是相对body定位，运行后的效果如下：
position:absolute 还带来一个好处，使用 absolute定位的节点在样式中也可以使用 z-index 调整节点在Z轴上的顺序（ 也就是节点的前后重叠顺序、或者叫Z序 ）， 而 psition:static 的节点不支持 z-index。
节点的CSS属性里指定 position:relative 则使用相对定位，
相对定位与绝对坐标类似，可以使用 left,top,bottom,right 等指定坐标，不同的是节点并不会脱离原来的文档流，坐标只是相对他原来应当显示的位置。
注意，所谓相对坐标 - 不是指相对于他父节点的坐标值。一个节点在标准的文档流中，他默认应当显示在哪个位置 - 这就是相对坐标的参考值。
请看下面的示例：
源代码 [ AAuto ]
var winform = ..win.form( bottom=555;scroll=1;right=511;text="相对定位( position:relative )" ) |
var wb = web.form( winform ); |
运行代码后网页显示效果如下：
节点首先按标准的文档流移动到他本应该显示的位置，然后再相对移动指定的坐标值。
相对坐标并不是相对父节点的坐标，而是
相对他自己原来位置的坐标 - 这是容易混淆的一个地方。
如果需要
相对父节点的进行绝对定位，那就要象上一节所讲的，首先把父节点的样式加上 position:relative; 然后把自己的样式加上 position:absolute;
