Web2.0下XHTML+CSS 设计需要注意的地方小结
程序员文章站
2022-05-26 12:31:43
注意事项: 1、除选择doctype之外的语句必须使用小写英文字母书写。其中包括 macromedia dreamweaver 生成的鼠标动作...
注意事项:
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 --表示在代码中有非标准属性或值,校验程序无法判断和提供相应的警告信息
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 --表示在代码中有非标准属性或值,校验程序无法判断和提供相应的警告信息
下一篇: 慈禧为了长寿,都做过哪些奇葩事?
推荐阅读