前端代码规范

Html

熟悉每个标签的用法,用最适合的标签布局(如table只用于表格)

基本

<html>…</html>      定义 HTML 文档

<head>…</head>   文档的信息

<meta>                    HTML 文档的元信息

<title>…</title>        文档的标题

<link>                      文档与外部资源的关系

<style>…</style>    文档的样式信息

<body>…</body>   可见的页面内容

<!--…-->                 注释

文本

<h1>...</h1>               标题字大小(h1~h6)

<b>...</b>                   粗体字

<strong>...</strong>   粗体字(强调) 

<i>...</i>                      斜体字 

<em>...</em>              斜体字(强调)

<center>…</center>   居中文本

<ul>…</ul>                 无序列表 

<ol>…</ol>                 有序列表

<li>…</li>                    列表项目

<a href=”…”>…</a>    超链接

<font>                         定义文本字体尺寸、颜色、大小

<sub>                         下标

<sup>                         上标

<br>                           换行

<p>                            段落

图形

<img src=’”…”>   定义图像

<hr>                   水平线

表格

<table>…</table>   定义表格

<th>…</th>            定义表格中的表头单元格

<tr>…</tr>             定义表格中的行

<td>…</td>           定义表格中的单元

其它

<form>…</form>    定义供用户输入的 HTML 表单

<frame>                 定义框架集的窗口或框架

Css

符合命名规范,满足SCSS编写格式

模块之间命名规则参考链接http://nec.netease.com/standard/css-name.html

页头:header  登录条:loginBar  标志:logo  侧栏:sideBar  广告:banner  导航:nav  子导航:subNav  菜单:menu  子菜单:subMenu  搜索:search  滚动:scroll  页面主体:main  内容:content  标签页:tab  文章列表:list  提示信息:msg  小技巧:tips  栏目标题:title    页脚:footer  加入:joinus  指南:guild  服务:service  热点:hot  新闻:news  下载:download  注册:regsiter  状态:status  按钮:btn  投票:vote  合作伙伴:partner  版权:copyRight 

1.CSSID的命名

外套:wrap  主导航:mainNav  子导航:subnav  页脚:footer  整个页面:content    页眉:header  页脚:footer  商标:label  标题:title  主导航:mainNav  顶导航:topnav  边导航:sidebar  左导航:leftsideBar  右导航:rightsideBar  旗志:logo  标语:banner  菜单内容1:menu1Content  菜单容量:menuContainer  子菜单:submenu  边导航图标:sidebarIcon  注释:note  面包屑:breadCrumb(即页面所处位置导航提示)            容器:container  内容:content  搜索:search  登陆:login  功能区:shop(如购物车,收银台)  当前的current  

2.样式文件命名  

主要的:master.css  布局版面:layout.css  专栏:columns.css  文字:font.css  打印样式:print.css  主题:themes.css

1.不定义无关变量,变量名命名规范,全局变量用uiModel统一管理。

2.同一功能模块方法使用对象写法,注释齐全。

3.功能组件化开发。

对象开发case(angular框架)

$scope.demoObj = {

  click:function(){

    console.log('我是点击事件')

  }

}

原文地址:https://www.cnblogs.com/bcjz/p/8507359.html