[前端开发规范1.0.docVIP

WEB前端开发规范 HTML部分 遵循xhtml 1.0规则： 所有标签必须结束 所有标签必须小写 标签属性必须使用成对引号（单引号或双引号） 标签属性必须有值： select option selected=selected/option /select input type=checkbox checked=checked / 所有特殊符号必须转义（、、、?、?…） 文档类型声明及编码: 统一为html5声明类型!DOCTYPE html; 编码统一为meta charset=utf-8 /, 书写时利用IDE实现层次分明的缩进; 2. 非特殊情况下样式文件必须外链至head.../head之间;非特殊情况下JavaScript文件必须外链至页面底部; 标签属性命名规范 id： 连接符命名法“hello-world” class: 连接符命名法“hello-world” name： 驼峰式命名法“helloWorld” 用于结构布局的元素id命名： 主容器： main 页头： header 页脚： footer 内容区域： content LOGO： logo 主导航： main-nav 二级导航： sub-nav name命名： 一般用于表单元素，根据当前元素id属性值命名，去掉id属性值的前缀和所有连接符，使用驼峰式命名法命名，例如id=”id-card”，那么name=”idCard”。 合理使用标签，语义化结构 标签合理嵌套 span、strong、em、p、h1~h6等行级级元素 尽可能减少div嵌套, 如div class=boxdiv class=welcome欢迎访问XXX, 您的用 户名是div class=name用户名/div/div/div完全可以用以下代码替代: div class=boxp欢迎 访问XXX, 您的用户名是span用户名/span/p/div; 严禁多div症、多span症、多table症，正确使用标签表现DOM结构，在文档去除css的情况下，任然具有结构和可读性，以下是html标记的使用规范： p：文本段落； dl：定义列表，可包括标题和内容简介的列表； ul：无序列表； ol：有序列表； h1~h6：文章标题、内容区块标题，根据重要性由大到小区分，h1一个页面只出现一次； strong/em：强调文本； img：图像，必须加上alt属性，当图像无法显示时，可表示图像信息，背景和按钮使用css处理，不使用img元素； table：数据网格，规则的分栏布局，尽可能显性的定宽和定高。 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先 要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以data-为前缀来添加自定义属性，避免使用data:等其他命名方式; 书写链接地址时, 必须避免重定向，例如：href=/, 即须在URL地址后面加上“/”； 合理化表单结构 使用fieldset元素包裹相同类别的字段； 使用legend元素表示字段类别名称； 使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点； 文本框不使用size属性定义宽度，而使用css的width属性； 添加maxlength属性限制输入字符的长度。（input type=password id=password1 maxLength=8 / 允许输入密码8位数） CSS部分 Css 命名规则 样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a-z）、数字（0-9）、下划线（-）组成; 可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用 123456…red,blue,left,right之类的（如颜色、字号大小等）矢量命名，如class=”left-news”、class=”2” ，以避免当状态改变时名称失去意义; 尽量用单个单词简单描述class名称; 双单词或多单词组合方式：形容词-名词、命名空间-名次、命名空间-形容词-名词。例如：news-list、mod-feeds、mod-my-feeds、cell-title; css文件命名: 英文命名, 后缀.css. 共用wichung.css, 首页index.css, 其他页面依实际模块需求命名; 命名空间 在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。 什么是CSS命名空间？ 通过统一的命名规范定义命名的范围，成为CSS class id命名空间。 布局: