网站开发中那些你不得不知的web前端命名规范

对于经验资深的前端er，在给web布局时，相信都会很注重标签和命名的规范。尤其是随着html5的普及发展，更是把web前端语义化推向一个新的台阶上。比如html5给我们新增的语义标签：header、nav、main、aside、footer、section、article等等。那么对于web语义化，有什么优势呢？

一个得到广泛推崇的东西，必然有它的优势所在。web语义化：

1、可以让人一目了然这块是什么鬼，那块是什么鬼，对于项目的维护或者优化都是非常有意义的。

2、随着html5语义化标签的出现，我推测以后web语义化对于seo优化，还是非常有利的。也就是说，seo优化，必然也要考虑web语义化。如：<header></header>可以很好的代替传统的<p id="header"></p>。

那怎样愉快的玩耍web语义化呢？

1）标签语义化，如在合适的地方用合适的语义化标签，如头部可用<header>、尾部可用<footer>；

2）命名语义化，包括html的id和class的命名，javascript相关命名；如#header{}、.footer{}、等。

下面是常见的命名参考规范：

一、主体

头部：header

内容：content/container

尾部：footer

导航：nav

侧栏：sidebar

栏目：column

整体布局：wrapper

左右中：left / right / center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：join

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

二、css注释的写法

如内容区，Html注释的写法 ：<!--header头部-- >

三、id的命名规范

(1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

(2)导航

导航：nav

主导航：mainnav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：regsiter

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

(四)class的命名:

(1)颜色：使用颜色的名称或者16进制代码，如：

.red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }

(2)字体大小，直接使用“font+字体大小”作为名称，如：

.font12px { font-size: 12px; } .font9pt {font-size: 9pt; }

(3)对齐样式，使用对齐目标的英文名称，如：

.left { float:left; } .bottom { float:bottom; }

(4)标题栏样式，使用“类别+功能”的方式命名，如：

.barnews { } .barproduct { }

注意事项：

1.一律小写；

2.尽量用英文；

3.尽量不加中杠和下划线；

4.尽量不缩写，除非一看就明白的单词，如：wrapper可以写成wrap。

5.css文件命名规范：

主要的 master.css；

模块 module.css；

基本共用 base.css；

布局，版面layout.css；

主题 themes.css；

专栏 columns.css；

文字 font.css；

表单 forms.css；

补丁 mend.css；

打印print.css

web前端开发移动端常用rem布局

    rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了 (function(doc,win){ vardocEl=doc.documentElement, resizeEvt=orientationchangeinwindow?orientationchange:resize, recalc=function(){ varclientWidth=docEl.clientWidth; if...

       分析各种推广方式的优劣势 分析各种推广方式的优劣势 想要网站的流量越来越多，想要到达更多的潜在客户，获得更多的收益，网络推广方面必须要做到， 天津建站 公司虎网科技和大家分析一下每一个推广方式的内容和优势劣势？ 一、百度竞价推广 竞价推广花费的费用比较大，但是得到的效果是立竿见影，可以说是推广对它“又爱又恨”，有很多企业在都在做竞价推广，可是说完全是烧钱，很多企业因为做竞价推广也有倒闭的。 首先，账户结构...

       原创内容对网站SEO的影响 网站是个整体，在计划要做个网站的时候，好是能够对这个网站整体的方方面面都有策划，有规划，当网站其他方面做的很好的时候，网站内容是不是原创不定那么重要。但是呢，网站定要有特色，如果这个网站整体都乏善可陈的话，那很难提升网站的表现了。 　　很多时候，我们很强调原创内容但并不等于网站定要原创内容， SEO 定要原创内容才能培养起来，并不是这样，转载内容也是可以把网站培养起来的。过于强调原创内容，可能也...

       深圳龙华海顺博通信与虎网站签约网站建设协议 海顺博是经深圳市龙华新区工商局审核的有资质公司，统一社会信用代码：91440300342674814J。海顺博选用虎网站企业商务型网站案例，其功能具备实用型所有配置外、特别值得关注的是增设了SEO深度优化，不管是内页还是标题都能够独立和个性化设置关键词和长尾词，更适合进行全站seo优化。海顺博处于深圳市龙华新区龙华街道弓村和平小区33栋306。 　　海顺博专业从事无线微波传输系统及网络多媒体通讯领...

       深圳罗湖众诚慧远行业培训和虎网站签下网站建设协议 众诚慧远位于深圳市罗湖区贝丽北路西水贝二路北泊林花园1栋11B。众诚慧远是经深圳市罗湖区工商局审核的正规企业，统一社会信用代码：914403005670522150。同时经国家工信部和广东省通信管理局审核通过ICP备案；备案号：粤ICP备12072702号。众诚慧远选用虎网站定制型网站案例，此类网站主要是按客户要求和提供的风格案例或效果图纸来做，这种属于仿制和定制型网站，是根据功能开发的难易度来评...

       网页设计的10个灵感来源有哪些？ 据悉，能够激发我们创作优秀网站的，不仅仅是网页设计! 　　这世上几乎每一样你身边的事物都能对你有所启发。你总是无法预料什么东西会点燃你创意的火花，我经常发现一些最常见的事物能让我从新的或不同的角度来思考项目。这里我们介绍10种我最爱的网页以外的设计灵感来源。 　　大自然 　　思考设计的最佳地点之一就是户外。看看自然界这些伟大的图形和色彩搭配。就我个人而言，我喜欢从花卉中汲取配色灵感。 　　这株秋天...