diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.18/text01.html" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.18/text01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4b98edb45c507620c1efd969e46b06ce0863162d
--- /dev/null
+++ "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.18/text01.html"
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        p {
+            width: 500px;
+            border: 1px solid #e1e1e1;
+        }
+        a {
+            font-size: 12px;
+        }
+    </style>
+</head>
+<body>
+    <h1>white-space</h1>
+    <h4>规定段落中的文本不进行换行：</h4>
+    <ul>
+        <li>
+            <h4>white-space: normal</h4>
+            <h4>默认 空白会被浏览器忽略。</h4>
+            <p style="white-space: normal">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+            </p>
+        </li>
+        <li>
+            <h4>white-space: nowrap</h4>
+            <h4>文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。</h4>
+            <p style="white-space: nowrap;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+            </p>
+        </li>
+        <li>
+            <h4>white-space: pre;</h4>
+            <h4>空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。</h4>
+            <p style="white-space: pre; width: 150px;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+            </p>
+        </li>
+        <li>
+            <h4>white-space: pre-wrap</h4>
+            <h4>保留空白符序列，但是正常地进行换行。</h4>
+            <p style="white-space: pre-wrap; width: 120px;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+            </p>
+        </li>
+        <li>
+            <h4>white-space: pre-line</h4>
+            <h4>合并空白符序列，但是保留换行符。</h4>
+            <p style="white-space: pre-line;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+            </p>
+        </li>
+        <li>
+            <h4>white-space: inherit</h4>
+            <h4>规定应该从父元素继承 white-space 属性的值。</h4>
+            <p style="white-space: inherit;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+            </p> 
+        </ul>   
+        <br>   
+
+            <h1>word-break</h1>
+            <h4>在恰当的断字点进行换行</h4>
+            <ul>
+                <li>
+                    <h4>word-break:normal</h4>
+                    <h4>使用浏览器默认的换行规则。</h4>
+                    <p style="word-break:normal;">
+                        This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
+                    </p>
+                </li>
+                <li>
+                    <h4>word-break:break-all</h4>
+                    <h4>允许在单词内换行。</h4>
+                    <p style="word-break:break-all;">
+                        This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
+                    </p>
+                </li>
+                <li>
+                    <h4>word-break:keep-all</h4>
+                    <h4>只能在半角空格或连字符处换行。</h4>
+                    <p style="word-break:keep-all;">
+                        This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
+                    </p>
+                </li>
+            </ul>
+
+            <br>
+                <h1>word-wrap</h1>
+                <h4>允许长单词换行到下一行：</h4>
+            <ul>
+                <li>
+                    <h4>word-wrap: normal</h4>
+                    <h4>只在允许的断字点换行（浏览器保持默认处理）。</h4>
+                    <p style="word-wrap: normal;">
+                        This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
+                    </p>
+                </li>
+                <li>
+                    <h4>word-wrap:break-word</h4>
+                    <h4>在长单词或 URL 地址内部进行换行。</h4>
+                    <p style="word-wrap: break-word;">
+                        https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%9C%A8%E9%95%BF%E5%8D%95%E8%AF%8D%E6%88%96%20URL%20%E5%9C%
+                </li>
+            </ul>
+
+            <br>
+            <h1>word-spacing</h1>
+            <h4>规定段落中的字间距是多少像素：</h4>
+            <ul>
+                <li>
+                    <h4>word-spacing:normal</h4>
+                    <h4>默认。定义单词间的标准空间。</h4>
+                    <p style="word-spacing:normal;">
+                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.
+                    </p>
+                </li>
+                <li>
+                    <h4>word-spacing:length</h4>
+                    <h4>定义单词间的固定空间。</h4>
+                    <p style="word-spacing:30px;">
+                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.
+                    </p>
+                </li>
+                <li>
+                    <h4>word-spacing:inherit</h4>
+                    <h4>规定应该从父元素继承 word-spacing 属性的值。</h4>
+                    <p style="word-spacing:-0.5em;">
+                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.
+                    </p>
+                </li>
+            </ul>
+
+            <br>
+            <h1>letter-spacing:normal</h1>
+            <h4>设置 h1 和 h2 元素的字母间距</h4>
+            <ul>
+                <li>
+                    <h4>letter-spacing:length</h4>
+                    <h4>默认。规定字符间没有额外的空间。</h4>
+                    <p>
+                        <h1 style="letter-spacing:normal;">This is header 1</h1>                        
+                    </p>
+                </li>
+                <li>
+                    <h4>letter-spacing:</h4>
+                    <h4>定义字符间的固定空间（允许使用负值）。</h4>
+                    <p>
+                        <h1 style="letter-spacing:-0.3em;">This is header 1</h1>
+                        <h4 style="letter-spacing:20px;">This is header 4</h4>
+                    </p>
+                </li>
+                <li>
+                    <h4>letter-spacing:inherit</h4>
+                    <h4>规定应该从父元素继承 letter-spacing 属性的值。</h4>
+                    <p>
+                        <h1 style="letter-spacing:inherit;">This is header 1</h1>
+                        
+                    </p>
+                </li>
+            </ul>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.19/RGB.html" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.19/RGB.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6441c6ed3020f02c190e2faed91095586d2bac43
--- /dev/null
+++ "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.19/RGB.html"
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+       
+        :root {
+  /* 定义RGB变量 */
+  --red: 44;
+  --green: 135;
+  --blue: 255;
+  /* 文字颜色变色的临界值，建议0.5~0.6 */
+  --threshold: 0.5;
+  /* 深色边框出现的临界值，范围0~1，推荐0.8+*/
+  --border-threshold: 0.8;
+}
+
+.btn {
+    width: 400PX;
+    height: 200PX;
+  font-size: 150%;
+  padding: .5em 2em;
+}
+.btn {
+  /* 按钮背景色就是基本背景色 */
+  background: rgb(var(--red), var(--green), var(--blue));
+  /** 
+   * 使用sRGB Luma方法计算灰度（可以看成亮度）
+   * 算法为：
+   * lightness = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255
+  */
+  --r: calc(var(--red) * 0.2126);
+  --g: calc(var(--green) * 0.7152);
+  --b: calc(var(--blue) * 0.0722);
+  --sum: calc(var(--r) + var(--g) + var(--b));
+  
+  --lightness: calc(var(--sum) / 255); 
+}
+
+    </style>
+</head>
+<body>
+    <div class="btn">  
+        <P> RGB(108,87,106)</P>  
+    </div>
+    <div class="ww">
+        拖动滑块，改变RGB变量：
+        <br>
+        R：<input type="range" min="0" max="255" value="44" name="red">
+        G：<input type="range" min="0" max="255" value="135" name="green">
+        B：<input type="range" min="0" max="255" value="255" name="blue">        
+     </div>
+     <Script>
+        
+        
+    var eleRanges = document.querySelectorAll('input[type="range"]');
+        Array.from(eleRanges).forEach(function (range) {
+            range.addEventListener('input', function () {
+                document.documentElement.style.setProperty('--' + this.name, this.value);    
+            });
+        });
+        
+                  
+            
+        
+    </Script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.19/text02.html" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.19/text02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d35dc2d723c0a00cdbdf0d0814523f9254a1a719
--- /dev/null
+++ "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.19/text02.html"
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        #rbg{
+            width: 400px;
+            height: 100px;
+            position: relative;
+            margin: 20px 0 20px 300px ;
+            font-size: 150%;
+            padding: .5em 2em;  
+            background: rgb(var(--red), var(--green), var(--blue));    
+            --r: calc(var(--red) * 0.2126);
+            --g: calc(var(--green) * 0.7152);
+            --b: calc(var(--blue) * 0.0722);
+            --sum: calc(var(--r) + var(--g) + var(--b));
+            
+            --lightness: calc(var(--sum) / 255);    
+            color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
+        }
+        .big{          
+            margin-left: 100px;
+            float: left;
+            font-size: 20px;
+        }
+        :root {
+            --red: 44;
+            --green: 135;
+            --blue: 255;
+            --threshold: 0.5;
+             --border-threshold: 0.8;
+            }
+            
+    </style>
+</head>
+<body>
+    <div id="rbg"></div>
+<div>
+    <p class="big" style="color: red;">R：<input type="range" min="0" max="255" value="44" name="red" id="red"></p>
+    <p class="big" style="color: green;">G：<input type="range" min="0" max="255" value="135" name="green" id="green"></p>
+    <p class="big" style="color: blue;">B：<input type="range" min="0" max="255" value="255" name="blue" id="blue"></p>
+</div>
+<script>
+    var div = document.getElementById('rbg');
+    var input = document.getElementsByTagName('input');
+    var red = document.getElementById('red').value;
+    var green = document.getElementById('green').value;
+    var blue = document.getElementById('blue').value;   
+    div.innerHTML="RGB色值：(" + red + "," + green + "," + blue + ")"
+    for (var i=0; i < input.length; i++){
+        input[i].oninput = function(){
+            var red = document.getElementById('red').value;
+            var green = document.getElementById('green').value;
+            var blue = document.getElementById('blue').value;   
+            div.innerHTML="RGB色值：(" + red + "," + green + "," + blue + ")"  
+
+            document.documentElement.style.setProperty('--' + this.name, this.value);            
+        }
+
+    }
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/1.webp" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..822fa0b8a5e0733dfcc1bb300ab471122e0d64a6
Binary files /dev/null and "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/1.webp" differ
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/2.webp" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..06eec5c5b07385d1ac4d2efcb797a0dede69f13c
Binary files /dev/null and "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/2.webp" differ
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/3.webp" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..a990e42b8537b63ca252a04f881ba6e30a965186
Binary files /dev/null and "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/3.webp" differ
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/4.webp" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/4.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..88d2233145ee590bd1e89f1c63fa666b9d3a06a5
Binary files /dev/null and "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/4.webp" differ
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/5.webp" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/5.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..c57f062dcb5fd52c1d7b5270ea610aab275c878c
Binary files /dev/null and "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/5.webp" differ
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/6.webp" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/6.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..626ae560f6ef10c121d78260353aaf6e1e5f0ec8
Binary files /dev/null and "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/6.webp" differ
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/7.webp" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/7.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..599b0f4b9e492cf7f209c00e9eed0b6561ac4803
Binary files /dev/null and "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/7.webp" differ
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/8.webp" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/8.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..a2ef2c27a9fb43d32d00f7fe82da4a7f5bf10f84
Binary files /dev/null and "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/8.webp" differ
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/9.webp" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/9.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..13d34291afb68dd1b0f3565ee5f92a64d6146b03
Binary files /dev/null and "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/9.webp" differ
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/demo.html" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2b0d1cec296b2cba6aa3c9fb5aaf6b2562890663
--- /dev/null
+++ "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/11/img/demo.html"
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        
+        img{
+            width: 400px;
+            height: 400px;
+            border: springgreen;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="tt">
+        <img src="./1.webp" alt="">
+        <img src="./2.webp" alt="">
+        <img src="./3.webp" alt="">
+        <img src="./4.webp" alt="">
+        <img src="./5.webp" alt="">
+        <img src="./6.webp" alt="">
+        <img src="./7.webp" alt="">
+        <img src="./8.webp" alt="">
+        <img src="./9.webp" alt="">
+        
+
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/text.html" "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/text.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9047a24224de30b357c2590dc0a72996b7098dfe
--- /dev/null
+++ "b/\344\273\230\350\211\263\347\276\216/HTML5\344\275\234\344\270\232/11.22/text.html"
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body{
+            background-color: #c5c3c3;
+        }
+        .contan{
+            column-count: 3;
+            column-gap: 20px;
+            column-fill: auto;
+            break-inside: avoid;
+            
+        }
+        
+       .contan img{
+           border: 5px solid white;
+           padding: 6px;
+           margin: 0 5px 10px 0;
+       }
+      
+    </style>
+</head>
+<body>
+    <div class="contan">
+        <div><img src="./11/img/1.webp" alt=""></div>
+        <div><img src="./11/img/2.webp" alt=""></div>
+        <div><img src="./11/img/3.webp" alt=""></div>
+        <div><img src="./11/img/4.webp" alt=""></div>
+        <div><img src="./11/img/5.webp" alt=""></div>
+        <div><img src="./11/img/6.webp" alt=""></div>
+        <div><img src="./11/img/7.webp" alt=""></div>
+        <div><img src="./11/img/8.webp" alt=""></div>
+        <div><img src="./11/img/9.webp" alt=""></div>
+        
+    </div>
+</body>
+</html>
\ No newline at end of file
