前端技巧DIV+CSS网页元素命名常用英文词汇

DIV+CSS网页元素命名常用英文词汇

使用DIV+CSS设计网页的时候,一般对元素或标签的id或类名并没有特别规定,只要以字母开头,字母数字和下划线的组合都是可以的,例如left123,xxx_love这样的命名都是正确的,但是如果随意命名的话,代码的可读性就差了,假如日后要修改,往往很难明白代码的意思,因此建议大家使用下面这些约定俗成的常用命名词语,可以让自己的代码更加正式,可读性更强,方便日后的维护。

名称英文词汇备注
页头header

常用于表示网页的开头部分,如<div id="header"></div>
注意不要和<head>标签和<header>标签混淆

登录条loginbar常用于表示网页登录框,login中文翻译为登录,bar翻译为“条”
标志logo

用于表示网页的logo标志,例如
<div id="logo"><img alt="logo" src="logo.png" /></div>

侧栏sidebar常用于表示网页的侧边栏,side翻译为侧边
横幅banner常用于表示网页的横幅图片或广告,中文翻译为横幅
导航nav

用于表示网页的导航栏,英文全称为navigatio
注意不要和标签<nav>混淆

子导航subnav表示网页的次导航或子导航,Sub column中文翻译为子栏目
菜单menu

可以与nav配合使用,表示导航菜单,例如
<div id="nav"><ul id="menu"></ul></div>

搜索search用于包含搜索框,中文翻译为搜索
滚动scroll常用于包含随着网页滚动而固定的部分
页面主体main一般用于包含网页的主体部分,中文翻译为主要的
内容content一般用于表示文章的具体内容,中文翻译为内容
摘要summary常用于包含文章的摘要部分,中文翻译为摘要
作者author常用于表示文章的作者,中文翻译为作者
相关related常用于包含相关文章列表,中文翻译为有关的
列表list常用于表示文章列表,list中文翻译为目录清单
图片列表image_list常用于包含图片内容列表,image翻译为图片
分页pages常用于包含列表和文章的分页标签,page中文翻译为页
小技巧tips常用于在网页中展示一些小提示信息,tips表示提示
友情链接friendlink用于包含友情链接列表,friend翻译为朋友
页脚footer

常用于表示网页的尾部,例如版权信息等内
注意不要和<footer>标签混淆

服务项目service常用于展示公司的服务项目内容,中文翻译为服务
热点hot常用于表示热门信息,hot中文翻译为热
新闻news常用于表示最新的文章列表,news翻译为新闻
下载download用于包含下载链接的区块,中文翻译为下载
注册regsiter用于包含注册区块,中文翻译为注册
投票vote用于展示投票的区块,中文翻译为投票
版权信息copyright用于包含网页版权信息的部分,一般版权信息被网页尾部包含
外层wrap常用于包含在元素外部的div,中文翻译为包裹
容器container常用于给元素的外部增加一个包含区域,中文翻译为容器
当前current常用于导航中表示当前栏目,current翻译为当前的

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/82.html