html+css命名规范（SEO优化）

一、HTML

1、采用HTML5结构标签

（1）header：某个区块的头部信息/标题；

（2）hgroup：头部信息/标题的补充内容；

（3）nav：导航条部分信息

（4）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；

（5）article：特殊独立区块，表示这篇页眉中的核心内容；

（6）aside：标签内容之外与标签内容相关的辅助信息；

（7）figure：独立的单元，例如某个有图片与内容的新闻块。

（8）footer：底部信息；

2.关于引用外部css文件

（1）尽量避免内联样式

（2）每个页面使用各自的css文件

（3）所有页面基础css样式放入main.css共同引用

（4）针对页面相同部分建立共用的css文件（例如loading动画、页面头部等）

3.注意SEO优化

（1）给图片加上alt标签<img alt="">

（2）<br>只针对<p>

（3）强调使用<b><i>

（4）缩进使用text-indent代替&nbsp;

（4）css文件放在上方，js文件放在底部

4.浏览器兼容

（1）除特殊情况外，尺寸单位统一采用vw

二、css样式规范

1.命名规则

（1）使用英文命名原则小写字母，避免拼音

        .register ✔

        .zhuce ×

（2）多个单词使用-（中划线）串联（例如：help-guest-regist），缩写要一目了然

        .help-guest-regist ✔

        .helpguest ×

        .help_guest ×

        .helpGuest ×

（3）ID和class命名越简短越好，要足够表达涵义

         #nav {}.author {} ✔

         #navigation {}.atr {} ×

（4）css嵌套不要超过一层

         div .product ul .li:{} ×

（5）padding、margin、font尽量采用缩写。

（6）去掉小数点前的“0”

         font-size:.8em;✔

         font-size:0.8em;×

（7）id用于模块或父容器，不滥用

（8）无边框border:none；

2、常用命名参考：

(1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

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

左右中：left right center

(2)导航

导航：nav

主导航：mainbav

子导航：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