前端html页面中的命名规范

   日期:2024-12-28     作者:nllvp       评论:0    移动:http://ljhr2012.riyuangf.com/mobile/news/10410.html
核心提示:项目中文件名字 1:符合应用场景 2:一律使用小写英文字母,统一要求;英文,禁止中文拼音。 5&#
项目中文件名字

1:符合应用场景
2:一律使用小写英文字母,统一要求;英文,禁止中文拼音。
5:命名原则:使团队成员可以看懂自己代码;自己也方便查找并修改

xxx.html文件的命名

1:主页面 index.html
2: 子页面:首页:homme.html 我的 mine.html 关于我们:aboutus.html 信息反馈 feedback
产品 product 购物 shop 计数器 count
3: 一级页面: 登录:login.html login.css login.js
注册: resign.html
用户管理:userManage.html

图片的命名规则

1:图片文件的后缀 xxx.png xx.jpg xxxx.gif xxx.bmp

图片的名称分为头尾两例如:广告、标志、菜单、按钮部分,用下划线隔开,头部分表示此图片的大类

大类例如:广告、标志、菜单、按钮

  • 放在页面顶部的【广告】 【banner】
  • 企业商标 【标志】性的图片 【logo】
  • 在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名: 【menu】
  • 装饰用的照片我们取名: 【pic】
  • 【不带链接】表示【标题的图片】我们取名: 【title】

范 例 : banner_ sohu.gif
banner_sina.gif
menu_aboutus.gif
menutitle_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_iphone.jpg
pic_TV.jpg

文件夹存放规范
  • www 或者 web 存放前端代码文件

    • css 存放 xxx.css 文件
    • src 存放 xxx。js文件
    • views 或者 pages 存放 xxx.html 或者 xxx.vue 文件
    • assetes 存放所有【资源文件】
      • images 存放图片文件
      • library 存放【第三方库】文件
      • media 存放媒体文件
    • build 存放经过【自动化构建工】或者【自动化打包工具】处理后的文件
  • serve 存放服务端代码文件

    • api 存放【接口文件】
    • modules 存放 【数据库操作】文件
css 书写规范 性能优化方案

1:禁止class 与id 重名
2:书写顺序:布局定位属性–>自身属性–>文本属性–>其他属性

 

布局定位类属性

 

自身属性

 

文本属性

 

其他属性

 
CSS优化

1: 全局考虑样式;提你高代码重复使用
2:多使用兼容性好的样式 css2
3: 减少使用功能position absolute fixed 属性;
4: 重要图片 加【alt】 重要标签加【title属性】
5:合理使用选择器;尽量少使用伪类选择器 nth:type-of-child()
6: 不到万不得已;不要用 !important 权重最高
8:尽量使用复合属性 magin border

css 命名规范

页面结构

 

导航

 
特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

举报收藏 0打赏 0评论 0
 
更多>同类最新资讯
0相关评论

相关文章
最新文章
推荐文章
推荐图文
最新资讯
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号