Web2.0下XHTML+CSS 设计需要注意的地方小结

编辑：rootadmin

注意事项： 1、除选择DOCTYPE之外的语句必须使用小写英文字母书写。其中包括 Macromedia Dreamweaver 生成的鼠标动作，如 OnMouseOver 也必须修改成 onmouseover。 2、XHTML语法规要求所有的标识都必须有开始和结束。例如<body>和</body>、和等，对于不成对的标识，要求在标识最后加一个空格，然后跟一个"/"。例如 写成 、<img>写成<img />，加空格的原因是避免代码连在一起浏览器不识别。 3、所有的XML标记都必须合理嵌套。如： 必须修改为： ，就是说，一层一层的嵌套必须是严格对称。 4、所有的属性必须用引号""括起来。如： <height=> 必须修改为：<height=""> 。特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：<alt="say'hello'">。 5、把所有<和&特殊符号用编码表示。如：任何小于号（<），不是标签的一部分，都必须被编码为& l t ; ，任何大于号（>），不是标签的一部分，都必须被编码为 & g t ; ，任何与号（&），不是实体的一部分的，都必须被编码为& a m p ; 。（以上代码字母间无空格） 6、给所有属性赋一个值。如： <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 必须修改为：<td nowrap="nowrap"> <input type="checkbox" name= "shirt" value="medium" checked="checked">。 7、不要在注释内容中使用“--”。如： 可以用等号或者空格替换内部的虚线 。首先是规范的文件头部分的写法： CODE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href=" target="_blank"> <html xmlns="<a href=" target="_blank"> lang="utf-8"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta content="all" name="robots" /> <meta name="author" content="siyizhu@msn.com,siyizhu" /> <meta name="Copyright" content="Siyizhu's SimpleLife,转载本站文章请顺便加上版权" /> <meta name="description" content="siyizhu" /> <meta content="siyizhu,QQ:,朱聪,China,湖北,中国" name="keywords" /> [Copy to clipboard] 在CSS的定义方面，值得推荐的是一种通用字体设置的方案，内容如下： CODE: body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } [Copy to clipboard] 字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推； Lucida Grande字体适合Mac OS X； Verdana字体适合所有的Windows系统； Lucida适合UNIX用户； "宋体"适合中文简体用户；如果所列出的字体都不能用，则默认的sans-serif字体能保证调用。 CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如： a:link{font-weight : bold ;text-decoration : none ;color : #c ;} a:visited {font-weight : bold ;text-decoration : none ;color : #c ;} a:hover {font-weight : bold ;text-decoration : underline ;color : #f ;} a:active {font-weight : bold ;text-decoration : none ;color : #F ;} 但是书写的时候一定要注意顺序，正确的顺序是：LVHA，如果不这么写的话，很可能效果很你预期的不一样。中间部分的布局规格化和菜单的非表格实现需要实践的引导，在这里先不写什么。下面写一点关于代码校验的记录。 XHTML校验常见错误原因对照表: No DOCTYPE Found! Falling Back to HTML 4. Transitional--未定义DOCTYPE。 No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。 end tag for "img" omitted, but OMITTAG NO was specified--图片标签没有加"/"关闭。 an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。 element "DIV" undefined---DIV标签不能用大写，要改成小写div。 required attribute "alt" not specified---图片需要加alt属性。 required attribute "type" not specified---JS或者CSS调用的标签漏了type属性。 CSS2校验常见错误原因对照表: (警告)无效数字 : color 不是一个 color 值 : ---十六进制颜色值必须加"#"号，即# (警告)无效数字 : margin-topUnknown dimension : 6pixels ---pixels不是一个单位值，正确写法6px (警告)属性 scroll_bar-face-color 不存在 : #eeeeee --- 定义滚动条颜色是非标准的属性 (警告)Line : 0 font-family: 建议你指定一个种类族科作为最后的选择 --W3C建议字体定义的时候，最后以一个类别的字体结束，例如"sans-serif"，以保证在不同操作系统下，网页字体都能被显示 (警告)Line : 0 can't find the warning message for otherprofile --表示在代码中有非标准属性或值，校验程序无法判断和提供相应的警告信息

推荐整理分享Web2.0下XHTML+CSS 设计需要注意的地方小结，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

table高级应用把表格进行到底(必看) 1.表格的分隔线可以隐藏tableborderrules=colscellspacing=0align=left可以隐藏横向的分隔线tableborderrules=rowscellspacing=0align=right可以隐藏纵向的分隔线tableborderrules=no

css强制换行 css强制不换行的css方法以前总结过Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。近日有此需要，但发现加上nowrap在某些情况下还是会

不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码纯DIV/CSS对联漂浮广告代码(无JS)源码网两侧漂浮。经测试，兼容IE6，IE7，Firefox浏览器。CSS代码为：.r1{width:px;height:px;background:red;float:right;position:fixed!im