Web前端开发规范

Vin Cente

已于 2023-02-23 14:31:45 修改

阅读量755

点赞数

分类专栏： WEB 前端文章标签：前端

于 2022-07-29 20:07:32 首次发布

本文链接：https://blog.csdn.net/mr_fei/article/details/126061359

版权

WEB 前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一：文件存放位置规范

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

二：文件命名规范

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