shenlm203
shenlm203

个人总结前端开发规范

通用约定

文件与目录命名

  • 一律小写, 必须是英文单词或产品名称的拼音, 多个单词用连字符(-)连接. 只能出现英文字母、数字和连字符, 严禁出现中文.
  • 该命名规范适用于 html, css, js, swf, php, xml, png, gif, jpg, ico 等前端维护的所有文件类型和相关目录.
  • js 和 css 压缩文件, 统一以 -min 结尾, 比如源码文件为 kissy.js, 压缩后为 kissy-min.js .压缩之前的文件使用 –src 结尾。
  • 调整自己的编辑器tab制表符一率采用4个空格

前端工程文件组织

注：

  • 在resourse/img/中新增一个test文件夹，目的是上传自己的测试图片、占位图片，请勿将网站正式的文件放于此文件夹内，因为此文件夹的内容随时有可能呗任何人删除
  • 前端的亲们在写完css文件准备上传时，注意检查一下css文件需要的的图片是否存在，是否存在多余的图片，尽量删除。

文件编码约定

所有文件一律采用utf-8编码

id 和 class 命名约定

  • id 和 class 的命名总规则为： 内容优先,表现为辅. 首先根据内容来命名, 比如 main-nav. 如果根据内容找不到合适的命名, 可以再结合表现来定, 比如 skin-blue, present-tab, col-main.
  • class 名称一律小写, 多个单词用连字符连接, 比如 recommend-presents.
  • class 名称中只能出现小写的 26 个英文字母、数字和连字符(-), 任何其它字符都严禁出现.
  • id的命名采用驼峰命名法，首字母小写，如：mainNav
  • 仅在 JavaScript 代码中当作 hook 用的 id 或 class, 命名规则为 J_UpperCamelCase``(请注意, ``J_ 后的首字母也大写！), 其中字母 J 代表 JavaScript, 也是钩子(hook)的象形. 注意：如果在 JavaScript 和 CSS 中都需要用到, 则不用遵守本约定
  • id 和 class 尽量用英文单词命名 . 确实找不到合适的单词时, 可以考虑使用产品的中文拼音, 比如 wangwang, dating. 对于中国以及淘宝特色词汇, 也可以使用拼音, 比如 xiaobao, daigou. 除了产品名称和特色词汇, 其它任何情况下都严禁使用拼音.
  • 在不影响语义的情况下, id 和 class 名称中可以适当采用英文单词缩写, 比如 col, nav, hd, bd, ft 等, 但切忌自造缩写.（常用缩写总结在css规范部分）
  • id 和 class 名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写, 比如 present, col.
  • 在自动化测试脚本中当作 hook 用的 class, 命名规则为 T_UpperCamelCase, 其中字母 T 代表 Test.

HTML规范

约定

  • 所有页面元素的z-index属性值控制在1000以下，将1000-2000留给组件级调用，2000以上用于解决特殊情况下的适应问题；
  • 所有的标签及属性名采用小写，DOCTYPE除外；
  • 保证标签语义化；
  • 分离思想，所有的样式除特殊情况，css样式不能内联写在style属性中；
  • table中使用caption,thead,tbody,tfoot标签时若是使用则建议全部使用
  • 如非项目需要，不使用html5特有的标签，如canvas。

DOCTYPE

页面文档类型统一使用HTML5 DOCTYPE. 代码如下：

<!doctype html>

另外一种DOCTYPE

采用过渡型 - 相对较为宽松

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Namespace

<html xmlns="http://www.w3.org/1999/xhtml">

编码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

编码

声明方法遵循HTML5的规范.

<meta charset="utf-8" >

注释

<!--{nav start}-->
<!--{nav end}-->

元素

推荐使用的元素

  1. 结构元素：blockquote, body, br, div, h1 - h6, head, hr, html, p
  2. 头部元素：base, link, meta, script, style, title
  3. 列表元素：ul, ol, li, dl, dt, dd
  4. 文本格式元素：a, abbr, acronym, address, bdo, cite, code, del, dfn, em, ins, kbd, noscript, pre, q, samp, small, span, strong, sub, sup, var
  5. 表单元素：button, fieldset, legend, form, input, label, optgroup, option, select, textarea
  6. 多媒体元素：area, img, map, object, param
  7. 表格元素：caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr
  8. 窗体元素：iframe

