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

2024-11-29 04:51:11

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

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

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

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 --表示在代码中有非标准属性或值，校验程序无法判断和提供相应的警告信息

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

注意事项: 1.除选择DOCTYPE之外的语句必须使用小写英文字母书写.其中包括 Macromedia Dreamweaver 生成的鼠标动作,如 OnMouseOver 也必须修改成 onmouseover. 2.XHTML语法规要求所有的标识都必须有开始和结束.例如<body>和</body>.和等,对于不成对的标识,要求在标识最后加一个空格,然后跟一个"/".例如 写成 .<
web2.0中流行的设计元素:颜色

颜色的变化跟人类的智慧一样,是无穷的,每个阶段都会有流行的色彩,有属于一个时代的颜色!WEB2.0是一个概念,它宣扬,定位了一些东西,以用户为中心,群体智慧,分享等等,等等.同时顺应这些需求,一些顶尖的设计师和开发者赋予并领导了一些色彩流行趋势.我凭感觉做了部分归纳和收集,心理没大有底,把能想到的列出来希望跟大家一起探讨>>再做补充吧! ★淡淡的浅色系及延伸应用此类颜色似乎最早被应用在一些文档处理软件比如word,和操作系统里(比如MacOSX)用于分类归档,标记,或者突出显示使用.此类颜色
12步让你的web1.0变成web2.0的总结

现在不是80年代了.互联网已经成为每个人生活中的一部分.你的那个陈旧过时的网站要不要也加入进来呢?如果你比较上进的话我想你的回答应该是 "YES".不管web2.0是多么的让人讨厌,我还是收集了12个条目,让你可以轻松的把你的web1.0的网站升级到web2.0. 1. 把esomething.com 换成 MYsomething.com 如果你的网站域名前面有个蹩脚的"e",那就说明你的网站不是web2.0的.很容易觉得你的网站是个电子产品罢了.如果你在域名前用的
web2.0色系

logoorange.com列举了web2.0网站的设计的主色调,对于关注2.0和设计的人员来说应该不错的. (PMS) C M Y K RGB Hex 100 0 0 51 0 #ffff7d 101 0 0 79 0 #ffff36 102 0 1 95 0 #fffc0d 103 0 3 100 18 #d1cb00 104 0 3 100 30 #b3ad00 105 0 3 100 50 #807c00 106 0 2 69 0 #fffa4f 107 0 4 79 0 #fff536
六十四、WINOWS NT4.0下的网络安全性

六十四.WINOWS NT4.0下的网络安全性热点网络在网络多用户环境下,系统的安全性.权限设置非常重要,Windows NT 4.0提供了网络环境下的一个成功的安全保密系统.Windows NT从最初开发到目前使用广泛的Windows NT 4.0,其安全系统已日趋成熟.完备,但同时也使得系统的管理人员在构造网络环境.进行权限分配时,感到复杂.难以掌握.笔者查阅了众多的有关资料,又经过反复实践,在此作一简要的分析和介绍. Windows NT 4.0的网络安全性依赖于给用户或组授予的三种
快速解决Android7.0下沉浸式状态栏变灰的问题

1.绪论现在基本上所有的应用都会去实现沉浸式状态栏,这个是应用的标配,如果你开发的应用没有,那这个吐槽点就多了,"这美工有审美观么""程序猿这么菜,沉浸式都不会?"-.. 咳咳-.. 开个玩笑啊,各有各的设计思想,不能怪程序猿. 2.问题那么说到沉浸式状态栏的问题是什么呢?不知道大家有没有遇到过,应用在android7.0系统以下的手机上运行,沉浸式状态栏是正常的,但是在7.0以上的手机上运行就感觉没有沉浸式了,是分层的.无论怎么修改状态栏背景色都没用,看下图:
vue2.0安装style/css loader的方法

项目需要引用额外的ui组件库,就需要安装style-loader和css-loader 安装style-loader (css-loader默认有) npm install style-loader -D 然后,打开模板build--webpack.base.conf.js( 根据初始化模板不同也可能是 build 下面的webpack.base.conf.js ),新增一个json,注意style!css顺序不能颠倒(!表示连接) 补充: 2.0 以后应该写成 style-loader!cs
div+css与xhtml+css分别是什么意思?

不知道从什么时候开始,在网络上到处可以看到div+css,到底什么是div+css呢?难道就是传说中的标准重构吗?标准从最简单的根源来说不是合理使用xhtml的标签吗?可为什么还是有这么多div+css呢?既然可以div+css,那为什么不可以叫span+css ul+css li+css等等呢? 疑问,满脑子的疑问!为了这个疑问,我把自己脑子里的东西从最底层翻了一遍. 在几年前大家都是用table来布局,一层套一层,没发现什么不妥,一直用到<网站重构>这本书出来后的不久开始看到很多人讨论重构
IOS swift3.0 下闭包语法整理

IOS swift3.0 下闭包语法整理一.闭包的概念有oc基础的都知道,闭包其实是oc里面的block,语法格式不一样,但作用是一样的.主要是用于callBack(异步回调)或者两个类之间的通信.它的本质一个函数,一个可执行的代码块,只是这个函数是没有名字的,也就是匿名函数.你也可以把他看作如 int.float一样,是一种数据类型,一种可以作为参数传递的数据类型. 二.基本语法 1.闭包的声明 //定义一个求和闭包 //闭包类型:(Int,Int)->(Int) let add:(Int
ASP.NET 2.0下的条件编译

在Web开发中测试单个页面的功能实在是太麻烦,从首页用户名.密码进去后,经过一些操作后才可以来到你要测试的那个页面.(其实无论做什么的开发,测试单个功能都是很麻烦).抱着小心谨慎的态度,我一般喜欢写几段测一次,如果每次都兴师动众的启动整个项目来测试显然是很不经济的做法. 我一般会在Solution中新增一个用于测试用的配置,在其中增加一个"Test"之类的编译指令,然后在代码中,把一些测试条件,测试方法放到这个指令下.在开发团队还没有引进单元测试之类的概念的时候,我可不想用新增一个测试

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

相关推荐

随机推荐