diff --git "a/src4js/html/js\346\226\207\345\255\227\350\275\254\345\233\276\347\211\207.html" "b/src4js/html/js\346\226\207\345\255\227\350\275\254\345\233\276\347\211\207.html"
new file mode 100644
index 0000000000000000000000000000000000000000..124e686fb9f4ea2f82f6f8e8c7b4f621c461c2e0
--- /dev/null
+++ "b/src4js/html/js\346\226\207\345\255\227\350\275\254\345\233\276\347\211\207.html"
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>文字转图片</title>
+	</head>
+	<body>
+        <label>文字内容：</label><input id="text" type="text" />
+        <button type="button" title="点击后文字将转为图片" onclick="textToImage()">文字转图片</button> <br/>
+        <img src="" id="show" title="文字转图片"/><br/>
+        <label>本地图片：</label>
+        <input onchange="localFile('localFileShow')" id="localFile" type="file" accept="image/*" /*多选multiple="multiple"*/>
+        <img src="" id="localFileShow"/>
+        <br/>
+        <label>水印内容：</label><input id="waterContent" type="text" value="cc百川"/>
+        <label>旋转角度：</label><input id="waterRotate" type="number" value="45" max="60" min="0"/>
+        <button type="button" title="图片添加水印" onclick="addWaterMark('show')">添加水印</button> 
+        <button type="button" title="图片添加水印" onclick="addWaterMark('localFileShow')">图片添加水印</button> <br/>
+
+        <img src="" id="waterMark" title="图片添加水印"/>
+        <button type="button" title="保存到本地" onclick="saveHtml('waterMark')">水印图片保存到本地</button> 
+     </body>
+     <script type="text/javascript">
+         textToImage=()=>{
+            let text = document.getElementById("text").value;//文字
+            if(text.trim().length == 0) {
+                text = "《无衣》\n岂曰无衣？与子同袍。\n王于兴师，修我戈矛，与子同仇！\n岂曰无衣？与子同泽。\n王于兴师，修我矛戟，与子偕作！\n岂曰无衣？与子同裳。\n王于兴师，修我甲兵，与子偕行！\n"+
+                "《子衿》\n青青子衿，悠悠我心。纵我不往，子宁不嗣音？\n青青子佩，悠悠我思。纵我不往，子宁不来？\n挑兮达兮，在城阙兮。一日不见，如三月兮。";
+            }
+           
+            if(text.trim().length > 0) {
+                let imgsrc =  textToImg(text, 20, "#000");
+                document.getElementById("show").src = imgsrc;
+                //需要先渲染到dom节点后才能继续处理 
+
+                //宏任务
+                window.setTimeout(() => {
+                    this.addWaterMark('show')
+                }, 0)
+               
+            } else {
+                alert("内容为空！")
+            }
+        } 
+
+        /**
+        * js使用canvas将文字转换成图像数据base64
+        * @param {string} text 文字内容
+        * @param {string} fontsize 文字大小
+        * @param {string} fontColor 文字颜色
+        * @param {number} lineHeight 行高
+        */
+        textToImg = (text,fontsize = 14,fontColor = "#000",lineHeight = 0)=>{
+             let maxWidth = 500;
+              //每一行最多多少个字符
+            let maxNumber = Math.floor(maxWidth/fontsize);
+
+            let texts = text.split("\n");
+            let endTexts = [];
+            for(let i = 0;i < texts.length; i++){
+                let str = texts[i];
+                if(str.trim().length == 0) continue;
+                if(str.length*fontsize > maxWidth) {
+                    while(str.length > 0){
+                        let nowNuber = maxNumber;
+                        //处理结束符号换行问题
+                        if(/^(，|。|\?|!|、|:|;)/ig.test(str.substr(nowNuber).trimLeft())) {
+                            nowNuber += 1;
+                        }
+                        endTexts.push(str.substring(0, nowNuber));
+                        str = str.substr(nowNuber).trimLeft();
+                    }
+                }else {
+                    endTexts.push(str);
+                }
+            }
+            let maxHeight = (fontsize + lineHeight) * ((endTexts.length || 1) + 1) ;
+
+            let canvas = document.createElement('canvas'); //创建canvas画布
+            canvas.height = maxHeight;//设置高度
+            canvas.width = maxWidth;//设置宽度
+            let ctx = canvas.getContext('2d');
+            ctx.clearRect(0, 0, maxWidth, maxHeight);
+ 
+            ctx.fillStyle = fontColor;
+            ctx.font = fontsize + "px Arial";
+            //top（顶部对齐） hanging（悬挂） middle（中间对齐） bottom（底部对齐） alphabetic是默认值
+            ctx.textBaseline = 'middle';
+            for(let i = 0; i < endTexts.length; i++) {
+                let lineText = endTexts[i];
+                ctx.fillText(lineText, 0, (fontsize + lineHeight) * (i + 1), canvas.width);
+            }
+            return  canvas.toDataURL('image/png');
+        }
+
+        /**
+        * js使用canvas给图片添加水印
+        * @param {string} imageId 图片所在img的id
+        * @param {string} waterContent 水印内容
+        * @param {map} otherparams 水印参数
+        */
+        addWaterMark=(imageId = "", 
+            waterContent= document.getElementById("waterContent").value,
+            otherparams = {
+                rotate:document.getElementById("waterRotate").value || 0, 
+                fillStyle:"#f00", 
+                fontSize:14, 
+                waterLineSpaceing:20, 
+                waterPadding:20}
+            )=>{
+            if(!!imageId) {
+                let imgeEle = document.getElementById(imageId);
+                let imageSrc = imgeEle.src;
+                if(imageSrc) { 
+                    //创建图片对象
+                    let img = new Image();
+                    img.src = imageSrc;
+                    let imgWidth = img.width, imgHeight = img.height;
+                     //创建canvas画布
+                    let canvas = document.createElement('canvas'); 
+                    canvas.height = imgHeight;//设置高度
+                    canvas.width = imgWidth;//设置宽度
+                    let ctx = canvas.getContext("2d");
+                    ctx.drawImage(img, 0, 0);//图片插入画布
+                    ctx.font = otherparams.fontSize+"px 微软雅黑";
+                    ctx.rotate(otherparams.rotate * Math.PI / 180);//围绕（0，0）旋转
+                    ctx.fillStyle = otherparams.fillStyle;
+                    //水印总长度
+                    let waterLength = waterContent.length * otherparams.fontSize;
+                    //旋转后的宽度
+                    let rWaterWidth = Math.cos((otherparams.rotate * Math.PI) / 180) * waterLength;
+                    //旋转后的高度
+                    let rWaterHeight = Math.sin((otherparams.rotate * Math.PI) / 180) * waterLength + (otherparams.waterLineSpaceing || 0);
+                    //水印列数
+                    let waterColNumber = Math.floor(imgWidth / (rWaterWidth || imgWidth));
+                    //水印行数
+                    let waterRowNumber =  Math.ceil(imgHeight / (rWaterHeight || imgHeight));
+                    for(let col = 0 ; col < waterColNumber ; col++){
+                        //计算减去偏移量
+                        let x =  (rWaterWidth * col + Math.sin((otherparams.rotate * Math.PI) / 180) * otherparams.fontSize).toFixed();
+                         for(let row = 0 ; row < waterRowNumber ; row++) {
+                            //计算减去偏移量、 
+                            let y = (row * rWaterHeight + otherparams.fontSize - Math.sin((otherparams.rotate * Math.PI) / 180) * waterLength * col).toFixed();
+                            ctx.fillText(waterContent, x, y); //选择位置
+                        }
+                    }
+                    document.getElementById("waterMark").src = canvas.toDataURL('image/png', 0.5);
+                }                    
+            } else {
+                console.error("参数异常imageId=" + imageId)
+            }
+        }
+
+        localFile=(imageid)=>{
+            let files = document.getElementById("localFile");
+            let file = files.files[0];
+            let urlObject = window.URL || window.webkitURL || window;
+            //宏任务
+            window.setTimeout(() => {
+                document.getElementById(imageid).src=urlObject.createObjectURL(new Blob([file]));             
+            }, 0);
+        }
+ 
+        /* 保存最终html */
+        saveHtml=(imageid)=>{         
+            let save_link = document.createElement("a");					
+            //返回一个url URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
+            save_link.href = document.getElementById(imageid).src;
+            save_link.download = "水印内容";//下载后的名称 
+            triggerEvent(save_link, "click");
+        }
+        /* 给定的对象上面，模拟事件 */
+        triggerEvent=(obj, type="click")=>{
+            let ev = document.createEvent("MouseEvents");
+            ev.initMouseEvent( type, true, false, window, 0, 0, 0, 0, 0 , false, false, false, false, 0, null );
+            obj.dispatchEvent(ev);
+        }
+    </script>
+</html>
\ No newline at end of file
diff --git a/src4js/html/testhtml.html b/src4js/html/testhtml.html
new file mode 100644
index 0000000000000000000000000000000000000000..17171fd0ce5399eef245ef4d6eaf3fb5571d5e82
--- /dev/null
+++ b/src4js/html/testhtml.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
+<style>
+div{
+   background-repeat:no-repeat;
+  background-size:100%100%;
+  background-origin:content-box;
+  width:200px;
+  height:200px;
+  border:1px solid red;
+}
+div
+{
+  border:2px solid;
+  border-radius:25px;
+  box-shadow:10px10px5px#888888;
+  border-image:url(border.png)3030 round;
+}
+.cc1211{
+  writing-mode: vertical-rl;
+  letter-spacing: 1px;
+}
+.cc1211 b{
+  text-combine-upright: all;
+  margin: 5px 0;
+} 
+</style>
+</head>
+<body>
+    <button onclick="goPage('bottom')">到达底部</button><br>
+<div>
+  
+ <section>
+            <h1>����һ��sectionԪ��</h1>
+            <p>����һ����������</p>
+            <section>
+                <h2>A</h2>
+                <p>A������</p>
+            </section>
+            <section>
+                <h2>B</h2>
+                <p>B������</p>
+            </section>
+        </section>
+</div>
+<div class="cc1211">
+ <h1>�峯</h1>
+  <p>���й���ʷ�����һ���⽨������</p>
+  <p>����ʮ���ۣ�</p>
+  <p>ͳ����Ϊ���ް��¾����ϡ�</p>
+  <p>��Ŭ�����ཨ�������</p>
+  <p>�ܼ�<b>296</b>�ꡣ</p>
+  <p>�ӻ�̫���Ĺ���Ϊ���𣬹���<b>276</b>�ꡣ</p>
+  <p>����ȫ������Ȩ����Ϊ<b>268</b>�ꡣ</p>
+</div>
+<div class="cc1210">
+<form></form>
+<img src="file:///C:/Users/Administrator/Pictures/1.jpg" width="200"></img>
+</div>
+<div class="cc1209">
+
+</div>
+
+	<marquee scrolldelay="200" direction="right">Welcome!</marquee>
+	
+	<marquee scrolldelay="200" direction="left">Welcome1!</marquee>
+<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" ��������������Ƴ�������ʱ�������� onMouseOver="this.stop()"����������������������ʱֹͣ����</marquee>
+
+<marquee direction="down">�趨���Ļ�Ĺ�������direction="down"������</marquee>
+
+<marquee direction="left">�趨���Ļ�Ĺ�������direction="left"������</marquee>
+
+<marquee direction="right">�趨���Ļ�Ĺ�������direction="right"������</marquee>
+
+<marquee direction="up">�趨���Ļ�Ĺ�������direction="up"������</marquee>
+<mark>55555555555</mark>
+<strong >ssssssssss</strong >
+    <iframe src="http://127.0.0.1:8082/odoc/odoc/index_c.jsp">ssssssssssss</iframe>
+	<div>sss</div>
+	<address></address>
+	<span>1</span>
+	<wbr/>
+	<span>1</span>
+	<embed/>
+	<span>1</span>
+	<img/>
+  <span>1</span>
+  <button onclick="goPage('top')">到达顶部</button>
+
+	<script>
+window.onload=function(){
+console.log("onload")
+}
+window.onunload=function(){
+console.log("onunload")
+}
+window.onbeforeunload=function(){
+console.log("onbeforeunload")
+}
+document.onkeydown=(keyParams)=>{
+  const {code, keyCode, key } = keyParams;
+  console.log(code, keyCode, key );
+}
+goPage =(type) =>{
+  let  keyCode,code;
+  if(type == "top") {
+    keyCode = 36;
+    code = "Home";
+  } else if(type == "bottom"){
+    keyCode = 35;
+    code = "End"
+  } else {
+    console.log("暂不支持该类型"+type);
+    return;
+  }
+  let ev =   new KeyboardEvent('keydown', { ctrlKey: true,keyCode,code});
+  document.dispatchEvent(ev);
+}
+
+</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/src4js/html/upload\345\210\206\347\211\207.html" "b/src4js/html/upload\345\210\206\347\211\207.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f1a5087a955ae3ae629672eb8241cd9a63bbbc2f
--- /dev/null
+++ "b/src4js/html/upload\345\210\206\347\211\207.html"
@@ -0,0 +1,499 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>分片上传</title>
+		<script>
+			/*
+			* JavaScript MD5
+			* https://github.com/blueimp/JavaScript-MD5
+			*
+			* Copyright 2011, Sebastian Tschan
+			* https://blueimp.net
+			*
+			* Licensed under the MIT license:
+			* https://opensource.org/licenses/MIT
+			*
+			* Based on
+			* A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
+			* Digest Algorithm, as defined in RFC 1321.
+			* Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
+			* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
+			* Distributed under the BSD License
+			* See http://pajhome.org.uk/crypt/md5 for more info.
+			*/
+
+			/* global define */
+
+			/* eslint-disable strict */
+
+			;(function ($) {
+			'use strict'
+
+			/**
+			* Add integers, wrapping at 2^32.
+			* This uses 16-bit operations internally to work around bugs in interpreters.
+			*
+			* @param {number} x First integer
+			* @param {number} y Second integer
+			* @returns {number} Sum
+			*/
+			function safeAdd(x, y) {
+				var lsw = (x & 0xffff) + (y & 0xffff)
+				var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
+				return (msw << 16) | (lsw & 0xffff)
+			}
+
+			/**
+			* Bitwise rotate a 32-bit number to the left.
+			*
+			* @param {number} num 32-bit number
+			* @param {number} cnt Rotation count
+			* @returns {number} Rotated number
+			*/
+			function bitRotateLeft(num, cnt) {
+				return (num << cnt) | (num >>> (32 - cnt))
+			}
+
+			/**
+			* Basic operation the algorithm uses.
+			*
+			* @param {number} q q
+			* @param {number} a a
+			* @param {number} b b
+			* @param {number} x x
+			* @param {number} s s
+			* @param {number} t t
+			* @returns {number} Result
+			*/
+			function md5cmn(q, a, b, x, s, t) {
+				return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b)
+			}
+			/**
+			* Basic operation the algorithm uses.
+			*
+			* @param {number} a a
+			* @param {number} b b
+			* @param {number} c c
+			* @param {number} d d
+			* @param {number} x x
+			* @param {number} s s
+			* @param {number} t t
+			* @returns {number} Result
+			*/
+			function md5ff(a, b, c, d, x, s, t) {
+				return md5cmn((b & c) | (~b & d), a, b, x, s, t)
+			}
+			/**
+			* Basic operation the algorithm uses.
+			*
+			* @param {number} a a
+			* @param {number} b b
+			* @param {number} c c
+			* @param {number} d d
+			* @param {number} x x
+			* @param {number} s s
+			* @param {number} t t
+			* @returns {number} Result
+			*/
+			function md5gg(a, b, c, d, x, s, t) {
+				return md5cmn((b & d) | (c & ~d), a, b, x, s, t)
+			}
+			/**
+			* Basic operation the algorithm uses.
+			*
+			* @param {number} a a
+			* @param {number} b b
+			* @param {number} c c
+			* @param {number} d d
+			* @param {number} x x
+			* @param {number} s s
+			* @param {number} t t
+			* @returns {number} Result
+			*/
+			function md5hh(a, b, c, d, x, s, t) {
+				return md5cmn(b ^ c ^ d, a, b, x, s, t)
+			}
+			/**
+			* Basic operation the algorithm uses.
+			*
+			* @param {number} a a
+			* @param {number} b b
+			* @param {number} c c
+			* @param {number} d d
+			* @param {number} x x
+			* @param {number} s s
+			* @param {number} t t
+			* @returns {number} Result
+			*/
+			function md5ii(a, b, c, d, x, s, t) {
+				return md5cmn(c ^ (b | ~d), a, b, x, s, t)
+			}
+
+			/**
+			* Calculate the MD5 of an array of little-endian words, and a bit length.
+			*
+			* @param {Array} x Array of little-endian words
+			* @param {number} len Bit length
+			* @returns {Array<number>} MD5 Array
+			*/
+			function binlMD5(x, len) {
+				/* append padding */
+				x[len >> 5] |= 0x80 << len % 32
+				x[(((len + 64) >>> 9) << 4) + 14] = len
+
+				var i
+				var olda
+				var oldb
+				var oldc
+				var oldd
+				var a = 1732584193
+				var b = -271733879
+				var c = -1732584194
+				var d = 271733878
+
+				for (i = 0; i < x.length; i += 16) {
+				olda = a
+				oldb = b
+				oldc = c
+				oldd = d
+
+				a = md5ff(a, b, c, d, x[i], 7, -680876936)
+				d = md5ff(d, a, b, c, x[i + 1], 12, -389564586)
+				c = md5ff(c, d, a, b, x[i + 2], 17, 606105819)
+				b = md5ff(b, c, d, a, x[i + 3], 22, -1044525330)
+				a = md5ff(a, b, c, d, x[i + 4], 7, -176418897)
+				d = md5ff(d, a, b, c, x[i + 5], 12, 1200080426)
+				c = md5ff(c, d, a, b, x[i + 6], 17, -1473231341)
+				b = md5ff(b, c, d, a, x[i + 7], 22, -45705983)
+				a = md5ff(a, b, c, d, x[i + 8], 7, 1770035416)
+				d = md5ff(d, a, b, c, x[i + 9], 12, -1958414417)
+				c = md5ff(c, d, a, b, x[i + 10], 17, -42063)
+				b = md5ff(b, c, d, a, x[i + 11], 22, -1990404162)
+				a = md5ff(a, b, c, d, x[i + 12], 7, 1804603682)
+				d = md5ff(d, a, b, c, x[i + 13], 12, -40341101)
+				c = md5ff(c, d, a, b, x[i + 14], 17, -1502002290)
+				b = md5ff(b, c, d, a, x[i + 15], 22, 1236535329)
+
+				a = md5gg(a, b, c, d, x[i + 1], 5, -165796510)
+				d = md5gg(d, a, b, c, x[i + 6], 9, -1069501632)
+				c = md5gg(c, d, a, b, x[i + 11], 14, 643717713)
+				b = md5gg(b, c, d, a, x[i], 20, -373897302)
+				a = md5gg(a, b, c, d, x[i + 5], 5, -701558691)
+				d = md5gg(d, a, b, c, x[i + 10], 9, 38016083)
+				c = md5gg(c, d, a, b, x[i + 15], 14, -660478335)
+				b = md5gg(b, c, d, a, x[i + 4], 20, -405537848)
+				a = md5gg(a, b, c, d, x[i + 9], 5, 568446438)
+				d = md5gg(d, a, b, c, x[i + 14], 9, -1019803690)
+				c = md5gg(c, d, a, b, x[i + 3], 14, -187363961)
+				b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501)
+				a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467)
+				d = md5gg(d, a, b, c, x[i + 2], 9, -51403784)
+				c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473)
+				b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734)
+
+				a = md5hh(a, b, c, d, x[i + 5], 4, -378558)
+				d = md5hh(d, a, b, c, x[i + 8], 11, -2022574463)
+				c = md5hh(c, d, a, b, x[i + 11], 16, 1839030562)
+				b = md5hh(b, c, d, a, x[i + 14], 23, -35309556)
+				a = md5hh(a, b, c, d, x[i + 1], 4, -1530992060)
+				d = md5hh(d, a, b, c, x[i + 4], 11, 1272893353)
+				c = md5hh(c, d, a, b, x[i + 7], 16, -155497632)
+				b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640)
+				a = md5hh(a, b, c, d, x[i + 13], 4, 681279174)
+				d = md5hh(d, a, b, c, x[i], 11, -358537222)
+				c = md5hh(c, d, a, b, x[i + 3], 16, -722521979)
+				b = md5hh(b, c, d, a, x[i + 6], 23, 76029189)
+				a = md5hh(a, b, c, d, x[i + 9], 4, -640364487)
+				d = md5hh(d, a, b, c, x[i + 12], 11, -421815835)
+				c = md5hh(c, d, a, b, x[i + 15], 16, 530742520)
+				b = md5hh(b, c, d, a, x[i + 2], 23, -995338651)
+
+				a = md5ii(a, b, c, d, x[i], 6, -198630844)
+				d = md5ii(d, a, b, c, x[i + 7], 10, 1126891415)
+				c = md5ii(c, d, a, b, x[i + 14], 15, -1416354905)
+				b = md5ii(b, c, d, a, x[i + 5], 21, -57434055)
+				a = md5ii(a, b, c, d, x[i + 12], 6, 1700485571)
+				d = md5ii(d, a, b, c, x[i + 3], 10, -1894986606)
+				c = md5ii(c, d, a, b, x[i + 10], 15, -1051523)
+				b = md5ii(b, c, d, a, x[i + 1], 21, -2054922799)
+				a = md5ii(a, b, c, d, x[i + 8], 6, 1873313359)
+				d = md5ii(d, a, b, c, x[i + 15], 10, -30611744)
+				c = md5ii(c, d, a, b, x[i + 6], 15, -1560198380)
+				b = md5ii(b, c, d, a, x[i + 13], 21, 1309151649)
+				a = md5ii(a, b, c, d, x[i + 4], 6, -145523070)
+				d = md5ii(d, a, b, c, x[i + 11], 10, -1120210379)
+				c = md5ii(c, d, a, b, x[i + 2], 15, 718787259)
+				b = md5ii(b, c, d, a, x[i + 9], 21, -343485551)
+
+				a = safeAdd(a, olda)
+				b = safeAdd(b, oldb)
+				c = safeAdd(c, oldc)
+				d = safeAdd(d, oldd)
+				}
+				return [a, b, c, d]
+			}
+
+			/**
+			* Convert an array of little-endian words to a string
+			*
+			* @param {Array<number>} input MD5 Array
+			* @returns {string} MD5 string
+			*/
+			function binl2rstr(input) {
+				var i
+				var output = ''
+				var length32 = input.length * 32
+				for (i = 0; i < length32; i += 8) {
+				output += String.fromCharCode((input[i >> 5] >>> i % 32) & 0xff)
+				}
+				return output
+			}
+
+			/**
+			* Convert a raw string to an array of little-endian words
+			* Characters >255 have their high-byte silently ignored.
+			*
+			* @param {string} input Raw input string
+			* @returns {Array<number>} Array of little-endian words
+			*/
+			function rstr2binl(input) {
+				var i
+				var output = []
+				output[(input.length >> 2) - 1] = undefined
+				for (i = 0; i < output.length; i += 1) {
+				output[i] = 0
+				}
+				var length8 = input.length * 8
+				for (i = 0; i < length8; i += 8) {
+				output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << i % 32
+				}
+				return output
+			}
+
+			/**
+			* Calculate the MD5 of a raw string
+			*
+			* @param {string} s Input string
+			* @returns {string} Raw MD5 string
+			*/
+			function rstrMD5(s) {
+				return binl2rstr(binlMD5(rstr2binl(s), s.length * 8))
+			}
+
+			/**
+			* Calculates the HMAC-MD5 of a key and some data (raw strings)
+			*
+			* @param {string} key HMAC key
+			* @param {string} data Raw input string
+			* @returns {string} Raw MD5 string
+			*/
+			function rstrHMACMD5(key, data) {
+				var i
+				var bkey = rstr2binl(key)
+				var ipad = []
+				var opad = []
+				var hash
+				ipad[15] = opad[15] = undefined
+				if (bkey.length > 16) {
+				bkey = binlMD5(bkey, key.length * 8)
+				}
+				for (i = 0; i < 16; i += 1) {
+				ipad[i] = bkey[i] ^ 0x36363636
+				opad[i] = bkey[i] ^ 0x5c5c5c5c
+				}
+				hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8)
+				return binl2rstr(binlMD5(opad.concat(hash), 512 + 128))
+			}
+
+			/**
+			* Convert a raw string to a hex string
+			*
+			* @param {string} input Raw input string
+			* @returns {string} Hex encoded string
+			*/
+			function rstr2hex(input) {
+				var hexTab = '0123456789abcdef'
+				var output = ''
+				var x
+				var i
+				for (i = 0; i < input.length; i += 1) {
+				x = input.charCodeAt(i)
+				output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f)
+				}
+				return output
+			}
+
+			/**
+			* Encode a string as UTF-8
+			*
+			* @param {string} input Input string
+			* @returns {string} UTF8 string
+			*/
+			function str2rstrUTF8(input) {
+				return unescape(encodeURIComponent(input))
+			}
+
+			/**
+			* Encodes input string as raw MD5 string
+			*
+			* @param {string} s Input string
+			* @returns {string} Raw MD5 string
+			*/
+			function rawMD5(s) {
+				return rstrMD5(str2rstrUTF8(s))
+			}
+			/**
+			* Encodes input string as Hex encoded string
+			*
+			* @param {string} s Input string
+			* @returns {string} Hex encoded string
+			*/
+			function hexMD5(s) {
+				return rstr2hex(rawMD5(s))
+			}
+			/**
+			* Calculates the raw HMAC-MD5 for the given key and data
+			*
+			* @param {string} k HMAC key
+			* @param {string} d Input string
+			* @returns {string} Raw MD5 string
+			*/
+			function rawHMACMD5(k, d) {
+				return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d))
+			}
+			/**
+			* Calculates the Hex encoded HMAC-MD5 for the given key and data
+			*
+			* @param {string} k HMAC key
+			* @param {string} d Input string
+			* @returns {string} Raw MD5 string
+			*/
+			function hexHMACMD5(k, d) {
+				return rstr2hex(rawHMACMD5(k, d))
+			}
+
+			/**
+			* Calculates MD5 value for a given string.
+			* If a key is provided, calculates the HMAC-MD5 value.
+			* Returns a Hex encoded string unless the raw argument is given.
+			*
+			* @param {string} string Input string
+			* @param {string} [key] HMAC key
+			* @param {boolean} [raw] Raw output switch
+			* @returns {string} MD5 output
+			*/
+			function md5(string, key, raw) {
+				if (!key) {
+				if (!raw) {
+					return hexMD5(string)
+				}
+				return rawMD5(string)
+				}
+				if (!raw) {
+				return hexHMACMD5(key, string)
+				}
+				return rawHMACMD5(key, string)
+			}
+
+			if (typeof define === 'function' && define.amd) {
+				define(function () {
+				return md5
+				})
+			} else if (typeof module === 'object' && module.exports) {
+				module.exports = md5
+			} else {
+				$.md5 = md5
+			}
+			})(this)
+		</script>
+	</head>
+	<body>
+		<form>
+			<input type="file" id="file">
+			<button>上传</button>
+		</form>
+    </body>
+	<script type="text/javascript">
+		initUpload();
+		//初始化上传
+		function initUpload() {
+			var chunk = 100 * 1024;   //每片大小
+			var input = document.getElementById("file");    //input file
+			input.onchange = function (e) {
+				var file = this.files[0];
+				var query = {};
+				var chunks = [];
+				if (!!file) {
+					var start = 0;
+					//文件分片
+					for (var i = 0; i < Math.ceil(file.size / chunk); i++) {
+						var end = start + chunk;
+						chunks[i] = file.slice(start , end);
+						start = end;
+					}
+					var reader = new FileReader();
+					reader.readAsText(file);
+					reader.onload = function (e) {
+						const fileContent = e.target.result; 
+						query = { fileMd5:md5(fileContent),fileSize: file.size, dataSize: chunk, nextOffset: 0}
+						upload(chunks, query);
+					} 
+				}
+			}
+		}
+
+		 
+		// 执行上传
+		function upload(chunks, query) {
+			//参数拼接
+			var queryStr = Object.getOwnPropertyNames(query).map(key => {
+				return key + "=" + query[key];
+			}).join("&");
+			//请求对象
+			var xhr = new XMLHttpRequest();
+			xhr.open("POST", "http://xxxx/opload?" + queryStr);
+			xhr.overrideMimeType("application/octet-stream");
+			
+			//获取post body中二进制数据
+			var index = Math.floor(query.nextOffset / query.dataSize);
+
+
+			var reader = new FileReader();
+				reader.readAsArrayBuffer(chunks[index]);
+				reader.onload = function (e) {
+  
+					
+					if (xhr.sendAsBinary) {
+						xhr.sendAsBinary(this.result);
+					} else {
+						xhr.send(this.result);
+					}
+				}
+
+			xhr.onreadystatechange = function (e) {
+				if (xhr.readyState === 4) {
+					if (xhr.status === 200) {
+						var resp = JSON.parse(xhr.responseText);
+						// 接口返回nextoffset
+						// resp = {
+						//     isFinish:false,
+						//     offset:100*1024
+						// }
+						if (typeof cb === "function") {
+							if (resp.isFinish === true) {
+								alert("上传成功");
+							} else {
+								//未上传完毕
+								query.offset = resp.offset;
+								upload(chunks, query);
+							}
+						}
+					}
+				}
+			}
+		}
+	</script>
+
+</html>
\ No newline at end of file
diff --git "a/src4js/html/\345\234\250\347\272\277\350\277\220\350\241\214html.html" "b/src4js/html/\345\234\250\347\272\277\350\277\220\350\241\214html.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d7892282f36054d23fb658b3a8eff8e98adf9d53
--- /dev/null
+++ "b/src4js/html/\345\234\250\347\272\277\350\277\220\350\241\214html.html"
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>在线HTML</title>
+	</head>
+	<body>
+		<style>
+			html{
+				height: 100%; padding: 0; margin: 0;
+			}
+			body{
+				height: 100%;
+				padding: 0;
+				margin: 0;
+				/* h5页面禁止复制以及禁止右键 */
+				-webkit-touch-callout:none;  /*系统默认菜单被禁用*/
+				-webkit-user-select:none; /*webkit浏览器*/
+				-khtml-user-select:none; /*早期浏览器*/
+				-moz-user-select:none; /*火狐*/
+				-ms-user-select:none;  /*IE10*/
+				user-select:none;
+			}
+			.content{
+				display: flex;
+				flex-direction: column;
+				height: calc(100% - 45px);
+				padding: 0;
+				margin: 0;
+			}
+			textarea{
+				padding: 10px;
+				resize: none;
+				width: calc( 100% - 20px ); 
+				margin: 0;
+				border: 0;
+			}
+			textarea:focus{
+				/* 文本域 获取焦点后的样式 */
+				outline: none;
+			}
+			iframe{
+				margin: 0; border: 0;
+				height: 50%; border-top: 1px solid red;
+			}
+			.content #edit{
+				height: 50%; display: flex;
+    			flex-direction: initial;
+			}
+			.content #editHtml,#editCss{
+				border-right: 1px solid red;
+			}
+			.controls{
+				border-top   : 1px solid #808080;
+				border-bottom: 1px solid #808080;
+				padding: 10px; white-space: nowrap;
+				overflow-x: auto; min-height: 23px;
+ 			}
+			.controls a, .controls label{
+				text-decoration: none; user-select: none;
+				padding: 8px; cursor: pointer;
+			}
+			.controls a:hover, .controls label:hover{
+				background: #f0f0f0;
+			}
+			.body_bk_black,.body_bk_black textarea{
+				background:#000;
+				color:#fff;
+			}
+			.body_bk_white,.body_bk_white textarea{
+				background:#fff;
+				color:#000 ;
+			}
+		</style>
+		<div class="controls">
+			<label> <input type=checkbox id="runTime" onclick="onClickRunTime()" checked> 实时运行</label> | 
+			<label onclick="saveHtml()"> 保存</label> | 
+			<label onClick="openWindow(false)">到打开的窗口</label> |
+			<label onClick="openWindow(true)" >打开新窗口</label> |
+			<label onclick="updateBack('black')">  黑色背景</label> | 
+			<label onclick="updateBack('white')">  白色背景</label> | 
+		</div>
+		<div class="content">
+			<div id="edit">
+				<textarea id="editHtml" class="lineEdit">		
+<!-- html内容  -->
+<span class="runspan">
+	实时运行实时编译.
+</span>
+<button id="testBtn">点击事件测试</button>
+				</textarea>
+				<textarea id="editCss" class="lineEdit">
+<!-- css样式 -->
+body {
+	padding: 22px !important;
+}
+.runspan {
+	display: inline-block;
+	background: #00ffff;
+	padding: 20px;
+}
+				</textarea>
+				<textarea id="editJs" class="lineEdit">
+<!-- js -->
+document.getElementById("testBtn").onclick=function(){alert("1")}
+					</textarea>
+			</div>
+			<iframe name="runContent" style="width: 100%; height: 100%"></iframe>
+			<script>
+				/* 背景切换 */
+				updateBack=(type)=>{
+					if(type == "black") {
+						document.getElementsByTagName("body")[0].className = "body_bk_black";
+						document.getElementById("edit").className = "body_bk_black";//editHtml
+					}else if(type == 'white') {
+						document.getElementsByTagName("body")[0].className = "body_bk_white"
+						document.getElementById("edit").className = "body_bk_white";//editHtml
+					}
+				}
+				/* 运行编译 */
+				onClickRunTime=()=>{
+					let runIframe = window.runContent.document;
+					runIframe.open();
+					runIframe.write(finalHtml());
+					//禁用iframe右键
+					disableUse(runIframe);
+					runIframe.close();
+				};
+				/* 指定对象禁止使用右键和全选 */
+				disableUse=(obj)=>{
+					obj.oncontextmenu=new Function("event.returnValue=false");
+					obj.onselectstart=new Function("event.returnValue=false");
+				}
+				/* 打开新窗口 */
+				openWindow=(newWin)=>{
+					let win=null;
+					if (newWin) win= window.open()
+					else win= window.open("about:blank","newOldWin",'location=no,menubar=yes,status=no');
+					win.focus();
+					let runIframe = win.document;
+					runIframe.open();
+ 					runIframe.write(finalHtml());
+					runIframe.title=runIframe.title || "new在线HTML";
+					runIframe.close();
+				}
+				/* 最终的html内容 */
+				finalHtml=()=>{
+					let stylecss = document.getElementById("editCss").value.trim();
+ 					var _script = document.createElement("script");
+					_script.innerHTML = document.getElementById("editJs").value.trim()
+					_script.type="text/javascript";
+ 					let edithtml = `
+					 <!DOCTYPE html>
+					 <html>
+					 <head>
+						<style>${stylecss}</style>
+					 </head>
+					 <body>
+					 	${document.getElementById("editHtml").value.trim()}
+					 </body>
+					 ${_script.outerHTML}
+					 </html>`;
+ 					return edithtml;
+				}
+				/* 即时编译 */
+				realtime=()=>{
+					if (!document.querySelector("#runTime").checked) return;
+					onClickRunTime();
+				}
+				/* 保存最终html */
+				saveHtml=(downloadName = "在线后最终HTML内容")=>{
+					let urlObject = window.URL || window.webkitURL || window;
+					//Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。 
+					let export_blob = new Blob([finalHtml()],{type: 'text/html'});
+					let save_link = document.createElement("a");					
+					//返回一个url URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
+					save_link.href = urlObject.createObjectURL(export_blob);
+					save_link.download = downloadName;//下载后的名称 
+					 triggerEvent(save_link, "click");
+				}
+				/* 给定的对象上面，模拟事件 */
+				triggerEvent=(obj, type="click")=>{
+					let ev = document.createEvent("MouseEvents");
+					ev.initMouseEvent( type, true, false, window, 0, 0, 0, 0, 0 , false, false, false, false, 0, null );
+					obj.dispatchEvent(ev);
+				}
+				/* 初始化 */
+				init=()=>{
+					//对编辑框绑定鼠标点击事件
+					let objs = document.getElementsByClassName("lineEdit");
+					for(let i=0;i<objs.length;i++)  objs[i].onkeyup=realtime 
+					realtime();
+				}
+				init();
+			</script>
+		</div>
+	</body>
+</html>
\ No newline at end of file
