您现在的位置是:首页 > 正文

Web前端开发规范

2024-04-01 02:42:46阅读 3

目录

一:文件存放位置规范

二:文件命名规范

三:HTML书写规范

四:CSS书写规范


一:文件存放位置规范

Content    //存放CSS样式文件
Cn         //存放中文HTML文件
En         //存放英文HTML文件
Images     //存放图片文件
Media      //存放多媒体文件
Project    //存放工程项目文件
Scripts    //存放JavaScript文件

二:文件命名规范

  1. 文件名称命名要有意义,优先使用中文翻译后的英文命名。
  2. 文件命名格式统一为:首字母大写+其它字母小写的英文字母、数字和下划线组合,其中不能包含汉字、空格和特殊字符。
  3. HTML文件的名称统一为:Index.htm、Index.html、Index.asp等命名。
  4. 子页命名应为该栏目名称或功能名称的英语翻译为该文件命名。如关于我们:Aboutus、信息反馈:Feedback、产品:Product等。
  5. 图片命名分为头尾两部分,用下划线分割。头部分表示此图片的性质如菜单、标志、按钮等。尾部分表示此图片的意义如Menu、Logo、Button等。

三:HTML书写规范

<!-- 简体中文 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!-- 通用字符 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 最新字符 -->
<meta charset="utf-8" />
<!-- 最新字符 -->
<meta charset="gb2312" />
<!-- 网站重要信息 -->
<META NAME="Title" CONTENT="网站标题">
<META NAME="Author" CONTENT="网站作者">
<META NAME="Subject" CONTENT="网站主题">
<META NAME="Description" CONTENT="网站描述">
<META NAME="Keywords" CONTENT="网站关键字">
<META NAME="Generator" CONTENT="开发工具Microsoft Visual Studio">
<META NAME="Language" CONTENT="网站语言zh-CN">
<META NAME="Abstract" CONTENT="网站摘要">
<META NAME="Copyright" CONTENT="?网站版权">
<META NAME="Designer" CONTENT="网站设计者">
<META NAME="Publisher" CONTENT="网站出版者">
<!-- 网站过期时间,过期后重新请求服务器 -->
<META NAME="Expires" CONTENT="网页过期时间Wed, 27 Sep 2023 08:21:57 GMT">
<!-- 禁用浏览器从本地缓存中读取页面内容 -->
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<!-- 禁用其它网站调用本站页面 -->
<META HTTP-EQUIV="Window-target" CONTENT="_top">
<!-- 引用CSS样式文件 -->
<link rel="stylesheet" type="text/css" href="../Content/Style.css">
<!-- 引用JavaScript文件 -->
<script type='text/javascript' src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- HTML文件内模块标签命名 -->
头部:Header
标志:Logo
注册:Regsiter
登录:Loginbar
导航:Nav
子导航:Subnav
菜单:Menu
子菜单:Submenu
内容:Content
侧栏:Sidebar
栏目:Column
栏目标题:Title
文章列表:List
页面主体:Main
标签:table
广告:Banner
热点:Hot
新闻:News
下载:Download
搜索:Search
状态:Status
提示信息:msg
友情链接:Friendlink
页脚:Footer
左右中:Left Right Center
版权:Copyright

四:CSS书写规范

