初学标准建站:XHTML+CSS 设计注意事項

css|xhtml|标准|初学|设计

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、不要在注释内容中使用“--”。如:<!--这里是注释-----------这里是注释--> 可以用等号或者空格替换内部的虚线 <!--这里是注释============这里是注释-->。

首先是规范的文件头部分的写法:
<!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=webjx@webjx.com,webjx />
<meta name="Copyright" content="webjx,版权所有,转载注明出处" />
<meta name="description" content="网页教学网" />
<meta content="网页,网页制作,网页教学,网页设计,网页素材,网页书籍,网页视频" name="keywords" />

在CSS的定义方面,值得推荐的是一种通用字体设置的方案,内容如下:
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

字体按照所列出的顺序选用。如果用户的计算机含有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 --表示在代码中有非标准属性或值,校验程序无法判断和提供相应的警告信息

另附:
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属性。
其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的,比如忘记了一个</li>其他<li>标签都会报错,所以不要看到一堆的错误害怕,通常解决了一个错误,其他的错误也都没有了

时间: 2024-10-31 09:14:33

初学标准建站:XHTML+CSS 设计注意事項的相关文章

WEB标准建站-XHTML基础教程2

html基础|web|web标准|xhtml|基础教程 本站原创内容,转载请注明出处网页教学网. XHTML DTD定义文档的类型. 在XHTML中我们必须声明文档的类型,以便于浏览器知道你的文档是什么类型的,而且声明部分要加在文档的head之前.如: <!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title g

WEB标准建站-XHTML基础教程1

html基础|web|web标准|xhtml|基础教程 本站原创内容,转载请注明出处网页教学网. 前言: 现在都讲究标准建站,而标准建站使用的技术主要是XHTML+CSS,而现在我们普遍使用的是HTML代码,那么我该如何转换呢?以及HTML和XHTML有什么不同呢?在这个教程里,你将学到HTML和XHTML之间的不同,以及如何将HTML转换为XHTML.毕竟XHTML是发展的方向,所以我觉得该教程有必要在本站上发布.我感觉要是你想使用标准还是最好先学HTML,因为比较简单,然后再来看该教程. X

标准建站之web设计与开发常见错误

web|标准|错误|设计 混淆文档类型(DOCTYPE) 完全不写.写的不正确.或放错地方.我曾见过HTML 4.0 Transitional被用在XHTML网页和框架页中,还看到过在开头的<html>标签后写DOCTYPE声明和一些不完整的声明.为什么?有两个原因.首先,文档声明是必须的,在W3C HTML 4.01 spec和W3C XHTML 1.0 spec里都有说明.第二,浏览器会根据指定的文档类型去显示和渲染网页.也就是"DOCTYPE切换(DOCTYPE switchi

web标准建站:CSS入门教程

css|web|web标准|教程|入门教程 原创教程,转载请注明出处:网页教学网 CSS是"Cascading Style Sheets"的简称,中文翻译为"串接样式表",也有人翻译 为"样式表".CSS用以作为网页的排版和风格设计,在web标准建站中,对CSS的熟悉和使用 是相当重要的一个内容.CSS的作用是弥补HTML的不足,让网页的设计更为灵活. 这个文章只是为您介绍CSS的基础应用,指引您的一个入门的基础教程,主要目的是为 推进web标准

客户服务年升级计划 万网标准建站不满意全额退款

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 继3月15日推行"总裁服务日"后,今天,中国万网再推出"客户服务升级计划",承诺标准建站服务不满意就全额退款,全面提升客户体验.保障用户利益,让用户全面体验金牌品质服务. 据了解,2009年中国万网全面实施"投资客户"计划,通过降低网络门槛.让利用户等方式,成功帮助31万中小企业在互

纯语义化XHTML CSS设计表单方法

  很多CSS爱好者不喜欢HTML表格,尤其是在制作表单的时候,虽然现在已经是XHTML CSS的年代,但表单的设计大多还在采用table来布局.那么,有没有更好的使用纯语义化XHTML CSS设计表单方法呢?今天让我们一起来尝试这种更符合语义化的方法来代替Table嵌套的表单元素吧!  在这里要说,并不是要完全摒弃table的使用,它有它的语义化布局作用,尤其是在存储数据的时候.我在大多数情况下会使用纯CSS来设计表单,但是,我也很喜欢表格,只要我们能在正确的地方使用正确的元素就可以了,不要太

网站设计的标准时代的XHTML+CSS教程

css|xhtml|标准|教程|设计 让我们赶紧跟上新时代的步伐,一起来了解一下网站标准吧. 一.为什么要建立网站标准 我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站.例如1996-1999年典型的"浏览器大战",为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码.同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的WAP技术.类似的问题举

使用Web标准建站第9天:CSS布局入门

css|web|web标准|css|web标准 接下来开始要真正设计布局了.和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来.你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现.技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了.注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义.

使用Web标准建站第7天:CSS入门

css|web|web标准|css|web标准 在了解XHTML代码规范后,我们就要进行CSS布局.首先先介绍一些CSS的入门知识.如果你已经很熟悉了,可以跳过这一节,直接进入下一节.CSS是Cascading Style Sheets(层叠样式表)的缩写.是一种对web文档添加样式的简单机制,属于表现层的布局语言. 1.基本语法规范 分析一个典型CSS的语句: p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 其中"p"我们称为"选择器"(