Web开发规范

html命名规则

1. 文件名命名规则：

• 统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符
• 命名原则：方便理解，方便查找

2. 索引页面的命名原则：

   index.html；index.php等

3. 子页面命名原则

   1. 统一用翻译的英文命名（index，product，newslist，aboutus等）
   2. 或统一用拼音命名
   3. 注意：不要中英混用
   4. 范例： index.html(索引页面); aboutus.html(关于我们)；feedback.html(反馈页面)；linkus.html(联系我们)；history.html； prolist.html（产品页面）； prodetail.html(产品详细页面)；newslist(新闻列表)； newsdetail.html(新闻详细页面)；等

4. 图片命名规则：

   1. 图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质。 例如：广告、标志、菜单、按钮等等。
   2. 常用命名 ：
      1. 放置在页面顶部的广告、装饰图案等长方形的图片取名： banner
      2. 标志性的图片取名为： logo
      3. 在页面上位置不固定并且带有链接的小图片我们取名为 button(btn)
      4. 在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu
      5. 装饰用的照片我们取名： pic
      6. 不带链接表示标题的图片我们取名： title
   3. 范例：banner_sohu.gif； banner_sina.gif； menu_aboutus.gif； menu_job.gif； title_news.gif； logo_police.gif； logo_national.gif； pic_people.jpg；

5. 脚本文件和动态文件命名规则

   1. 一般使用脚本功能的英文小写缩写命名
      • 实际模块：例如广告条的JavaScript文件名为ad.js；弹出窗口的JavaScript文件名为pop.js
      • 共用模块：basic.js/common.js
      • 外部资源：Jquery.min.js；Jquery.validate.js；
   2. 动态语言文件命名原则
      • 以性质描述，描述可以有多个单词，用“_”隔开，性质一般是该页面的概要。
   3. 不同模块之间，可以使用不同的前缀进行区分

6. 文件存放位置规范

   1. 文件夹说明：
      1. flash存放flash文件
      2. image存放图片文件
      3. inc存放include文件
      4. library存放库文件
      5. media存放多媒体文件
      6. script存放JavaScript脚本文件
      7. css存放css文件
   2. 网站页面位置存放：
      • 客户端：可以存放到Web/网站根目录
      • 服务器端： admin

7. CSS命名方式

   页面结构
   容器：container/wrap	整体宽度：wrapper
   页头：header	内容：content
   页面主体：main	页尾：footer
   侧栏：sidebar	栏目：column
   中间内容：center
   导航
   导航：nav	主导航：mainNav/globalNav
   子导航：subNav	顶导航：topNav
   边导航：sideNav	左导航：leftSideNav
   右导航：rightSideNav	边导航图标：sideBarIcon
   菜单：menu	子菜单：subMenu
   标题：title
   功能
   标志：logo	登录：login
   登录条：loginBar	注册：regsiter
   产品：products	产品价格：products_prices
   产品评论：products_review	编辑评论：editor_review
   最新产品：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	网站信息：siteinfo
   分类浏览：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
   在线调查：online_inquiry	服务：service
   投资：investment	行业：industry
   规划：programming	动态：trends
   环境：environment	发送：delivery
   提交：submit	重写：reset
   社区：community	业务：business
   下载中心：download	常见问题：faq
   意见反馈：feedback	中心概况：general_profile
   游乐园：amusement_park	专题报道：special_report
   图标: icon	指南：guild
   注释：note	服务：service
   热点：hot	新闻：news
   下载：download	投票：vote
   商标：label/branding	当前位置：breadcrumb/loc
   购物车：shop	标签：tag
   信誉：siteinfo_credits	法律声明：siteinfo_legal
   合作伙伴：partner	友情链接：friendlink
   版权：copyright

8. Head区域代码规范

   1. 必须加入的标签：

      • 网页显示字符集：

        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        

      • 关键字：

        <meta name="keywords" content="xxxxxxxx">  
        

      • CSS：

         <link rel="stylesheet" type="text/css" href="">    
        

      • 网页标题：

        <title>XXX</title>     
        

   2. 可选加入的标签：

      1. 公司版权注释

         <!--- The site is designed by Maiziedu 09/2015 --->
         

      2. 网页制作者信息

         <meta   name="author" content="webmaster@maketown.com"> 
         

      3. 网站简介

         <meta  name="DESCRIPTION" content="xxxxxxxxxxxxxxxxxxxxxxxxxx">
         

      4. 设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。

         <meta http-equiv ="expires" content ="Wed, 26 Feb 1997 08：21：57 GMT"> 
         

      5. 禁止浏览器从本地机的缓存中调阅页面内容。

         <meta http-equiv ="Pragma" content ="no-cache">
         

      6. 用来防止别人在框架里调用你的页面。

         <meta http-equiv ="Window-target" content ="_top">  
         

      7. 自动跳转（5指时间停留5秒）

         <meta http-equiv ="Refresh" content ="5;url=http：//www.yahoo.com"> 
         

      8. 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引（CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。）

         <meta name="robots" CONTENT="none">
         

      9. 收藏夹图标

         <link rel = "Shortcut Icon" href="favicon.ico">
         

      10. 所有的javascript的调用尽量采取外部调用.

      <script language="JavaScript"  src="script/xxxxx.js"></script> 
      

9. 字体规范：

   1. 在设定字体样式时对于文字字号样式和行间距应必须使用CSS样式表。禁止在页面中出现 标记。
   2. 字体大小：在网页中中文应首选使用宋体。英文和数字首选使用verdana 和arial两种字体。一般使用中文宋体的9pt和11pt或12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt 和14.7px 的字号比较合适。
   3. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用
      来人工干预分段。
   4. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外， 汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
   5. 请不要在网页中连续出现多于一个的 也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
   6. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.
   7. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上

      标记，注意，一般情况下，请不要省略

      结束标记

10. 链接和表格使用规范：

    链接

    • 网站中的链接路径全部采用相对路径
    • 一般链接到某一目录下的缺省文件的链接路径不必写全名

    例如：<a href=”aboutus/index.htm”> 而应该这样：<a href=”aboutus/”>
    

    3. 在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端， 从而影响用户正常的阅读内容， 我们用代码“javascript:void(null)”代替原来的“#”标记

    表格

    • 尽量避免表格嵌套过多(后果会对浏览器加载延长时间， 带来不友好的用户体验)

    • 在写 table互相嵌套时，严格按照的规范，对于单独的一个table来说，table tr对齐，td 缩进两个半角空格，td中如果还有嵌套的表格，table也缩进两个半角空格， 如果td中没有任何嵌套的表格，td 结束标记应该与td处于同一行，不要换行

    • 注意源代码中不应该有这样的代码  
      <td><img src="../images/sample.gif">
      </td>
      而应该是这样子的  
      <td><img src="../images/sample.gif"></td>
      

11. 下载和浏览速度控制

    • 意义：

      • 考虑下载速度，以及页面浏览速度是web前端必须考虑的。 页面的浏览速度越快，用户体验效果越好。
      • 文件下载可以通过 a标签href指向路径直接实现
      • 图片下载则直接在网页中展示

未完待续，请持续关注。。。。。。