页面商城总结——HTML部分

Posted 2021-02-14 king911

学习编程，与君共勉。

在做过一些页面并且参考了许多商城页面后，对代码的书写和风格也有所体会，再次将我的经验分享给大家，希望大家也能够写出整洁有效的代码。本文主要是针对排版的问题进行总结，代码量较少，希望能够耐心看下去，或多或少都有些帮助。
这里是对页面排版部分——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>
1
2
3
4
5
6
7
8
9
这个时候，要分清你需要什么，每个标签又能提供什么作用。在页面中，一般都分为总区域和有效区域，总区域就是第一个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 !