html5语义化标签规范,要想成为前端大神，那些你不得不知晓的web前端命名规范。...

原标题&＃xff1a;要想成为前端大神&＃xff0c;那些你不得不知晓的web前端命名规范。

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

一个得到广泛推崇的东西&＃xff0c;必然有它的优势所在。web语义化&＃xff1a;

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

2、随着html5语义化标签的出现&＃xff0c;我推测以后web语义化对于seo优化&＃xff0c;还是非常有利的。也就是说&＃xff0c;seo优化&＃xff0c;必然也要考虑web语义化。如&＃xff1a;可以很好的代替传统的

那怎样愉快的玩耍web语义化呢&＃xff1f;

1)标签语义化&＃xff0c;如在合适的地方用合适的语义化标签&＃xff0c;如头部可用、尾部可用&＃xff1b;

2)命名语义化&＃xff0c;包括html的id和class的命名&＃xff0c;java相关命名&＃xff1b;如#header{}、.footer{}、等。

下面是常见的命名参考规范&＃xff1a;

一、主体

头部&＃xff1a;header

内容&＃xff1a;content/container

尾部&＃xff1a;footer

导航&＃xff1a;nav

侧栏&＃xff1a;sidebar

栏目&＃xff1a;column

整体布局&＃xff1a;wrapper

左右中&＃xff1a;left / right / center

登录条&＃xff1a;loginbar

标志&＃xff1a;logo

广告&＃xff1a;banner

页面主体&＃xff1a;main

热点&＃xff1a;hot

新闻&＃xff1a;news

下载&＃xff1a;download

子导航&＃xff1a;subnav

菜单&＃xff1a;menu

子菜单&＃xff1a;submenu

搜索&＃xff1a;search

友情链接&＃xff1a;friendlink

页脚&＃xff1a;footer

版权&＃xff1a;copyright

滚动&＃xff1a;scroll

标签页&＃xff1a;tab

文章列表&＃xff1a;list

提示信息&＃xff1a;msg

小技巧&＃xff1a;tips

栏目标题&＃xff1a;title

加入&＃xff1a;join

指南&＃xff1a;guild

服务&＃xff1a;service

注册&＃xff1a;regsiter

状态&＃xff1a;status

投票&＃xff1a;vote

合作伙伴&＃xff1a;partner

二、css注释的写法

如内容区&＃xff0c;Html注释的写法 &＃xff1a;