HTML+CSS命名规则介绍

零下一度

发布时间：2017-07-23 13:21:52

2023人浏览过

来源于php中文网

原创

HTML+CSS命名规则

在一个内容较多的html页面中，需要设计许多不同的框架，再为这些不同的框架及内容进行分类，给予相应的名称，从而使得网页结构更加清晰，也为工作提供了方便。许多新手朋友在设计一个html文件时，可能只会依据自己的想法随便给一些简单的名称，但若是一味的乱起名称，不仅会让团队的伙伴看不明白，还会导致标签名称混乱，这样会使得代码维护十分困难，是非常不利于管理的。所以我们在设计整个网站，还是一个单独的html页面，都应该要有良好的命名规则。在本文中，主要讲解css命名规则，这也包括了对html标签命名。

文件名称必须由英文字母开头，通常命名的规则是根据内容的分类和框架的类型翻译成英文单词来命名，例如：div id="nav"（表示为这个div是个导航条），所有单词应当用小写字母，名称中可以使用数字，或下划线，例如：div="main_piclist"（表示主要内容下的图片列表）、div="nav_bg.jpg"（表示导航条的背景图），还可以使用中划线进行名称之间的连接，例如：div="main-left"（表示左侧内容的布局）所有命名要尽量避免使用中文字符，要以最少的字母达到最容易理解的含义，除非一看即懂，否则尽量不缩写。

HTML标签的命名/CSS标准化命名大全

页面结构命名

page：代表整个页面，用于最外层。
wrap：外套，将所有元素包在一起的一个外围包，用于最外层
wrapper：页面外围控制整体布局宽度，用于最外层

立即学习“前端免费学习笔记（深入）”；
container：一个整体容器，用于最外层
head、header：页头区域，用于头部
nav：导航条
content：内容，网站中最重要的内容区域，用于网页中部主体
main：网站中的主要区域（表示最重要的一块位置），用于中部主体内容
column：栏目
sidebar：侧栏
foot、footer：页尾、页脚。网站一些附加信息放置区域，（或命名为copyright）用于底部

导航命名

nav、navbar、navigation、nav-wrapper：导航条或导航包，代表横向导航
topnav：顶部导航
mainbav：主导航
subnav：子导航
sidebar：边导航
leftsidebar 或 sidebar_a ：左导航
rightsidebar 或 sidebar_b：右导航
title：标题
summary：摘要/li>
menu：菜单。区域包含一般的链接和菜单
submenu：子菜单
drop：下拉
dorpmenu：下拉菜单
links：链接菜单

功能命名

logo：标记网站logo标志
banner：标语、广告条、顶部广告条
login：登陆，（例如登录表单：form-login）
loginbar：登录条
regsiter：注册
tool、toolbar：工具条
search：搜索
searchbar：搜索条
searchlnput：搜索输入框
shop：功能区，表示现在的
icon：小图标
label：商标
homepage：首页
subpage：二级页面子页面
hot：热门热点
list：文章列表，（例如新闻列表：list-news）

微购导购版(原天狼星)
功能介绍：1.程序独立使用的MVC模式开发，程序代码与模板分离，会HTML就会做程序模板2.使用sqlite数据库，mysql数据库随便换，让您不再为购买数据库而烦恼3.增加首页数据自定义功能，导航数据自定义，快速打造属于您自己的网站4.seo伪静态设置更智能化，自定义seo规则，让蜘蛛更喜欢您的网站5.屏蔽ip访问功能5.支持一键采集功能，只要轻轻一点，上万淘宝b2c商品轻松入库，解决数据添加的

下载
scroll:滚动
tab：标签
sitemap：网站地图
msg 或 message：提示信息
current：当前的
joinus：加入
status：状态
btn：按钮，（例如搜索按钮可写成：btn-search）
tips：小技巧
note：注释
guild：指南
arr、arrow：标记箭头
service：服务
breadcrumb：(即页面所处位置导航提示）
download：下载
vote：投票
siteinfo：网站信息
partner：合作伙伴
link、friendlink：友情链接
copyright：版权信息
siteinfoCredits：信誉
siteinfoLegal：法律信息