整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
以下是一个标准的html结构
html复制代码<!DOCTYPE html>
<html>
<head>
<!-- 必须声明 utf-8 编码格式 -->
<meta charset="utf-8">
<!-- 页面标题不能为空 -->
<title>京东商城:商家后台</title>
<!-- 移动端必须使用 viewport 适配需要, PC 看场景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 样式文件 以外链形式在此处引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
</head>
<body>
<!-- 页面主体 -->
<div class="warp">
<header>顶部内容区域，比如：菜单头</header>
<div class="content">主内容区域</div>
<footer>顶部页尾区域，比如：备案号</footer>
</div>
<!-- js文件 在此处引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
避免多个框架混合使用，在同一个工程里面要保持主框架的一致性，多框架同时使用会造成代码混乱，后期会变得越来越难维护。
1、全局样式禁止使用!important
2、避免使用导入式引入css样式文件；
css复制代码<style type="text/css">
@import url(./demo.css);
</style>
历史页面会有一些功能下线，在去除页面初始化的js语句的同时，也要将依赖的js文件删除，避免资源加载浪费
开启Gzip压缩功能， 可以使网站的css、js 、xml、html 文件在传输时进行压缩，提高访问速度
在开发过程中，发现无用字段占传输比例30%以上时，请进行返回数据的删减，加快数据请求速度
上传图片之前一定要做图片的无损压缩，节省网络流量,推荐网站tinypng
html复制代码<!DOCTYPE html>
<html>
<head>
<!-- 必须声明 utf-8 编码格式 -->
<meta charset="utf-8">
<!-- keywords 关键词 和 Description 页面描述 便于搜索引擎检索，不强制使用 -->
<meta name="Keywords" Content=”关键词1,关键词2,关键词3,关键词4″>
<meta name="Description" Content=”页面描述″>
<!-- 移动端必须使用 viewport 适配需要, PC 看场景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 推荐手动引入指定路径 favicon -->
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- 样式文件必须以外链形式在此处引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
<!-- 内联样式 -->
<style type="text/css">
.warp {
margin: 0;
padding: 0;
}
</style> -->
<!-- 页面标题不能为空 -->
<title>页面标题</title>
</head>
<body>
<!-- 页面主体 -->
<div class="warp">
<header>顶部内容区域，比如：菜单头</header>
<div class="content">主内容区域</div>
<footer>顶部页尾区域，比如：备案号</footer>
</div>
<!-- JavaScript 文件在此处引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
原生 HTML 标签元素小写使用，自定义组件使用小驼峰命名（自定义标签避免和原生标签同名）
html复制代码<!-- 错误 ❌ -->
<DIV></DIV>
<SPAN></SPAN>
<!-- 正确 ✅ -->
<div></div>
<p></p>
<!-- 自定义组件 -->
<shareDialog><shareDialog/>
禁止在行内元素中嵌套块级元素❗️
html复制代码<!-- 错误的嵌套 ❌ -->
<span><div></div></span>
<i><p></p></i>
<!-- 正确的嵌套 ✅ -->
<div><span></span></div>
<p><i></i></p>
更多标签使用规则介绍请查看尾部附录
定义属性赋值时，使用双引号，禁止单双引号混用
html复制代码<!-- 错误的定义 ❌ -->
<input id="formTitle" type='text' placeholder="请输入标题">
<!-- 正确的定义 ✅ -->
<input id="formTitle" type="text" placeholder="请输入标题" data="formTitle">
除自闭合标签外，所有标签都需正确的编写闭合标签
常用自闭合标签： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />
ID 和 Class 取通用且有意义的名字；
使用连字符 - 作为 ID、Class 名称界定符 ，不要驼峰命名法和下划线；
避免选择器嵌套层级过多，尽量少于 3 级；
使用命名空间防止命名冲突，利于维护；
css复制代码/* 不推荐: 无意义 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
/* 推荐: 明确详细 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}
css复制代码/* 标准的声明顺序 */
.declaration-order {
/* 布局属性 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* 盒模型属性 */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* 文本属性 */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* 视觉属性 */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* 其他属性 */
cursor: pointer;
}
<img/>标签守则
html复制代码<!-- 禁止 src 取值为空 -->
<img src="" />
<!-- 推荐 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />
尺寸 小于 50 × 50 的请使用 字体图标（iconfont）或者 将多个图标合成一张大图使用（雪碧图） 尺寸大于 50 × 50 的图片，引入前先使用 在线压缩 对其进行压缩 ，图片大小尽量控制在 300kb 以内
PC端、移动端 推荐使用 2倍图 (@2x），避免设备分辨率过高，图片显示失真模糊 如有兼容 iPad 场景等特殊场景，可使用 3倍图（@3x）
html复制代码<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>
2倍图： 图片展示区域大小 : 图片实际尺寸 = 1 ：2
无论使用几倍图，图片大小都需遵守上条限制
如遇图片倍图问题，可咨询 @UI童鞋
js复制代码/* 推荐用变量保存频繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
/* 推荐用变量保存频繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName('li')
1个页面中建议CSS文件不要超过3个（1个组件库样式文件、1个项目公共样式、1个页面样式）； JS文件不要超过5个（1个框架文件、1个组件库文件、1个项目公共库文件、1个页面脚本文件、1个埋点文件）。
缩进使用 2个空格 样式建议引入 CSS reset 重置各浏览器自带样式差异 github.com/necolas/nor… JS 中字符串定义 使用 '' 单引号
保持一定的代码洁癖，尤其在大型项目中
性能检测工具 - Lighthouse简介 Lighthouse是一个Google开源的自动化工具，主要用于改进网络应用的质量。Lighthouse会对各个测试项的结果打分，并给出优化建议，这些打分标准和优化建议可以视为Google的网页最佳实践。
Chrome拓展程序 谷歌商店安装lighthouse后，在右上角或者菜单里点击图中图标，Options可以配置测试项目，点击Generate report即可测试。
命令行
js复制代码<!-- 安装 lighthouse 组件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 启动测试 （测试过程中会自动打开 Chrome 完成后会在当前目录生成一个静态HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 帮助-->
lighthouse --help
检测结果
标签 | 语义 | 嵌套常见错误 | 常用属性 |
<a></a> | 超链接/锚 | a不可嵌套a | href,name,title,rel,target |
<div></div> | 块级容器 | ||
<p></p> | 段落 | 不能嵌套块级元素 | |
<span></span> | 内联容器（行内元素） | 不可嵌套块级容器 | |
<form></form> | 表单 | action,target,method,name | |
<input /> | 输入框 | 不可嵌套元素 | type,name,value,checked,disabled,maxlength,readonly,accesskey |
<textarea></textarea> | 多行文本输入控件 | name,accesskey,disabled,readonly,rows,cols | |
<img /> | 图像 | 不可嵌套元素 | alt,src,width,height |
<label></label> | 标签（常用input元素定义标注） | 不可嵌套块级容器 | for |
<table></table> | 表格 | 只可嵌套表格子元素 | width,align,background,cellpadding,cellspacing,summary,border |
<tbody></tbody> | 表格主体 | 只能嵌套在table内 | |
<thead></thead> | 表头 | 只能嵌套在table内 | |
<tr></tr> | 表格行 | 嵌套于table或thead、tbody、tfoot | |
<td></td> | 表格中的单元格 | 只用于tr | colspan,rowspan |
<th></th> | 表格中的标题单元格 | 只用于tr | colspan,rowspan |
<tfoot></tfoot> | 表格表尾 | 只用于table | |
<button></button> | 按钮 | 不可嵌套表单、表格等块级元素 | type,disabled |
<select></select> | 列表框或下拉框 | 只能嵌套option或optgroup | name,disabled,multiple |
<option></option> | select中的一个选项 | 只能嵌套在select内 | value,selected,disabled |
<ol></ol> | 有序列表 | 只能嵌套li | |
<ul></ul> | 无序列表 | 只能嵌套li | |
<li></li> | 无序列表项 | 只能嵌套在 ul 或 ol 内 | |
<iframe></iframe> | 内嵌一个网页 | frameborder,width,height,src,scrolling,name | |
<br /> | 换行 | ||
<link /> | 引用样式或icon | 不可嵌套任何元素 | type,rel,href |
<meta /> | 文档信息 | 只用于head内 | content,http-equiv,name |
<script></script> | 引用脚本 | 不可嵌套任何元素 | type,src |
<style></style> | 引用样式 | 不可嵌套任何元素 | type,media |
<title></title> | 文档标题 | 只用于head内 |
点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。
作者：StriveToY
链接：https://juejin.cn/post/7262378982255394873
1.基本html结构
2.生成div加类名的快捷键
3.带类名的div
4.带id的div
5.属性【】
6.后代>
7.兄弟+
8.上级^
9.乘法*
10.文本{}
注意：这里输入“！”+回车键前，需要清空原来生成的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html><div class="list">
<div class="item_1"></div>
<div class="item_2"></div>
<div class="item_3"></div>
<div class="item_4"></div>
<div class="item_5"></div>
<div class="item_6"></div>
</div><div class="wrapper"></div><div id="wrapper"></div><span title="test"></span><span title="test"></span><div></div>
<p></p>
<span></span><div><span></span></div>
<i></i><ul>
<li></li>
<li></li>
</ul><div><span>这是文本</span></div>编程领域，代码规范是非常重要的，因为它们有助于确保代码的清晰性、一致性和可维护性。不同的编程语言和组织可能有不同的代码规范，但以下是一些在各种编程语言中普遍认为最常用的代码规范：
1. PEP 8：针对Python语言的官方风格指南，它提供了Python代码的编写标准，包括命名约定、代码布局、注释等。
2. Google Python Style Guide：Google为其Python代码制定了一套风格指南，它基于PEP 8，但在某些方面提供了更具体的指导。
3. Airbnb JavaScript Style Guide：Airbnb为JavaScript编写了一套风格指南，它被广泛使用于JavaScript社区，包括ES5和ES6+的规则。
4. Prettier：Prettier是一个代码格式化工具，它支持多种编程语言，并提供了一套严格的代码风格规则，以保持代码的一致性。
5. ESLint：ESLint是一个用于JavaScript和JSX的代码质量工具，它允许开发者定义自己的代码规范，并帮助检测代码中的潜在问题。
6. Ruby Style Guide：由GitHub提供的Ruby风格指南，它涵盖了Ruby编程语言的编码习惯和最佳实践。
7. Scala Style Guide：由Twitter工程师编写的Scala风格指南，它提供了一套用于Scala编程语言的编码规范。
8. CSS Guidelines：Harry Roberts编写的CSS指南，它提供了一套关于如何编写可维护、可扩展和可管理的CSS的规则。
9. HTML/CSS/JS Coding Conventions：由Google提供的针对HTML、CSS和JavaScript的编码约定。
10. The Rust Programming Language：Rust官方文档中包含了Rust编程语言的风格指南。
这些代码规范通常包括以下几个方面：
- 命名约定：如何命名变量、函数、类等。
- 代码布局：如何缩进、空格、换行等。
- 注释和文档：如何编写清晰、有用的注释和文档。
- 错误处理：如何处理异常和错误。
- 代码组织：如何组织文件和模块。
遵守这些规范可以帮助团队更好地协作，并使新加入的成员更容易理解现有代码。此外，许多代码规范也被集成到了IDE和编辑器中，以及自动化工具中，如代码格式化器、静态分析工具和持续集成系统，以帮助开发者自动遵守这些规范。
*请认真填写需求信息，我们会在24小时内与您取得联系。
