HTML快速入门 - DIV,CSS 布局基础

编程 · 发表于 2013-7-2 18:30:53

一、HTML基本语法

HTML类似XML，页面上的每个节点用一对标签表示，例如

<P>这是段落</P>

复制代码

标签的开始标记与结束标记都是放在一对尖括号中，不同的是结束标记多一个正斜杠（/）

不要与反斜杠（\）弄混淆，实际上除了windows的路径分隔符、转义字符串里的转义符 - 其他地方基本都是使用正斜杠（例如：网址、网页中的路径分隔符、或者表示除法、分隔命令行参数，以及HTML标签结束标记等等）。

HTML的一些常用标签请查看手册：
http://bbs.aardio.com/doc/html/dhtml/objects.html

表示图片的 <img> 表示换行的 <br> 则没有结束标记 - 这种叫空标签，在XML里空标签必须要补一个斜杠，但HTML里没有这规定，所以HTML比较随意没有XML那样严格的规范，也正因为如此，有了接近XML的XHTML1.0 规范，这个XHTML当年曾经很火甚至有人断言HTML5不会出生，但是后来越搞越复杂到不向下兼容的XHTML2.0终于被HTML5击败（HTML5向下兼容HTML4.0, XHTML1.0).

HTML标签的开始标记内部还可以使用一个或多个键值对表示节点的属性，例如:

<img src="图片路径" width="100" height="100">

复制代码

HTML 属性名可以使用除空白字符,双引号,单引号,'/','>','\0'以外的所有可打印字符，HTML 的属性值可选包含在一对双引号、或单引号内,注意不要使用有歧义的表示即可，例如值包含单引号就应当放在一对双引号内。所以类似下面这样的写法虽不常见但仍然是合法的：

<div ${test}=123>测试</div>

复制代码

HTML中标签名、属性名、属性值都是忽略大小写的，但因为浏览器众多实现上有细节的差异，为保持良好的兼容性，应当都使用小写。

二、HTML标准规范、DOCTYPE

说到HTML标准，实际上目前兼容性最好的还是HTML4.0以及XHTML1.0,
编写一个网页使用什么样的标准一般在HTML的第一行使用 <!doctypel> 声明，这个语句比较复杂，例如HTML4.0兼容标准的声明为

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

复制代码

注意开始的尖括号后面有一个感叹号 - 表示这是一个声明语句而不是普通节点，
而紧接在DOCTYPE后的HTML表示文档的根节点是HTML, 后面是指明使用什么规范。

如果不想搞太复杂，可以写一个最简单的DOCTYPE声明（完全不写会导致IE以IE5的怪异模式显示网页）：

<!doctype html>

复制代码

现在很多编辑器（例如notepad++)支持 zencoding或emmet，可以比较快的生成一个简单的包含DOCTYPE的HTML代码，几个常用的缩写如下：

html:4s 严格的HTML4.0
html:4t 兼容性的HTML4.0(就是要求不那么严格）
html:xt 使用XHMTL1.0标准

三、HTML文档

一个完整的的HTML页面源码如下：

一个标准的HTML页面包含几个必要的标记
<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 布局。

编程 · 发表于 2013-7-2 18:31:47

块节点中的兄弟节点默认是自上向下流动的，我们来看一个例子：

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=555;scroll=1;right=511;text="自上向下流动的块节点" )
winform.add( )
/*}}*/
import web.form;
var wb = web.form( winform );
wb.html = /**
<html>
<head>
<title>Document</title>
<style type="text/css">
div#header {
border:red 1px solid;
background:#cccccc;
margin-bottom:20px;
}
div#main-box{
border:blue 1px solid;
margin-top:20px;
padding:10px;
}
div#main-box div{
border:green 1px solid;
width:100%;
height:100px;
overflow:hidden;//IE6下要加上这句
}
div#main-box div#a{
width:200px;
height:150px;
}
</style>
</head>
<body>
<div id="header"> 这是标题 </div>
<div id="main-box">
<div id="a" >a </div>
<div id="b" >b </div>
<div id="c" >c </div>
<div id="d" >d</div>
</div>
</body>
</html>
**/
winform.show();
win.loopMessage();

复制代码

运行上面的代码，你会看到这样的显示效果：

红色边框的 #header 节点在上面，
蓝色边框的 #main-box 节点在下面，
他们自上向下流动，注意上下两个块节点之间的上下外边距会自动合并，#header 节点的下边距是20像素，#main-box的上边距是10像素，那他们之间的边距不是总和的30像素，而是重叠后的最大边距20像素。