不推荐使用的元素

  1. 结构元素：无
  2. 头部元素：无
  3. 列表元素：dir, menu
  4. 文本格式元素：b, basefont, big, blink, center, comment, font, i, marquee, nobr, plaintext, ruby, s, strike, u, wbr, xmp
  5. 表单元素：isindex
  6. 多媒体元素：applet, bgsound, embed, noembed
  7. 表格元素：无
  8. 窗体元素：frame, frameset, noframes

转世重生的元素

  1. s - 表示 sprite, 可以用 <s></s<> 来做 icon 的占位元素
  2. b - 表示 border, 可以用来作为圆角的占位元素
  3. i - 预留，尚未想到合理的复活理由（可以考虑作为单个图标的展位符，表示icon）

CSS规范

基本规范

  • 模块命名要注意带上模块名，下面尽可能的简写，页面级（app应用级）命名应该尽量简洁
  • 尽可能地使用css-sprite
  • 尽量通过class属性定义样式,将id留给hook
  • 尽量不要在css中使用expression
  • 组件开发中，可以先不考虑性能，尽量使用选择符组以方便html调用,如 .table-ctrl tbody tr td.selected{}
  • font中的字体用英文或unicode代替,如黑体可写成SimHei：font:12px/1.5 SimHei ,tahoma,arial,\5b8b\4f53,sans-serif;
  • 写css属性时，‘：’后面加一个空格增加可读性

引用

统一以link形式引入，不推荐内嵌形式引入css, 不推荐<style></style>标签出现在body中。不推荐内联CSS。如有特别需要(短期推广，特定情况的页面/404错误页面)，请尽量放在head标签内

<style type="text/css" media="style/x.css"></style>

常规引入css文件

<link rel="stylesheet" type="text/css" href="style/x.css"></link>

常用css属性顺序建议

  • 显示属性(display, list-style, position, float, clear)
  • 盒模型(width, height, margin, padding, border, background)
  • 文本属性(color, font, text-decoration, text-align, vertical-align, white-space, other text, content)

注释风格

头注释

/*---------------------------------------------------------------------------------------------
@Filename: main.css
@Description: 全局css定义
@Version: 1.0.0(2009-12-28)YYYY-MM-DD
@author: simon-shen
==STRUCTURE:========================================= 
$__header 
$__menu
==NOTES:=============================================
2011-11-2:
初始生成。
2011-11-3:
更改文档结构和注释
--------------------------------------------------------------------------------------------*/

区块

/*__header
--------------------------------------------------------------------------------------------*/

/*__menu
--------------------------------------------------------------------------------------------*/

编码风格

Css组合嵌套的时候采用换行以提高可读性

h2 { color: red; } 
.w3cbbs { color: red; } 
.w3cbbs_52css { color: red; }

则可以这样写

h2,
.w3cbbs,
.w3cbbs_52css { color: red; }

如果对css文件不适用最小化处理，发布时采用single-line处理，如：

