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

简介: HTML_标签的命名/CSS标准化命名大全

1. 页面结构命名

  1. page:代表整个页面,用于最外层。
  2. wrap:外套,将所有元素包在一起的一个外围包,用于最外层
  3. wrapper:页面外围控制整体布局宽度,用于最外层
  4. container:一个整体容器,用于最外层
  5. head、header:页头区域,用于头部
  6. nav:导航条
  7. content:内容,网站中最重要的内容区域,用于网页中部主体
  8. main:网站中的主要区域(表示最重要的一块位置),用于中部主体内容
  9. column:栏目
  10. sidebar:侧栏
  11. foot、footer:页尾、页脚。网站一些附加信息放置区域,(或命名为copyright)用于底部

2. 导航命名

  1. nav、navbar、navigation、nav-wrapper:导航条或导航包,代表横向导航
  2. topnav:顶部导航
  3. mainbav:主导航
  4. subnav:子导航
  5. sidebar:边导航
  6. leftsidebar 或 sidebar_a :左导航
  7. rightsidebar 或 sidebar_b:右导航
  8. title:标题
  9. summary:摘要/li>
  10. menu:菜单。区域包含一般的链接和菜单
  11. submenu:子菜单
  12. drop:下拉
  13. dorpmenu:下拉菜单
  14. links:链接菜单

3. 功能命名

  1. logo:标记网站logo标志
  2. banner:标语、广告条、顶部广告条
  3. login:登陆,(例如登录表单:form-login)
  4. loginbar:登录条
  5. regsiter:注册
  6. tool、toolbar:工具条
  7. search:搜索
  8. searchbar:搜索条
  9. searchlnput:搜索输入框
  10. shop:功能区,表示现在的
  11. icon:小图标
  12. label:商标
  13. homepage:首页
  14. subpage:二级页面子页面
  15. hot:热门热点
  16. list:文章列表,(例如新闻列表:list-news)
  17. scroll:滚动
  18. tab:标签
  19. sitemap:网站地图
  20. msg 或 message:提示信息
  21. current:当前的
  22. joinus:加入
  23. tatus:状态
  24. btn:按钮,(例如搜索按钮可写成:btn-search)
  25. tips:小技巧
  26. note:注释
  27. guild:指南
  28. arr、arrow:标记箭头
  29. service:服务
  30. breadcrumb:(即页面所处位置导航提示)
  31. download:下载
  32. vote:投票
  33. siteinfo:网站信息
  34. partner:合作伙伴
  35. link、friendlink:友情链接
  36. copyright:版权信息
  37. siteinfoCredits:信誉
  38. siteinfoLegal:法律信息

4. CSS样式命名

  1. 对齐样式命名:left(左边内容)、center(中间内容)、right(右边内容)等;
  2. 颜色英文命名:red(红色)、green(绿色)、yellow(黄色),又或者border_red(红色边框)等;
  3. 颜色代码命名:f00(红色)、ff0(黄色)、f90(橙色)等;
  4. 文字大小命名:font12px(字体12像素)、font16px(字体16像素)等;
  5. 页面线条命名:line_x (横线)、line_y (纵线)或 line_red(红线)、line_black(黑线)
  6. 图片图标命名:pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
  7. 页面广告命名:ad_01、ad_02
  8. 背景框架命名:nav_bg(代表导航条的背景图片位置)、tool_bg(代表工具栏的背景图片位置)

在这里插入图片描述

5. CSS样式表命名

  1. index.css:单独为首页建立样式
  2. head.css:头部样式,多个页面头部设计风格相同时使用。
  3. base.css:共用样式。
  4. style.css:独立页面所使用的样式文件。
  5. global.css:页面样式基础,全局公用样式,页面中必须包含。
  6. layout.css:布局、版面样式,公用类型较多时使用,一般用在首页级页面和产品类页面中
  7. module.css:模块,用于产品类页,也可与其它样式配合使用。
  8. master.css:主要的样式表
  9. columns.css:专栏样式
  10. themes.css:主体样式
  11. forms.css:表单样式
  12. mend.css:补丁,基于以上样式进行的私有化修补。

在这里插入图片描述

相关文章
|
5月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
5月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
5月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
5月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
5月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
5月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
5月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    147
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    164
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    122
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    98
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    213
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    271
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    136
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    65
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    134
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    181