编写XHTML网页代码的七条规范
一、所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如：
<br /><img height="80" alt="设计之家" src="../images/logo.gif" width="200" />
二、所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
三、所有的XHTML标记都必须合理嵌套
同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：
<p><b></p>/b>必须修改为：<p><b></b>/p>
就是说，一层一层的嵌套必须是严格对称。
四、所有的属性必须用引号""括起来
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如：
<height=80>必须修改为：<height="80">
特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：
<alt="say'hello'">
五、把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
注：以上字符之间无空格。
六、给所有属性赋一个值
XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
<td nowrap> <input type="checkbox" name="shirt" value="medium" checked>
必须修改为：
<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
七、不要在注释内容中使“–”
“–”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的：
<!–这里是注释———–这里是注释–>
用等号或者空格替换内部的虚线。
<!–这里是注释============这里是注释–>
以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。
名词解释:Unicode和UTF-8
一直在编码方面要求不是很高，所以对Unicode和UTF-8也不甚了解。
最近偶然翻到一篇UTF-8的文章，感觉解释的非常繁杂，因此才想到重新写一篇简单易懂一点的。
首先说明一下现在常用的一些编码方案：
1、在中国，大陆最常用的就是GBK18030编码，除此之外还有GBK，GB2312，这几个编码的关系是这样的。
最早制定的汉字编码是GB2312，包括6763个汉字和682个其它符号
95年重新修订了编码，命名GBK1.0，共收录了21886个符号。
之后又推出了GBK18030编码，共收录了27484个汉字，同时还收录了藏文、蒙文、维吾尔文等主要的少数民族文字，现在WINDOWS平台必需要支持GBK18030编码。
按照GBK18030、GBK、GB2312的顺序，３种编码是向下兼容，同一个汉字在三个编码方案中是相同的编码。
2、台湾，香港等地使用的是BIG5编码
3、日本：SJIS编码
如果把各种文字编码形容为各地的方言，那么Unicode就是世界各国合作开发的一种语言。
在这种语言环境下，不会再有语言的编码冲突，在同屏下，可以显示任何语言的内容，这就是Unicode的最大好处。
那么Unicode是如何编码的呢？其实非常简单。
就是将世界上所有的文字用２个字节统一进行编码。可能你会问，2个字节最多能够表示65536个编码，够用吗？
韩国和日本的大部分汉字都是从中国传播过去的，字型是完全一样的。
比如：“文”字，GBK和SJIS中都是同一个汉字，只是编码不同而已。
那样，像这样统一编码，２个字节就已经足够容纳世界上所有的语言的大部分文字了。
Unicode的学名是"Universal Multiple-Octet Coded Character Set"，简称为UCS。
现在用的是UCS-2，即２个字节编码，而UCS-4是为了防止将来２个字节不够用才开发的。UCS-2也称为基本多文种平面。
UCS-2转换到UCS-4只是简单的在前面加２个字节0。
UCS-4则主要用于保存辅助平面，例如Unicode 4.0中的第二辅助平面
20000-20FFF - 21000-21FFF - 22000-22FFF - 23000-23FFF - 24000-24FFF - 25000-25FFF - 26000-26FFF - 27000-27FFF - 28000-28FFF - 29000-29FFF - 2A000-2AFFF - 2F000-2FFFF
总共增加了16个辅助平面，由原先的65536个编码扩展至将近100万编码。
那么既然统一了编码，如何兼容原先各国的文字编码呢？
这个时候就需要codepage了。
什么是codepage？codepage就是各国的文字编码和Unicode之间的映射表。
比如简体中文和Unicode的映射表就是CP936，点这里查看官方的映射表。
以下是几个常用的codepage，相应的修改上面的地址的数字即可。
codepage=936 简体中文GBK
codepage=950 繁体中文BIG5
codepage=437 美国/加拿大英语
codepage=932 日文
codepage=949 韩文
codepage=866 俄文
codepage=65001 unicode UFT-8
最后一个65001，据个人理解，应该只是一个虚拟的映射表，实际只是一个算法而已。
从936中随意取一行，例如：
0x9993 0x6ABD #CJK UNIFIED IDEOGRAPH
前面的编码是GBK的编码，后面的是Unicode。
通过查这张表，就能简单的实现GBK和Unicode之间的转换。
现在明白了Unicode，那么UTF-8又是什么呢？又为什么会出现UTF-8呢？
ASCII转换成UCS-2，只是在编码前插入一个0x0。用这些编码，会包括一些控制符，比如 或 /，这在UNIX和一些C函数中，将会产生严重错误。因此可以肯定，UCS-2不适合作为Unicode的外部编码。
因此，才诞生了UTF-8。那么UTF-8是如何编码的？又是如何解决UCS-2的问题呢？
例：
E4 BD A0 11100100 10111101 10100000
这是“你”字的UTF-8编码
4F 60 01001111 01100000
这是“你”的Unicode编码
按照UTF-8的编码规则，分解如下：xxxx0100 xx111101 xx100000
把除了x之外的数字拼接在一起，就变成“你”的Unicode编码了。
注意UTF-8的最前面３个1，表示整个UTF-8串是由３个字节构成的。
经过UTF-8编码之后，再也不会出现敏感字符了，因为最高位始终为1。
以下是Unicode和UTF-8之间的转换关系表：
U-00000000 - U-0000007F: 0xxxxxxx
U-00000080 - U-000007FF: 110xxxxx 10xxxxxx
U-00000800 - U-0000FFFF: 1110xxxx 10xxxxxx 10xxxxxx
U-00010000 - U-001FFFFF: 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
U-00200000 - U-03FFFFFF: 111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
U-04000000 - U-7FFFFFFF: 1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
Unicode编码转换到UTF-8,简单的把Unicode字节流套到x中就变成UTF-8了。
HTML 和 XHTML的区别
这篇文章主要阐述 HTML 和 XHTML 的区别。简单来说，XHTML 可以认为是 XML 版本的 HTML，为符合 XML 要求，XHTML 语法上要求更严谨些。
以下是 XHTML 相对 HTML 的几大区别：
XHTML 要求正确嵌套
XHTML 所有元素必须关闭
XHTML 区分大小写
XHTML 属性值要用双引号
XHTML 用 id 属性代替 name 属性
XHTML 特殊字符的处理
XHTML 要求正确嵌套
以下是正确的嵌套：
<p>设计之家<strong>更新速度最快</strong>。</p>
以下是错误的嵌套：
<p>设计之家<strong>更新速度最快</p></strong>。
XHTML 所有元素必须关闭
在 HTML 中 ，比如 <p>，<P> 这些标记，你可以不写 </p>，</P>，但是在 XHTML 里，必须要求写关闭标记 (Closing Tag)。
比如：
<p>设计之家。
应该写成:
<p >设计之家 。</p>
处理空元素
有些空元素 ，在 XHTML 里的写法是在">"之前加空格和斜杠。比如<br>，应该写成<br />。
以下 是空元素的例子：
<br />
<hr />
<img src = "/images/adpics/1/b027.jpg" alt = "webjx" />
<Pnk rel="stylesheet" href="/styles/webjx.css" type ="text/css" />
<meta http-equiv="content -type" content="text/html; charset=UTF-8" / >
XHTML 区分大小写
HTML 不区分大小写，但是 XHTML 是区分大小写的。
XHTML 语法上要求更严谨些。要积极的看待这个问题。
XHTML 的所有标记和属性都要 小写。
比如：
<IMG SRC = "/images/adpics/1/b027 .jpg" Alt = "webjx" />
应该写成：
<img src = "/images/adpics/1/b027.jpg" alt = "webjx " />
XHTML 属性值要用双引号
情况就有所不同。并不强制要求属性值加双引号？
HTML 并不强制要求属性值加双引号。比如你可以写:
<table cellspacing = 0>
<input checked >
的几大区别：HTML 4 .01 相比实在没有什么不同？
但在 XHTML 里，应该写成：
<table cellspacing = "0 ">
<input checked = "checked" / >
XHTML 用 id 属性代替 name 属性
HTML 很多元素，比如 a，applet，frame，iframe，img 和 map，有 name 属性。在 XHTML 里是要废除的，而用 id 属性取而代之。
比如：
<img src="webjx.gif" name="webjx logo" />
应该写成：
<img src="webjx.gif" id="webjx logo" />
XHTML 特殊字符的处理
& 应该在 XHTML 里应该写成 &。
比如：比如：XHTML 的所有标记和属性都要小写。
比如：
You & Me
应该写成：
You & Me
还有如果内嵌 Jav ascript 代码，在 XHTML 里则应该写成：
<script type="text/javascript">// <![CDATA[
...
//]]></script>
浏览器的角度
以上是从协议标准的角度来看待这个问题的。如果从浏览器的角度来看待这个问题，情况就有所不同。
考虑一下，如果把 XHTML 写得很不严格，浏览器会怎么做？是不是会弹出一个对话框，写着“这个网站的开发人员技术不过关，写的不是正宗的 XHTML 文件，咱不显示”？显然，如果浏览器做成这个样子，倒贴钱也是不会有人用的。
从浏览器的角度看待上面几个不同，大致 是下面的测试结果(IE 和Firefox我都测试过)：
XHTML 要求正确嵌套：如果你没有嵌套，浏览器会试图帮你嵌套。
XHTML 所有元素必须关闭：如果你没有关闭，浏览器会试图帮你关闭。
XHTML 区分大小写：你非要写成大写，浏览器帮你转换成为小写。
属性值要用双引号：你非要不肯加，浏览器帮你加。
特殊字符的处理：You & Me 也好，You & Me 也好 ，浏览器都能读入。
用 id 属性代替 name 属性 ：你非要用 name 也可以。
XHTML 里应该写成 &。以下是正确的嵌套。
如果 你在文档开始用 DocType 指定为 XHTML 了，有一点需要注意。在给 Tag 用 class 指定CSS 的时候，是区分大小写的。例如，你定义了一个CSS如下，
<style>
.hello { ...... }
</style >
而你使用的时候写成，
<p class="Hello"> ......
而你使用的时候写成，如果从浏览器的角度来看待这个问题 。
那这个CSS是不会被使用的。要积极的看待这个问题，这让你可以用更多的名字来命名 Style，是一个好事。
XHTML 标准的前途
从标准制定者的初衷看，制定 XHTML 标准是试图把 HTML 规范成为严格的 XML 格式，这样无可避免的会导致一个结果，就是从 HTML 到 XHTML 的升级导致标准的容错能力降低了。把自己的网页源文件写得严格一点当然是好事，但是一个标准不可能去要求浏览器降低自己的容错能力。
XHTML 1 .0 标准是兼容 HTML 4.01，是个不错的协议，可以让开发者在编写代码的同时通过一些工具来检查代码的合法性，虽然对于用户而言，制作出来的网页和 HTML 4.01 相比实在没有什么不同。对于你写新的网页来说，使用 XHTML 1.0 还是一个不错的选择。
XHTML 1.1 标准要求浏览器不再支持原先的容错能力，这是一个标准制定者走火入魔的典型例子，这个标准从学术上说非常纯净，但是对于浏览器而言，则是个呆板、笨拙、不可理喻的标准。所以目前所有由人类开发的浏览器都没有遵照所谓纯净的 XHTML 1.1的标准，你的代码只要浏览器能读懂，他都会很好的显示出来，而不跳出弹框报错。
应该写成:：应该写成：以下是 XHTML 相对 ！
从发展的趋势来看，一个标准没有浏览器服从，等于是没有意义的标准。从浏览器的实现角度来看，新的协议只能在原来 HTML 的基础上扩大能力增加容错 ，而不能缩小了能力减少容错。所以新的协议中，只有扩大能力增加容错的部分会被采纳，而其他部分都仅仅是纸上谈兵而已。
HTML代码:带有图片预览功能的上传表单
作者：佚名 文章来源：网络
时间：2007-10-6 0:07:07 【字体：小 大】
带有图片预览功能的上传表单，完整的HTML代码如下所示
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带有图片预览功能的上传表单webjx.com</title>
<script>
function viewmypic(mypic,imgfile) {
if (imgfile.value){
mypic.src=imgfile.value;
mypic.style.display="";
mypic.border=1;
}
}
</script>
</head>
<body>
<center>
<form >
<input name="imgfile" type="file" id="imgfile" size="40" οnchange="viewmypic(showimg,this.form.imgfile);" />
<br />
</form>
<img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" />
<br />
</div>
<div style="display:none">
</div>
</center>
</body>
</html>
一：如何将一个html页面中嵌入另一个html页面
1、Iframe：
<iframe src="top1.html" frameBorder="0" width="900" scrolling="no" height="90"></iframe>
2、Behavior的download方式
<span id=show></span>
<IE:Download ID="oDownload" STYLE="behavior:url(#default#download)" />
<script>
function onDownloadDone(downDate){
showImport.innerHTML=downDate
}
oDownload.startDownload('b.htm',onDownloadDone)
</script>
一位CSS新手整理的CSS网页布局技巧Author:52css Data:2009-03-25
字体大小: 小 中 大 [RSS]订阅 | 上一篇 | 下一篇
对CSS网页布局的技巧，可谓是名目繁多，在52CSS.com上就有很多种，很多条，但有多少是适合新手朋友的呢。今天介绍一位CSS新手整理的CSS网页布局的小技巧，或许对您更有实际的参考价值：
1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。
2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。
3、一个兼容性调整(IE和Mozilla)的笨办法：
初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。
临时解决方法：选择符{属性名:B !important;属性名:A}
4、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding
5、li标签前面的图标推荐使用background-image，而不是list-style-image。
6、IE分不清继承关系和父子关系的差别，全部都是继承关系。
7、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。
8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active
10、与内容无关的图片请使用background
11、定义颜色可以缩写#8899FF=#89F
12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。
13、<script>没有language这个属性，应该写成这样:<script type=”text/javascript”>
14、标题是标题，标题的文字是标题的文字。有时候标题不一定需要显示文字，所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>
15、完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试）
Example Source Code [www.52css.com]
table{border-collapse:collapse;}
td{border:#000 solid 1px;}
16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。
17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定，这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
18、如果文字过长,则将过长的部分变成省略号显示：IE5,FF无效，但可以隐藏，IE6有效
<DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
19、在IE中可能由于注释带来的文字重复问题时可以把注释改为：
Example Source Code [www.52css.com]
<!–[if !IE]>Put your commentary in here…<![endif]–>
20、如何用CSS调用外部字体
Example Source Code [www.52css.com]
语法：
@font-face{font-family:name;src:url(url);sRules}
取值：
name：字体名称。任何可能的 font-family 属性的值
url(url)：使用绝对或相对 url 地址指定OpenType字体文件
sRules：样式表定义
21、如何让一个表单中的文本框中的文字垂直居中？
如果用行高与高度的组在FF中是没有效果的，办法就是定义上下补白就可以实现想想的效果了。
22、定义A标签要注意的小问题：
当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。
只定义了一个a:link时，一定要记得把其它三种状态定义出来！
23、并不是所有样式都要简写：
当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。
24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。
25、几个常用到的CSS样式：
1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;
2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。
3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。
4）<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。
5）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；
6）FLASH透明：选中swf,打开原代码窗口，在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。
针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”
7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：
Example Source Code [www.52css.com]
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }
08-03
172
172
08-04
497
497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
