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('我是点击事件')
}
}