0基础学web前端第10天：案例页面制作之代码规范
我们前面已经学习了HTML与CSS的一些基础，那我们就要开始进入实战项目。我们在案例制作之前我们首先需要做的准备工作有哪些？在实际的工作中我们应该如何系统的来完成一个静态的页面制作呢？
1.准备工具
我们用的还是VScode（Visual Studio Code）（代码编写），PhotoShop（切图），浏览器（查看效果）。
技术栈：HTML+CSS 前面我们只学习了这些。
2.代码规范
在实际开发中，我们往往不是一个人在工作，一个团队工作那么我们就需要详细的代码规范。代码规范可以增强团队开发协作、提高代码质量和打造开发基石的编码规范。
2.1HTML规范
基于 W3C、苹果开发者等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。
DOCTYPE 声明
<!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">
charset字符集合
一般情况下使用“UTF-8”编码
<meta charset="UTF-8">
书写风格
HTML代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写。
推荐：
<div class="demo"></div>
类型属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含。推荐：
<link rel="stylesheet" href="" > <script src=""></script>
元素属性
元素属性值使用双引号语法，元素属性值可以写上的都写上。推荐：
<input type="text"> <input type="radio" name="name" checked="checked" >
特殊字符引用
文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。在HTML中不能使用小于号和大于号特殊字符，浏览器会将它们作为标签解析，若要正确显示，在HTML源代码中使用字符实体。推荐：
<a href="#">more>></a>
代码缩进
统一使用四个空格进行代码缩进，使用各种编辑器表现一致。
<div class="jdc">
<a href="#"></a>
</div>
代码嵌套
元素嵌套规范，每个块状元素独立一行，内联元素可选。
<div>
<h1></h1>
<p></p>
</div>
<p><span></span><span></span></p>
段落元素与标题元素只能嵌套内联元素
<h1><span></span></h1> <p><span></span><span></span></p>
2.2图片规范
了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。
内容图
内容图多以商品等照片类图片形式存在，颜色较为丰富，文件体积较大，优先考虑JPGE格式，条件允许的话优先考虑WebP格式。尽量不使用PNG格式，PNG8色位太低，PNG24压缩率低，文件体积大。PC平台单独的图片大小不应该大于200KB。
背景图
背景图多为图标等颜色比较简单、文件体积不大，起修饰作用的图片。PNG与GIF格式，优先考虑使用PNG格式，PNG格式允许更多的颜色并提供更好的压缩率。图像颜色比较简单的，如纯色块线条图标，优先考虑PNG8格式，避免不使用JPGE格式。图像颜色丰富而且图片文件不太大的（40KB以下）或有半透明的优先考虑PNG24格式。图像颜色丰富而且文件较大的（40KB-200KB）优先考虑JPEG格式。条件考虑WebP代替PNG和JPEG格式。
2.3CSS规范
统一规范团队CSS代码书写风格和使用CSS预编译语文语法，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。
代码格式化
样式书写一般有两种：一种紧凑格式（Compact）
.jdc{ display: block;width: 50px;}
一种是展开格式（Expanded）
.jdc {
display: block;
width: 50px;
}
统一使用展开格式书写样式。
代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
/* 推荐 */
.jdc{
display:block;
}
/* 不推荐 */
.JDC{
DISPLAY:BLOCK;
}
选择器
尽量少用通用选择器*，不使用ID选择器。不使用无具体语义定义的标签选择器。
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}
/* 不推荐 */
*{}
#jdc {}
.jdc div{}
代码缩进
统一使用四个空格进行代码缩进使用各编辑器表现一致。
.jdc {
width: 100%;
height: 100%;
}
分号
每个属性声明末尾都要加分号；
.jdc {
width: 100%;
height: 100%;
}
代码易读性
左括号与类名之间一个空格，冒号与属性值之间一个空格。推荐：
.jdc {
width: 100%;
}
逗号分隔的取值，逗号之后一个空格。推荐：
.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
为单个css选择器或新申明开启新行。推荐：
.jdc,
.jdc_logo,
.jdc_hd {
color: #ff0;
}
.nav{
color: #fff;
}
rgb() rgba() hsl() hsla() rect()
.jdc {
color: rgba(255,255,255,.5);
}
属性值十六进制数值能用简写的尽量用简写。推荐：
.jdc {
color: #fff;
}
不要为 0 指明单位。推荐：
.jdc {
margin: 0 10px;
}
属性值引号
CSS属性值需要用到引号时，统一使用单引号
/* 推荐 */
.jdc {
font-family: 'Hiragino Sans GB';
}
/* 不推荐 */
.jdc {
font-family: "Hiragino Sans GB";
}
属性书写顺序
建议遵循以下顺序：
1.布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写)
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:line-gradient...
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
2.4命名规范
目录、图片、HTML/CSS文件、ClassName
样式文件夹：css
脚本文件夹：js
样式类图片文件夹：img
产品类图片文件夹：upload
字体文件夹：fonts
ClassName命名
字母开头命名，且全部字母为小写，单词之间统一使用下划线
常用命名推荐：
<div class="ad"></div>
这种广告英文或拼音类名不应该出现。另外，敏感不和谐字眼也不应该出现。如:
<div class="fuck"></div> <div class="jer"></div> <div class="sm"></div> <div class="gcd"></div> <div class="ass"></div> <div class="KMT"></div> ...
| 含义 | |
|---|---|
| about | 关于 |
| account | 账户 |
| arrow | 箭头图标 |
| article | 文章 |
| aside | 边栏 |
| audio | 音频 |
| avatar | 头像 |
| bg,background | 背景 |
| bar | 栏（工具类） |
| branding | 品牌化 |
| crumb,breadcrumbs | 面包屑 |
| btn,button | 按钮 |
| caption | 标题，说明 |
| category | 分类 |
| chart | 图表 |
| clearfix | 清除浮动 |
| close | 关闭 |
| col,column | 列 |
| comment | 评论 |
| community | 社区 |
| container | 容器 |
| content | 内容 |
| copyright | 版权 |
| current | 当前态，选中态 |
| default | 默认 |
| description | 描述 |
| details | 细节 |
| disabled | 不可用 |
| entry | 文章，博文 |
| error | 错误 |
| even | 偶数，常用于多行列表或表格中 |
| fail | 失败（提示） |
| feature | 专题 |
| fewer | 收起 |
| field | 用于表单的输入区域 |
| figure | 图 |
| filter | 筛选 |
| first | 第一个，常用于列表中 |
| footer | 页脚 |
| forum | 论坛 |
| gallery | 画廊 |
| group | 模块，清除浮动 |
| header | 页头 |
| help | 帮助 |
| hide | 隐藏 |
| hightlight | 高亮 |
| home | 主页 |
| icon | 图标 |
| info,information | 信息 |
| last | 最后一个，常用于列表中 |
| links | 链接 |
| login | 登录 |
| logout | 退出 |
| logo | 标志 |
| main | 主体 |
| menu | 菜单 |
| meta | 作者、更新时间等信息栏，一般位于标题之下 |
| module | 模块 |
| more | 更多（展开） |
| msg,message | 消息 |
| nav,navigation | 导航 |
| next | 下一页 |
| nub | 小块 |
| odd | 奇数，常用于多行列表或表格中 |
| off | 鼠标离开 |
| on | 鼠标移过 |
| output | 输出 |
| pagination | 分页 |
| pop,popup | 弹窗 |
| preview | 预览 |
| previous | 上一页 |
| primary | 主要 |
| progress | 进度条 |
| promotion | 促销 |
| rcommd,recommendations | 推荐 |
| reg,register | 注册 |
| save | 保存 |
| search | 搜索 |
| secondary | 次要 |
| section | 区块 |
| selected | 已选 |
| share | 分享 |
| show | 显示 |
| sidebar | 边栏，侧栏 |
| slide | 幻灯片，图片切换 |
| sort | 排序 |
| sub | 次级的，子级的 |
| submit | 提交 |
| subscribe | 订阅 |
| subtitle | 副标题 |
| success | 成功（提示） |
| summary | 摘要 |
| tab | 标签页 |
| table | 表格 |
| txt,text | 文本 |
| thumbnail | 缩略图 |
| time | 时间 |
| tips | 提示 |
| title | 标题 |
| video | 视频 |
| wrap | 容器，包，一般用于最外层 |
| wrapper |
评论