HTML命名规范说明

一、命名规则说明：   -   TOP

1）、所有的命名最好都小写

2）、属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"

3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整

4）、空元素要有结束的tag或于开始的tag后加上"/"

5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

6）、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

7）、给每一个表格和表单加上一个唯一的、结构标记id

8）、给图片加上alt标签

9）、尽量使用英文命名原则

10）、尽量不缩写，除非一看就明白的单词

DIVCSS5给大家介绍常见CSS命名和DIV CSS命名方法。

二、相对网页外层重要部分CSS样式命名：  -   TOP

外套 wrap ------------------用于最外层

头部 header ----------------用于头部

主要内容 main ------------用于主体内容（中部）

左侧 main-left -------------左侧布局

右侧 main-right -----------右侧布局

导航条 nav -----------------网页菜单导航条

内容 content ---------------用于网页中部主体

底部 footer -----------------用于底部

三、DIV+CSS命名参考表：   -   TOP

以下为CSS样式命名与CSS文件命名参考表，DIV CSS命名集合：

CSS样式命名

说明

网页公共命名

#wrapper

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

#container或#content

容器,用于最外层

#layout

布局

#head, #header

页头部分

#foot, #footer

页脚部分

#nav

主导航

#subnav

二级导航

#menu

菜单

#submenu

子菜单

#sideBar

侧栏

#sidebar_a, #sidebar_b

左边栏或右边栏

#main

页面主体

#tag

标签

#msg #message

提示信息

#tips

小技巧

#vote

投票

#friendlink

友情连接

#title

标题

#summary

摘要

#loginbar

登录条

#searchInput

搜索输入框

#hot

热门热点

#search

搜索

#search_output

搜索输出和搜索结果相似

#searchBar

搜索条

#search_results

搜索结果

#copyright

版权信息

#branding

商标

#logo

网站LOGO标志

#siteinfo

网站信息

#siteinfoLegal

法律声明

#siteinfoCredits

信誉

#joinus

加入我们

#partner

合作伙伴

#service

服务

#regsiter

注册

arr/arrow

箭头

#guild

指南

#sitemap

网站地图

#list

列表

#homepage

首页

#subpage

二级页面子页面

#tool, #toolbar

工具条

#drop

下拉

#dorpmenu

下拉菜单

#status

状态

#scroll

滚动

.tab

标签页

.left .right .center

居左、中、右

.news

新闻

.download

下载

.banner

广告条(顶部广告条)

电子贸易相关

.products

产品

.products_prices

产品价格

.products_description

产品描述

.products_review

产品评论

.editor_review

编辑评论

.news_release

最新产品

.publisher

生产商

.screenshot

缩略图

.faqs

常见问题

.keyword

关键词

.blog

博客

.forum

论坛

CSS文件命名

说明

master.css,style.css

主要的

module.css

模块

base.css

基本共用

layout.css

布局，版面

themes.css

主题

columns.css

专栏

font.css

文字、字体

forms.css

表单

mend.css

补丁

print.css

打印

CSS命名其它说明:

DIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)

、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用。

DIVCSS5建议：主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名。

2.CSS样式文件命名如下

 

主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

四、英文命名技巧：   -   TOP

如果遇到不常用的，可以借助翻译工具进行翻译取其英文命名。

推荐使用谷歌在线翻译工具：http://translate.google.cn/

谷歌翻译工具介绍：http://www.divcss5.com/css-tool/t346.shtml

 

五  DIV命名

站点：site

首页：homepage

导航：nav

布局：layout

搜索：search

网页头部：head/header

二级页面/子页面：subpage     subContent

登录条：loginbar  toolbar

侧栏：side/sidebar

广告：banner

子导航：subnav

当前位置导航面包屑导航：crumb

菜单：menu

子菜单：submenu

滚动：scroll

下拉：drop

表单：form

箭头：arr/arrow

下拉菜单：dropmenu

主题/外观：theme

页面主体：main

内容：content

标签页：tab

列表：list

工具条：tool/toolbar

转角/圆角：cor/corner

提示信息：msg

小技巧：tips

标题：title

特别的：speciscal

资源：source

加入：join-department

指南：guild

服务：service

热点：hot   news_hot

新闻：news

下载：download

注册：regsiter

状态：status

按钮：btn

投票：vote

关于我们：aboutus

网站地图：sitemap

合作伙伴：partner

友情链接：friendlink

网页底部：foot/footer

版权：copyright

提交:submit

搜索框：searchbox

文本框:textbox

统计:count

以上结构就可以组合使用，例如：左列标题lefttitle；底部导航footernav

 

　　规范不是说要所有人照一个样子来命名css，我们可以根据自己的需要定制命名规则，只要记住命名的规则，就可以根据网站本身的特点来创造具有自己风格的命名方式。

　　一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class，我们可以使用f即foot的头字母为前缀进行命名，如：

　　f-blue:表示蓝色字体样式

　　f-blod:表示粗体字体样式

对于网页中如新闻频道的一些新闻的现实样式，可以用n作为前缀进行样式设计，如：

　　n-title:新闻标题

　　n-list:新闻列表

　　二、我们还可以将代表各个部分的名字组合起来使用，如　，对于上面的例子，我们可以这样命名：

fontBlue: 表示蓝色字体样式

newsTitle:表示新闻列表

　　这样的命名方式同样清晰明了，为大多网页设计师所接受，只不过要特别注意大小写的区分，css中是区别大小写的．开始时容易出错，多加注意便可．

　　按照这样的一些命名方式，我们可以非常明确的知道css中的每一个class的用途，便于使用和设计、维护。

想一想，你要想出很多名字来命名css也很麻烦的，是吧？

 

————————-另外一个规范——————-

 

1.CSS ID 的命名

外　套：　　wrap/container

主导航：　　main_nav

子导航：　　subnav

页　脚：　　footet

整个页面：　content

页　眉：　　header

页　脚：　　footer

商　标：　　label

标　题：　　title

主导航：　　mainbav（globalnav）

顶导航：　　topnav

边导航：　　sidebar

左导航：　　leftsidebar

右导航：　　rightsidebar

旗　志：　　logo

标　语：　　banner

菜单内容1： menu1 content

菜单容量：　menu container

子菜单：　　submenu

边导航图标：sidebarIcon

注释：　　　note

面包屑：　　breadcrumb(即页面所处位置导航提示）

容器：　　　container

内容：　　　content

搜索：　　　search

登陆：　　　Login

功能区：　　shop(如购物车，收银台)

当前的　　　current

 

2.另外在编辑样式表时可用的注释可这样写：

<– Footer –>

内容区

<– End Footer –>

 

3.样式文件命名

主要的 master.css  

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

---------------------

作者：a4589218

来源：CSDN

原文：https://blog.csdn.net/a4589218/article/details/80194437

版权声明：本文为博主原创文章，转载请附上博文链接！