1.HTML
原则
1.规范 。保证您的代码规范,保证结构表现行为相互分离。
2.简洁。保证代码的最简化,避免多余的空格、空行,保持代码的语义化,尽量使用具有语义的元素,避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。
3.实用。遵循标准,但是不能以牺牲实用性为代价。
4.忠诚。选择一套规范,然后始终遵循。不管代码由多少人参与,都应该看起来像一个人写的一样。
语法
1.小写. html标签、属性全部小写。
2.嵌套. 所有元素必须正确嵌套。
3.闭合. 双标签必须闭合,单标签(自关闭标签)不闭合 如<hr>,
4.双引号. 双引号属性值,不要使用单引号。
注释
1.详尽注释。解释代码解决问题、解决思路等。
2.模块注释。建议不使用模块结束注释。
文档
1.文档类型使用html5标准文档类型,文档类型声明之前,不允许出现任何非空字符。不允许添加强制改变文档模式。
2.html元素上指定lang属性。显示页面语言,有助于语言合成工具来确定怎样发音,以及翻译工具决定使用的规则,等等。
3.指定明确的字符编码。让浏览器轻松、快速的确定适合网页内容的渲染方式。
属性
1.双引号属性值,不要使用单引号。
2.省略type属性。使用style、link、script,不用指定type属性,因为 text/css 和 text/javascript 分别是他们的默认值。
3.省略Boolean属性值。Boolean属性不用添加取值,disabled,checked,selected等。
4.省略url类属性资源协议头。
5.属性顺序。html属性应该按照特定的顺序出现以保证易读性。class->id,name->data-*->src,for,type,href->title,alt->aria-*,role。
6.多媒体元素添加替代属性。图像增加alt属性,音视频增加替代文字。
元素
1.避免冗余标签。
2.避免JS生成标签。
3.段落文字应该用p,避免使用br。
4.列表项放ul,ol,dl,不要使用一系列的div或p。
5.input使用for属性绑定label。
6.使label标签包裹radio或checkbox和他们的文字,不用再使用for属性。
7.form button应制定type类型,使用type="submit"、type="reset"或type="button"。
2、CSS
样式文件命名
全局:global.css,全局样式为全站公用,为页面样式基础,页面中必须包含;
结构:layout.css页面结构类型复杂,并且公用类型较多时使用。多用在首页级页面和产品类页面中;
私有:style.css独立页面所使用的样式文件,页面中必须包含;
模块:module.css产品类页面应用,将可复用类模块进行剥离后,可与其它样式配合使用;
主题:themes.css实现换肤功能时应用;
补丁:mend.css 基于以上样式进行的私有化修补;
主要的 master.css;
基本共用 base.css
专栏 columns.css;
文字 font.css;
表单 forms.css;
打印 print.css;
常用的css命名规则
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
注释的写法:
/* Footer */
内容区
/* End Footer */
id的命名:
(1)页面结构容器: container;页头:header;内容:content/container;页面主体:main;页尾:footer;导航:nav;侧栏:sidebar;栏目:column;页面外围控制整体布局宽度:wrapper;左右中:left right center;
(2)导航:
导航:nav;主导航:mainbav;子导航:subnav;顶导航:topnav;边导航:sidebar;左导航:leftsidebar;右导航:rightsidebar;菜单:menu;子菜单:submenu;标题: title;摘要: summary;
(3)功能
标志:logo;广告:banner;登陆:login;登录条:loginbar;注册:regsiter;搜索:search;功能区:shop;标题:title;加入:joinus;状态:status;按钮:btn;滚动:scroll;标签页:tab;文章列表:list;提示信息:msg;当前的: current;小技巧:tips;图标: icon;注释:note;指南:guild;服务:service;热点:hot;新闻:news;下载:download;投票:vote;合作伙伴:partner;友情链接:link;版权:copyright;
class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }
(2)字体大小,直接使用”font+字体大小”作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如.left { float:left; }.bottom { float:bottom; }
(4)标题栏样式,使用”类别+功能”的方式命名,如.barnews { }.barproduct { }
注意事项:
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词;