html文档命名的元素,在HTML文档中class名以及id名的命名规则

在HTML文档中class名以及id名的命名规则

2019年12月05日

阅读数：20

这篇文章主要向大家介绍在HTML文档中class名以及id名的命名规则,主要内容包括基础应用、实用技巧、原理机制等方面，希望对大家有所帮助。

注意：命名不要以数字开始

了解class与id区别及用法

命名写法：

1. 每一个单词中间以“_”隔开 #main_left_box{}

2. 驼峰命名 从第二个单词开始每一个单词的首字母大写  #mainLeftBox{}

3. 用包含选择器，定义元素时候能找到这个元素而且不影响其余元素便可

如：.top p span em{}能够写成 .top em{}前提是，不影响其它元素样式

命名原则：可根据每块元素的主题 或者功能、在页面上的位置来定义名称，便于管理查找和维护

经常使用简例以下：(可根据内容须要组合使用)

顶部：top:

顶导航：topNav top_nav

页头：    header  如：#header{属性:属性值;}或.header{属性:属性值;},

页面主体：main

页脚：footer

侧栏：sideBar

边导航图标：sidebarIcon

广告：banner

外　套：wrap

栏目标题：title

内容：content

菜单：  menu

子菜单：subMenu

菜单内容1： menu1Content

导航：nav

子导航：subNav

搜索：search

登陆条：loginBar

标志：logo

指南：guild

新闻：news

热点：hot

下载：download

服务：service

登录：login

注册：regisiter

合做伙伴：partner

版权：copyRight

友情连接：friendLink

标签页：tab

当前：current

文章列表：list

提示信息：msg

加入：joinus

小技巧：tips

投票：vote

状态：status

滚动：scroll

按钮：btn

商　标：label