web前端规范,js规范..docxVIP

WEB前端开发规范基本原则 * 遵循内容（HTML）、显示（CSS）、行为（JavaScript）分离的代码组织模式* 代码格式化，保持干净整洁HTML部分添加必须的utf-8的字符集，并且使用HTML5的简洁方式：meta charset=utf-8 /遵循xhtml 1.0规则：所有标签必须结束所有标签必须小写标签属性必须使用成对引号（单引号或双引号）标签属性必须有值：selectoption selected=selected/option/selectinput type=checkbox checked=checked /所有特殊符号必须转义（、、、?、?…）标签属性命名规范id：连接符命名法“hello-world”class:连接符命名法“hello-world”name：骆驼式命名法“helloWorld”表单元素的id必须加以下前缀label：lbltext：txtpassword：txttextarea：txtfile：txtradio：radcheckbox：chksubmit：btnreset：btnbutton：btnhidden：hid用于结构布局的元素id命名主容器：main页头：header页脚：footer内容区域：contentLOGO：logo主导航：main-nav二级导航：sub-navname命名一般用于表单元素，根据当前元素id属性值命名，去掉id属性值的前缀和所有连接符，使用骆骆式命名法命名，例如id=”txt-id-card”，那么name=”idCard”。合理使用标签，语义化结构标签合理嵌套a、span、strong、em、p、h1~h6等元素不能包含：div、ul、ol、dl、p严禁多div症、多span症、多table症，正确使用标签表现DOM结构，在文档去除css的情况下，任然具有结构和可读性，以下是html标记的使用规范：p：文本段落；dl：定义列表，可包括标题和内容简介的列表；ul：无序列表；ol：有序列表；h1~h6：文章标题、内容区块标题，根据重要性由大到小区分，h1一个页面只出现一次；strong/em：强调文本；img：图像，必须加上alt属性，当图像无法显示时，可表示图像信息，背景和按钮使用css处理，不使用img元素；table：数据网格，规则的分栏布局，尽可能显性的定宽和定高。合理化表单结构使用fieldset元素包裹相同类别的字段；使用legend元素表示字段类别名称；使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点；文本框不使用size属性定义宽度，而使用css的width属性；添加maxlength属性限制输入字符的长度。严禁使用已在xhtml 1.0中已移除的的标签：s、i、b、font控制 页面 默认显示状态使用js来控制和切换显示的区块、导航、tab，必须先用css处理DOM默认显示状态。应用示例：#tabs div { display:none }#tabs div.selected { display:block }div id=tabsullia href=#tab-1item1/a/lilia href=#tab-2item2/a/lilia href=#tab-3item3/a/li/uldiv id=tab-1 class=selected/divdiv id=tab-2/divdiv id=tab-3/div/divCSS部分Css 命名规则样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a-z）、数字（0-9）、下划线（_）组成。可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用 123456…red,blue,left,right之类的（如颜色、字号大小等）矢量命名，如class=”left_news”、class=”2” ，以避免当状态改变时名称失去意义。尽量用单个单词简单描述class名称。双单词或多单词组合方式：形容词_名词、命名空间_名次、命名空间_形容词_名词。例如：news_list、mod_feeds、mod_my_feeds、cell_titleClass和ID的使用方法把id留给后台开发和JS使用，除此之外页面的page id(如首页的外层需要一个ID id=”page_index”)，页面结构（header main footer）允许用id命名。其他禁止id使用在样式表CSS命名中，一律使用class命名命名空间在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。什么是CSS命名空间？通过统一的命名规范定义命名的范围，成为CSS class id命名空间。布局: