元素,开发规范

元素,开发规范篇一：前端开发规范前端开发规范 黄金定律 永远遵循同一套编码规范 - 可以是这里列出的，也可以是你自己总结的。如果你发现本规范中有任何错误，敬请指正。通过 open an issue on GitHub 为本规范添加或贡献内容。 不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。 p HTML 代码规范 一、语法 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 用 4 个空格来代替制表符（tab） - 这是唯一能保证在所有环境下获得一致展现的方法。 嵌套元素应当缩进一次（即 4 个空格） 。 对于属性的定义，确保全部使用双引号，绝不要使用单引号。 不要在自闭合（self-closing）元素的尾部添加斜线 -HTML5 规范中明确说明这是可选的。 不要省略可选的结束标签（closing tag）（例如，或 ） 。 Page title Hello, world! 二、HTML5 doctype 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。 三、语言属性 根据 HTML5 规范： 强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。 更多关于 lang 属性的知识可以从 此规范 中了解。 这里列出了语言代码表。 四、IE 兼容模式 IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为edge mode，从而通知 IE 采用其所支持的最新的模式。五、字符编码 通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity） ，从而全部与文档编码一致（一般采用 UTF-8 编码） 。 六、引入 CSS 和 JavaScript 文件根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。 HTML5 spec links ? ? ? ? ? ? ? ? ? ? ? ? ? Using link Using style Using script /* . */ 七、实用为王 尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。 八、属性顺序 HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。 ? ? ? ? ? ? class id, name data-* src, for, type, href title, alt aria-*, role class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签） ，因此排在第二位。 Example link 九、布尔（boolean）型属性 布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。 更多信息请参考 WhatWG section on boolean attributes： 元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。 如果一定要为其赋值的话，请参考 WhatWG 规范： 如果属性存在，其值必须是空字符串或 . 属性的规范名称，并且不要再收尾添加空白符。 简单来说，就是不用赋值。 1 十、减少标签的数量 编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例： 十一、JavaScript 生成的标签通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。 篇二：命名 - Add the parameters for the stored procedure here = = 0, END GO控件命名注：该空间命名前缀仅适用于*.aspx 页面上面的控件ID 的命名。如果是在*.文件中自己写的动态生成控件的命名，遵循一般的变量命名规则。 篇三：前端开发规范集锦 1.符合标准，语义化 html，结构、表现、行为三层分离，兼容性优良，代码简洁明了有序，尽可能的减少服务器负载，快速的解析速度。 2.正确使用块级元素和内联元素嵌套，h1、h2、h3、h4、h5、h6、P、dt 标签不能包含 div 等块级元素，只能包含内联元素，li 可以嵌套 div,ul,ol 等块级元素，内联元素中不可嵌套块级元素。3.正确使用 无序列表（在文章列表、导航条，下拉列表、tab 使用）(来自: 小 龙 文档网:元素,开发规范)、 有序列表（文章列表等根据需要使用） 、 （自定义列表） 。 4.加粗使用标签， 表示关键词强调的语义化，有助于 SEO。 5. 不建议使用 ，用 margin 进行控制。 标签定义段落,用来区分段落，有语义化的，文章正文使用 p 标签是理所当然的，推荐在文章或者文本段落以外的地方尽量少用 P 标签，不宜用来大范围的布局。 7. 标题要用 h*(同一页面只能有一个 h1)。 8.标签、属性、属性命名必须由小写字母及下划线数字组成，且所有标签必须闭合，包括单标签。 9.尽可能减少 div 多层嵌套。 10.在 html 页面中尽量避免直接使用行内样式来控制标签样式，做到内容与表现分离。 11.多余代码, 比如页面注释掉不需要的代码，应该坚决删除掉。 12.指定 img 明确的宽度和高度，可以增加页面渲染速度。 1.图片尽量使用 css 写入样式中。 2. 背景图片请尽可能使用 sprite 技术，减小 http请求。 3.链接的样式请严格按照：a:link - a:visited - a:hover - a:active（LVHA）的顺序写。4.合并 margin、padding、border 的设置，尽量使用缩写法，比如 margin:0 10px 0 10px; 5.选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗，但是一定要避免覆盖全局样式设置。6.如果没有边框时，不要写成 border:0，应该写成 border:none。 7.在保持代码解析的前提下，尽量合并重复的样式，例如：a display:block span display:block 合并：a,span display:block 。 、font 等可以缩写的属性，尽量使用缩写形式 background: color image repeat attachment position; font: style weight size/lineHeight family; 9.不要直接为 html 标签添加 css 样式，比如 div width: 100px; 10.尽量少用 hack，能不 hack 就尽量不用 hack，为了兼容必须需要时就使用。 11.为了 SEO 和页面可用性，请使用 text-indent 来隐藏文本内容。 12.不要在 html 中加入标签来清除浮动，通过在浮动元素的父元素上添加.clearfix 来清除浮动： .clearfix:dftercontent:”.”; display:block;height:0;visibility:hidden;clear:both;.clearfixzoom:1 13.字体名称最好映射成对应的英文名，例如：黑体(SimHei) 宋体(SimSun) 微软雅黑(Microsoft Yahei); 属性书写顺序, 建议遵循布局定位属性自身属性文本属性其他属性. 此条可根据自身习惯书写，但尽量保证同类属性写在一起。属性列举： 布局定位属性主要包括： float、clear、position、top、right、bottom、left、display、visibility、overflow 等； 自身属性主要包括：width、height、margin、padding、background、border； 文本属性主要包括：font、color、text-align、vertical-align、text-decoration、text-indent、white-space 等； 其他属性包括：list-style、cursor、 z-index、zoom 等。 15.不需要重复定义可继承的值，css 中，子元素自动继承父元素的属性值，如颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义，除非是为了更变当前元素样式不使用父元素的属性值，但是要注意，浏览器可能用一些默认值覆盖你的定义。16.用 png 图片做图片时，要求图片格式为 png-8 格式,若 png-8 实在影响图片质量或其中有半透明效果，请为ie6 单独定义背景： _background:none; _filter:progid:(sizingMethod=crop, src=img/); 三、javascript 规范 每行代码结束时必须有分号; 2.引用 js 库文件，文件须包含库名称及版本号，以及是否为压缩版，比如 ；引用插件，文件名为库名+插件名称，比如。 3.变量和函数命名: 驼峰式命名. 原生 JavaScript变量要求是纯英文字母, 首字母须小写, 如 myName。 4.避免全局变量。 5.命名语义化, 尽可能利用英文单词或其缩写。 6.页面引用 js 文件和 js 代码放在 html 代码的最底部。 四、图片使用规范 1.图片格式仅限于gif、png、jpg。 2.如果背景图片有动画，则保存成 gif，如果没有动画，也没有半透明效果，则保存成 jpg。 3.如果有半透明效果，则保存成 png-24，但尽量避免使用半透明的 png 图片。 4.重要图片必须加上，给重要的元素和截断的元素加上 title。 5.命名全部用小写英文字母、数字、和横线的组合，尽量用易懂的词汇，便于团队其他成员理解，命名分头尾两部分， 用下划线隔开， 比如、 。 6.在保证视觉效