.form-normal .field{position:relative;border-bottom:1px solid #ddd;overflow:hidden;}

常用css命名参考

导航 页头 主导航 页面主体 顶导航 内容 子导航 页脚 菜单 版权 子菜单 登陆 标志 侧栏 广告 搜索 滚动 标签页 小技巧 合作伙伴 加入 标题 注册 指南 新闻 下载 按钮 状态 服务 投票 注释 友情链接
navheader
mainnavmain
topnavcontent
subnavfooter
menucopyright
submenulogin
logosidebar
bannersearch
scrolltab
tipspartner
joinustitle
regsitergUIld
newsdownload
buttonstatus
servicevote
notefriendlink

Javascript规范

命名参考

原则： * 尽量避免潜在冲突; * 精简短小, 见名知意

  • 全局变量以$开头，如$user，相当于：window.$user
  • 常量全部大写，单词以下划线分隔，如STATIC_ROOT
  • 变量采用驮峰式写法，如userIcon，UserRelation
  • 类名首字母大写，如Object = function(){}
  • 普通变量、命名空间，首字母小写
  • 局部变量可缩写，命名空间，类名尽量不缩写
  • 条件表达式、正则表式式，如果很复杂，给其命名
  • 枚举量, 同常量;
  • 私有变量, 属性和方法, 名字以下划线开头,如_init(),_param;
  • 保护变量, 属性和方法, 名字同普通变量名;
  • 方法和函数的可选参数, 名字以 opt_ 开头, 使用 @param 标记说明;(试行)
  • 使用 @param 标记说明;
  • 外部代码和内部代码使用不同的命名空间;
  • 重命名那些名字很长的变量, 不要在全局范围内创建别名, 而仅在函数块作用域中使用;
  • 文件名应全部使用小写字符, 且不包含除 - 和 _ 外的标点符号;
  • 临时的重复变量建议以 i, j, k, ..., 命名;

原则

  • 任何插件的开发都要写入version参数，至少要在注释中注明版本信息及修改内容.
  • 声明变量时, 必须加上 var 关键字.
  • 尽量减少全局变量的使用.
  • 语句总是以分号结尾.
  • 不要在块内声明函数.
  • 标准特性优于非标准特性(如果类库有提供, 优先使用类库中的函数).
  • 不要封装基本类型.
  • 只在解析序列化串时使用 eval() .
  • 禁止使用 with .
  • 减少使用 continue 和 break .
  • 仅在函数内使用 this .
  • 使用 Array/Object 直接量, 避免使用 Array/Object 构造器.
  • 禁止修改内置对象的原型.
  • 坚决不在主页面中嵌入逻辑脚本，
  • 坚决不在ajax载入的HTML片段里面嵌入脚本，载入后要执行代码，可以写在回调里面

编码风格

引用

<script type="text/javascript" src=”xx”></script>

页面内的脚本只作初始化及参数配置使用

<script type="text/javascript">
$(function(){
$.nav.init({
id : 1,
name : 'simon'
})
})
</script>

注：具体使不使用init()函数视具体情况及个人编程习惯而定，但是个人建议使用，方便读代码的人找到入口

行与缩进

语句行

  • 尽可能不要让每行超过 120 个字符;
  • 语句必须以分号作为结束符, 不要忽略分号;

空格

  • 数值操作符(如, +/-/*/% 等)两边留空;
  • 赋值操作符/等价判断符两边留一空格;
  • for 循环条件中, 分号后留一空格;
  • 变量声明语句, 数组值, 对象值及函数参数值中的逗号后留一空格;
  • 空行不要有空格;
  • 行尾不要有空格;
  • 逗号和冒号后一定要跟空格;
  • 点号前后不要出现空格;
  • 空对象和数组不需要填入空格;
  • 函数名末尾和左括号之间不要出现空格;

空行

  • 逻辑上独立的代码块使用空行分隔;
  • 文件末尾留 1~2 个空行;
  • 不要吝啬空行. 尽量使用空行将逻辑相关的代码块分割开, 以提高程序的可读性.

变量声明

  • 多个变量声明时, 适当换行表示;
  • 参照 var 关键字, 缩进一层次;

函数参数

  • 函数参数写在同一行上;
  • 传递匿名函数时, 函数体应从调用该函数的左边开始缩进;
  • 数组和对象初始化时:如果初始值不是很长, 尽量保持写在单行上;
  • 初始值占用多行时, 缩进一层次;
  • 对象中, 比较长的变量/数值, 不要以冒号对齐;
  • 二元/三元操作符:操作符始终跟随前行;
  • 实在需要缩进时, 按照上述缩进风格;
  • 表达式中的缩进同变量声明时;

括号

  • 原则: 不要滥用括号, 必要时一定要使用.
  • if/else/while/for 条件表达式必须有小括号;
  • 语句块必须有大括号;
  • 一元操作符(如 delete, typeof, void)或在某些关键词(如 return, throw, case, new) 之后, 不要使用括号;

语句行

  • 变量如有较广的作用域, 使用全局变量; 如果是在类中, 可以设计成为一个类的成员;
  • 函数体中, 多个局部变量集中在一起声明, 避免分散;
  • 适当延迟变量的初始化;

字符串

  • JS 代码中, 单行字符串使用单引号;
  • JS 代码中, 多行字符串使用 + 拼接形式, 不要使用 \ 拼接;
  • HTML 中 Element 属性, 使用双引号;

标准文档实例

通用模板库

准备中……

资源列表

小技巧总结

准备中……

备注

  1. 此文档只作前端开发参考用，本意只为规范前端开发人员的编码规范，使各成员之间的代码更易理解，并不想打压各位前端的创造灵感；
  2. 此文档还有待调整，如果有不足的地方可以私信发给我！

你可能感兴趣的:(js,css,代码规范,命名规范,前端规范)

  • CSS3学习教程，从入门到精通， CSS3 变形效果（2D 和 3D）的详细语法知识点及案例代码（22） 知识分享小能手 前端开发网页开发编程语言如门css3学习3dcss前端html5javascript
    CSS3变形效果（2D和3D）的详细语法知识点及案例代码CSS3变形效果语法详解CSS3变形（Transform）允许我们对元素进行平移、旋转、缩放、倾斜等操作。变形分为2D变形和3D变形，3D变形在2D变形的基础上增加了深度方向的变换。一、2D变形核心属性：transform1.平移（Translate）translateX(x)：水平移动translateY(y)：垂直移动translate(
  • 第一次安装VSCode 终端显示 npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。 白臻 前端面试题vscodenpmide
    在VSCode的终端中显示以下报错信息npm:无法加载文件C:\ProgramFiles\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅https:/go.microsoft.com/fwlink/?LinkID=135170中的about_Execution_Policies。所在位置行:1字符:1npminstall~~~+CategoryInfo:Securi
  • 前端 VSCODE 插件开发总结 （后续将出专栏详细讲解开发的细节...） Billy Qin VSCode插件开发前端vscodeide
    前端VSCODE插件开发经验总结一、开发前期准备（一）环境搭建Node.js安装：VSCODE插件基于Node.js开发，需确保安装了合适版本的Node.js。可从Node.js官网下载对应操作系统的安装包，安装过程中按默认设置即可。安装完成后，在命令行输入node-v，若显示版本号，则安装成功。Yeoman与VSCodeExtensionGenerator安装：Yeoman是一款脚手架工具，可快
  • 去除Azure依赖 旧约Alatus 软件架构设计javascript华为harmonyos开发语言前端stablediffusionDALL·E2
    去掉这个azure风格组件啥依赖得,完整全部得代码!!不要省略,要完整得:importsysimportjsonimporttimeimportpprintimportplatformimportwebbrowserimporturllib.parseimporturllib.requestimportrandomimportioimporttempfilefromthreadingimportT
  • java8获取两个list的交集和差集_Java8的Stream API的一些奇技淫巧 weixin_39777018
    场景引入Java8的新特性主要是Lambda表达式和流，当流和Lambda表达式结合起来一起使用时，因为流申明式处理数据集合的特点，可以让代码变得简洁易读航哥前两天有一个新需求，做完之后由衷地感叹到lambda表达式和stream流是真香。先大致看一下需求吧。在电商网站中，一次性返回所有前端类目，树形结构返回json格式。先看一下我们的数据库关于类目表的设计很简单，总共三级类目，类目有自己的父级父
  • Java代码规范标准化：从混乱到秩序的蜕变 我真的不想做程序员 javajava代码规范开发语言后端
    目录一、命名规范：让代码自己讲故事（一）类名与接口名（二）方法名与变量名二、代码风格：整洁有序的代码是程序员的名片（一）缩进与括号（二）空格与空行三、注释规范：让代码不再孤单（一）类与方法注释（二）关键代码注释四、异常处理：优雅地应对意外（一）try-catch-finally（二）自定义异常五、资源管理：珍惜每一份资源（一）try-with-resources（二）手动关闭资源六、并发编程：多线
  • 帮我写一个地铁跑酷游戏html代码 美丽回忆一瞬间 html游戏javascript前端css
    很抱歉，我并不能直接为您写出HTML代码。但是我可以给您一些建议，帮助您开始编写您的地铁跑酷游戏。您可以使用HTML、CSS和JavaScript来制作地铁跑酷游戏。您可以创建一个HTML文件，其中包含您的游戏界面，并使用CSS来样式界面。接下来，您可以使用JavaScript来编写游戏的逻辑，包括玩家的移动、障碍物的生成、分数的计算等。以下是一个简单的HTML示例：地铁跑酷游戏</he
  • AirGIS相关API 风中摇曳的男子 api插件图形搜索
    1地图基础1.1必要导入包1.2创建地图切片1.3地图插件1.3.1比例尺1.3.2鹰眼图1.3.3HomeButton2绘图工具2.1画点、线、面2.1.1根据json标注点2.1.2画线2.1.2画面2.2图形事件2.2.1点击事件3图表3.1柱状图3.2饼图4其它4.1自动补全4.2搜索1地图基础1.1必要导入包varmap;require(["esri/map","esri/layers/
  • arcgis js 画点 清云青云 arcgispoint
    1.引入需要的css、js文件，github地址：https://github.com/zhangliqingyun/arcgis-javascript/tree/master/arcgis/3.29   2.页面定义div：              3.加载地图连接：varmap=null;           //共用地图定义  varpointLayer=null;        //单点
  • 基于Python+Django的计算机专业就业分析可视化系统 QQ79278590 javawebpythondjango开发语言
    基于Python+Django的计算机专业就业分析系统1.使用django-simpleui实现后端管理系统，使用requests爬取的数据2.使用django-allauth插件实现登录注册修改密码等，实现数据的搜索3.使用django框架实现的后端4.前端使用html5，css3，JavaScript，bootstrap2，使用echarts实现可视化
  • 2025前端八股文终极指南：从高频考点到降维打击的面试突围战 console.log 战略储备局局长 前端面试职场和发展
    2025前端八股文终极指南：从高频考点到降维打击的面试突围战一、2025前端八股文核心考点重构1.1新型响应式系统三连问Vue3信号式响应性：//信号式响应性底层实现const[count,setCount]=createSignal(0)effect(()=>{console.log("当前值:",count())//依赖自动追踪})实现原理：基于SolidJS的细粒度更新机制，仅触发相关DOM
  • socket.io netty java,SpringBoot+Netty-socketio实现websocket 木陌APPLE socket.ionettyjava
    socket.io是js实现的，websocket框架，为了解决浏览器不兼容问题而设计socket.io.js下载地址：https://cdnjs.com/libraries/socket.io常用的方式是，前端使用socket.io.js，后端使用node.js实现socket.io的接口，可是我们的架构后端使用的是java，所以我使用的是netty-socketio，基于spring-boot
  • TypeScript 与 JavaScript 对比 冬冬小圆帽 javascripttypescript
    核心概念对比JavaScript语言类型：动态类型脚本语言诞生时间：1995年（ES1标准）类型系统：运行时类型检查文件扩展名：.js编译需求：无需编译，直接执行TypeScript语言类型：静态类型超集语言诞生时间：2012年（微软开发）类型系统：编译时类型检查文件扩展名：.ts编译需求：需要编译为JavaScript执行技术架构差异维度JavaScriptTypeScript类型注解不支持支持
  • js类型转换truthy和falsy javascript前端
    JavaScript在需要用到布尔类型值的上下文中使用强制类型转换(TypeConversion)将值转换为布尔值，比如：在条件语句或者循环语句中falsy值说明falsefalse关键字0数值zero-0负zero0n当BigInt作为布尔值使用时，遵从其作为数值的规则。0n是falsy值。"",'',``这是一个空字符串(字符串的长度为零).JavaScript中的字符串可用双引号"",单引号
  • uniapp uni-swipe-action滑动内容排版改造 lyz246859 uni-app
    在uniapp开发中默认的uni-swipe-action滑动组件按钮里的文字都是横排的不能换行的如果是在一些小屏设备比如PDA这种，同时按钮文字又都是4个字多按钮的情况就会发现滑动一下都直接满屏了观看体验都不好但默认的官方组件又没有样式的设置，下面就告诉大家怎么简单改造：如图所示，只需要在css中对按钮的宽做换行处理，就能轻松实现指定的宽度横排
  • js实现屏幕滚动 孙忠昊 前端屏幕滚动
    全屏滚动的原理是什么?,用到了css的哪些属性.使用position设置成relative,基于浏览器窗口定位.浏览器显示的只有这个模块.再它里面有三个全屏的子标签,通过鼠标中键的滚动监听事件,设置三个标签top值.来设置显示哪个模块.再设置延时操作,防止多次滚动Documenthtml,body{margin:0;padding:0;overflow:hidden;}#pageContainer
  • 【Java】Springboot通过ObjectMapper配置json序列化详解 你住过的屋檐 Java技术专栏javaspringbootjson
    前言  SpringBoot默认集成了Jackson，ObjectMapper是Jackson库中的一个核心类，它是用于将Java对象转换为JSON字符串，以及将JSON字符串转换回Java对象的主要工具。主要用于将数据格式化为指定格式，方便显示。一、ObjectMapper主要提供了以下方法1、configure(SerializationFeaturef,booleanstate);//用于配
  • Installation failed, reverting ./composer.json and ./composer.lock to their original content. dnpao linux
    解决方案如下：打开php.ini，并搜索disable_functions指令，从里面搜索“proc_open”，删除即可。注意，要看我们一共安装了几个php，都要相应的删除掉。
  • 基于python爬虫：requests+BeautifulSoup+MySQL/MongoDB（或：CSV、JSON等格式的文件）+... Test-Sunny python爬虫beautifulsoup
    爬虫技术（基于python介绍）-应用场景数据抓取、数据挖掘、搜索引擎优化http协议通过HTTP请求来获取网页数据-编程语言pythonpython库数据请求与解析requests、BeautifulSoup、Scrapy等requests（Python）：用于发送HTTP请求。BeautifulSoup：用于解析HTML和XML文档-数据存储数据库（如MySQL、MongoDB）：用于存储抓取
  • 【DeepSeek】使用Kivy实现DeepSeek聊天系统 Botiway 移动APP教育信息化pythonDeepSeek人工智能
    使用Kivy实现DeepSeek聊天系统下面是一个完整的Kivy应用程序示例，它集成了DeepSeekAPI，实现了一个简单的聊天界面。完整代码1.安装依赖首先确保安装了必要的库：pipinstallkivyrequests2.主程序代码(main.py)importosimportrequestsimportjsonfromkivy.appimportAppfromkivy.uix.boxlay
  • ESLint报错：Could not find config file. kart jim eslintvscode
    如果你的ESLint的版本大于8，同时使用.eslinrc.js和.eslintignore作为配置文件，且目前用的是VSCODE，就有可能遇到报错：Couldnotfindconfigfile.这个是因为VSCode中ESLint插件的配置eslint.useFlatConfig的问题，其默认值是空值导致ESLint默认使用flat的配置方式，在VSCode的配置文件里加上：{"eslint.u
  • H5项目实践：视差滚动与图片瀑布流的实现 木木黄木木 html5前端css3html
    H5项目实践：视差滚动与图片瀑布流的实现这里写目录标题H5项目实践：视差滚动与图片瀑布流的实现一、视差滚动效果实现1.项目概述2.技术实现2.1HTML结构设计2.2CSS核心技术3.性能优化二、图片瀑布流实现1.项目概述2.技术实现2.1布局设计2.2核心功能实现3.性能优化三、项目总结四、参考资源一、视差滚动效果实现1.项目概述视差滚动（ParallaxScrolling）是一种网页设计技巧，
  • JSON简介及C++中的JSON使用指南 yy__xzz jsonc++开发语言
    1.什么是JSON？JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，采用文本格式存储和传输数据。它易于人阅读和编写，同时也易于机器解析和生成。JSON广泛应用于WebAPI、配置文件、数据存储等领域。JSON的特点轻量级：相比XML，JSON更加简洁，占用更少的带宽。易读性：采用键值对（key:value）结构，类似字典或哈希表。跨语言支持：几乎所有编程语言
  • CSS 技巧与案例详解：开篇介绍 @大迁世界 CSS技巧与案例详解css前端
    在现代前端开发中，CSS（层叠样式表）作为网页设计和布局的核心技术，扮演着至关重要的角色。无论是初学者还是经验丰富的开发者，掌握并灵活运用各种CSS技巧都能大大提升开发效率和页面效果。本系列文章《CSS技巧与案例详解》旨在为大家提供一站式的CSS知识速查与实用案例，帮助大家更好地理解和应用CSS。系列内容简介本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。以下是我们将要
  • Ajax 入门级 晚枫~ Ajaxajax
    AJAX全称：AsynchronousJavascriptAndXML（异步JS和XML）XML可扩展标记语言AJAX优缺点优点：可以无需刷新页面而与服务器端进行通信。允许你根据用户事件来更新部分页面内容。（事件：表单事件、文档事件、鼠标事件、键盘事件）缺点：没有浏览历史，不能回退存在跨域问题（同源）SEO不友好（SEO：搜索引擎优化）Express：基于node.js平台，快速、开放、极简的we
  • js对象练习 晚枫~ js练习
    1.做一个倒计时效果。functioncountDown(time){varnowTime=+newDate();//返回的是当前时间总的毫秒数varinputTime=+newDate(time);//返回的是用户输入时间总的毫秒数vartimes=(inputTime=nowTime)/1000;//time是剩余时间总的秒数vard=parseInt(times/60/60/24);//天d
  • CSS3学习教程，从入门到精通， CSS3 盒子模型的详细语法知识点及案例代码（23） 知识分享小能手 编程语言如门前端开发网页开发css3学习css前端html5javascriptjava后端开发
    CSS3盒子模型的详细语法知识点及案例代码CSS3盒子模型完整指南一、盒子模型基础每个HTML元素都被视为一个矩形盒子，由以下部分组成：内容区(Content)内边距(Padding)边框(Border)外边距(Margin)二、语法知识点详解1.盒子的宽和高selector{width:200px;/*内容区宽度*/height:150px;/*内容区高度*/min-width:100px;/*
  • [MRCTF2020]套娃 1 succ3 BUUCTFapachephpweb安全
    知识点：Client-ip,data://,$_SERVER总结我们可以传个b+u+p+t=23333%0a,因为php在解析变量名的时候会把+、%20、*、{、[解析为_,具体可以看：https://www.freebuf.com/articles/web/213359.html有一段fuckjs代码，可以放到Console里面运行。告诉我们要post传个Merak可以看到它有三个地方过滤：第一
  • JavaScript 学习 wgego javascript学习开发语言
    JavaScript作用JavaScript是一种轻量级的编程语言，是可插入HTML页面的编程代码，插入HTML页面后，可由所有的现代浏览器执行，可控制网页的行为。（学之前要了解一下html和css).1.直接写入HTML输出流document.write("这是一个标题");document.write("这是一个段落。");2.对事件的反应点我!3.改变HTML内容x=document.get
  • JavaScript 图片画廊设计案例 不正经的程序员 javascript
    JavaScript图片画廊设计案例项目简介本项目展示了如何通过JavaScript构建一个交互式的图片画廊。用户可以点击画廊中的图片以查看其大图，并通过左右箭头切换显示的图片。项目中还包括了基本的动画效果，提升用户体验。技术栈HTMLCSSJavaScript设计目标显示缩略图：用户可以查看多个小图作为画廊的缩略图。查看大图：点击某个缩略图后，展示该图片的放大版。切换图片：通过左右箭头切换显示的
  • 项目中 枚举与注解的结合使用 飞翔的马甲 javaenumannotation
    前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。
  • 【Scala十七】Scala核心十一：下划线_的用法 bit1129 scala
    下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义   1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r
  • web缓存基础：术语、http报头和缓存策略 dalan_123 Web
    对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下
  • crontab 问题 周凡杨 linuxcrontabunix
      一： 0481-079   Reached   a   symbol   that   is   not   expected.   背景： */5   *   *   *   *  /usr/IBMIHS/rsync.sh 
  • 让tomcat支持2级域名共享session g21121 session
    tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。 打开tomcat下conf下context.xml文件 找到Context标签,修改为如下内容 如果你的域名是www.test.com <Context sessionCookiePath="/path&q
  • web报表工具FineReport常用函数的用法总结（数学和三角函数） 老A不折腾 Webfinereport总结
      ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。 示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。   ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角
  • linux 启动java进程 sh文件 墙头上一根草 linuxshelljar
    #!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid
  • 我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory aijuans Spring 3 系列
    如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import
  • Linux 内存使用方法详细解析 annan211 linux内存Linux内存解析
    来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。 一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用
  • 数据库的单表查询常用命令及使用方法(-) 百合不是茶 oracle函数单表查询
        创建数据库;       --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2));       创建bloguser表,里面有三个字段     &nbs
  • 多线程基础知识 bijian1013 java多线程threadjava多线程
    一．进程和线程 进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 线程：是进程内部单一的一个顺序控制流。 线程和进程 a.       每个进程都有独立的
  • fastjson简单使用实例 bijian1013 fastjson
    一.简介         阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征：     
  • 【RPC框架Burlap】Spring集成Burlap bit1129 spring
    Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。 这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成  
  • 【Mahout一】基于Mahout 命令参数含义 bit1129 Mahout
    1. mahout seqdirectory   $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna
  • linux使用flock文件锁解决脚本重复执行问题 ronin47 linux lock　重复执行
    linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。 例如： <? //  test .php
  • java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 bylijinnan java
    public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间
  • linux 系统相关命令 candiio linux
    系统参数 cat /proc/cpuinfo  cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则 回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参
  • [经营与资产]保持独立性和稳定性对于软件开发的重要意义 comsci 软件开发
         一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造       如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中           那么软件开发者原有的设计思想和开发路线
  • 在CentOS5.5上编译OpenJDK6 Cwind linuxOpenJDK
    几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是
  • java乱码问题 dashuaifu java乱码问题js中文乱码
    swfupload上传文件参数值为中文传递到后台接收中文乱码     在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t
  • cygwin很多命令显示command not found的解决办法 dcj3sjt126com cygwin
    cygwin很多命令显示command not found的解决办法   修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us
  • [介绍]从 Yii 1.1 升级 dcj3sjt126com PHPyii2
    2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。 如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。 请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发
  • Linux SSH免登录配置总结 eksliang ssh-keygenLinux SSH免登录认证Linux SSH互信
    转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理      我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。      生成公钥与私钥有两种加密方式，第一种是
  • 手势滑动销毁Activity gundumw100 android
    老是效仿ios，做android的真悲催！ 有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？ 不用~，网上先问一下百度。 结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay
  • JavaScript变换表格边框颜色 ini JavaScripthtmlWebhtml5css
    效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&
  • Kafka Rest : Confluent kane_xie kafkaRESTconfluent
    最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。 这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。 环境声明：Ubu
  • Calender不是单例 men4661273 单例Calender
             在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。 测试： Calendar c1 =
  • 线程内存和主内存之间联系 qifeifei java thread
    1， java多线程共享主内存中变量的时候，一共会经过几个阶段，    lock:将主内存中的变量锁定，为一个线程所独占。   unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。   read:将主内存中的变量值读到工作内存当中。   load:将read读取的值保存到工作内存中的变量副本中。  
  • schedule和scheduleAtFixedRate tangqi609567707 javatimerschedule
    原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {  
  • erlang 部署 wudixiaotie erlang
    1.如果在启动节点的时候报这个错 ： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]},     2.当generate时，遇到： ERROR
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他