@charset "UTF-8";
/* Others - Start */
*{ margin:0; padding:0;}
html{ margin:0; padding:0;}
body{ margin:0; padding:0; font:15px "\5B8B\4F53", Verdana, Arial, Sans-serif; background:#FFF; text-align:center; padding:0;line-height:1.5;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p{ margin:0; padding:0;}
table,td,tr,th{ font-size:12px;}
img{ border:0; display:block;}
ul,li,ul li,ol{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-size:12px; font-weight:normal;}
a{ text-decoration:none; color:#333333; text-align:center;}
a:hover{ text-decoration:none; color:#E6003B;}
a:active{ text-decoration:none; color:#333333;}
.fl { float:left}
.fr { float:right}
.al { text-align:left}
.ac { text-align:center}
.ar { text-align:right}
.hide { display:none}

/* Others - End */

网站文章

  • 在django template中定义临时变量,并自定义操作:赋值、自增 热门推荐

    定义临时变量: {% with i=1 %} {{i}} {% endwith %} 定义对临时变量操作的tag 在templatetags中创建set_val.py 内容是 from django import template import logging register = template.Library() class SetVarNode(template.Nod

    2024-04-01 02:42:39
  • 收藏适配Android Q

    mp.weixin.qq.com/s/esClAFOF1…转载于:https://juejin.im/post/5cf60ed7e51d4550723b13ae

    2024-04-01 02:42:31
  • python 计算 IOU代码

    【代码】python 计算 IOU代码。

    2024-04-01 02:41:51
  • 克鲁斯卡尔kruskal算法(Java)

    克鲁斯卡尔kruskal算法(Java)

    1)克鲁斯卡尔(kruskal)算法,是用来求加权连通图的最小生成树的算法2)基本思想:按照权值从小到大的顺序选择n-1条边(假设最小生成树有n个顶点,则有n-1条边),并保证这n-1条边不构成回路3)具体做法:首先构造一个只含n个顶点的森林,然后依照权值从小到大从连通网中选取边加入到森林中,使得森林中不产生回路,直到森林变成一颗树为止(最小生成树)

    2024-04-01 02:41:46
  • vue2+element-ui 实现国际化

    vue2+element-ui实现项目语言国际化

    2024-04-01 02:41:00
  • 人工智能反向传播算法,神经网络反演算法

    人工智能反向传播算法,神经网络反演算法

    反向传播算法被设计为减少公共子表达式的数量而不考虑存储的开销。反向传播避免了重复子表达式的指数爆炸。然而,其他算法可能通过对计算图进行简化来避免更多的子表达式,或者也可能通过重新计算而不是存储这些子表达式来节省内存。

    2024-04-01 02:40:54
  • java enumeration 排序_Java如何对java.util.Enumeration进行排序?

    在此代码段中,您将看到如何对Enumeration对象的内容进行排序。我们首先创建一个随机数并将其存储在中Vector。我们用这些数字,并创建和Enumeration调用对象Vector的elemen...

    2024-04-01 02:40:46
  • 计算机数学基础试卷,计算机数学基础复习题

    计算机数学基础试卷,计算机数学基础复习题

    计算机数学基础复习题计算机数学基础复习题一、填 空 题x2 y2x2 y2x2 y2A、0 B、123 C、 D、 9993、设A、B均为四阶矩阵且k>0,则下式( B )必成立。A 、|A+B|=|A|+|B| B、|AB|=|A||B| C、AB=BA D、|KA|=K|A| 4、将一枚均匀硬币投掷三次,则...

    2024-04-01 02:40:39
  • 责任链模式

    责任链模式

    什么是责任链模式?在现实生活中,有很多请求并不是一个人说了就算的,例如面试时的工资,低于1万的薪水可能技术经理就可以决定了,但是1万~1万5的薪水可能技术经理就没这个权利批准,可能就需要请求技术总监的批准,所以在面试的完后,经常会有面试官说,你这个薪水我这边觉得你这技术可以拿这个薪水的,但是还需要技术总监的批准等的话。责任链模式——某个请求需要多个对象进行处理,从而避免请求的发送者和接收之...

    2024-04-01 02:39:55
  • 是一种以计算机为工具 应用决策科学,2020年国家开放大学电大《物流信息技术》题库及答案...

    1.20世纪80年代,各国相继制定广各自行业或间家EDI标准,其中(美国)制定的ANSIX12国家标准最具代表性。2.3G物流配送监控的功能一般包括(车辆跟踪、路线的规划和导航、指挥调度、信息查询、紧...

    2024-04-01 02:39:45