Web前端开发代码规范总结
概述
浏览器内核的不同，我们知道他们显⽰页⾯或者排版就有些许差异，所以我们要遵循web标准可以让不同我们写的页⾯更标准更统⼀外，另外许多优点：
张家界在哪个省让Web的发展前景更⼴阔
内容能被更⼴泛的设备访问
更容易被搜寻引擎搜索
降低⽹站流量费⽤
使⽹站更易于维护
提⾼页⾯浏览速度
Web 标准构成
构成：主要包括结构（Structure）、表现（Presentation）和⾏为（Behavior）三个⽅⾯。
结构：HTML - 结构⽤于对⽹页元素进⾏整理和分类，。
表现: CSS - 表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式
⾏为：Javascript - ⾏为是指⽹页模型的定义及交互的编写
代码规范
HTML规范
基于 、 等官⽅⽂档，并结合团队业务和开发过程中总结的规范约定，让页⾯HTML代码更具语义性。
图⽚规范
了解各种图⽚格式特性，根据特性制定图⽚规范，包括但不限于图⽚的质量约定、图⽚引⼊⽅式、图⽚合并处理等，旨在从图⽚层⾯优化页⾯性能。
CSS规范
统⼀规范团队 CSS 代码书写风格和使⽤ CSS 预编译语⾔语法风格，提供常⽤媒体查询语句和浏览器私有属性引⽤，并从业务层⾯统⼀规范常⽤模块的引⽤。
命名规范
从 ⽬录、图⽚、HTML/CSS⽂件、ClassName 的命名等层⾯约定规范团队的命名习惯，增强团队代码的可读性。
2. HTML 规范
DOCTYPE 声明
HTML⽂件必须加上 DOCTYPE 声明，并统⼀使⽤ HTML5 的⽂档声明：
<!DOCTYPE html>
HTML5标准模版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5标准模版</title>
</head>
<body>
</body>
</html>
页⾯语⾔lang
推荐使⽤属性值 cmn-Hans-CN（简体, 中国⼤陆），但是考虑浏览器和操作系统的兼容性，⽬前仍然使⽤ zh-CN 属性值
<html lang="zh-CN">
更多地区语⾔参考：
zh-SG 中⽂ (简体, 新加坡) 对应 cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK 中⽂ (繁体, ⾹港) 对应 cmn-Hant-HK 普通话 (繁体, ⾹港)
zh-MO 中⽂ (繁体, 澳门) 对应 cmn-Hant-MO 普通话 (繁体, 澳门)
zh-TW 中⽂ (繁体, 台湾) 对应 cmn-Hant-TW 普通话 (繁体, 台湾)
charset 字符集合
⼀般情况下统⼀使⽤ “UTF-8” 编码
<meta charset="UTF-8">
由于历史原因，有些业务可能会使⽤ “GBK” 编码
<meta charset="GBK">
请尽量统⼀写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 ，其编码标准的写法是 “UTF-8”；⽽ UTF8或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding 中的⼀个属性名就叫 UTF8。
书写风格
HTML代码⼤⼩写
HTML标签名、类名、标签属性和⼤部分属性值统⼀⽤⼩写
推荐：
<div class="demo"></div>今日生猪价格表
不推荐：
<div class="DEMO"></div>
<DIV CLASS="DEMO"></DIV>
类型属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含
推荐：
<link rel="stylesheet" href="">
<script src=""></script>
不推荐：
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
元素属性
元素属性值使⽤双引号语法
机械设计制造自动化元素属性值可以写上的都写上
推荐：
<input type="text">
<input type="radio" name="name" checked="checked">
不推荐：
<input type=text>
<input type='text'>
<input type="radio" name="name" checked >
特殊字符引⽤
⽂本可以和字符引⽤混合出现。这种⽅法可以⽤来转义在⽂本中不能合法出现的字符。
在 HTML 中不能使⽤⼩于号 “<” 和⼤于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显⽰，在 HTML 源代码中使⽤字符实体
推荐：
<a href="#">more>></a>
不推荐：
<a href="#">more>></a>
代码缩进
统⼀使⽤四个空格进⾏代码缩进，使得各编辑器表现⼀致（各编辑器有相关配置）
<div class="jdc">
<a href="#"></a>
</div>
代码嵌套
元素嵌套规范，每个块状元素独⽴⼀⾏，内联元素可选
推荐：
<div>
<h1></h1>
<p></p>
</div>
<p><span></span><span></span></p>
不推荐：
<div>
<h1></h1><p></p>
</div>
<p>
<span></span>
<span></span>
</p>
段落元素与标题元素只能嵌套内联元素
推荐：
<h1><span></span></h1>
<p><span></span><span></span></p>
不推荐：
<h1><div></div></h1>
<p><div></div><div></div></p>
3. 图⽚规范
内容图
内容图多以商品图等照⽚类图⽚形式存在，颜⾊较为丰富，⽂件体积较⼤
优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
尽量不使⽤PNG格式，PNG8 ⾊位太低，PNG24 压缩率低，⽂件体积⼤
PC平台单张的图⽚的⼤⼩不应⼤于 200KB。
背景图
背景图多为图标等颜⾊⽐较简单、⽂件体积不⼤、起修饰作⽤的图⽚
PNG 与 GIF 格式，优先考虑使⽤ PNG 格式,PNG格式允许更多的颜⾊并提供更好的压缩率图像颜⾊⽐较简单的，如纯⾊块线条图标，优先考虑使⽤ PNG8 格式，避免不使⽤ JPEG 格式图像颜⾊丰富⽽且图⽚⽂件不太⼤的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式图像颜⾊丰富⽽且⽂件⽐较⼤的（40KB - 200KB）优先考虑 JPEG 格式
条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式
4. CSS规范
代码格式化
样式书写⼀般有两种：⼀种是紧凑格式 (Compact)
.box{display: block;width: 50px;}
⼀种是展开格式（Expanded）
.box{
display: block;
width: 50px;雮尘珠为什么在献王墓
}
团队约定
统⼀使⽤展开格式书写样式
代码⼤⼩写
关于清明节的诗句有哪些样式选择器，属性名，属性值关键字全部使⽤⼩写字母书写，属性字符串允许使⽤⼤⼩写。
/* 推荐 */
.box{
display:block;
}
/
* 不推荐 */
.box{
DISPLAY:BLOCK;
}
选择器
尽量少⽤通⽤选择器 *
不使⽤ ID 选择器
不使⽤⽆具体语义定义的标签选择器
/* 推荐 */
南京旅游景点介绍.box{}
.box li{}
.
box li p{}
/* 不推荐 */
*{}
#box{}
.box div{}
代码缩进
统⼀使⽤四个空格进⾏代码缩进，使得各编辑器表现⼀致（各编辑器有相关配置）
.box{
width: 100%;
height: 100%;
}
分号
每个属性声明末尾都要加分号；
.box{
width: 100%;
height: 100%;
}
代码易读性
左括号与类名之间⼀个空格，冒号与属性值之间⼀个空格
推荐：
.box{
width: 100%;
}
不推荐：
.box{
width:100%;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论