Web2.0下XHTML+CSS 设计需要注意的地方小结-巨人网络通讯

主页 > 知识库 > Web2.0下XHTML+CSS 设计需要注意的地方小结

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

注意事项：
1、除选择DOCTYPE之外的语句必须使用小写英文字母书写。其中包括 Macromedia Dreamweaver 生成的鼠标动作，如 OnMouseOver 也必须修改成 onmouseover。

2、XHTML语法规要求所有的标识都必须有开始和结束。例如body>和/body>、p>和/p>等，对于不成对的标识，要求在标识最后加一个空格，然后跟一个"/"。例如br>写成br />、img>写成img />，加空格的原因是避免代码连在一起浏览器不识别。

3、所有的XML标记都必须合理嵌套。如：p>b>/p>/b> 必须修改为：p>b>/b>/p> ，就是说，一层一层的嵌套必须是严格对称。

4、所有的属性必须用引号""括起来。如： height=80> 必须修改为：height="80"> 。特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用apos;，例如：alt="sayapos;helloapos;">。

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=\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\" target=\"_blank\">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd/a>">
html    xmlns="a href=\"http://www.w3.org/1999/xhtml\" target=\"_blank\">http://www.w3.org/1999/xhtml/a>"    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="siyizhu3722@msn.com,siyizhu"    />
meta    name="Copyright"    content="Siyizhu's    SimpleLife,转载本站文章请顺便加上版权"    />
meta    name="description"    content="siyizhu"    />
meta    content="siyizhu,QQ:87654080,朱聪,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 : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

但是书写的时候一定要注意顺序，正确的顺序是：LVHA，如果不这么写的话，很可能效果很你预期的不一样。

中间部分的布局规格化和菜单的非表格实现需要实践的引导，在这里先不写什么。下面写一点关于代码校验的记录。

XHTML校验常见错误原因对照表:
No DOCTYPE Found! Falling Back to HTML 4.01 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校验常见错误原因对照表:
(警告)无效数字 : color909090 不是一个 color 值 : 909090 ---十六进制颜色值必须加"#"号，即#909090
(警告)无效数字 : 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 设计需要注意的地方小结》，本文关键词 Web2.0,下,XHTML+CSS,设计,需要,；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。