#a,#b,#c,#d 四个绿色边框的兄弟节点也是自上向下流动的，不论他们是多大的宽度，始终占据独立的一行。

编程 · 发表于 2013-7-2 18:31:54

块节点如果在CSS的float属性中指定浮动属性，
那么他会脱离默认的垂直向下的显示流，向左或向右横向浮动（这样就可以水平布局块节点了）

我们把a节点向右浮动看看效果，也就是在CSS代码中加上：

div#a{ float:right; }

复制代码

完整源码如下：

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=555;scroll=1;right=511;text="自上向下流动的块节点" )
winform.add( )
/*}}*/
import web.form;
var wb = web.form( winform );
wb.html = /**
<html>
<head>
<title>Document</title>
<style type="text/css">
div#header {
border:red 1px solid;
background:#cccccc;
margin-bottom:20px;
}
div#main-box{
border:blue 1px solid;
margin-top:20px;
padding:10px;
}
div#main-box div{
border:green 1px solid;
width:100%;
height:100px;
overflow:hidden;//IE6下要加上这句
}
div#main-box div#a{
width:200px;
height:150px;
float:right;
}
</style>
</head>
<body>
<div id="header"> 这是标题 </div>
<div id="main-box">
<div id="a" >a </div>
<div id="b" >b </div>
<div id="c" >c </div>
<div id="d" >d</div>
</div>
</body>
</html>
**/
winform.show();
win.loopMessage();

复制代码

运行后的效果如下：

注意上图中的 #a 节点漂移到了页面的右侧，他脱离了原来的文档流，
而他后面的其他节点就完全当他不存在，继续自管自的从下向下流动，在一些浏览器中 #b #c 会显示在#a的后面，也就是 #a不但是浮动到了右侧也浮动到了他们的上面（这时候可以通过指定左侧块节点的右边距 - 也就是 margin-right 避免重叠）

注意 #a虽然是浮动的节点，但是他不会影响他前面的节点、以及他的父亲节点（这就象孙悟空逃不出如来佛的手掌心），
而对于他后面的节点，他无视他们的存在，

如果你希望 #c节点在 #a节点的下面，那么就要在 #c的CSS属性中加上 clear:right 清除右浮动，也就是不允许任何节点浮动到他的右侧，在上面的代码里加下下面的CSS代码：

div#c{
clear:right;/*不允许其他节点浮动到他右边*/
}

复制代码

修改以后运行网页，显示效果如下：

其他清除浮动的方法：

也可以在浮动节点的父节点CSS中应用 diaplay:inline-block; 或设置 overflow（值为visible以外的值,IE6必须触发haslayout才能生效），position:absolute,float 等使父节点产生独立的包裹性以清除子节点的浮动影响。

编程 · 发表于 2013-7-2 18:31:57

内联节点默认是自左向右水平流动的，看一个示例代码：

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=555;scroll=1;right=511;text="自左向右流动的内联节点" )
winform.add( )
/*}}*/
import web.form;
var wb = web.form( winform );
wb.html = /**
<!doctype html>
<html>
<head>
<title>Document</title>
<style type="text/css">
div#header {
border:red 1px solid;
background:#cccccc;
margin-bottom:20px;
}
div#main-box{
border:blue 1px solid;
margin-top:20px;
padding:10px;
}
div#main-box span{
border:green 1px solid;
width:50px;
height:50px;
}
span#a{
width:50px;
height:150px;
}
</style>
</head>
<body>
<div id="header"> 这是标题 </div>
<div id="main-box">
<span id="a" >a </span>
<span id="b" >b </span>
<span id="c" >c </span>
<span id="d" >d</span>
</div>
</body>
</html>
**/
winform.show();
win.loopMessage();

复制代码

显示效果如下：

可以看到，内联节点 #a,#b #c #d 都是span，自左向右流动。
内联节点默认的是不能指定高度的（在IE6怪异模式下可以指定宽度），这称为内联块节点( display: inline-block )

