学习编程，与君共勉。
在做过一些页面并且参考了许多商城页面后，对代码的书写和风格也有所体会，再次将我的经验分享给大家，希望大家也能够写出整洁有效的代码。本文主要是针对排版的问题进行总结，代码量较少，希望能够耐心看下去，或多或少都有些帮助。
这里是对页面排版部分——HTML部分的介绍，当然后续也会有CSS样式，JS的介绍，以及通过JQuery的书写给大家呈现大多数页面共同的地方。一 梳理排版
善于利用div。div就像一个盒子，将你想要写的这一块代码包起来，所以在设计页面时，看清div的闭合，你写的这一部分代码是否属于这一块。 注意标签的利用。在页面设计中，经常会有许多标签嵌套的形式，比如说<div>
<div> <ul> <li><a href=""><span></span><i></i></a></li> <li><a href=""><span></span><i></i></a></li> <li><a href=""><span></span><i></i></a></li> </ul> </div></div>123456789这个时候，要分清你需要什么，每个标签又能提供什么作用。在页面中，一般都分为总区域和有效区域，总区域就是第一个div，宽度设为100%，可以添加背景颜色等；第二个div便是有效区域，宽度一般为1200px，设置margin：0 auto使其居中；使用ul是为了使其中的li元素方便设置浮动属性，一般用于样式相差不多且并列显示的元素；a标签提供链接，span标签中一般放置文本信息，i标签则放置背景图，常用作角标、图标等。 对常用标签的基本掌握下，也要了解一些例如< b >,< i >,< em >等标签，无论是排版还是样式都会提供很大遍历。二 class id命名
在写一个大的页面如某宝等购物页面时，class，id的命名就会成为一个头痛的问题，这大概是所有的前端遇到的问题，关键是你的代码需要具备促进团队合作，有助代码审查等特点，也就是大家都能看懂，知道你写的这块代码对应页面的那一部分，具有良好的重构性。 命名规范这里简单提一下可以使用数字、字母和下划线，但不能以数字开头
区分大小写驼峰式命名见名知意所以命名也十分重要，这里给大家推荐我常用的，我一般保存在桌面的txt中，需要时查看一下，熟练后很好用命名原则：可根据每块元素的主题 或者功能、在页面上的位置来定义名称，便于管理查找和维护
常用简例如下：（可根据内容需要组合使用）
顶部：top:
顶导航：topNav top_nav 页头： header 如：#header{属性:属性值;}或.header{属性:属性值;}, 页面主体：main 页脚：footer 侧栏：sideBar 边导航图标：sidebarIcon 广告：banner外 套：wrap
栏目标题：title 内容：content菜单： menu
子菜单：subMenu 菜单内容1： menu1Content 导航：nav 子导航：subNav 搜索：search 登录条：loginBar标志：logo
指南：guild 新闻：news 热点：hot 下载：download 服务：service 登陆：login 注册：regsiter 合作伙伴：partner 版权：copyRight 友情链接：friendLink标签页：tab
当前：current 文章列表：list 提示信息：msg 加入：joinus 小技巧：tips 投票：vote 状态：status 滚动：scroll 按钮：btn 商 标：label当然，还可以使用left，right等，比如顶导航分为左右两部分，就可以使用top_navLeft，top_navRight来命名，或者将其简写为l、r，这只是我个人的命名习惯，每个人都有自己的不同命名方式，但最终的目的都是相同的，就是提高代码重构性。对于不是特别重视这方面的童鞋送一句玩笑话给你们：
“第一天写下的代码只有你和上帝能看懂，第二天，只有上帝能看懂了。”
三 注意细节
养成添加注释的好习惯，这很重要！
对划过某个元素出现的div写在同一个父元素下（原因CSS部分会讲到）；小的图片或图标通过url的方式添加，尽量不要使用img标签；学习并掌握HTML5新增的标签；HTML作为学习前端最基础的知识，相对来说比较简单，但是必须熟练掌握，身为程序员，一定要做到有意识，有耐心！送给诸位，也是送给自己的一句话:Learn No Stop Forever !