html 和css 的命名规范 和性能优化方案 史上最全!!!

```
html命名规范
```

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

```
图片的命名规则
```

图片的文件的后缀 xxx.png xxx.jpg xxx.gif  xxx.bmp 
图片的名称分为头尾两部分 用下划线隔开 头部分表示此图片的大类
例如: 产品类 product  产品下的电视手机  product_tv product_iphone

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

-放在页面顶部的广告 banner
-企业商标   标志性的图片logo
-在页面上某一个位置连续出现 性质相投的链接栏目的图片 我们取名 menu
-装饰用的照片我们取名 pic
-不带链接表示标题的图片 我们取名 title
范例::     banner_ sohu.gif 
    banner_sina.gif 
    menu_aboutus.gif 
    menutitle_news.gif 
    logo_policy .gif 
    logo_nation .gif 
    pic_people.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: 书写顺序: 布局定位属性-->自身属性-->文本属性-->其他属性
.box{
     布局定位类  float: left
     自身属性     width:100px
     文本类        text-align:left
     其他属性     overflow:hidden
}

布局定位类属性
margin padding float clear positon (相应的 top right bottom left)
display visibility overflow等

自身属性
width height background bord 

文本属性
font color text-align text-decoration text-indent whiie-space othertext content

其他属性
list-style(列表样式) vertical-align cursor z-index (层叠顺序) zoom 

css    优化
1:全局考虑样式: 提高代码重复使用
2:多使用兼容性好的样式 css2
3:减少使用position  absolute fixed 属性
4:重要图片  加 alt  重要标签加 title属性
5: 合理使用选择器  尽量少使用伪类选择器   nth:type-of-child()
6:不到万不得已  不要用!important  权重最高
7:大区域 一定要加注释  小区域适当  方便查看
8:尽量使用复合属性  magin  border  

css     命名规范
页面结构

容器: container  wrap
整体宽度:wrapper
页头:header
内容:content
侧栏:sidebar
栏目:column
中间内容:center

导航

导航:nav
主导航:mainNav   gloabNav  main_nav
子导航:subNav   
顶部导航:topNav
边部导航:sideBar
左边导航:leftSideBar
右边导航:rightSideBar
边导航图片:sideBarIcon
菜单:menu
子菜单:subMenu

标志：logo 
登陆：login
登录条：loginbar 
注册：regsiter
产品：products 
产品价格：products_prices
产品评论：products_review 
编辑评论：editor_review
最新产品：news_release 
最新产品：news_release
广告/标语：banner 
摘要:summary
生产商：publisher 
缩略图：screenshot
常见问题：faqs 
关键词：keyword
博客：blog 
论坛：forum
搜索：search 
搜索输入框：search_input
搜索输出：search_output 
搜索结果：search_results
加入我们：joinus 
状态：status
按钮：btn 
滚动：scroll
标签页：tab 
文章列表：list
提示信息：msg/message 
当前的: current
小技巧：tips 
皮肤：skin
充值：pay 
活动：activities
推广：promotion 
公告：announcement
排行：ranking 
公司简介：company_profile
公司设备：equipment 
公司荣誉：glories
企业文化：culture 
企业规模：scale
营销网络：sales_network 
组织机构：organization
技术力量：technology 
分支机构：branches
企业资质：enterprise_qualification 
公司实力：strength_strength
经营理念：operation_principle 
经理致辞：manager_oration
发展历程：development_history 
工程案例：engineering_projects
分类浏览：browse_by_category 
应用领域：application_fields
人力资源：human_resource_hr 
领导致辞： leader_oration
客户留言：customer_message 
客户服务：customer_service
您的要求：your_requirements 
销售信息：sales_information
招商：enterprise_establishing 
教育培训：education_training
在线交流：online_communication 
质量认证：quality_certification
合作加盟：joinIn_cooperation 
产品描述：products_description
业务范围：business_scope 
产品销售：sales_sales
联系我们：contact_us 
信息发布：information

返回首页：homepage 
产品定购：order
电子商务：e_business 
版权所有：copy _right
友情连结：hot_link 
行业新闻：trade_news
行业动态：trends 
邮编：postal_code_zipcode
新闻动态：news_trends 
公司名称：company_name
销售热线：sales_hotline 
联系人：contact_person
建设中：in_construction 
证书：certificate
地址：add 
电话：tel
传真：fax 
产品名称：product_name
产品说明：description 
价格：price
品牌：brand 
规格：specification
尺寸：size 
生产厂家：manufacuturer
型号：model 
产品标号：item_no
技术指标：technique_data 
产品描述：description
产地：production_place 
用途：application
论坛：forum 
在线订购：on_line_order
招标：bidInviting 
综述：general
业绩：achievements 
大事：great_event
动态：trends 
服务：service
投资：investment 
行业：industry
规划：programming 
环境：environment
发送：delivery 
提交：submit
重写：reset 
社区：community
业务：business 
在线调查：online_inquiry
下载中心：download 
意见反馈：feedback
常见问题：faq 
中心概况：general_profile
游乐园：amusement_park
专题报道：special_report
图标: icon 注释：note
指南：guild 服务：service
热点：hot 新闻：news
下载：download 
投票：vote
商标：label/branding 
当前位置：breadcrumb/loc
购物车：shop 
标签：tag
信誉：siteinfo_credits 
网站信息：siteinfo
法律声明：siteinfo_legal 
合作伙伴：partner
友情链接：friendlink 
版权：copyright