注释只能是 ，不能是//
/* 注释内容 */
html中注释则是<!--注释的内容--> ，千万要注意。先看自己写的代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
5 <title>CSSeasy.com example page</title>
6 <style type="text/css">
7 /*
8 You are allowed to do whatever you want with this layout. Though I would be pleased if you placed a link on your site to csseasy.com or to profit42.com (best "blog about hacking" ever). Donations are also welcome: paypal@profit42.com (or follow the donation button on csseasy.com)
9 */
10
11 body {
12 width:750px;
13 margin:0 auto;
14 margin-top:30px;
15 }
16
17
18
19 /* ----- HEADER ----- */
20
21
22
23 #header {
24 width:750px;
25 height:150px;
26 background-color:#333;
27 }
28
29 /* FAUX LAYOUT WRAPPER */
30
31
32
33 /*
34 This div is optional: When you delete it the navigation bar and the content block won't have the same size when one of them has a larger height then the other. I recommend you to leave this faux layout wrapper here.
35 这里的div可写可不写，但是当你不写是。导航条和内容区域不会有相同的尺寸（当其中一个比另一个高时）。我推荐你保留这个
36
37 IMPORTANT: In order to make this work you have to download http://csseasy.com/layouts/fixed/background_3.gif (copy past in your address bar) and place it in the same folder as this html file. DON'T HOTLINK to this file.
38 这是背景图片。*/
39
40 #wrapper{
41 width:750px;
42 background:url(background_3.gif) repeat-y ;/* WARNING: IF YOU CHANGE THE COLORS OF THE LAYOUT YOU HAVE TO CHANGE THIS IMAGE! */
43 overflow:auto;/*use firefox guys.we only need this line because if ie isn't reading code properly*/
44 margin-top:10px;/*与header的距离*/
45 }
46
47 /*------------navigation------*/
48 #navigation{
49 width:200px;
50 min-height:500px;
51 height:auto !important;/*for modern browsers */
52 height:500px;/* for ie5.x and ie6*/
53 background-color:#333;
54 float:left; //不加float后果很严重，nav在上，content在下，而不是对齐
55 }
56
57 /***********main content *******/
58 #content{
59 margin-left:210px;/*为什么 ，是与整个warpper比较的*/
60 width:540;/*750-210=540*/
61 min-height:500px;
62 height:auto;
63 height:500px;
64 background-color:#333;
65
66 }
67
68 /*--------------footer--------*/
69 #footer{
70 margin-top:10px;
71 width:750px;
72 height:100px;
73 bakcground-color:#333333;
74 }
75
76 </style>
77 </head>
78 <body>
79 <div id="header">
80 </div>
81 <div id="wrapper">
82 <div id="navigation"></div>
83 <div id="content"></div>
84 </div>
85 <div id="footer">
86 </div>
87 </body>
88 </html>
保存时竟然出现这种事
文档的当前编码不能正确保存文档内的所有字符，可能需要改为UTF-3或其他支持
本文档的特殊字符的编码。经查证，确实有很多中文字符，改为
在<head> 加入如下：
charset=iso-8859-1是西欧的编码，代表说明网站是采用的编码是英文；
charset=gb2312代表说明网站是采用的编码是简体中文；
charset=utf-8代表世界通用的语言编码；
charset=big5代表说明网站是采用的编码是繁体中文；
charset=euc-kr代表说明网站是采用的编码是韩文；
......等等有很多编码。
最常用到的是charset=gb2312、charset=iso-8859-1和charset=utf-8
charset=utf-8这个编码可以用到中文、韩文、日文等世界上所有语言编码上。
下面讲讲这几个的区别：
字符集与编码
各个国家和地区所制定的不同 ANSI 编码标准中，都只规定了各自语言所需的“字符”。比如：汉字标准（GB2312）中没有规定韩国语字符怎样存储。这些 ANSI 编码标准所规定的内容包含两层含义：
1. 使用哪些字符。也就是说哪些汉字，字母和符号会被收入标准中。所包含“字符”的集合就叫做“字符集”。
2. 规定每个“字符”分别用一个字节还是多个字节存储，用哪些字节来存储，这个规定就叫做“编码”。
各个国家和地区在制定编码标准的时候，“字符的集合”和“编码”一般都是同时制定的。因此，平常我们所说的“字符集”，比如：GB2312, GBK, JIS 等，除了有“字符的集合”这层含义外，同时也包含了“编码”的含义。
“UNICODE 字符集”包含了各种语言中使用到的所有“字符”。用来给 UNICODE 字符集编码的标准有很多种，比如：UTF-8, UTF-7, UTF-16, UnicodeLittle, UnicodeBig 等。
1、ISO-8859-1：
最简单的编码规则，每一个字节直接作为一个 UNICODE 字符。比如，[0xD6, 0xD0] 这两个字节，通过 iso-8859-1 转化为字符串时，将直接得到 [0x00D6, 0x00D0] 两个 UNICODE 字符，即 "?D"。
反之，将 UNICODE 字符串通过 iso-8859-1 转化为字节串时，只能正常转化 0~255 范围的字符。
2、GB2312,BIG5,Shift_JIS,ISO-8859-2
把 UNICODE 字符串通过 ANSI 编码转化为“字节串”时，根据各自编码的规定，一个 UNICODE 字符可能转化成一个字节或多个字节。
反之，将字节串转化成字符串时，也可能多个字节转化成一个字符。比如，[0xD6, 0xD0] 这两个字节，通过 GB2312 转化为字符串时，将得到 [0x4E2D] 一个字符，即 '中' 字。
“ANSI 编码”的特点：
1. 这些“ANSI 编码标准”都只能处理各自语言范围之内的 UNICODE 字符。
2. “UNICODE 字符”与“转换出来的字节”之间的关系是人为规定的。
3、UTF-8,UTF-16,UnicodeBig
与“ANSI 编码”类似的，把字符串通过 UNICODE 编码转化成“字节串”时，一个 UNICODE 字符可能转化成一个字节或多个字节。
与“ANSI 编码”不同的是：
1. 这些“UNICODE 编码”能够处理所有的 UNICODE 字符。
2. “UNICODE 字符”与“转换出来的字节”之间是可以通过计算得到的。
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
下面的footer任然不能显示，然来是background-color 写成了bakcground-color 了，ck调换了，太粗心了。
标准的答案是如下代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
5 <title>CSSeasy.com example page</title>
6 <style type="text/css">
7 /*
8 You are allowed to do whatever you want with this layout. Though I would be pleased if you placed a link on your site to csseasy.com or to profit42.com (best "blog about hacking" ever). Donations are also welcome: paypal@profit42.com (or follow the donation button on csseasy.com)
9 */
10
11 body {
12 width:750px;
13 margin:0 auto;
14 margin-top:30px;
15 }
16
17
18
19 /* ----- HEADER ----- */
20
21
22
23 #header {
24 width:750px;
25 height:150px;
26 background-color:#333333;
27 }
28
29
30
31 /* FAUX LAYOUT WRAPPER */
32
33
34 /*
35 This div is optional: When you delete it the navigation bar and the content block won't have the same size when one of them has a larger height then the other. I recommend you to leave this faux layout wrapper here.
36
37 IMPORTANT: In order to make this work you have to download http://csseasy.com/layouts/fixed/background_3.gif (copy past in your address bar) and place it in the same folder as this html file. DON'T HOTLINK to this file.
38 */
39
40
41 #wrapper{
42 width:750px;
43 background:url(background_3.gif) repeat-y;/* WARNING: IF YOU CHANGE THE COLORS OF THE LAYOUT YOU HAVE TO CHANGE THIS IMAGE! */
44 overflow:auto;/* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
45 margin-top:10px;
46 }
47
48
49 /* ----- NAVIGATION ----- */
50
51
52
53 #navigation {
54 width:200px;
55 min-height:500px;/* for modern browsers */
56 height:auto !important;/* for modern browsers */
57 height:500px;/* for IE5.x and IE6 */
58 background-color:#333333;
59 float:left;
60 }
61
62
63 /* ----- MAIN CONTENT ----- */
64
65
66
67 #content {
68 margin-left:210px;
69 width:540px;
70 min-height:500px;/* for modern browsers */
71 height:auto !important;/* for modern browsers */
72 height:500px;/* for IE5.x and IE6 */
73 background-color:#333333;
74
75 }
76
77
78
79 /* ----- FOOTER ----- */
80
81
82
83 #footer {
84 margin-top:10px;
85 width:750px;
86 height:100px;
87 background-color:#333333;
88 }
89 </style>
90 </head>
91 <body>
92 <div id="header">
93 </div>
94 <div id="wrapper">
95 <div id="navigation">
96 </div>
97 <div id="content">
98 </div>
99 </div>
100 <div id="footer">
101 </div>
102 </body>
103 </html>