网页编码指南

本指南包括文件结构，命名约定，设计和编码推荐，还有前端开发中常用到的样式和资源等。

1.0 编码标准

这个章节包含最基本的编码标准。

1.1 代码验证

页面基于由W3C(万维网联盟)拟定的XTHML 1.0 Transitional 和 CSS2.1标准。所有页面文件都应该遵循W3C标准。下面为推荐的代码校验工具。

1.2 文档类型(DOCTYPE)和名称空间(NAMESPACE)声明

统一使用XHTML 1.0的过渡标准

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

1.3 浏览器支持

在IE6.0，IE7.0以及Firefox(版本2.0以上)进行全面完整的测试，保证表现一致。其他浏览器提供基本的支持。

浏览器 支持级别
IE 6+ 全面支持
Firefox 2.0以上 全面支持
其他浏览器 基本支持

1.4 文件编码

页面文件，CSS和JS文件均采用utf-8编码。页面文件需要在代码中声明utf-8编码。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

1.5 标题，关键字和描述

在页面文件的Title、Keywords和Descriptions标签中添加文档的描述内容。

<title>2008年中国经济调控定调：货币政策可能从紧_资讯_凤凰网</title>
<meta name="keywords" content="经济调控,货币政策,凤凰网,凤凰新媒体">
<meta name="description" content="消息人士透露，文件报告的起草工作已经基本完成，按常规，中央经济工作会议即将召开，为2008年中国经济定调。">

1.6 图像增加ALT属性

文档内容图片需要在图片增加alt属性

<img src="http://img.mydomain.com/stock.jpg" alt="股市大涨">
如果图片用于修饰，则alt属性为空
<img src="http://img.mydomain.com/decoration.gif" alt="">

1.7 语义化标签

页面代码由附有语义的html代码组成，常见的语义代码包括

1.8 区块独立化编码

为便于重用，页面代码中各大区块样式相互独立。示例如下：

.listImage { position:relative; background:#fff;}
.listImage a { color:#454545;}
.listImage .head { position:relative; border:1px solid #fff;}
.listImage .head a { color:#fff;}
.listImage .head .more { position:absolute; right:5px; top:11px;}

.box .list { position: absolute; top:43px; left:200px; width:58%;}
.box .list ul { margin-right:10px; padding-left:5px;}
.box .list li { line-height:20px;}
.box .list ul.headline { background:#efefef; margin-top:8px;}

1.9 CSS命名约定

总体原则：
1. 采用骆驼命名法，英文单词第二个起使用大写，名称尽量使用英文，避免使用汉语拼音；
2. 不加中杠和下划线，英文单词最好在两个以内，而且尽量不缩写，除非一看就明白的单词；
3. 命名语义要清晰，而且尽量不要带有属性内容，如left，right，size这样的单词，例子：#left #right #size10等；
以下参考csser.org阿捷的文章http://www.csser.org/2006/03/css-name-specification/

区块名称 常用命名 区块名称 常用命名 区块名称 常用命名
总容器 container/wrapper 页头 header/hd 页尾 footer/ft
页面主体 main 内容 content 搜索 search
侧栏 sidebar 菜单 menu 子菜单 subMenu
标志 logo 广告 ad 广告通栏 banner
导航 nav 子导航 subNav 标签 tab
信息 message 提示 tip 指南 guide
新闻 news 标题 title 头条 headline
最热 hot 最新 new 实时 realTime
注册 register 登录 signIn 状态 status
合作方 partner 友情链接 friendLink 版权 copyright
列表 list 视频 video 调试 debug

1.10 JavaScript命名约定

参考http://dojotoolkit.org/developer/StyleGuide 核心 API 请使用下面的风格：

结构 规则 示例
类 Pascal,所有单词首字母大写 EventHandler
公有方法 camel,首字母小写 obj.doSomeThing()
公有变量 camel,首字母小写 obj.someVariable
常量 Pascal或者全部大写 MaxSize, MAXSIZE
私有方法 混合命名 _doSomeThing()
私有变量 混合命名 _someVariable
方法参数 camel,首字母小写 function doSomeThing(someVariable,_someVariableTwo)
常用命名：

2.0 CSS编码实践

这个章节包含CSS样例代码。

2.1 超链接样式

分页样式

2.3 高度自适应的圆角框

天津峰山药王古寺隆重举行琉璃广场奠基洒净法会

4月8日，天津峰山药王古寺隆重举行琉璃广场奠基洒净法会。中国佛教协会副会长、天津市佛教协会会长圣辉法师，中国佛学院教务长向学法师，福建厦门观音寺方丈定恒法师、湖南麓山寺方丈法通法师，闽南佛学院常务副院长界象法师，中国佛学院副教务长广如法师，天津市佛教协会常务副会长智如法师，天津荐福观音寺住持妙贤法师，天津市宗教局、西青区相关领导等嘉宾，和来自各地的四众弟子数千人参加了这一法会。

 点击查看代码

2.4 导航条

2.5 图像阴影

2.6 表格

2.7 表单

Registration example form
*
*
*
*
* @yahoo.com
ID may consist of a-z, 0-9, underscores, and a single dot (.)
*
Six characters or more; capitalization matters!
*
 点击查看代码(使用Table编码)
 点击查看代码(使用P和Label编码)

2.8 图文混排