江苏龙网

  1. 主页 > 生活百科 > >

前端规范整理

前端

本文参考内容:
京东凹凸实验室前端代码规范 ：https://guide.aotu.io/docs/js/react.html
vue风格指南：https://cn.vuejs.org/v2/style-guide/index.htm

前端规范整理

文章插图
 
HTML规范<!-- HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明： --><!DOCTYPE html><!-- 优先使用 IE 最新版本和 Chrome Frame --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><!--所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上 ---><div><h1>我是h1标题</h1><p>我是一段文字，我有始有终，浏览器能正确解析</p></div> <!-- 空元素标签都不加 “/” 字符 ---><br><!-- 不需要为 css、JS 指定类型属性，HTML5 中默认已包含 --><link rel="stylesheet" href=https://www.isolves.com/it/cxkf/bk/2021-12-02/"" >元素属性值
元素属性值可以写上的都写上
推荐：
<input type="text"><input type="radio" name="name" checked="checked" >不推荐：
<input type=text><input type='text'><input type="radio" name="name" checked ><!-- 特殊字符引用 如小于号 “<” 和大于号 “>” --><a href=https://www.isolves.com/it/cxkf/bk/2021-12-02/"#">more>>代码缩进
我们可以约定4个空格还是2个空格：商量确定tab：缩进2
<!--统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置） --><div class="jdc"><a href=https://www.isolves.com/it/cxkf/bk/2021-12-02/"#">
<!-- 移动端 --><!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" ><meta name="format-detection" content="telephone=no" > <!-- PC端 --><!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="keywords" content="your keywords"><meta name="description" content="your description"><meta name="author" content="author,email address"><meta name="robots" content="index,follow"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="renderer" content="ie-stand">DNS Prefetch 是一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS 的解析，减少用户等待时间，提高用户体验 。
详细介绍参考 ：https://blog.csdn.net/weixin_30734435/article/details/97847990
<!-- S DNS预解析 --><link rel="dns-prefetch" href=https://www.isolves.com/it/cxkf/bk/2021-12-02/"">图片规范CSS Sprites VS Data URIsCSS Sprites特点
  • 减少请求数
  • 加速图片的显示
  • 维护更新成本大
  • 更多的内存消耗，特别是大体积或有过多空白的 Sprites 图
  • 图片渗漏，相邻的不需展示的图片有可能出现在展示元素中，特别是在高清设备移动设备上
Data URIs特点（base64编码）
  • 减少请求数
  • 转换文件体积大，大约比原始的二进制大33%
  • IE6 / IE7 不支持
  • 图片显示相对较慢，需要更多的CPU消耗
CSS Sprites 使用建议
  • 适合使用频率高更新频率低的小图标
  • 尽量不留太多的空白
  • 体积较大的图片不合并
  • 确保要合并的小图坐标数值和合并后的 Sprites 图尺寸均为偶数
Data URIs（base64编码）使用建议
  • 适合更新频率高的小图片，如某些具备自定义功能的标题icon等
  • 转换成 Base64 编码的图片应小于 2KB
  • 移动端不使用 Base64 编码
  • 要兼容 IE6/IE7 的不使用
css规范css属性书写顺序


推荐阅读


上一篇：requests 让接口测试如此简单

下一篇：6个实用的 Python 自动化脚本，你学会了吗？