学习Web标准

Posted on 2006-12-22 16:08 stevenhwang 阅读(118) 评论(0) 收藏举报

学习Web标准

1 文档类型说明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2 名字空间
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">

3 定义语言编码
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。XML文档是这样定义的：
<?XML version="1.0" encoding="gb2312"?>
再加一句：
＜meta http-equiv="Content-Language" content="gb2312" /＞
这是针对老版本浏览器写的，以保证各种浏览器都能正确解释页面。

4 样式表
a 将样式表植入HTML文件中：
<STYLE TYPE="text/css">

</STYLE>

b 将一个外部样式表链接到HTML文件上：
<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">

c 将一个外部样式表输入到HTML文件中：
<STYLE TYPE="text/css">

</STYLE>

d 将样式表加入到HTML文件行中：
<P STYLE="background: yellow; font-family: courier">hello,world.</P>

5 收藏夹小图标
首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区：
＜link rel="icon" href="/favicon.ico" type="image/x-icon" /＞
＜link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /＞

6 为搜索引擎准备的内容
＜meta content="all" name="robots" /＞
设置站点作者信息
＜meta name="author" content="ajie@netease.com,阿捷" /＞
设置站点版权信息
＜meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" /＞
站点的简要介绍(推荐)
＜meta name="description" content="新网页设计师。web标准的教程站点，推动web标准在中国的应用" /＞
站点的关键词(推荐)
＜meta content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" /＞

7 XHTML代码规范
a.所有的标记都必须要有一个相应的结束标记
b.所有标签的元素和属性的名字都必须使用小写
c.所有的XML标记都必须合理嵌套
d.所有的属性必须用引号""括起来
e.把所有＜和&特殊符号用编码表示
任何小于号（＜），不是标签的一部分，都必须被编码为<
任何大于号（＞），不是标签的一部分，都必须被编码为>
任何与号（&），不是实体的一部分的，都必须被编码为&
f.给所有属性赋一个值
　XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
＜td nowrap＞＜input type="checkbox" name="shirt" value="medium" checked＞
　　必须修改为：
＜td nowrap="nowrap"＞＜input type="checkbox" name="shirt" value="medium" checked="checked"＞
g.不要在注释内容中使“--”

8 CSS入门
a.基本语法规范
选择器"(selectors)
b.颜色值
颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。
c.定义字体
web标准推荐如下字体定义方法：
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用户
"宋体"适合中文简体用户;
d.群选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; }
e.派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong { font-style : italic; font-weight : normal；} 　　就是给li下面的子元素strong定义一个斜体不加粗的样式。
f.id选择器
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
id选择器也同样支持派生，例如：
#menubar p { text-align : right; margin-top : 10px; }
g.类别选择器
在CSS里用一个点开头表示类别选择器定义，例如：
.14px {color : #f60 ;font-size:14px ;}
在页面中，用class="类别名"的方法调用
h.定义链接的样式
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a:active，例如：
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;} 记住它们的顺序是“LVHA”。

9 辅助图片一律用背景处理
用XHTML+CSS布局，有一个技术：所有辅助图片都用背景来实现：
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

10 CSS布局入门

11 CSS2校验
校验网址：http://jigsaw.w3.org/css-validator/

12 XHTML校验
校验网址：http://validator.w3.org/

附：head区代码规范
必须加入的标签：
1.公司版权注释

2.网页显示字符集
简体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英语：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
3.网页制作者信息
<META name="author" content="webmaster@maketown.com">
4.网站简介
<META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
5.搜索关键字
<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
6.网页的css规范
<LINK href="style/style.css" rel="stylesheet" type="text/css">
(参见目录及命名规范)
7.网页标题
<title>xxxxxxxxxxxxxxxxxx</title>

可以选择加入的标签：
1.设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
2.禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
3.用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
4.自动跳转。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">
5指时间停留5秒。
5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
6.收藏夹图标
<link rel = "Shortcut Icon" href="favicon.ico">
所有的javascript的调用尽量采取外部调用.
<SCRIPT LANGUAGE="javascript" SRC="script/xxxxx.js"></SCRIPT>
附<body>标签：
<body>标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景<body bgcolor="#FFFFFF">

刷新页面返回顶部

stevenhwang

导航

公告

学习Web标准