内联节点也可以指定边框边距这些 - 如果是纯粹的inline（内联）节点垂直方向上高度有关的外观属性会受制于行距高度，而inline-block（内联块）可以不受行距高度限制，而且内联节点也可以向左或向右浮动，常见的如文本环绕图片的效果就是使用浮动属性实现，示例如下：

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=555;scroll=1;right=511;text="向各浮动的内联节点" )
winform.add( )
/*}}*/
import web.form;
var wb = web.form( winform );
wb.html = /**
<!doctype html>
<html>
<head>
<title>Document</title>
<style type="text/css">
div#header{
/*rgb函数用于表示颜色,参数可以是百分比或0到255之间的数值*/
background:rgb(255,122,122);
}
div#main-box{
/*蓝色可以用 #0000FF表示,也可以用 rgb(0,0,255)表示,或简写为blue*/
border:blue 1px solid;
margin-top:20px;
padding:10px;
width:300px;
}
div#main-box img{
float:right;
}
</style>
</head>
<body>
<div id="header"> 这是标题 </div>
<div id="main-box">
<img src="http://bbs.aardio.com/static/image/common/logo.png" >
aardio虽然小，但是支持的接口很丰富，可支持标准DLL的 stdcall，cdecl，thiscall，fastcall，regparm(n) 等调用约定，可以支持C++导出的类对象，可以支持com静态动态双接口，象VBS一样原生支持com对象。aardio是绿色软件,下载包不到7MB，不需要安装解压缩即可直接使用,双击打开下载的压缩包
</div>
</body>
</html>
**/
winform.show();
win.loopMessage();

复制代码

显示效果如下：

可以看到 img 节点通过在CSS里指定 float:right; 向右浮动，然后本该水平流动的文本环绕在他周围。

编程 · 发表于 2013-7-2 20:42:45

CSS属性里批定 position:static，将按默认的文档流定位节点，
也就是前面几节讲的块节点自上向下流，而内联节点自左向右流动。
所以这是节点的默认position属性（不指点position属性他的值默认就是 static ）

看一个简单的源码。

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=555;scroll=1;right=511;text="按默认文档流定位( position:static )" )
winform.add( )
/*}}*/
import web.form;
var wb = web.form( winform );
wb.html = /**
<html>
<head>
<style type="text/css">
div#main-box{
border:blue 1px solid;
margin-top:20px;
padding:10px;
width:300px;
}
div#main-box div{
border:green 1px solid;
width:100%;
height:100px;
}
</style>
</head>
<body>
<div id="main-box">
<div id="a" >a </div>
<div id="b" >b </div>
<div id="c" >c </div>
<div id="d" >d</div>
</div>
</body>
</html>
**/
winform.show();
win.loopMessage();

复制代码

块节点自左上角开始，自上向下流动，显示效果如下：

编程 · 发表于 2013-7-2 20:52:53

如果在节点的CSS属性中指定 position:absolute; 则节点会脱离默认的文档流并使用绝对坐标定位。
绝对坐标指的是：left指定左坐标,top指定顶坐标,right指定右坐标,bottom指定底坐标，如果仅指定right,top属性则是相对于最近的一个position为relative或absolute的父元素进行定位（默认为 body 节点，也就是相对于页面左上角定位）。

使用前面一节的示例代码，我们为 div#main-box 节点加上下面的CSS:

div#main-box {
position:absolute;/*使用绝对定位*/
right:120px;/*右坐标为120像素*/
top:50px;/*顶坐标为50像素*/
}

复制代码

修改后的完整源码如下：

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=555;scroll=1;right=511;text="绝对定位( position:absolute )" )
winform.add( )
/*}}*/
import web.form;
var wb = web.form( winform );
wb.html = /**
<html>
<head>
<style type="text/css">
div#main-box{
border:blue 1px solid;
margin-top:20px;
padding:10px;
width:300px;
position:absolute;/*使用绝对定位*/
right:120px;/*右坐标为120像素*/
top:50px;/*顶坐标为50像素*/
}
div#main-box div{
border:green 1px solid;
width:100%;
height:100px;
}
</style>
</head>
<body>
<div id="main-box">
<div id="a" >a </div>
<div id="b" >b </div>
<div id="c" >c </div>
<div id="d" >d</div>
</div>
</body>
</html>
**/
winform.show();
win.loopMessage();

复制代码

显示效果如下：

注意absolute并不一定是相对body的左上角定位，他会向上查找最近的一个position为relative或absolute的父元素作为坐标参考点( HTMLayout、IE怪异模式下overflow样式属性的值为 hidden | auto | scroll 的父元素也会作为参考点 - 并且会隐藏溢出的绝对定位元素 )。请运行下面的示例代码：

