web前端基础:常用网页元素命名规范

网页元素名称的规范性有助于团队内部成员的沟通,同时还能够提高后期的维护性,网页元素的命名主要是针对id和class进行的,针对网页元素的命名没有业界标准,但有一些大家公认的规则。

一般情况下id我们通常采用camelCase命名规则(首字母小写,其它单词首字母大写),比如:studentName和fontColor等。针对Class的命名,我们不难发现,很多开源框架都使用短横线分割小写单词,比如:ui-widget-header和content-right,除了遵守这样的规则外,一个有意义的名称也是非常重要的,下面列举一些常用的网页命名词汇,零度建议,仅供参考。

| 常用名称 | 备注说明 | 常用名称 | 备注说明 |
| header | 网页头部 | content/container | 网页内容 |
| footer | 页脚版权 | nav | 导航 |
| sidebar | 侧栏 | column | 栏目 |
| wrapper | 整体容器 | loginbar | 登陆条 |
| logo | 标志 | banner | 广告 |
| main | 页面主体 | hot | 热点 |
| news | 新闻 | download | 下载 |
| subnav | 子导航 | menu | 菜单 |
| submenu | 子菜单 | search | 搜索 |
| friendlink | 友情链接 | copyright | 版权 |
| scroll | 滚动 | tab | 标签页 |
| list | 文章列表 | msg | 提示信息 |
| tips | 小技巧 | title | 栏目标题 |
| joinus | 加入我们 | guild | 指南 |
| vote | 投票 | partner | 合作伙伴 |
| mainbav | 主导航 | subnav | 子导航 |
| topnav | 顶部导航 | leftsidebar | 左导航 |
| rightsidebar | 右导航 | summary | 摘要 |
| btn | 按钮 | current | 当前的 |
| icon | 图标 | note | 注释 |

希望本文对你有帮助!

转自https://www.toutiao.com/i6770871613123461643/

原文地址:https://www.cnblogs.com/liontone/p/12316572.html

时间: 2024-10-29 19:07:27

web前端基础:常用网页元素命名规范的相关文章

进击的Python【第十三章】:Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

web前端如何让网页布局稳定性和标准性?

刚开始学css+div布局的同学们,都比较困惑和难写的就是兼容性的问题了,特别是ie6等低版本的浏览器,随意国内逐步慢慢消失取代,但是现阶段还是会有点考虑因素再里面.我们写的网页布局怎么样才是合理的,完整的,兼容性好的呢? 因此再这里,小强老师给大家列出网页布局标准性.合理性和兼容性的一些方法,希望对刚开始学习css的同学有所帮助. 一.<!DOCTYPE> 标记的重要性. 位 于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准 规范,我们必需在开头处使用<

《web 前端基础到实战系列课程》

<web 前端基础到实战系列课程> 摘要: mod_expires&mod_headers可以减少10%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求. 在使用之前,首先要确认一下"mod_expires"模组是否有启用.如果是自己安装Apache来架设网页主机的话,这里我们可以透过编辑Apache的"httpd.conf"设定档来处理 一.浏览器缓存原理 将该行前面的"#"字号删除

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景 在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文 (3) version:定义创作文档的HTML的标准版本 2.<head></head>用于封装位于文档头部的其他标签 属性: (1) dir:文本的显示方向 (2)  Lang:语言信息 (3)  Prof

web前端基础知识!

[HTML文档的基本结构和语法][基本结构]: <HTML> HTML 文件开始 <HEAD> HTML 文件的头部开始 <title> 网页的标题</title> ...... ...... HTML文件的头部内容 </HEAD> HTML文件的头部结束 <BODY> HTML文件的主体开始 ...... ...... HTML文件的主体内容 </BODY> HTML文件的主体结束 </HTML> HTML文

Web前端基础应用

1.HTML基础 在网络如此发达的今天,大家的生活.学习和工作基本上都离不开网络.大家经常浏览的新闻页面.微博和微信等各种从网上获得信息的途径,不论是PC终端,还是移动客户端,基本上都是以Web为基础来呈现的,因此Web页面呈现信息已成为各种信息共享和发布的主要形式.而HTML(Hyper Text Markup Language,超文本标记语言,在有些书籍中也翻译为超文本标签语言)则是创建Web页面的基础.本书将从HTML文件的基本结构是什么,到使用HTML标签制作简单的网页,一直到最后使用D

web前端入门到实战:HTML规范新内容,HTML6 真正需要的功能

HTML5 规范在 2014 年正式发布.时至今日,虽然这一规范已经引入了许多新的 API.功能和改进,但许多开发人员已经在展望下一代 HTML 规范了. 一点点背景介绍 有些人还是不知道 HTML 标准是怎样制定出来的.具体来说,一些组织提出自己的模式和协议,希望浏览器接受并使用它们:但很显然,唯一真正有话语权的组织是 W3C .所以 W3C 来分析 Web 世界需要什么,然后他们编写并规划一些语言指南,这些指南最后将成为浏览器的标准. 早在 Internet Explorer 时代 W3C

Web前端十种常用的技术

Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十种最常见的web界面应用技术. Web应用程序的界面设计,其核心就是网页设计 ,但它的重点主要是在功能方面.要超越桌面应用程序, Web应用程序必须提供简单.直观和即时响应的用户界面,让他们的用户花更少的精力和时间去完成事情. 以前,我们并没有注意到web应用程序这个方式,但是现在是时候仔