导图社区 前端html css代码规范
写前端代码时需要注意的一些规范性问题。
前端代码书写规范，包括html、css，规范代码书写的优点：易于维护：只需更改CSS文件，就可以改变整站的样式；页面响应快：HTML文档体积变小，响应时间短；可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别；设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式；搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名。
高中生物选修三生态工程部分的思维导图笔记，仅供学习使用，希望我整理的笔记能对你们有帮助嘻嘻！祝你们都能考出理想成绩！
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
代码规范
HTML规范
HTML5标准模版
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML5标准模版</title> </head> <body> </body> </html>
页面语言lang
<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 字符集合
<meta charset="UTF-8">
尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”
书写风格
HTML代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写
类型属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含
*推荐：*
<link rel="stylesheet" href="" >
<script src=""></script>
*不推荐：*
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
元素属性
元素属性值使用双引号语法
元素属性值可以写上的都写上
特殊字符引用
在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
<a href="#">more>></a>
<a href="#">more>></a>
代码缩进
统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
代码嵌套
元素嵌套规范，每个块状元素独立一行，内联元素可选
<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>
图片规范
内容图
内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大
优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
PC平台单张的图片的大小不应大于 200KB。
背景图
背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片
PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式
css规范
代码格式化
样式书写
紧凑格式 (Compact)
.jdc{ display: block;width: 50px;}
展开格式（Expanded）
.jdc { display: block; width: 50px; }
代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
选择器
尽量少用通用选择器 `*` - 不使用 ID 选择器 - 不使用无具体语义定义的标签选择器
.jdc {} .jdc li {} .jdc li p{}
*{} #jdc {} .jdc div{}
分号
每个属性声明末尾都要加分号；
代码易读性
左括号与类名之间一个空格，冒号与属性值之间一个空格
逗号分隔的取值，逗号之后一个空格
为单个css选择器或新申明开启新行
颜色值 `rgb()` `rgba()` `hsl()` `hsla()` `rect()` 中不需有空格，且取值不要带有不必要的 0
.jdc { color: rgba(255,255,255,.5);
.jdc { color: rgba( 255, 255, 255, 0.5 ); }
属性值十六进制数值能用简写的尽量用简写
.jdc { color: #fff; }
.jdc { color: #ffffff; }
不要为 `0` 指明单位
.jdc { margin: 0 10px; }
.jdc { margin: 0px 10px; }
属性值引号
css属性值需要用到引号时，统一使用单引号
属性书写顺序
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:linear-gradient …
命名规范
目录命名
* 项目文件夹：shoping
* 样式文件夹：css
* 脚本文件夹：js
* 样式类图片文件夹：img
* 产品类图片文件夹： upload
* 字体类文件夹： fonts
ClassName命名
ClassName的命名应该尽量精短、明确，必须以**字母开头命名**，且**全部字母为小写**，单词之间**统一使用下划线** “_” 连接
常用命名推荐
**注意**
ad、banner、gg、guanggao 等有机会和广告挂勾的不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此 <div class="ad"></div>这种广告的英文或拼音类名不应该出现 另外，**敏感不和谐字眼**也不应该出现