import win.ui;
/*DSG{{*/
winform = win.form(text="position定位测试";right=599;bottom=399;)
/*}}*/
import web.layout;
wbLayout = web.layout(winform);
wbLayout.html =/***
<div id="a" style = "position:relative;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>
</div>
***/
winform.show();
win.loopMessage();

复制代码

运行后的效果如下：

注意看蓝色边框的#b 节点是相对红色边框 #a节点定位（ #a节点的样式中定义了 position:relative ），并非是相对body节点。如果去掉 #a节点样式中的 position:relative 结果就不一样了。代码如下：

<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>
</div>

复制代码

这时候#b节点就是相对body定位，运行后的效果如下：

position:absolute 还带来一个好处，使用 absolute定位的节点在样式中也可以使用 z-index 调整节点在Z轴上的顺序（也就是节点的前后重叠顺序、或者叫Z序），而 psition:static 的节点不支持 z-index。

编程 · 发表于 2013-7-2 21:00:21

节点的CSS属性里指定 position:relative 则使用相对定位，
相对定位与绝对坐标类似，可以使用 left,top,bottom,right 等指定坐标，不同的是节点并不会脱离原来的文档流，坐标只是相对他原来应当显示的位置。

注意，所谓相对坐标 - 不是指相对于他父节点的坐标值。
一个节点在标准的文档流中，他默认应当显示在哪个位置 - 这就是相对坐标的参考值。

请看下面的示例：

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=555;scroll=1;right=511;text="相对定位( position:relative )" )
winform.add( )
/*}}*/
import web.form;
var wb = web.form( winform );
wb.html = /**
<html>
<head>
<style type="text/css">
div#main-box{
border:blue 1px solid;
margin-top:20px;
padding:10px;
width:300px;
}
div#main-box div{
border:green 1px solid;
width:100%;
height:100px;
position:relative ;/*使用相对定位*/
right:20px;/*相对于自己原来的位置偏移20像素*/
top:50px;/*相对于自己原来的位置偏移50像素*/
}
</style>
</head>
<body>
<div id="main-box">
<div id="a" >a </div>
<div id="b" >b </div>
<div id="c" >c </div>
<div id="d" >d</div>
</div>
</body>
</html>
**/
winform.show();
win.loopMessage();

复制代码

运行代码后网页显示效果如下：

节点首先按标准的文档流移动到他本应该显示的位置，然后再相对移动指定的坐标值。
相对坐标并不是相对父节点的坐标，而是相对他自己原来位置的坐标 - 这是容易混淆的一个地方。

如果需要相对父节点的进行绝对定位，那就要象上一节所讲的，首先把父节点的样式加上 position:relative; 然后把自己的样式加上 position:absolute;

编程 · 发表于 2013-7-2 21:06:33

HTMLayout支持上面几节演示的标准的HTML布局方式。
另外HTMLayout还可以使用CSS属性flow自定义一个节点内部的布局方式- 即HTMLayout的布局更加强大和自由。

HTMLayout 垂直/水平布局
flow: vertical; /* 将容器内部变为垂直布局. (标准的布局模式) */
flow: horizontal; /* 将容器内部变为横向布局. */

HTMLayout 垂直/水平流式布局
flow: v-flow; /* 将容器内部变为垂直流式布局. */
flow: h-flow; /* 将容器内部变为水平流式布局. */

详细的请参考：HTMLayout flow布局样式

freemanol · 发表于 2013-7-3 09:12:43

谢谢版主
辛苦了

wynn_li · 发表于 2013-7-3 16:50:07

感谢楼主分享，很好的教程。

万事发↑新一天 · 发表于 2013-7-5 16:29:54

教程更详细了，多谢整理分享

啊东是一个新手 · 发表于 2013-7-17 17:27:18

记下先，要学习

红尘痴迷 · 发表于 2013-7-18 14:02:00

顶起，之后好好学习，希望有一天，我也能写出点东西

sanzaijie · 发表于 2013-7-24 15:04:21

详细,多谢楼主分享~~!!

yyy9596 · 发表于 2013-12-9 23:52:51

相当完整

wisewen · 发表于 2013-12-20 14:12:44

多谢了，正在学习

zjutsxj · 发表于 2014-7-17 09:30:22

绝对好东西。收藏着。

821165254 · 发表于 2015-2-5 16:18:39

值得学习！

a31072456 · 发表于 2015-5-6 11:29:28

很详细的教程

		自动登录	找回密码
密码			注册会员

HTML快速入门 - DIV,CSS 布局基础

评分

评分

评分