网页开发设计

网页标准:HTML&CSS编码规范

总体原则 符合w3c通用网页标准。 结构清晰,嵌套正确,嵌套深度适当。 代码精炼。 注释清晰,代码可读性高。 风格统一。1.1 基本命名风格本文档的命名规范会仅使用以下命名风格。Camel风格 这种风格除了第一个单词的首字母,其他单词都应大写首字母。Ex: backColor 1.2 大小写敏感不要出现两个只用大小写区分的Class。不要出现两个只用大小写区分的ID。Naming Conventions and Style(命名规范和代码风格)1.3 所有的Class及ID均采用 Pascal 风格<!-- Good Example --><p class=”sidebar”></p><div id=”container”></div><!--Not Good Example --><p class=”boxA”></p><div id=”boxB”></p>1.5 所有的样式控制尽量使用Class,ID用于Javascript对DOM结构的控制可以防止因优先级的问题导致CSS代码量加大同一个Class可应用于多个标签,但同一个ID只能用于一个标签1.6 所有CSS代码尽量单独封装在独立的CSS文件中,文件命名应用有意义的名字,例如layout.css编写页面布局方面的CSS代码。尽量不要出现直接在HTML标签中书写CSS代码的情况。在<head>标签中可使用<style></style>针对本页面中特定元素的样式控制代码1.7 CSS代码每行一个属性每行一个属性的代码风格更利于维护,注释更方便在使用Hack进行浏览器兼容性处理时更清晰/* Example */.mainNav {width: 200px;height: 200px;background: #f00 url(bg.jpg) no-repeat left top; /* 背景颜色及背景图片 */}1.8 CSS代码中应遵循从外到内,从上到下,从左到右的原则先写外围框架的,再写内部元素的。先写网页中视觉上出现在页面上面的元素CSS代码,再写下面的。先写网页中视觉上出现在页面左边的元素CSS代码,再写右边的。<!-- Example --><!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"><head><title></title><style>.header {}.container {}.container .sidebar {}.container .main {}.footer {}</style></head><body><div class=”header”>头部</header><div class=”container”><div class=”sidebar”>侧边栏</div><div class=”main”>主体区域</div></div><div class=”footer”>底部</div></body></html>1.9 代码缩写对于padding,margin,border等属性应采用缩写方式1.10 所有CSS代码尽量单独封装在独立的CSS文件中,文件命名应用有意义的名字,例如layout.css编写页面布局方面的CSS代码。在文件开始处给出适当的注释/* -------文件名:layout.css作用:页面主体布局创建者:创建日期:最后更新:最后更新时间:------- *//* Good Example *//* Header */.header {width: 200px;min-height: 100px; /* 针对IE7中设置最小高度 */}1.13 选择器与开始大括号({)之间应保持而且仅有一个空格1.14 结束大括号(})应该放在单独的一行。1.15 用一到两个空行来分割不同的页面模块CSS代码段/* Good Example */.header {width: 200px;height: 100px;}.header .mainNav {margin: 5px 2px;}.container {}.container .sidebar {}.container .main{}.footer {}/* Not Good Example */.header {width: 200px;height: 100px;}.header .mainNav {margin: 5px 2px;}.container {}.container .sidebar {}.container .main{}.footer {}/* Good Example */ /* 主导航条 */.mainNav {}/* 侧边栏菜单 */.sideMenu {}/* Not Good Example */ .Menu1 {}.Menu2 {}1.18 选择正确的标签不要一味的追求和使用DIV标签不要完全抛弃Table标签,在需要对数据进行排列显示时,Table是首选要在恰当的地方正确使用<dl>标签,而不要用冗繁的div、p等代替合理安排<h1>到<h6>标签,有利于SEO,一个网页中不要出现超过2个<h1>尽量不再使用<font>标签1.19 同一标签嵌套深度尽量不要超过三层比较常见的错误时使用嵌套超过三层的DIV标签,应用其他可代替的标签进行编写1.20 不要使用多余的代码在保证达到效果的同时,代码应越少越好。/* Good Example */span {float: left;}/* Not Good Example */span {float: left;display: block;}/* 虽然span本身为inline元素,但经过float:left后已经自动转为了block元素,所以无需添加display:block */1.21 及时清除浮动并注意方法在对元素进行浮动后,应及时清除浮动。如果采用空标签清除浮动法,空标签应紧跟浮动元素之后,而不是浮动元素的父元素之后。1.22 将常用的class放在一个单独的文件中将常用的浮动、清除浮动、字体颜色等class单独写在一个公用文件中,可取名common.cssOthers(其它)1.23 关于CSS排错当出现CSS错误时,建议给出错的标签设置背景颜色或边框,以便更快的找出错误并更正。CSS排错方法应首先检查HTML代码中的class属性与CSS代码中的选择器是否一致,避免因漏写字母或错写字母而出错。出现错位时应首先考虑是否掉入了IE6的各种“CSS陷阱”中,例如Double Margin。
(0)
【友情提示:】
1、[焦点热议]及其子栏目内容为网络转载,其它栏目内容系作者个人原创文章观点,不代表除作者外的任何第三方观点赞同或支持;
2、「♚付涛纪实阁♚」原创文章均为本人工作、学习过程中重点事项点的记录,便于日后面对相同问题时候的复盘总结,同时原创内容遵循创作共用版权 CC 4.0 BY-SA 协议,转载请附上原文出处链接及声明,否则默认视为侵权。
3、如本站个人观点有涉及不妥的地方,可联系【QQ:860227477】,提供合理合法依据,可无偿给予修改或删除;若文内明确指转载来源于权威渠道,若需删除本站内容,可在处理完权威渠道来源信息后,第一时间联系本站给予无条件删除。
4、同时针对站内所有来自于【精品软件共享】及其子栏目所分享的软件均为网络收集,请用户下载后24小时内删除,否则引起的争议由使用者承担,与本站无关;
5、针对本站内容若有异义,亦可直接与【法律顾问:易兴俊,律师联系电话:13825799821】直接联系沟通;

发表评论