源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 531|回复: 15

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2007-12-20 22:02:44 | 显示全部楼层 |阅读模式
在web2.0开发下,几点需要注意的地方,我们把它整理了下,希望可以对这方面有兴趣的朋友提供一些帮助 注意事项:
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"> 。特殊情况,你需要在属性值里使用双引号,你可以用",单引号可以使用',例如:<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=\"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 --表示在代码中有非标准属性或值,校验程序无法判断和提供相应的警告信息 
回复

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-8-13 05:43:12 | 显示全部楼层
看看看看
回复 支持 反对

使用道具 举报

29

主题

2万

回帖

194

积分

注册会员

Rank: 2

积分
194
发表于 2022-12-31 22:16:02 | 显示全部楼层
呵呵呵呵呵呵呵a
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-6-30 15:28:25 | 显示全部楼层
为全额万千瓦
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

163

积分

注册会员

Rank: 2

积分
163
发表于 2023-9-13 18:19:25 | 显示全部楼层
谢谢分享,先下来用用
TS人妖演出表演服务q3268336102电话13168842816
回复 支持 反对

使用道具 举报

1

主题

1万

回帖

51

积分

注册会员

Rank: 2

积分
51
发表于 2023-10-17 09:13:45 | 显示全部楼层
啦啦啦啦啦德玛西亚
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-23 03:30:44 | 显示全部楼层
了乐趣了去了去了去了去了
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2024-7-27 00:28:41 | 显示全部楼层
那三门,你们谁寂寞才快乐撒
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

262

积分

中级会员

Rank: 3Rank: 3

积分
262
发表于 2024-8-26 06:10:03 | 显示全部楼层
大家都不容易!
回复 支持 反对

使用道具 举报

11

主题

2万

回帖

300

积分

中级会员

Rank: 3Rank: 3

积分
300
发表于 2024-8-28 15:42:09 | 显示全部楼层
这个源码还可以
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-22 21:19 , Processed in 0.073509 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表