├── .gitignore
├── CSS
    ├── background.html
    ├── border.html
    ├── color
    │   ├── color.html
    │   └── opacity.html
    ├── content
    │   ├── content.html
    │   ├── counter-increment&counter-reset.html
    │   └── quotes.html
    ├── dimension.html
    ├── font
    │   ├── font-family.html
    │   ├── font-size-adjust.html
    │   ├── font-size.html
    │   ├── font-stretch.html
    │   ├── font-style.html
    │   ├── font-variant.html
    │   ├── font-weight.html
    │   └── font.html
    ├── hack.html
    ├── img
    │   ├── chenwubai
    │   │   ├── attachment_fixed.JPG
    │   │   ├── attachment_local.JPG
    │   │   ├── attachment_scroll.JPG
    │   │   ├── bg.JPG
    │   │   ├── border.png
    │   │   └── tubiao.png
    │   ├── z-index-1.png
    │   └── z-index-2.png
    ├── layout
    │   ├── display.html
    │   ├── float.html
    │   └── layout.html
    ├── list
    │   └── list-style.html
    ├── margin.html
    ├── media.html
    ├── padding.html
    ├── positioning
    │   └── position.html
    ├── printing.html
    ├── printing
    │   └── page.html
    ├── private.html
    ├── rules
    │   └── font-face.html
    ├── table
    │   ├── border-collapse.html
    │   ├── border-spacing.html
    │   ├── caption-side.html
    │   ├── empty-cells.html
    │   └── table-layout.html
    ├── text
    │   ├── block-vertical-center.html
    │   ├── line-height.html
    │   ├── tab-size.html
    │   ├── text-align&text-align-last.html
    │   ├── text-indent.html
    │   ├── text-transform.html
    │   ├── vertical-align.html
    │   ├── white-space.html
    │   ├── word-break&word-wrap&overflow-wrap.html
    │   └── word-spacing&letter-spacing.html
    ├── textDecoration
    │   ├── text-decoration.html
    │   └── text-shadow.html
    ├── transform.html
    └── writingModes
    │   ├── direction&unicode-bidi.html
    │   └── writing-mode.html
├── HTML
    ├── doctype.html
    ├── form
    │   ├── form.html
    │   ├── input.html
    │   └── others.html
    ├── head
    │   ├── head.html
    │   └── meta.html
    ├── html.html
    ├── iframe.html
    ├── layout.html
    ├── special.html
    ├── svg
    │   ├── svg.html
    │   ├── svg_others.html
    │   ├── svg_shape.html
    │   └── svg_structure.html
    ├── table
    │   ├── others.html
    │   └── table.html
    ├── text
    │   └── text.html
    └── video.html
├── JavaScript
    ├── Array-Prototype.html
    ├── Array.html
    ├── Date.html
    ├── Iterator.html
    ├── Module.html
    ├── Promise.html
    ├── Reflect.html
    ├── RegExp.html
    ├── String.html
    ├── WeakSetp-WeakMap.html
    ├── destructuring.html
    ├── error.html
    ├── es6Function.html
    ├── function.html
    ├── let-const.html
    ├── misc_miscellaneous.html
    ├── miscellaneous.html
    ├── object-prototype.html
    ├── seniorFunction.html
    ├── set-map.html
    ├── strictMode.html
    ├── undefined.html
    └── urlEncode.html
├── LICENSE
├── README.md
├── Webpack
    ├── Concepts
    │   ├── README.md
    │   ├── concepts-part1.md
    │   ├── concepts-part2.md
    │   └── concepts-part3.md
    ├── Configuration
    │   ├── README.md
    │   ├── configuration-part1.md
    │   ├── configuration-part2.md
    │   ├── configuration-part3.md
    │   ├── configuration-part4.md
    │   ├── configuration-part5.md
    │   └── configuration-part6.md
    ├── Loaders
    │   ├── README.md
    │   ├── loaders-part1.md
    │   ├── loaders-part2.md
    │   ├── loaders-part3.md
    │   ├── loaders-part4.md
    │   └── loaders-part5.md
    └── Plugins
    │   ├── README.md
    │   ├── webpack-plugins1-6.md
    │   ├── webpack-plugins13-18.md
    │   ├── webpack-plugins19-24.md
    │   ├── webpack-plugins25-30.md
    │   ├── webpack-plugins31-36.md
    │   └── webpack-plugins7-12.md
└── images
    ├── Object-Function-prototype-proto.png
    ├── __proto__-prototype.png
    ├── hasOwnProperty-browser-support.png
    └── toString.png


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Object files
 2 | *.o
 3 | *.ko
 4 | *.obj
 5 | *.elf
 6 | 
 7 | # Precompiled Headers
 8 | *.gch
 9 | *.pch
10 | 
11 | # Libraries
12 | *.lib
13 | *.a
14 | *.la
15 | *.lo
16 | 
17 | # Shared objects (inc. Windows DLLs)
18 | *.dll
19 | *.so
20 | *.so.*
21 | *.dylib
22 | 
23 | # Executables
24 | *.exe
25 | *.out
26 | *.app
27 | *.i*86
28 | *.x86_64
29 | *.hex
30 | 
31 | # Debug files
32 | *.dSYM/
33 | 
34 | .idea
35 | .DS_Store
36 | 


--------------------------------------------------------------------------------
/CSS/color/color.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <title>颜色属性介绍</title>
 6 |         <style>
 7 |             body {
 8 |                 margin: 0 50px;
 9 |                 font-family: "Times New Roman",Georgia,Serif;
10 |                 line-height: 25px;
11 |             }
12 |             a{
13 |                 text-decoration: none;
14 |             }
15 |             li ,p{ line-height: 30px; }
16 |             .red{color: red;}
17 |             .green{color: green;}
18 |             .hex1{color: #ff33E9;;}
19 |             .hex2{color: #3e3;}
20 |             .rgb1{color: rgb(123,231,13);}
21 |             .rgb2{color: rgb(20%,25%,100%);}
22 |             .rgba{color: rgba(123,231,13,0.5);}
23 |             .hsl{color: hsl(280,100%,75%);}
24 |             .hsla{color: hsla(280,100%,75%,0.7);}
25 |             .trans-out{background: red;width: 10%;}
26 |             .transparent{color: transparent;}
27 |             .current-color{ border:2px solid;color:red;width: 20%;}
28 |         </style>
29 |     </head>
30 |     <body>
31 |         <h1>颜色属性介绍-color</h1>
32 |         <h2>语法</h2>
33 |         <ul>
34 |             <li>color:&lt;color&gt;</li>
35 |             <li>默认值:由客户端“user agent”决定</li>
36 |             <li>适用于：所有元素</li>
37 |             <li>继承性：有</li>
38 |             <li>动画性：是</li>
39 |             <li>计算值：指定值</li>
40 |         </ul>
41 |         <h2>说明</h2>
42 |         取值单位包括
43 |         <dl>
44 |             <dt><a href="http://w3school.com.cn/cssref/css_colornames.asp">颜色名称</a>:颜色名称设定的color不一定能被识别</dt>
45 |             <dd><span class="red">red</span>,<span class="green">green</span></dd>
46 |             <dt><a href="http://css.doyoe.com/values/color/hex.htm">HEX</a>:十六进制颜色值</dt>
47 |             <dd><span class="hex1">#ff33E9;</span>,<span class="hex2">#3e3/#33ee33</span></dd>
48 |             <dt><a href="http://css.doyoe.com/values/color/rgb.htm">RGB</a>:R[红]G[绿]B[蓝]</dt>
49 |             <dd><span class="rgb1">rgb(123,231,13)</span>,<span class="rgb2">rgb(20%,25%,100%)</span></dd>
50 |             <dt><a href="http://css.doyoe.com/values/color/rgba.htm">RGBA</a>:比RGB多了一个透明度值</dt>
51 |             <dd><span class="rgba">rgba(123,231,13,0.5)</span></dd>
52 |             <dt><a href="http://css.doyoe.com/values/color/hsl.htm">HSL</a>:H[色调][0-360]、S[饱和度][0%-100%]、L[亮度][0%-100%]</dt>
53 |             <dd><span class="hsl">hsl(280,100%,<div></div>75%)</span></dd>
54 |             <dt><a href="http://css.doyoe.com/values/color/hsla.htm">HSLA</a>:比HSL多了一个透明度值</dt>
55 |             <dd><span class="hsla">hsla(120,100%,75%,0.7)</span></dd>
56 |             <dt><a href="http://css.doyoe.com/values/color/transparent.htm">transparent</a>:透明色,IE8及以下浏览器将文本颜色设置为transparent，文本将显示为黑色</dt>
57 |             <dd class="trans-out"><span class="transparent">transparent</span></dd>
58 |         </dl>
59 |         <h2>其他特性</h2>
60 |         <p>1.color属性值被间接用来提供一个中间值 currentColor 以供其他接受颜色值的属性(如border)使用</p>
61 | 
62 |         <div class="current-color">
63 |             div{
64 |                 border:2px solid;
65 |                 color:red;
66 |             }
67 |         </div>
68 |         <p>2.相应的脚本特性为color,即通过<code>el.style.color</code>即可设置或获取颜色</p>
69 |         <h2>兼容性</h2>
70 |         <p>颜色名称和RGB单位所有浏览器都支持.</p>
71 |         <p>RGBA,HSL,HSLA,transparent在IE6-8不支持。transparent会被设置成黑色（不管父级元素有没有color属性），其他方式设置无效，如果有继承的颜色就表现为继承的颜色，如果没有就是黑色（user agent）</p>
72 |     </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------
/CSS/color/opacity.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <title>透明度属性介绍</title>
 6 |         <style>
 7 |             body {
 8 |                 margin: 0 50px;
 9 |                 font-family: "Times New Roman",Georgia,Serif;
10 |                 line-height: 25px;
11 |             }
12 |             a{
13 |                 text-decoration: none;
14 |             }
15 |             li ,p{ line-height: 30px; }
16 |             .filter{
17 |                 filter:alpha(opacity=50);
18 |                 opacity:0.5;
19 |             }
20 |             .only-opacity{
21 |                 opacity:0.49;
22 |                 color:rgb(123,231,13);
23 |             }
24 |             .opacity-and-rgba{
25 |                 opacity:0.7;
26 |                 color:rgba(123,231,13,0.7);
27 |             }
28 |         </style>
29 |     </head>
30 |     <body>
31 |         <h1>透明度属性介绍-opacity</h1>
32 |         <h2>语法</h2>
33 |         <ul>
34 |             <li>opacity：&lt;number&gt;</li>
35 |             <li>默认值：1</li>
36 |             <li>适用于：所有元素</li>
37 |             <li>继承性：无</li>
38 |             <li>动画性：是</li>
39 |             <li>计算值：指定值</li>
40 |         </ul>
41 |         <h2>说明</h2>
42 |         &lt;number&gt;：使用浮点数，在0.0-1.0之间，0.0表示完全透明，1.0表示完全不透明，取值小于0.0的话按0.0展现，大于1.0的话按照1.0展现
43 |         <h2>其他特性</h2>
44 |         <p>1.这里的透明度和color属性中rgba的透明度是有区别的，这里指的是整体的透明度，包括字体，颜色，边框，rgba只是表示字体的透明度。</p>
45 |         <p>2.如果既设置了rgba或hsla的透明度，又设置了opacity，容器中字体的透明度绘会叠加(应该是相乘的关系)</p>
46 |         <div class="opacity only-opacity">
47 |             div{
48 |                 opacity:0.49;
49 |                 color:rgb(123,231,13);
50 |             }
51 |         </div>
52 |         <div class="opacity opacity-and-rgba">
53 |             div{
54 |                 opacity:0.7;
55 |                 color:rgba(123,231,13,0.7);
56 |             }
57 |         </div>
58 |         <input type="checkbox" id="add-bg" onclick="addBgColor(this)"/> <label for="add-bg">添加背景颜色</label>
59 |         <p>3.相应的脚本特性为opacity,即通过<code>el.style.opacity</code>即可设置或获取透明度</p>
60 |         <h2>兼容性</h2>
61 |         <p>IE6-8不支持该属性，可以通过设置IE私有的滤镜属性实现相同效果，opacity的取值范围是0-100，对应opacity的0.0-1.0</p>
62 |         <div class="filter">
63 |             div{
64 |                 filter:alpha(opacity=50);
65 |                 opacity:0.5;
66 |             }
67 |         </div>
68 |         <script>
69 |             window.addBgColor = function (checkbox) {
70 |                 var els = document.querySelectorAll('.opacity');
71 |                 if(checkbox.checked){
72 |                     els[0].style.backgroundColor = "#000";
73 |                     els[1].style.backgroundColor = "#000";
74 |                 }else{
75 |                     els[0].style.backgroundColor = "";
76 |                     els[1].style.backgroundColor = "";
77 |                 }
78 |             }
79 |         </script>
80 |     </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/CSS/content/content.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>在元素前或后显示内容</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>设置在元素前或后显示内容- content</h1>
20 | <h2>取值</h2>
21 | <ul>
22 |     <li>normal/none：不显示任何内容</li>
23 |     <li>&lt;attr&gt;：插入标签属性值</li>
24 |     <li>&lt;url&gt;：插入url</li>
25 |     <li>&lt;string&gt;：插入字符串</li>
26 |     <li><a href="./counter-increment&counter-reset.html">counter-increment/counter-reset</a>：计数器等</li>
27 |     <li><a href="./quotes.html">quotes</a>：插入嵌套标记</li>
28 | </ul>
29 | <h2>说明</h2>
30 | <ul>
31 |     <li>1.写在伪元素里的content属性有很多用处，包括设置图标，显示额外内容等。</li>
32 |     <li>2.attr的例子① <a href="http://picturepan2.github.io/fileicon.css/">fileicon</a>，②<a href="https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L205-L209">Bootstrap</a></li>
33 |     <li>3.设置图标的用法可参看 <a href="../rules/font-face.html">font-face</a>，<a href="https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L281">Bootstrap的图标设置</a></li>
34 | </ul>
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/CSS/content/counter-increment&counter-reset.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>计数器</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         ol{
17 |             list-style: none;
18 |         }
19 |         .demo1 li:before{
20 |             content:counter(test)":";
21 |         }
22 |         .demo1 li{
23 |             counter-increment:test 2;
24 |         }
25 |         .demo2 li{
26 |             content:counter(test2)":";
27 |             counter-reset: test2 20;
28 |         }
29 |         .demo2 li:before{
30 |             content:counter(test2)":";
31 |         }
32 |     </style>
33 | </head>
34 | <body>
35 | <h1>设置计数器- counter-increment/counter-reset</h1>
36 | <h2>取值</h2>
37 | <h3>counter-increment/counter-reset</h3>
38 | <ul>
39 |     <li>none：阻止计数器增加</li>
40 |     <li>&lt;identifier&gt;：identifier定义一个或多个将被增加的selector，id，或者class</li>
41 |     <li>&lt;integer&gt;：定义计算器每次增加的数值或复位的数值，可以为负值</li>
42 | </ul>
43 | <h2>说明</h2>
44 | <ul>
45 |     <li>1.counter-increment是设置在元素属性里的，而counter-reset是设置到元素的伪元素里；</li>
46 | </ul>
47 | <h2>示例</h2>
48 | <ol class="demo1">
49 |     <li>列表项</li>
50 |     <li>列表项</li>
51 |     <li>列表项</li>
52 | </ol>
53 | <ol class="demo2">
54 |     <li>列表项</li>
55 |     <li>列表项</li>
56 |     <li>列表项</li>
57 | </ol>
58 | </body>
59 | </html>
60 | 


--------------------------------------------------------------------------------
/CSS/content/quotes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>嵌套标记</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         .demo p{
17 |             quotes:'[' ']'  "<" ">";
18 |         }
19 |     </style>
20 | </head>
21 | <body>
22 | <h1>设置嵌套标记- quotes</h1>
23 | <h2>取值</h2>
24 | <ul>
25 |     <li>none：不显示任何嵌套标记</li>
26 |     <li>&lt;string&gt;：定义content属性的open-quote和close-quote值的标记，2个为一组</li>
27 | </ul>
28 | <h2>说明</h2>
29 | <ul>
30 |     <li>如果属性值不是2个一组出现的话，设置无效。</li>
31 | </ul>
32 | <h2>示例</h2>
33 | <div class="demo">
34 |     <p><q>Quote me <q>Quote me</q> Quote me!</q></p>
35 | </div>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/CSS/dimension.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <title>尺寸</title>
  6 |         <style>
  7 |             body {
  8 |                 margin: 0 30px;
  9 |                 font-family: "Times New Roman", Georgia, Serif;
 10 |             }
 11 |             p {
 12 |                 text-indent: 2em;
 13 |             }
 14 |             .exampleForM {
 15 |                 list-style: none;
 16 |             }
 17 |             .exampleForM li {
 18 |                 float: left;
 19 |                 margin-right: 50px;
 20 |             }
 21 |             .exampleForM:after {
 22 |                 content: '.';
 23 |                 display: block;
 24 |                 width: 0;
 25 |                 height: 0;
 26 |                 clear: both;
 27 |                 visibility: hidden;
 28 |             }
 29 |             .exampleForM li div {
 30 |                 background-color: turquoise;
 31 |             }
 32 |         </style>
 33 |     </head>
 34 |     <body>
 35 |         <h1>尺寸相关</h1>
 36 |         <ul>
 37 |             <li>
 38 |                 <h3>width属性</h3>
 39 |                 <p>该属性用于设置元素的宽度，在box-sizing属性值为content-box时，width为元素内容区的宽度，而当属性值为border-box时，width等于内容区宽度加padding加边框宽度。</p>
 40 |                 <p>默认值为auto，其计算值取决于其他属性；取值也可为长度值，不允许负值，如10px；或者为百分比，百分比参照其包含块的宽度进行计算，同样不允许负值。</p>
 41 |             </li>
 42 |             <li>
 43 |                 <h3>height属性</h3>
 44 |                 <p>该属性用于设置元素的高度，在box-sizing属性值为content-box时，height为元素内容区的高度，而当属性值为border-box时，height等于内容区高度加padding加边框宽度。</p>
 45 |                 <p>默认值为auto，和取auto的width一样，实际高度取决于其他属性；取值为长度值或者百分比，不允许负值。</p>
 46 |             </li>
 47 |             <li>
 48 |                 <h3>width、height注意点及示例</h3>
 49 |                 <ul>
 50 |                     <li>
 51 |                         <h4>注意点</h4>
 52 |                         <p>对于img元素，当设置width(height)时，height(width)会自动根据图片的尺寸进行等比例缩放。</p>
 53 |                     </li>
 54 |                     <li>
 55 |                         <h4>示例</h4>
 56 |                         <div style="background-color: turquoise; width: 200px; height: 100px;">我的宽度是200px，高度是100px。</div>
 57 |                     </li>
 58 |                 </ul>
 59 |             </li>
 60 |             <li>
 61 |                 <h3>min-width、max-width、min-height和max-height属性</h3>
 62 |                 <p>min-width定义元素的最小宽度，默认值为0，取值可为长度值或者百分比，均不允许负值。</p>
 63 |                 <p>max-width定义元素的最大宽度，默认值为none（即无最大宽度限制），取值可为长度值或者百分比，均不允许负值。</p>
 64 |                 <p>min-height定义元素的最小高度，默认值为0，取值可为长度值或者百分比，均不允许负值。</p>
 65 |                 <p>max-height定义元素的最大高度，默认值为none（即无最大高度限制），取值可为长度值或者百分比，均不允许负值。</p>
 66 |             </li>
 67 |             <li>
 68 |                 <h3>min-width、max-width、min-height和max-height注意点即示例</h3>
 69 |                 <ul>
 70 |                     <li>
 71 |                         <h4>注意点</h4>
 72 |                         <p>如果min-width的值大于max-width的值，则max-width会自动以min-width的值作为自己的值。</p>
 73 |                         <p>如果min-height的值大于max-height的值，则max-height会自动以min-height的值作为自己的值。</p>
 74 |                     </li>
 75 |                     <li>
 76 |                         <h4>示例</h4>
 77 |                         <ol class="exampleForM">
 78 |                             <li>
 79 |                                 <div style="min-width: 200px; width: 100px; height: 100px;">我的width设置为100px，但是因为我的min-width设置为200px，所以我的实际宽度为200px。</div>
 80 |                             </li>
 81 |                             <li>
 82 |                                 <div style="max-width: 200px; width: 300px; height: 100px;">我的width设置为300px，但是因为我的max-width设置为200px，所以我的实际宽度为200px。</div>
 83 |                             </li>
 84 |                             <li>
 85 |                                 <div style="min-height: 100px; width: 200px; height: 50px;">我的height设置为50px，但是因为我的min-height设置为100px，所以我的实际高度为100px。</div>
 86 |                             </li>
 87 |                             <li>
 88 |                                 <div style="max-height: 100px; width: 200px; height: 200px;">我的height设置为200px，但是因为我的max-height设置为100px，所以我的实际高度为100px。</div>
 89 |                             </li>
 90 |                         </ol>
 91 |                     </li>
 92 |                 </ul>
 93 |             </li>
 94 |             <li>
 95 |                 <h3>min-width、max-width、min-height和max-height兼容IE方法</h3>
 96 |                 <p>因为这四个属性在IE6中不支持，所以需要针对IE6做兼容。</p>
 97 |                 <pre>
 98 |         .min_width {
 99 |             min-width: 300px;
100 |             _width: expression(document.body.clientWidth < 300 ? "300px" : "auto");
101 |         }
102 | 
103 |         .max_width {
104 |             max-width: 600px;
105 |             _width: expression(document.body.clientWidth > 600 ? "600px" : "auto");
106 |         }
107 | 
108 |         .min_height {
109 |             min-height: 300px;
110 |             _height: expression(this.scrollHeight < 300 ? "300px" : "auto");
111 |         }
112 | 
113 |         .max_height {
114 |             max-height: 600px;
115 |             _height: expression(this.scrollHeight > 600 ? "600px" : "auto");
116 |         }
117 | 
118 |         .min_and_max_width {
119 |             min-width: 300px;
120 |             max-width: 600px;
121 |             _width: expression(document.body.clientWidth > 600 ? "600px" : (document.body.clientWidth < 300 ? "300px" : "auto"));
122 |         }
123 | 
124 |         .min_and_max_height {
125 |             min-height: 300px;
126 |             max-height: 600px;
127 |             _height: expression(this.scrollHeight > 600 ? "600px" : (this.scrollHeight < 300 ? "300px" : "auto"));
128 |         }
129 |                 </pre>
130 |             </li>
131 |             <li>
132 |                 <h3>参考链接</h3>
133 |                 <ul>
134 |                     <li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
135 |                     <li><a href="http://www.cnblogs.com/lch880/archive/2010/06/01/1749149.html">min-width、max-width、min-height、max-height在IE6下兼容的解决办法</a></li>
136 |                 </ul>
137 |             </li>
138 |         </ul>
139 | 
140 |     </body>
141 | </html>


--------------------------------------------------------------------------------
/CSS/font/font-family.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>字体名称属性介绍</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>字体名称属性介绍-font-family</h1>
20 | <h2>语法</h2>
21 | <ul>
22 |     <li>font-family：[&lt;family-name&gt; | &lt;generic-family&gt;]</li>
23 |     <li>默认值：客户端user agent决定</li>
24 |     <li>适用于：所有元素</li>
25 |     <li>继承性：有</li>
26 |     <li>动画性：否</li>
27 |     <li>计算值：指定值</li>
28 | </ul>
29 | <h2>取值说明</h2>
30 | <ul>
31 |     <li>&lt;family-name&gt;：字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起</li>
32 |     <li>&lt;generic-family&gt;：字体序列名称</li>
33 | </ul>
34 | <h2>示例</h2>
35 | <p style="font-family: arial, georgia, verdana, simsun, helvetica, sans-serif;">指定字体</p>
36 | 
37 | <h2>其他特性</h2>
38 | <p>1.相应的脚本特性为fontFamily,即通过<code>el.style.fontFamily</code>即可设置或获取字体类型</p>
39 | <p>2.扩展字体 <a href="../rules/font-face.html">@font-face</a> </p>
40 | <h2>兼容性</h2>
41 | <p>所有浏览器均支持该属性</p>
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/CSS/font/font-size-adjust.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>字体大小调整属性介绍</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>字体大小调整属性介绍-font-size-adjust</h1>
20 | <h2>语法</h2>
21 | <ul>
22 |     <li>font-size-adjust：[ none | &lt;number&gt;]</li>
23 |     <li>默认值：客户端user agent决定</li>
24 |     <li>适用于：所有元素</li>
25 |     <li>继承性：有</li>
26 |     <li>动画性：当值是&lt;number&gt;时</li>
27 |     <li>计算值：指定值</li>
28 | </ul>
29 | <h2>取值说明</h2>
30 | <ul>
31 |     <li>none：不保留首选字体的 x-height</li>
32 |     <li>&lt;number&gt;：定义字体的 aspect 值</li>
33 | </ul>
34 | <h2>示例</h2>
35 | <h1>这是正常的&lt;h1&gt;</h1>
36 | <h1 style="font-size-adjust: .8;">这是设置font-size-adjust: 0.8的&lt;h1&gt;</h1>
37 | <h1 style="font-size-adjust: .3;">这是设置font-size-adjust: 0.3的&lt;h1&gt;</h1>
38 | 
39 | <h2>其他特性</h2>
40 | <p>1.相应的脚本特性为fontSizeAdjust,即通过<code>el.style.fontSizeAdjust</code>即可设置或获取字体大小调整</p>
41 | <p>2.字体的小写字母 "x" 的高度与字号之间的比率被称为一个字体的 aspect 值</p>
42 | <p>3.高 aspect 值的字体被设置为很小的尺寸时会更易阅读。举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px）。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读。</p>
43 | <p>4.可以使用这个公式来为可用字体推演出合适的字号：可应用到可用字体的字体尺寸 = 首选字体的字体尺寸 * （font-size-adjust 值 / 可用字体的 aspect 值）</p>
44 | <h2>兼容性</h2>
45 | <p>只有FireFox浏览器支持该属性</p>
46 | </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/CSS/font/font-size.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>字体大小属性介绍</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>字体大小属性介绍-font-size</h1>
20 | <h2>语法</h2>
21 | <ul>
22 |     <li>font-size：&lt;absolute-size&gt; | &lt;relative-size&gt; | &lt;length&gt; | &lt;percentage&gt;</li>
23 |     <li>默认值：medium</li>
24 |     <li>适用于：所有元素</li>
25 |     <li>继承性：有</li>
26 |     <li>动画性：是</li>
27 |     <li>计算值：指定值</li>
28 | </ul>
29 | <h2>取值说明</h2>
30 | <ul>
31 |     <li>&lt;absolute-size&gt;：根据对象字号进行调节。以 medium 作为基础参照，xx-small相当于medium 3/5 (h6)，x-small: 3/4，small: 8/9 (h5)，medium: 1 (h4)，large: 6/5 (h3)，x-large: 3/2 (h2)，xx-large: 2/1 (h1)</li>
32 |     <li>&lt;relative-size&gt;：相对于父对像中字号进行相对调节。使用成比例的em单位计算</li>
33 |     <li>&lt;length&gt;：用长度值指定文字大小。不允许负值</li>
34 |     <li>&lt;percentage&gt;：用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值</li>
35 | </ul>
36 | <h2>示例</h2>
37 | <p style="font-size: xx-small">指定xx-small字体</p>
38 | <p style="font-size: x-small">指定x-small字体</p>
39 | <p style="font-size: small">指定small字体</p>
40 | <p style="font-size: medium">指定medium字体</p>
41 | <p style="font-size: large">指定large字体</p>
42 | <p style="font-size: x-large">指定x-large字体</p>
43 | <p style="font-size: xx-large">指定xx-large字体</p>
44 | 
45 | <p style="font-size: smaller">指定smaller字体</p>
46 | <p style="font-size: larger">指定larger字体</p>
47 | 
48 | <p style="font-size: 20px">指定xx-large字体</p>
49 | 
50 | <p style="font-size: 20px">父级20px<span style="font-size: 60%">指定父级60%的字体</span></p>
51 | 
52 | <h2>其他特性</h2>
53 | <p>1.相应的脚本特性为fontSize,即通过<code>el.style.fontSize</code>即可设置或获取字体大小</p>
54 | <h2>兼容性</h2>
55 | <p>所有浏览器均支持该属性</p>
56 | </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/CSS/font/font-stretch.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>字体宽度属性介绍</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman" ,Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>字体宽度属性介绍-font-stretch</h1>
20 | <h2>语法</h2>
21 | <h2>取值说明</h2>
22 | <h2>示例</h2>
23 | 
24 | <h2>其他特性</h2>
25 | <p>1.相应的脚本特性为fontStretch,即通过<code>el.style.fontStretch</code>即可设置或获取字体宽度</p>
26 | <h2>兼容性</h2>
27 | <p>所有浏览器均 <span style="color:red;">不支持</span>该属性</p>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/CSS/font/font-style.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>字体风格属性介绍</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>字体风格属性介绍-font-style</h1>
20 | <h2>语法</h2>
21 | <ul>
22 |     <li>font-style：normal | italic | oblique</li>
23 |     <li>默认值：normal</li>
24 |     <li>适用于：所有元素</li>
25 |     <li>继承性：有</li>
26 |     <li>动画性：否</li>
27 |     <li>计算值：指定值</li>
28 | </ul>
29 | <h2>说明</h2>
30 | <ul>
31 |     <li>normal：指定正常字体</li>
32 |     <li>italic：指定设置斜体字，前提是该字体有设计的斜体字，否则须使用oblique。&lt;em&gt;，&lt;i&gt;实际是设置字体的font-style为italic</li>
33 |     <li>oblique：指定倾斜的文本，人为倾斜，不管该字体是否有斜体字设计</li>
34 | </ul>
35 | <h2>示例</h2>
36 | <p style="font-style: normal">指定正常字体</p>
37 | <p style="font-style: italic">指定设置斜体字</p>
38 | <p style="font-style: oblique">指定倾斜的文本</p>
39 | 
40 | <h2>其他特性</h2>
41 | <p>1.相应的脚本特性为fontStyle,即通过<code>el.style.fontStyle</code>即可设置或获取字体风格</p>
42 | <h2>兼容性</h2>
43 | <p>所有浏览器均支持该属性</p>
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/CSS/font/font-variant.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>小型大写字母属性介绍</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>小型大写字母属性介绍-font-variant</h1>
20 | <h2>语法</h2>
21 | <ul>
22 |     <li>font-variant：normal | small-caps</li>
23 |     <li>默认值：normal</li>
24 |     <li>适用于：所有元素</li>
25 |     <li>继承性：有</li>
26 |     <li>动画性：否</li>
27 |     <li>计算值：指定值</li>
28 | </ul>
29 | <h2>说明</h2>
30 | <ul>
31 |     <li>normal：指定正常字体</li>
32 |     <li>small-caps：小型的大写字母字体</li>
33 | </ul>
34 | <h2>示例</h2>
35 | <p style="font-variant: normal">This is normal font.</p>
36 | <p style="font-variant: small-caps">This is small-caps font.</p>
37 | 
38 | <h2>其他特性</h2>
39 | <p>1.相应的脚本特性为fontVariant,即通过<code>el.style.fontVariant</code>即可设置或获取字体是否为小型的大写字母</p>
40 | <h2>兼容性</h2>
41 | <p>所有浏览器均支持该属性</p>
42 | <h2>注意事项</h2>
43 | <ul>
44 |     <li>区别对待 <a href="../text/text-transform.html">text-transform</a></li>
45 | </ul>
46 | </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/CSS/font/font-weight.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>字体粗细属性介绍</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>字体粗细属性介绍-font-weight</h1>
20 | <h2>语法</h2>
21 | <ul>
22 |     <li>font-weight：normal | bold | bolder | lighter | < interger ></li>
23 |     <li>默认值：normal</li>
24 |     <li>适用于：所有元素</li>
25 |     <li>继承性：有</li>
26 |     <li>动画性：是</li>
27 |     <li>计算值：数字重量值</li>
28 | </ul>
29 | <h2>说明</h2>
30 | <ul>
31 |     <li>normal：正常的字体。相当于数字值400</li>
32 |     <li>bold：粗体。相当于数字值700</li>
33 |     <li>bolder：定义比【继承值】更重的值</li>
34 |     <li>lighter：定义比【继承值】更轻的值</li>
35 |     <li>&lt;interger&gt;：用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900</li>
36 | </ul>
37 | <h2>示例</h2>
38 | <p style="font-weight: normal">指定正常字体</p>
39 | <p style="font-weight: bold">指定设置粗体</p>
40 | <div style="font-weight:bold"><p style="font-weight: bolder">指定设置更粗体</p></div>
41 | <div style="font-weight:bold"><p style="font-weight: lighter">指定设置比继承的更轻的字体</p></div>
42 | <p style="font-weight: 800">指定设置800的字体</p>
43 | <p style="font-weight: 100">指定设置100的字体</p>
44 | 
45 | <h2>其他特性</h2>
46 | <p>1.相应的脚本特性为fontWeight,即通过<code>el.style.fontWeight</code>即可设置或获取字体粗细</p>
47 | <p>2.作用由客户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说，用户可能看不到不同值之间的差异</p>
48 | <h2>兼容性</h2>
49 | <p>所有浏览器均支持该属性</p>
50 | </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/CSS/font/font.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>字体属性介绍</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>字体属性介绍-font</h1>
20 | <h2>语法</h2>
21 | <ul>
22 |     <li>font：[ [ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ] | caption | icon | menu | message-box | small-caption | status-bar</li>
23 |     <li>默认值：由各独立属性决定</li>
24 |     <li>适用于：所有元素</li>
25 |     <li>继承性：有</li>
26 |     <li>动画性：由各独立属性决定</li>
27 |     <li>计算值：由各独立属性决定</li>
28 | </ul>
29 | <h2>说明</h2>
30 | <ul>
31 |     <li>&lt;font-style&gt;：指定文本字体样式</li>
32 |     <li>&lt;font-variant&gt;：指定文本是否为小型的大写字母</li>
33 |     <li>&lt;font-weight&gt;：指定文本字体的粗细</li>
34 |     <li>&lt;font-size&gt;：指定文本字体尺寸(必须有) </li>
35 |     <li>&lt;line-height&gt;：指定文本字体的行高 </li>
36 |     <li>&lt;font-family&gt;：指定文本使用某个字体或字体序列(必须有)</li>
37 |     <li>caption：使用有标题的系统控件的文本字体（如按钮，菜单等） </li>
38 |     <li>icon：使用图标标签的字体 </li>
39 |     <li>menu：使用菜单的字体 </li>
40 |     <li>message-box：使用信息对话框的文本字体 </li>
41 |     <li>small-caption：使用小控件的字体 </li>
42 |     <li>status-bar：使用窗口状态栏的字体</li>
43 | </ul>
44 | <h2>示例</h2>
45 | <p style="font: 18px Simsun, arial">指定字体大小和字体: 18px Simsun, arial</p>
46 | <p style="font: italic 18px Simsun, arial">指定字体样式、大小和字体: italic 18px Simsun, arial</p>
47 | <p style="font: italic small-caps 18px Simsun, arial">指定字体样式、小型大写字母、大小和字体: italic small-caps 18px Simsun, arial</p>
48 | <p style="font: italic small-caps bold 18px Simsun, arial">指定字体样式、小型大写字母、粗细、大小和字体: italic small-caps bold 18px Simsun, arial</p>
49 | <p style="font: italic small-caps bold 18px/20px Simsun, arial">指定字体样式、小型大写字母、粗细、大小、行高和字体: italic small-caps bold 18px/20px Simsun, arial</p>
50 | <p style="font: caption">指定字体为 caption = normal normal normal normal 13px normal .HelveticaNeueDeskInterface-Regular</p>
51 | <p style="font: icon">指定字体为 icon = normal normal normal normal 13px normal .HelveticaNeueDeskInterface-Regular</p>
52 | <p style="font: menu">指定字体为 menu = normal normal normal normal 13px normal .HelveticaNeueDeskInterface-Regular</p>
53 | <p style="font: small-caption">指定字体为 small-caption = normal normal normal normal 11px normal .HelveticaNeueDeskInterface-Regular</p>
54 | <p style="font: status-bar">指定字体为 status-bar = normal normal normal normal 10px normal .HelveticaNeueDeskInterface-Regular</p>
55 | 
56 | <h2>其他特性</h2>
57 | <p>1.相应的脚本特性为font,即通过<code>el.style.font</code>即可设置或获取字体</p>
58 | <h2>兼容性</h2>
59 | <p>所有浏览器均支持该属性</p>
60 | <h2>需要注意的点</h2>
61 | <ul>
62 |     <li>
63 |         font是一个复合属性，但是至少需要两个独立属性，font-size和font-family
64 |     </li>
65 | </ul>
66 | </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/CSS/hack.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 | <title>Hack - CSS</title>
 7 | <meta name="description" content="hack：条件hack, 属性hack, 选择符级hack">
 8 | <meta name="keywords" content="hack">
 9 | <style>
10 |     .table {
11 |         margin-left: 2em;
12 |         line-height: 1.5;
13 |     }
14 | 
15 |     .table th,
16 |     .table td {
17 |         text-align: left;
18 |     }
19 | </style>
20 | </head>
21 | <body>
22 |     <h1>Hack</h1>
23 |     <h3>条件Hack</h3>
24 |     <ul>
25 |         <li>
26 |             <h4>语法</h4>
27 |             <pre>
28 | &lt;!--[if &lt;keywords&gt;? IE &lt;version&gt;?]&gt;
29 | HTML代码块
30 | &lt;![endif]--&gt;
31 |             </pre>
32 |         </li>
33 |         <li>
34 |             <h4>取值</h4>
35 |             &lt;keywords&gt; <br>
36 |             if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本 <br>
37 |             <strong>是否：</strong>指定是否IE或IE某个版本。关键字：空 <br>
38 |             <strong>大于：</strong>选择大于指定版本的IE版本。关键字：gt（greater than） <br>
39 |             <strong>大于或等于：</strong>选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal） <br>
40 |             <strong>小于：</strong>选择小于指定版本的IE版本。关键字：lt（less than） <br>
41 |             <strong>小于或等于：</strong>选择小于或等于指定版本的IE版本。关键字：lte（less than or equal） <br>
42 |             <strong>非指定版本：</strong>选择除指定版本外的所有IE版本。关键字：! <br>
43 |             &lt;version&gt; <br>
44 |             目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上 <br>
45 |             <p style="color:red;">IE10及以上版本已将条件注释特性移除，使用时需注意。</p>
46 |         </li>
47 |         <li>
48 |             <h4>参考</h4>
49 |             <a href="http://css.doyoe.com/hack/conditions.htm" target="_blank">条件Hack</a>
50 |         </li>
51 |     </ul>
52 | 
53 |     <h3>属性级Hack</h3>
54 |     <ul>
55 |         <li>
56 |             <h4>语法</h4>
57 |             <pre>
58 | selector{&lt;hack&gt;?property:value&lt;hack&gt;?;}
59 |             </pre>
60 |         </li>
61 |         <li>
62 |             <h4>取值</h4>
63 |             <strong>_：</strong>选择IE6及以下。连接线（中划线）（- ）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。<br>
64 |             <strong>*：</strong>选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高 <br>
65 |             <strong>\9：</strong>选择IE6+ <br>
66 |             <strong>\0：</strong>选择IE8+和Opera15以下的浏览器
67 |         </li>
68 |         <li>
69 |             <h4>参考</h4>
70 |             <a href="http://css.doyoe.com/hack/properties.htm" target="_blank">属性级Hack</a>
71 |         </li>
72 |     </ul>
73 | 
74 |     <h3>选择符级Hack</h3>
75 |     <ul>
76 |         <li>
77 |             <h4>语法</h4>
78 |             <pre>
79 | &lt;hack&gt; selector{ sRules }
80 |             </pre>
81 |         </li>
82 |         <li>
83 |             <h4>实例说明</h4>
84 |             <pre>
85 | * html .test { color: #090; }       /* For IE6 and earlier */
86 | * + html .test { color: #ff0; }     /* For IE7 */
87 | .test:lang(zh-cmn-Hans) { color: #f00; }  /* For IE8+ and not IE */
88 | .test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */
89 |             </pre>
90 |         </li>
91 |         <li>
92 |             <h4>参考</h4>
93 |             <a href="http://css.doyoe.com/hack/selectors.htm" target="_blank">选择符级Hack</a>
94 |         </li>
95 |     </ul>
96 | </body> 
97 | </html>


--------------------------------------------------------------------------------
/CSS/img/chenwubai/attachment_fixed.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/CSS/img/chenwubai/attachment_fixed.JPG


--------------------------------------------------------------------------------
/CSS/img/chenwubai/attachment_local.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/CSS/img/chenwubai/attachment_local.JPG


--------------------------------------------------------------------------------
/CSS/img/chenwubai/attachment_scroll.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/CSS/img/chenwubai/attachment_scroll.JPG


--------------------------------------------------------------------------------
/CSS/img/chenwubai/bg.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/CSS/img/chenwubai/bg.JPG


--------------------------------------------------------------------------------
/CSS/img/chenwubai/border.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/CSS/img/chenwubai/border.png


--------------------------------------------------------------------------------
/CSS/img/chenwubai/tubiao.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/CSS/img/chenwubai/tubiao.png


--------------------------------------------------------------------------------
/CSS/img/z-index-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/CSS/img/z-index-1.png


--------------------------------------------------------------------------------
/CSS/img/z-index-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/CSS/img/z-index-2.png


--------------------------------------------------------------------------------
/CSS/layout/layout.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head lang="en">
  4 |     <meta charset="UTF-8">
  5 |     <title>常用布局</title>
  6 |     <style>
  7 | 
  8 |         /* 一列布局 css*/
  9 |         .head,
 10 |         .main,
 11 |         .footer {
 12 |             width: 960px;
 13 |             margin: 0 auto;
 14 |         }
 15 | 
 16 |         .head {
 17 |             background-color: #cccccc;
 18 |             height: 160px;
 19 |         }
 20 | 
 21 |         .main {
 22 |             background-color: #666666;
 23 |             height: 600px;
 24 |         }
 25 | 
 26 |         .footer {
 27 |             background-color: #999999;
 28 |             height: 200px;
 29 |         }
 30 | 
 31 |         /* 单行两列布局 css */
 32 |         #bodycenter {
 33 |             width: 700px;
 34 |             height: 1000px;
 35 |             margin-right: auto;
 36 |             margin-left: auto;
 37 |             border: 1px solid red
 38 |         }
 39 | 
 40 |         .content-left {
 41 |             float: left;
 42 |             width: 280px;
 43 |             height: 100%;
 44 |             background: red;
 45 |         }
 46 | 
 47 |         .content-right {
 48 |             float: right;
 49 |             width: 420px;
 50 |             height: 100%;
 51 |             background: blue;
 52 |         }
 53 | 
 54 |         /* 三行两列布局 */
 55 |         .header-3 {
 56 |             width: 700px;
 57 |             margin-right: auto;
 58 |             margin-left: auto;
 59 |             overflow: auto;
 60 |             height:50px;
 61 |             background:green
 62 |         }
 63 |         .bodycenter-3 {
 64 |             width: 700px;
 65 |             margin-right: auto;
 66 |             margin-left: auto;
 67 |             overflow: auto;
 68 |             height:1000px;
 69 |         }
 70 |         .div1-3 {
 71 |             float: left;
 72 |             height:100%;
 73 |             background:blue;
 74 |             width: 280px;
 75 |         }
 76 |         .div2-3 {
 77 |             float: right;
 78 |             height:100%;
 79 |             background:red;
 80 |             width: 420px;
 81 |         }
 82 |         .footer-3{
 83 |             width: 700px;
 84 |             margin-right: auto;
 85 |             margin-left: auto;
 86 |             overflow: auto;
 87 |             clear:both;
 88 |             height:40px;
 89 |             background:pink;
 90 |         }
 91 | 
 92 |         /* 三列布局:使用absolute css */
 93 |         .wrapper {
 94 |             width: 100%;
 95 |             height: 1000px;
 96 |             position: relative;
 97 |         }
 98 | 
 99 |         .left {
100 |             position: absolute;
101 |             top: 0px;
102 |             left: 0px;
103 |             width: 120px;
104 |             height: 100%;
105 |             background: red;
106 |         }
107 | 
108 |         .middle {
109 |             margin: 0px 120px;
110 |             height: 1000px;
111 |             background: green;
112 |         }
113 | 
114 |         .right {
115 |             position: absolute;
116 |             top: 0px;
117 |             right: 0px;
118 |             width: 120px;
119 |             height: 100%;
120 |             background: blue;
121 |         }
122 | 
123 |         /* 三栏网页宽度自适应布局:absolute */
124 |         .left-a,
125 |         .right-a {
126 |             position: absolute;
127 |             top: 0;
128 |             width: 200px;
129 |             height: 100%;
130 |         }
131 | 
132 |         .left-a {
133 |             left: 0;
134 |             background: #a0b3d6;
135 |         }
136 | 
137 |         .right-a {
138 |             right: 0;
139 |             background: #a0b3d6;
140 |         }
141 | 
142 |         .main-a {
143 |             margin: 0 200px;
144 |             background: #ffe6b8;
145 |             height: 100%;
146 |         }
147 |         .parent-a {
148 |             height: 500px;
149 |             position: relative;
150 |         }
151 | 
152 |         /* 三栏网页宽度自适应布局:margin */
153 |         .main-m {
154 |             width: 100%;
155 |             height: 100%;
156 |             float: left;
157 |         }
158 | 
159 |         .main-m .body-m {
160 |             margin: 0 210px;
161 |             background: #ffe6b8;
162 |             height: 100%;
163 |         }
164 | 
165 |         .left-m, .right-m {
166 |             width: 200px;
167 |             height: 100%;
168 |             float: left;
169 |             background: #a0b3d6;
170 |         }
171 | 
172 |         .left-m {
173 |             margin-left: -100%;
174 |         }
175 | 
176 |         .right-m {
177 |             margin-left: -200px;
178 |         }
179 | 
180 |         /* 三栏网页宽度自适应布局:自身浮动 */
181 |         .main-self {
182 |             height: 100%;
183 |             margin: 0 210px;
184 |             background: #ffe6b8;
185 |         }
186 | 
187 |         .left-self, .right-self {
188 |             width: 200px;
189 |             height: 100%;
190 |             background: #a0b3d6;
191 |         }
192 | 
193 |         .left-self {
194 |             float: left;
195 |         }
196 | 
197 |         .right-self {
198 |             float: right;
199 |         }
200 |     </style>
201 | </head>
202 | <body>
203 |     <h3>布局相关主要参考<a href="http://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95">[张鑫旭]</a>对布局的讲解</h3>
204 |     <h1>一列剧中:使用margin:0 auto剧中</h1>
205 |     <div class="head"></div>
206 |     <div class="main"></div>
207 |     <div class="footer"></div>
208 | 
209 |     <h1>单行两列布局:float布局</h1>
210 |     <div id="bodycenter">
211 |         <div class="content-left"></div>
212 |         <div class="content-right"></div>
213 |         <div style="clear:both;"></div>
214 |     </div>
215 | 
216 |     <h1>三行两列布局:定高</h1>
217 |         <div class="header-3"></div>
218 |         <div class="bodycenter-3">
219 |             <div class="div1-3"></div>
220 |             <div class="div2-3"></div>
221 |         </div>
222 |         <div class="footer-3"></div>
223 | 
224 |     <h1>三列布局:使用absolute(定高)</h1>
225 |     <div class="wrapper">
226 |         <div class="left"></div>
227 |         <div class="middle"></div>
228 |         <div class="right"></div>
229 |     </div>
230 | 
231 |     <h1>三栏网页宽度自适应布局:左右两栏目宽度固定,中间拦宽度自适应－－absolute</h1>
232 |     <div class="parent-a">
233 |         <div class="left-a"></div>
234 |         <div class="main-a"></div>
235 |         <div class="right-a"></div>
236 |     </div>
237 | 
238 |     <h1>三栏网页宽度自适应布局:左右两栏目宽度固定,中间拦宽度自适应－－margin负值法</h1>
239 |     <div class="parent-a">
240 |         <div class="main-m">
241 |             <div class="body-m"></div>
242 |         </div>
243 |         <div class="left-m"></div>
244 |         <div class="right-m"></div>
245 |     </div>
246 | 
247 |     <h1>三栏网页宽度自适应布局:左右两栏目宽度固定,中间拦宽度自适应－－自身浮动法</h1>
248 |     <div class="parent-a">
249 |         <div class="left-self"></div>
250 |         <div class="right-self"></div>
251 |         <div class="main-self"></div>
252 |     </div>
253 | </body>
254 | </html>


--------------------------------------------------------------------------------
/CSS/list/list-style.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>列表项目相关内容</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>设置列表项目相关内容- list-style</h1>
20 | <h2>语法</h2>
21 | <ul>
22 |     <li>list-style：<' list-style-type '> || <' list-style-position '> || <' list-style-image '> </li>
23 | </ul>
24 | <h2>说明</h2>
25 | <ul>
26 |     <li>list-style-type:指定列表项所使用的预设标记</li>
27 |     <li>list-style-position:对象的列表项标记如何根据文本排列，outside,inside</li>
28 |     <li>list-style-image:对象的列表项标记的图像</li>
29 | </ul>
30 | <h2>注意事项</h2>
31 | <p>1.当使用符合属性时，list-style-image要写在list-style-type之后。</p>
32 | <p>2.复合属性或单独属性都只适用于 display 设置为list-item的元素。</p>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/CSS/padding.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <title>内补白相关</title>
  6 |         <style>
  7 |             body {
  8 |                 margin: 0 30px;
  9 |                 font-family: "Times New Roman", Georgia, Serif;
 10 |             }
 11 |             p {
 12 |                 text-indent: 2em;
 13 |             }
 14 |             #padding_example {
 15 |                 display: inline-block;
 16 |                 padding: 10px 20px 30px 40px;
 17 |                 border: 1px solid #000;
 18 |             }
 19 |             #padding_example>div {
 20 |                 width: 100px;
 21 |                 height: 50px;
 22 |                 background-color: turquoise;
 23 |             }
 24 |             #wrapper {
 25 |                 margin-left: 2em;
 26 |             }
 27 |             #wrapper:after {
 28 |                 content: '.';
 29 |                 display: block;
 30 |                 width: 0;
 31 |                 height: 0;
 32 |                 clear: both;
 33 |                 visibility: hidden;
 34 |             }
 35 |             .box {
 36 |                 width: 400px;
 37 |                 height: 250px;
 38 |                 border: 1px solid #000;
 39 |                 margin-right: 50px;
 40 |                 float: left;
 41 |             }
 42 |             .topBox {
 43 |                 background-color: turquoise;
 44 |                 margin: 30px;
 45 |             }
 46 |             .bottomBox {
 47 |                 background-color: #6ee4f2;
 48 |                 height: 100px;
 49 |                 padding-left: 10px;
 50 |                 padding-right: 10px;
 51 |             }
 52 |             .child1 {
 53 |                 background-color: #93bef1;
 54 |             }
 55 |             .child2 {
 56 |                 background-color: #f1df9a;
 57 |             }
 58 |         </style>
 59 |     </head>
 60 |     <body>
 61 |         <h1>内补白相关</h1>
 62 |         <ul>
 63 |             <li>
 64 |                 <h3>padding属性</h3>
 65 |                 <p>该属性用来设置元素与元素内容之间的内边距。</p>
 66 |                 <p>其默认取值为0，也可取值为长度值或者百分比，均不允许负值。当取值为百分比时，计算值是参照包含块的宽度（水平书写模式下参照宽度，其他书写模式下参照高度）来得到的。</p>
 67 |                 <p>如果提供4个参数值，则按上右下左(顺时针)的顺序作用于四边；如果提供3个参数，则第一个用于上边距，第二个用于左右边距，第三个用于下边距；如果提供2个参数，则第一个用于上下边距，第二个用于左右边距；如果提供1个参数，则作用于四边。</p>
 68 |                 <ul>
 69 |                     <li>
 70 |                         <h4>注意点</h4>
 71 |                         <p>padding和margin有所区别，当设置背景色时，背景色覆盖的范围会覆盖到padding的区域。</p>
 72 |                         <p>如果要设置非替代行内元素的上下padding，则需要先把元素变为块级或者内联块级元素。</p>
 73 |                     </li>
 74 |                     <li>
 75 |                         <h4>示例</h4>
 76 |                         <p>下面的示例中，绿色div为外部div（带边框）的内容，绿色div与外部div的内边距依照上右下左的顺序分别为10px、20px、30px、40px。</p>
 77 |                         <div id="padding_example">
 78 |                             <div>我是属于内容的div</div>
 79 |                         </div>
 80 |                     </li>
 81 |                 </ul>
 82 |             </li>
 83 |             <li>
 84 |                 <h3>padding-top、padding-right、padding-bottom和padding-left属性</h3>
 85 |                 <p>这四个属性可以对元素四个方向上的内边距进行单独的设置，其取值和注意点和padding属性类似，不再赘述。</p>
 86 |             </li>
 87 |             <li>
 88 |                 <h3>参考链接</h3>
 89 |                 <ul>
 90 |                     <li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
 91 |                 </ul>
 92 |             </li>
 93 |         </ul>
 94 |         <h1>扩展</h1>
 95 |         <p>时常在我们设计页面的时候，margin和padding都能够在视觉上达到同样的效果。To be margin or to be padding, that's a question.</p>
 96 |         <p>padding的作用是用来隔绝元素和其中的内容，而margin的作用是用隔绝元素与元素之间的距离。同时，对于隔开子元素和父元素的距离这样的问题，如果用margin的话，很可能会因为意外出现的margin折叠而打乱了自己的原本的设计。</p>
 97 |         <div id="wrapper">
 98 |             <div class="box">
 99 |                 <div class="topBox">我是孩子1和孩子2的父节点的兄弟节点，我的margin是30px。</div>
100 |                 <div class="bottomBox">
101 |                     <div class="child1" style="margin-top: 10px;">我是孩子1，为了隔开与父亲的距离，我的margin-top为10px。</div>
102 |                     <div class="child2">我是孩子2</div>
103 |                 </div>
104 |             </div>
105 |             <div class="box">
106 |                 <div class="topBox">我是孩子1和孩子2的父节点的兄弟节点，我的margin是30px。</div>
107 |                 <div class="bottomBox" style="padding-top: 10px;">
108 |                     <div class="child1">我是孩子1，为了隔开我和父亲的距离，我的父亲的padding-top为10px。</div>
109 |                     <div class="child2">我是孩子2</div>
110 |                 </div>
111 |             </div>
112 |         </div>
113 |         <p>可以看到，上述左边的例子并没有达到想要的效果，因为这时候孩子1的父亲的兄弟节点的margin-bottom（30px）和孩子1的margin-top折叠了。所以，这时候用padding是更明智的选择。</p>
114 |         <h3>参考链接</h3>
115 |         <ul>
116 |             <li><a href="http://www.hicss.net/use-margin-or-padding/">用Margin还是用Padding</a></li>
117 |         </ul>
118 |     </body>
119 | </html>


--------------------------------------------------------------------------------
/CSS/positioning/position.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head lang="en">
  4 |     <meta charset="UTF-8">
  5 |     <title>positioning(定位)属性知识点总结</title>
  6 |     <style>
  7 |         body {
  8 |             font: 17px/1.5 georgia, simsun, arial;
  9 |         }
 10 | 
 11 |         h1 {
 12 |             margin: 10px 0;
 13 |             font-size: 20px;
 14 |         }
 15 | 
 16 |         ul {
 17 |             margin: 0;
 18 |             padding: 0;
 19 |             list-style: none;
 20 |         }
 21 | 
 22 |         /* relative demo css */
 23 |         .staticClas{
 24 |             width: 200px;
 25 |             height: 100px;
 26 |             background: red;
 27 |         }
 28 |         .relativeCls{
 29 |             position: relative;
 30 |             left:20px;
 31 |             top:20px;
 32 |             background: blue;
 33 |             width: 200px;
 34 |             height: 100px;
 35 |             color: white;
 36 |         }
 37 |         .relativeCls p {
 38 |             white-space: pre-line;
 39 |         }
 40 |         li > span {
 41 |             color: red;
 42 |         }
 43 | 
 44 |         /* absolute demo css */
 45 |         .absolute-brand {
 46 |             width: 70em;
 47 |             height: 10em;
 48 |             position: relative;
 49 |             border:1px solid #ddd;
 50 |         }
 51 |         .absolute-tel{
 52 |             position: absolute;
 53 |             right: 1em;
 54 |             bottom: 1em;
 55 |             text-align:right;
 56 |         }
 57 | 
 58 |         /* fixed demo css */
 59 |         .fixedDiv {
 60 |             background-color: #f00;
 61 |             position: fixed;
 62 |             width: 200px;
 63 |             height: 100px;
 64 |             left: 50%;
 65 |             top: 50%;
 66 |             margin-left: -50px;
 67 |             margin-top: -50px;
 68 |         }
 69 |         .fixedDiv p{
 70 |             white-space: pre-line;
 71 |         }
 72 | 
 73 |         /* z-index demo css */
 74 |         .z-parent {
 75 |             position: relative;
 76 |             height: 200px;
 77 |         }
 78 |         .z-div{
 79 |             position: absolute;
 80 |             width: 200px;
 81 |             height: 100px;
 82 |             text-align: right;
 83 |             color:white;
 84 |         }
 85 |         .z-div1 {
 86 |             z-index: 1;
 87 |             background: #000;
 88 |         }
 89 |         .z-div2 {
 90 |             z-index: 2;
 91 |             top: 70px;
 92 |             left: 70px;
 93 |             background: #C00;
 94 |         }
 95 |         .z-div1-sub {
 96 |             top: 35px;
 97 |             left: 35px;
 98 |             background: #999;
 99 |             z-index:100;
100 |         }
101 |         .z-div2-sub{
102 |             top: 35px;
103 |             left: 35px;
104 |             background: #008000;
105 |             z-index: 10;
106 |         }
107 | 
108 |         /* clip demo css*/
109 |         .clip img
110 |         {
111 |             position:absolute;
112 |             clip:rect(auto 50px 20px auto) ;
113 |         }
114 | 
115 | 
116 |     </style>
117 | </head>
118 | <body>
119 | <h1>position</h1>
120 | <ol>
121 |     <li>含义:定义对象的定位方式</li>
122 |     <li>
123 |         <p>取值</p>
124 |         <ol>
125 |             <li>
126 |                 <p>static:对象遵循常规流.top,right,left,bottom等属性不会被应用.</p>
127 |                 <ul>
128 |                     <li>常规流中元素框的位置由元素所在HTML中的位置决定.</li>
129 |                 </ul>
130 |             </li>
131 |             <li>
132 |                 <p>relative:对象遵循常规流,并且参照自身在常规流中的位置通过 top,right,left,bottom属性进行偏移时不影响常规流中的任何元素.</p>
133 |                 <ul>
134 |                     <li>如果对一个元素进行相对定位,它将出现在它所在的位置上,通过设置水平或者垂直位置使元素"相对于"它的起点移动.<span>使用相对定位,无论移动与否,它仍然占据原来的空间,移动元素会导致它覆盖其他框</span></li>
135 |                     <li>
136 |                         <div>
137 |                             <p>Demo</p>
138 |                             <div class="relativeCls">
139 |                                 <p>
140 |                                     position: relative;
141 |                                     left:20px;
142 |                                     top:20px;
143 |                                 </p>
144 |                             </div>
145 |                             <div class="staticClas"></div>
146 |                         </div>
147 |                     </li>
148 |                 </ul>
149 |             </li>
150 |             <li>
151 |                 <p>absolute:对象脱离常规流,使用top,right,left,bottom等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠.</p>
152 |                 <ul>
153 |                     <li>绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的,如果元素没有已定位的祖先元素,那么它的位置是相对于初始包含块<span>根据用户代理的不同,初始包含块可能是画布或者HTML元素.</span></li>
154 |                     <li>绝对定位元素与文档流无关,因此它们不影响普通流中的框,如果扩大绝对定位的框,周围的框不会重新定位,因此,<span>尺寸的任何变化都会导致绝对定位的框产生重叠</span></li>
155 |                     <li>
156 |                         <div>
157 |                             <p>Demo</p>
158 |                             <div class="absolute-brand">
159 |                                 <p class="absolute-tel">Tel: 185159474XX</p>
160 |                             </div>
161 |                         </div>
162 |                     </li>
163 |                 </ul>
164 |             </li>
165 |             <li>
166 |                 <p>fixed:对象脱离常规流,使用top,right,left,bottom等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动.</p>
167 |                 <ul>
168 |                     <li>固定定位是绝对定位的一种,差异在.于固定定位元素的包含块是视口(viewport).<span>可以创建总是出现在窗口中相同位置的浮动元素.</span></li>
169 |                     <li>IE6及以下版本不支持,IE7也只是部分支持.</li>
170 |                     <li>
171 |                         <div>
172 |                             <p>Demo</p>
173 |                             <div class="fixedDiv">
174 |                                 <p>
175 |                                     demo:
176 |                                     position:fixed;
177 |                                     left:20px;
178 |                                     top:20px;
179 |                                 </p>
180 |                             </div>
181 |                         </div>
182 |                     </li>
183 |                 </ul>
184 |             </li>
185 |             <li>
186 |                 <p>center:对象脱离常规流,使用top,right,left,bottom等属性指定盒子的位置或尺寸大小.盒子在其包含容器垂直水平居中.盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠.（CSS3)(暂无浏览器支持)</p>
187 |             </li>
188 |             <li>
189 |                 <p>page(css3)(暂无浏览器支持)</p>
190 |             </li>
191 |             <li>
192 |                 <p>sticky:对象在常态时遵循常规流.它就像是「relative」和「fixed」的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如「fixed」.该属性的表现是现实中你见到的吸附效果.如<a href="http://bj.meituan.com/deal/25827121.html?mtt=1.index%2Ffloornew.ip.1.ihq6rdtg">[美团商家位置]</a>的效果（CSS3）(部分浏览器支持)</p>
193 |             </li>
194 |         </ol>
195 |     </li>
196 |     <li>
197 |         <p>注意事项</p>
198 |         <ol>
199 |             <li>当 position的值为非static时,其层叠级别通过z-index属性定义.</li>
200 |             <li>绝对定位的元素,在top,right,left,bottom属性未设置时,会紧随在其前面的兄弟元素之后,但在位置上不影响常规流中的任何元素.</li>
201 |         </ol>
202 |     </li>
203 | </ol>
204 | 
205 | <h1>z-index</h1>
206 | <ol>
207 |     <li>
208 |         <p>含义:检索或设置对象的层叠顺序.为元素指定沿着Z轴的值.</p>
209 |         <ol>
210 |             <li>在这个坐标系中有较高z-index值的元素比z-index值较低的元素离读者更近.</li>
211 |             <li>
212 |                 <p>图例</p>
213 |                 <ul>
214 |                     <li>
215 |                         <p>叠放概念视图</p>
216 |                         <img src="../img/z-index-1.png">
217 |                     </li>
218 |                     <li>
219 |                         <p>具体叠放</p>
220 |                         <img src="../img/z-index-2.png">
221 |                     </li>
222 |                 </ul>
223 |             </li>
224 |         </ol>
225 |     </li>
226 |     <li>取值:auto(元素在当前层叠上下文中的层叠级别是0.元素不会创建新的局部层叠上下文,除非它是根元素的层叠上下文)|'integer'(可以为负值)li>
227 |     <li>适用对象:定位元素</li>
228 |     <li>注意点:如果存在父元素设置了z-index,子元素也设置了z-index.则依据父元素设置的z-index进行覆盖,并且子元素不会超出父优先级.</li>
229 |     <li>
230 |         <div >
231 |             <p>Demo</p>
232 |             <div class="z-parent">
233 |                 <div class="z-div1 z-div">z-index:1
234 |                     <div  class="z-div1-sub z-div">z-index:100</div>
235 |                 </div>
236 |                 <div class="z-div2 z-div">z-index:2
237 |                     <div class="z-div2-sub z-div">z-index:10</div>
238 |                 </div>
239 |             </div>
240 |         </div>
241 |     </li>
242 | </ol>
243 | 
244 | <h1>clip</h1>
245 | <ol>
246 |     <li>含义:检索或设置对象的可视区域.区域外的部分是透明的.</li>
247 |     <li>
248 |         <p>取值</p>
249 |         <ol>
250 |             <li>auto:对象无剪切</li>
251 |             <li>rect(<number>|auto <number>|auto <number>|auto <number>|auto):依据上右下左的顺序提供自对象左上角(0,0)坐标计算的四个偏移数值,其中任何一个数值都可以用auto替换,即此边部剪切.</li>
252 |             <li>'上,左'方位的裁剪:从0开始剪裁直到设定值,即'上,左'方位的auto值等同于0；</li>
253 |             <li>'右,下'方位的裁剪:从设定值开始剪裁直到最右边和最下边,即 '右,下'方位的auto值为盒子的实际宽度和高度.</li>
254 |         </ol>
255 |     </li>
256 |     <li>适用对象:position设为absolute或fixed的元素.</li>
257 |     <li>注意:使用clip剪切掉的区域不可见.</li>
258 |     <li>
259 |         <div class="clip">
260 |             <p>Demo</p>
261 |             <ol>
262 |                 <li>clip:rect(auto 50px 20px auto):上边不剪切,右边从左起第50个像素开始剪切直至最右边,下边从上起第20个像素开始剪切直至最底部,左边不剪切.</li>
263 |                 <li>效果:剩余区域宽50px,高20px.</li>
264 |             </ol>
265 |             <p>clip 属性剪切了一幅图像:</p>
266 |             <p><img border="0" src="http://www.w3school.com.cn/i/eg_bookasp.gif" width="120" height="151"></p>
267 |         </div>
268 |     </li>
269 | </ol>
270 | </body>
271 | </html>


--------------------------------------------------------------------------------
/CSS/printing.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 | <title>打印属性 - CSS</title>
 7 | <meta name="description" content="css打印相关属性：page, page-break-before, page-break-after, page-break-inside">
 8 | <meta name="keywords" content="CSS打印属性">
 9 | </head>
10 | <body>
11 |     <h1>打印属性</h1>
12 |     <ul>
13 |         <li>
14 |             <h2>page</h2>
15 |             <p>使用@page指定页面的打印样式，可以定制页面容器的版式，方向，边空。</p>
16 |             <p><strong>语法规则：</strong>@page &lt;pseudo-classes&gt; { Rules }</p>
17 |             <ul>
18 |                 <li>&lt;pseudo-classes&gt;：打印伪类:first, :left, :right</li>
19 |                     <ul>
20 |                         <li>fisrt：打印时候的第一页</li>
21 |                         <li>left：左页(装订线的左边的页面)，想象打印的是一本书，第一页为封面，是右页。</li>
22 |                         <li>right：右页(装订线的右边的页面)，想象打印的是一本书，第一页为封面，是右页。</li>
23 |                     </ul>
24 |                 <li>Rules：size, margin</li>
25 |                     <ul>
26 |                         <li>size：&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait | landscape] ]。eg.size: A5 landscape;</li>
27 |                     </ul>
28 |             </ul>
29 |             <strong>参考：</strong>
30 |             <ul>
31 |                 <li><a href="http://www.w3.org/TR/CSS2/page.html#page-box" target="_blank">W3C标准</a></li>
32 |                 <li><a href="printing/page.html" target="_blank">demo</a></li>
33 |             </ul>
34 |         </li>
35 |         <li>
36 |             <h2>page-break-before</h2>
37 |             <p>用于指定打印时元素前的分页规则。</p>
38 |             <strong>取值</strong>
39 |             <ul>
40 |                 <li>auto：如果需要，在对象之前插入页分割符</li>
41 |                 <li>always：始终在对象之前插入页分割符</li>
42 |                 <li>avoid：避免在对象前面插入页分割符</li>
43 |             </ul>
44 |         </li>
45 |         <li>
46 |             <h2>page-break-after</h2>
47 |             <p>用于指定打印时元素后的分页规则。</p>
48 |             <strong>取值</strong>
49 |             <ul>
50 |                 <li>auto：如果需要，在对象之后插入页分割符</li>
51 |                 <li>always：始终在对象之后插入页分割符</li>
52 |                 <li>avoid：避免在对象后面插入页分割符</li>
53 |             </ul>
54 |         </li>
55 |         <li>
56 |             <h2>page-break-inside</h2>
57 |             <p>用于指定打印时元素后的分页规则。</p>
58 |             <strong>取值</strong>
59 |             <ul>
60 |                 <li>auto：如果需要，在当前对象内部插入页分割符</li>
61 |                 <li>avoid：避免在当前对象内部插入页分割符</li>
62 |             </ul>
63 |         </li>
64 |     </ul>
65 | </body>
66 | </html>


--------------------------------------------------------------------------------
/CSS/printing/page.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 | <title>page demo</title>
 7 | <style>
 8 |     @page{margin-left: 300px; size: A4 portrait;}
 9 |     @page:first{size: A4 landscape; margin-left: 100px;}
10 |     @page:left{margin-left: 200px;}
11 |     div {page-break-after: always;}
12 | </style>
13 | </head>
14 | <body>
15 |     <p>这是答应测试，请通过cmd+p开启打印预览查看效果。</p>
16 |     <div>@page:first{size: A4 landscape; margin: 50px;}</div>
17 |     <div>@page:left{size: A4 portrait; margin: 100px;}</div>
18 |     <div>@page{size: A4 portrait; margin: 150px;}</div>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/CSS/private.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 | <title>常用浏览器私有属性 - CSS</title>
  7 | <meta name="description" content="浏览器私有属性：IE, Firefox, Webkit">
  8 | <meta name="keywords" content="浏览器私有属性">
  9 | <style>
 10 |     .table {
 11 |         margin-left: 2em;
 12 |         line-height: 1.5;
 13 |     }
 14 | 
 15 |     .table th,
 16 |     .table td {
 17 |         text-align: left;
 18 |     }
 19 | </style>
 20 | </head>
 21 | <body>
 22 |     <h1>常用浏览器私有属性</h1>
 23 |     <h3>常用IE私有属性</h3>
 24 |     <table class="table" frame="box" rules="all">
 25 |         <thead>
 26 |             <tr>
 27 |                 <th>属性</th>
 28 |                 <th>版本</th>
 29 |                 <th>继承性</th>
 30 |                 <th>描述</th>
 31 |             </tr>
 32 |         </thead>
 33 |         <tbody>
 34 |             <tr>
 35 |                 <td>
 36 |                     <a target="_blank" href="http://css.doyoe.com/properties/only-ie/scrollbar-3dlight-color.htm">scrollbar-3dlight-color</a>
 37 |                 </td>
 38 |                 <td>CSS1</td>
 39 |                 <td>有</td>
 40 |                 <td>检索或设置对象滚动条3d亮色阴影边框(threedlightshadow)的外观颜色。</td>
 41 |             </tr>
 42 |             <tr>
 43 |                 <td>
 44 |                     <a target="_blank" href="http://css.doyoe.com/properties/only-ie/scrollbar-darkshadow-color.htm">scrollbar-darkshadow-color</a>
 45 |                 </td>
 46 |                 <td>CSS1</td>
 47 |                 <td>有</td>
 48 |                 <td>检索或设置对象滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色。</td>
 49 |             </tr>
 50 |             <tr>
 51 |                 <td>
 52 |                     <a target="_blank" href="http://css.doyoe.com/properties/only-ie/scrollbar-highlight-color.htm">scrollbar-highlight-color</a>
 53 |                 </td>
 54 |                 <td>CSS1</td>
 55 |                 <td>有</td>
 56 |                 <td>检索或设置对象滚动条3d高亮边框(threedhighlight)的外观颜色。</td>
 57 |             </tr>
 58 |             <tr>
 59 |                 <td>
 60 |                     <a target="_blank" href="http://css.doyoe.com/properties/only-ie/scrollbar-shadow-color.htm">scrollbar-shadow-color</a>
 61 |                 </td>
 62 |                 <td>CSS1</td>
 63 |                 <td>有</td>
 64 |                 <td>检索或设置对象滚动条3d阴影边框(threedshadow)的外观颜色。</td>
 65 |             </tr>
 66 |             <tr>
 67 |                 <td>
 68 |                     <a target="_blank" href="http://css.doyoe.com/properties/only-ie/scrollbar-arrow-color.htm">scrollbar-arrow-color</a>
 69 |                 </td>
 70 |                 <td>CSS1</td>
 71 |                 <td>有</td>
 72 |                 <td>检索或设置对象滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。</td>
 73 |             </tr>
 74 |             <tr>
 75 |                 <td>
 76 |                     <a target="_blank" href="http://css.doyoe.com/properties/only-ie/scrollbar-face-color.htm">scrollbar-face-color</a>
 77 |                 </td>
 78 |                 <td>CSS1</td>
 79 |                 <td>有</td>
 80 |                 <td>检索或设置对象滚动条3D表面的(threedface)的外观颜色。</td>
 81 |             </tr>
 82 |             <tr>
 83 |                 <td>
 84 |                     <a target="_blank" href="http://css.doyoe.com/properties/only-ie/scrollbar-track-color.htm">scrollbar-track-color</a>
 85 |                 </td>
 86 |                 <td>CSS1</td>
 87 |                 <td>有</td>
 88 |                 <td>检索或设置对象滚动条拖动区域的外观颜色。</td>
 89 |             </tr>
 90 |             <tr>
 91 |                 <td>
 92 |                     <a target="_blank" href="http://css.doyoe.com/properties/only-ie/scrollbar-base-color.htm">scrollbar-base-color</a>
 93 |                 </td>
 94 |                 <td>CSS1</td>
 95 |                 <td>有</td>
 96 |                 <td>检索或设置对象滚动条基准颜色，其它界面颜色将据此自动调整。</td>
 97 |             </tr>
 98 |             <tr>
 99 |                 <td>
100 |                     <a target="_blank" href="http://css.doyoe.com/properties/only-ie/filter.htm">filter</a>
101 |                 </td>
102 |                 <td>CSS1</td>
103 |                 <td>无</td>
104 |                 <td>设置或检索对象所应用的滤镜效果。</td>
105 |             </tr>
106 |             <tr>
107 |                 <td>
108 |                     <a target="_blank" href="http://css.doyoe.com/properties/only-ie/behavior.htm">behavior</a>
109 |                 </td>
110 |                 <td>CSS1</td>
111 |                 <td>无</td>
112 |                 <td>设置或检索对象的DHTML行为。</td>
113 |             </tr>
114 |         </tbody>
115 |     </table>
116 |     <h3>常用Firefox私有属性</h3>
117 |     <table class="table" frame="box" rules="all">
118 |         <thead>
119 |             <tr>
120 |                 <th>属性</th>
121 |                 <th>版本</th>
122 |                 <th>继承性</th>
123 |                 <th>描述</th>
124 |             </tr>
125 |         </thead>
126 |         <tbody>
127 |             <tr>
128 |                 <td><a target="_blank" href="http://css.doyoe.com/properties/only-firefox/border-colors.htm" class="g-color-css3-new">border-colors</a></td>
129 |                 <td>CSS3</td>
130 |                 <td>无</td>
131 |                 <td>设置或检索对象边框的多重颜色</td>
132 |             </tr>
133 |             <tr>
134 |                 <td><a target="_blank" href="http://css.doyoe.com/properties/only-firefox/border-top-colors.htm" class="g-color-css3-new">border-top-colors</a></td>
135 |                 <td>CSS3</td>
136 |                 <td>无</td>
137 |                 <td>设置或检索对象顶边的多重颜色</td>
138 |             </tr>
139 |             <tr>
140 |                 <td><a target="_blank" href="http://css.doyoe.com/properties/only-firefox/border-right-colors.htm" class="g-color-css3-new">border-right-colors</a></td>
141 |                 <td>CSS3</td>
142 |                 <td>无</td>
143 |                 <td>设置或检索对象右边的多重颜色</td>
144 |             </tr>
145 |             <tr>
146 |                 <td><a target="_blank" href="http://css.doyoe.com/properties/only-firefox/border-bottom-colors.htm" class="g-color-css3-new">border-bottom-colors</a></td>
147 |                 <td>CSS3</td>
148 |                 <td>无</td>
149 |                 <td>设置或检索对象底边的多重颜色</td>
150 |             </tr>
151 |             <tr>
152 |                 <td><a target="_blank" href="http://css.doyoe.com/properties/only-firefox/border-left-colors.htm" class="g-color-css3-new">border-left-colors</a></td>
153 |                 <td>CSS3</td>
154 |                 <td>无</td>
155 |                 <td>设置或检索对象左边的多重颜色</td>
156 |             </tr>
157 |         </tbody>
158 |     </table>    
159 |     <h3>常用Webkit私有属性</h3>
160 |     <table class="table" frame="box" rules="all">
161 |         <thead>
162 |             <tr>
163 |                 <th>属性</th>
164 |                 <th>版本</th>
165 |                 <th>继承性</th>
166 |                 <th>描述</th>
167 |             </tr>
168 |         </thead>
169 |         <tbody>
170 |             <tr>
171 |                 <td><a target="_blank" href="http://css.doyoe.com/properties/only-webkit/text-fill-color.htm" class="g-color-css3-new">text-fill-color</a></td>
172 |                 <td>CSS3</td>
173 |                 <td>有</td>
174 |                 <td>设置或检索对象中的文字填充颜色</td>
175 |             </tr>
176 |             <tr>
177 |                 <td><a target="_blank" href="http://css.doyoe.com/properties/only-webkit/text-stroke.htm" class="g-color-css3-new">text-stroke</a></td>
178 |                 <td>CSS3</td>
179 |                 <td>有</td>
180 |                 <td>复合属性。设置或检索对象中的文字的描边</td>
181 |             </tr>
182 |             <tr>
183 |                 <td><a target="_blank" href="http://css.doyoe.com/properties/only-webkit/text-stroke-width.htm" class="g-color-css3-new">text-stroke-width</a></td>
184 |                 <td>CSS3</td>
185 |                 <td>有</td>
186 |                 <td>设置或检索对象中的文字的描边厚度</td>
187 |             </tr>
188 |             <tr>
189 |                 <td><a target="_blank" href="http://css.doyoe.com/properties/only-webkit/text-stroke-color.htm" class="g-color-css3-new">text-stroke-color</a></td>
190 |                 <td>CSS3</td>
191 |                 <td>有</td>
192 |                 <td>设置或检索对象中的文字的描边颜色</td>
193 |             </tr>
194 |             <tr>
195 |                 <td><a target="_blank" href="http://css.doyoe.com/properties/only-webkit/box-reflect.htm" class="g-color-css3-new">box-reflect</a></td>
196 |                 <td>CSS3</td>
197 |                 <td>有</td>
198 |                 <td>设置或检索对象的倒影</td>
199 |             </tr>
200 |             <tr>
201 |                 <td><a target="_blank" href="http://css.doyoe.com/properties/only-webkit/tap-highlight-color.htm" class="g-color-css3-new">tap-highlight-color</a></td>
202 |                 <td>CSS3</td>
203 |                 <td>无</td>
204 |                 <td>设置或检索对象轻按时高亮</td>
205 |             </tr>
206 |             <tr>
207 |                 <td><a target="_blank" href="http://css.doyoe.com/properties/only-webkit/user-drag.htm" class="g-color-css3-new">user-drag</a></td>
208 |                 <td>CSS3</td>
209 |                 <td>无</td>
210 |                 <td>设置或检索一个元素可以被拖拽，而不它的内容</td>
211 |             </tr>
212 |         </tbody>
213 |     </table>
214 | </body> 
215 | </html>


--------------------------------------------------------------------------------
/CSS/rules/font-face.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>设置嵌入HTML文档的字体</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         .extend{
17 |             list-style-type:decimal ;
18 |         }
19 |         .extend .before:after{
20 |             content:"\\6211";
21 |         }
22 |     </style>
23 | </head>
24 | <body>
25 | <h1>设置嵌入HTML文档的字体-@font-face</h1>
26 | <h2>语法</h2>
27 | <ul>
28 |     <li>@font-face [family-family: name ; src: &lt;fontsrc&gt; ; &lt;font&gt;</li>
29 | </ul>
30 | <h2>取值说明</h2>
31 | <ul>
32 |     <li>需要兼容当前的主流浏览器，需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式</li>
33 | </ul>
34 | <h2>示例</h2>
35 | <pre>
36 |   <code>
37 |     @font-face {
38 |       font-family: 'iconfont';
39 |       src: url('../font/fontello.eot');    /* IE9*/
40 |       src: url('../font/fontello.eot#iefix') format('embedded-opentype'),  /* IE6-IE8 */
41 |       url('../font/fontello.woff') format('woff'),  /* chrome、firefox */
42 |       url('../font/fontello.ttf') format('truetype'),       /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
43 |       url('../font/fontello.svg#fontello') format('svg');   /* iOS 4.1- */
44 |     }
45 |   </code>
46 | </pre>
47 | 
48 | <h2>兼容性</h2>
49 | <p>不同格式的字体文件对于不同的浏览器。</p>
50 | <h1>扩展阅读</h1>
51 | <ul class="extend">
52 |     <li>
53 |         这样为什么能设置自定义的字体，设置图标?<br>
54 |         计算机统一识别的是Unicode编码，Unicode编码有非常庞大的编码表，每一个Unicode码对应一个字符（数字，符号，汉字等），我们可以在网页或者js脚本中使用Unicode编码，如"我"的Unicode编码为6211，那么在网页中可以使用
55 |         类似于实体符号的方式，用Unicode码展示“我”，即 <code>&#38;#x6211;</code>。也可以在HTML元素的伪元素的content中使用 <span class="before"></span>。在js中使用\u6211;三种书写方式在不同情况下使用。
56 |         在Unicode庞大的编码表中，总有一些是用不到的，但是这些位置有相应的编码值，这样就可以利用这些有编码值的码位，将我们自定义的字体或图标放在这个码位上，然后就可以用相应的Unicode值显示图标或字体。
57 |     </li>
58 |     <li>
59 |         webfont又是什么? <br/>
60 |         wenfont其实就是一个字体的集合，自定义特殊的字体，定义的字体的每一个符号和的原符号的码值一样，但是表现样式不同，这样页面展示的字就是自定义的字体了。英文的字符数比较少，所以生成的webfont也比较小，目前使用的还是蛮多的，但是
61 |         我大中文实在是太多字了（跪），要是有一个囊括所有汉字的webfont，必然是十分庞大的，实在是没啥价值，所以，汉字的webfont一般都不是包括全部的汉字，而是包括一部分，这样只对特定的汉字做自定义字体展示就好了，字体文件也不会太大。
62 |     </li>
63 |     <li>
64 |         图标的蜕化操作 <br/>
65 |         上面说到font-face可以定义图标，但是面临一个问题，如果页面加载的时候，整体结构已经出来了，但是因为网络或cdn的原因，字体文件迟迟没有加载来，就会出现展示异常，这样非常影响用户体验，但是不用图标又不好看，怎么做到既好看又不影响
66 |         使用呢？结合webfont的思路，比如我们想要一个音乐图标♬，那么我们可以先把浏览器可识别的一个符号♫的编码找到，即2660，那么制作图标的时候，新图标♬可以覆盖♫的编码，这样在网络条件良好的情况下，会显示我们自定义的图标，哪怕网络不好
67 |         也不会显示乱码，而是退而求其次，显示♫，总是没有太大的影响嘛，这就是蜕化。
68 |     </li>
69 |     <li>
70 |         相关链接 <br/>
71 |         <a href="http://www.ruanyifeng.com/blog/2014/12/unicode.html">Unicode与JavaScript详解</a> <br/>
72 |         <a href="http://fontello.com/">fontello图标下载</a><br/>
73 |         <a href="http://font-spider.org/">字蛛</a><br/>
74 |         <a href="http://www.barretlee.com/blog/2015/08/17/cb-iconfont-opt/">iconfont的蜕化操作</a>
75 |     </li>
76 | </ul>
77 | 
78 | </body>
79 | </html>
80 | 


--------------------------------------------------------------------------------
/CSS/table/border-collapse.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>表格的行和单元格的边是合并还是独立</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         table{
17 |             width:400px;
18 |         }
19 |         table.one{
20 |             border-collapse: separate;
21 |         }
22 |         table.two{
23 |             border-collapse: collapse;
24 |         }
25 |     </style>
26 | </head>
27 | <body>
28 | <h1>设置表格的行和单元格的边是合并还是独立- border-collapse</h1>
29 | <h2>取值</h2>
30 | <ul>
31 |     <li>separate：边框独立</li>
32 |     <li>collapse：相邻边被合并</li>
33 | </ul>
34 | <h2>说明</h2>
35 | <ul>
36 |     <li>只有当表格边框独立（即属性等于separate时）， border-spacing 和 empty-cells 才起作用。</li>
37 | </ul>
38 | <h2>示例</h2>
39 | <table class="one" border="1">
40 |     <tr>
41 |         <td width="20%">100</td>
42 |         <td width="40%">10000</td>
43 |         <td width="40%">100</td>
44 |     </tr>
45 | </table>
46 | <br/>
47 | <table class="two" border="1">
48 |     <tr>
49 |         <td width="20%">1000</td>
50 |         <td width="40%">10000</td>
51 |         <td width="40%">100</td>
52 |     </tr>
53 | </table>
54 | </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/CSS/table/border-spacing.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>行和单元格的边框在横向和纵向上的间距</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         table{
17 |             width:400px;
18 |         }
19 |         table.two{
20 |             border-spacing: 10px 20px;
21 |         }
22 |     </style>
23 | </head>
24 | <body>
25 | <h1>设置行和单元格的边框在横向和纵向上的间距- border-spacing</h1>
26 | <h2>取值</h2>
27 | <ul>
28 |     <li>&lt;length&gt;：用长度值来定义行和单元格的边框在横向和纵向上的间距。不允许负值</li>
29 | </ul>
30 | <h2>说明</h2>
31 | <ul>
32 |     <li>只有当表格边框独立（即属性等于separate）时才起作用。</li>
33 |     <li>该属性作用等同于标签属性cellspacing(单元格边距)。border-spacing:0等同于cellspacing="0"</li>
34 | </ul>
35 | <h2>示例</h2>
36 | <table class="one" border="1">
37 |     <tr>
38 |         <td width="20%">100</td>
39 |         <td width="40%">10000</td>
40 |         <td width="40%">100</td>
41 |     </tr>
42 | </table>
43 | <br/>
44 | <table class="two" border="1">
45 |     <tr>
46 |         <td width="20%">1000</td>
47 |         <td width="40%">10000</td>
48 |         <td width="40%">100</td>
49 |     </tr>
50 | </table>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/CSS/table/caption-side.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>表格的caption对象的位置</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         .test1{caption-side:top;}
17 |         .test2{caption-side:right;}
18 |         .test3{caption-side:bottom;}
19 |         .test4{caption-side:left;}
20 |     </style>
21 | </head>
22 | <body>
23 | <h1>设置表格的caption对象的位置- border-collapse</h1>
24 | <h2>取值</h2>
25 | <ul>
26 |     <li>top：指定caption在表格上边</li>
27 |     <li>bottom：指定caption在表格下边</li>
28 | </ul>
29 | <h2>说明</h2>
30 | <ul>
31 |     <li>Firefox还额外支持right和left两个非标准值</li>
32 | </ul>
33 | <h2>示例</h2>
34 | <h3>caption在上边</h3>
35 | <table border="1" class="test1">
36 |     <caption>caption在上边</caption>
37 |     <tbody>
38 |     <tr>
39 |         <td>这是某一单元格</td>
40 |         <td>这是某一单元格</td>
41 |     </tr>
42 |     <tr>
43 |         <td>这是某一单元格</td>
44 |         <td>这是某一单元格</td>
45 |     </tr>
46 |     </tbody>
47 | </table>
48 | 
49 | <h3>caption在右边</h3>
50 | <table border="1" class="test2">
51 |     <caption>caption在右边</caption>
52 |     <tbody>
53 |     <tr>
54 |         <td>这是某一单元格</td>
55 |         <td>这是某一单元格</td>
56 |     </tr>
57 |     <tr>
58 |         <td>这是某一单元格</td>
59 |         <td>这是某一单元格</td>
60 |     </tr>
61 |     </tbody>
62 | </table>
63 | 
64 | <h3>caption在下边</h3>
65 | <table border="1" class="test3">
66 |     <caption>caption在下边</caption>
67 |     <tbody>
68 |     <tr>
69 |         <td>这是某一单元格</td>
70 |         <td>这是某一单元格</td>
71 |     </tr>
72 |     <tr>
73 |         <td>这是某一单元格</td>
74 |         <td>这是某一单元格</td>
75 |     </tr>
76 |     </tbody>
77 | </table>
78 | 
79 | <h3>caption在左边</h3>
80 | <table border="1" class="test4">
81 |     <caption>caption在左边</caption>
82 |     <tbody>
83 |     <tr>
84 |         <td>这是某一单元格</td>
85 |         <td>这是某一单元格</td>
86 |     </tr>
87 |     <tr>
88 |         <td>这是某一单元格</td>
89 |         <td>这是某一单元格</td>
90 |     </tr>
91 |     </tbody>
92 | </table>
93 | </body>
94 | </html>
95 | 


--------------------------------------------------------------------------------
/CSS/table/empty-cells.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>是否显示该单元格的边框</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         .test{empty-cells:show;}
17 |         .test2{empty-cells:hide;}
18 |     </style>
19 | </head>
20 | <body>
21 | <h1>设置当表格的单元格无内容时，是否显示该单元格的边框- empty-cells</h1>
22 | <h2>取值</h2>
23 | <ul>
24 |     <li>hide：指定当表格的单元格无内容时，隐藏该单元格的边框。</li>
25 |     <li>show：指定当表格的单元格无内容时，显示该单元格的边框。</li>
26 | </ul>
27 | <h2>说明</h2>
28 | <ul>
29 |     <li>只有当表格边框独立（即属性等于separate）时才起作用。</li>
30 |     <li>IE7及以下浏览器中默认隐藏无内容的单元格边框，要想使其获得与show参数值相同的效果，可以变相给该空单元格加个占位且不可见的元素，例如全角空格或&amp;nbsp;等等。</li>
31 | </ul>
32 | <h2>示例</h2>
33 | <h3>show:</h3>
34 | <table border="1" class="test">
35 |     <tbody>
36 |     <tr>
37 |         <td>序号</td>
38 |         <td>姓名</td>
39 |         <td>年龄</td>
40 |     </tr>
41 |     <tr>
42 |         <td>1</td>
43 |         <td>Joy</td>
44 |         <td>26</td>
45 |     </tr>
46 |     <tr>
47 |         <td>2</td>
48 |         <td>Kate</td>
49 |         <td></td>
50 |     </tr>
51 |     </tbody>
52 | </table>
53 | 
54 | <h3>hide:</h3>
55 | <table border="1" class="test2">
56 |     <tbody>
57 |     <tr>
58 |         <td>序号</td>
59 |         <td>姓名</td>
60 |         <td>年龄</td>
61 |     </tr>
62 |     <tr>
63 |         <td>1</td>
64 |         <td>Joy</td>
65 |         <td>26</td>
66 |     </tr>
67 |     <tr>
68 |         <td>2</td>
69 |         <td>Kate</td>
70 |         <td></td>
71 |     </tr>
72 |     </tbody>
73 | </table>
74 | </body>
75 | </html>
76 | 


--------------------------------------------------------------------------------
/CSS/table/table-layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>表格的布局算法</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         table{
17 |             width:400px;
18 |         }
19 |         table.one{
20 |             table-layout: auto
21 |         }
22 |         table.two{
23 |             table-layout: fixed
24 |         }
25 |     </style>
26 | </head>
27 | <body>
28 | <h1>设置表格的布局算法- table-layout</h1>
29 | <h2>取值</h2>
30 | <ul>
31 |     <li>auto：默认的自动算法。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢</li>
32 |     <li>fixed：固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切</li>
33 | </ul>
34 | <h2>说明</h2>
35 | <ul>
36 |     <li>通常fixed算法会比auto算法高效，尤其是对于那些长表格来说。fixed算法使得表格可以像其它元素一样一行一行的渲染。</li>
37 | </ul>
38 | <h2>示例</h2>
39 | <table class="one" border="1">
40 |     <tr>
41 |         <td width="20%">1000000000000000000000000000</td>
42 |         <td width="40%">10000000</td>
43 |         <td width="40%">100</td>
44 |     </tr>
45 | </table>
46 | <br/>
47 | <table class="two" border="1">
48 |     <tr>
49 |         <td width="20%">1000000000000000000000000000</td>
50 |         <td width="40%">10000000</td>
51 |         <td width="40%">100</td>
52 |     </tr>
53 | </table>
54 | <p>设置两个table的三列宽度分别为20%,40%,40%，但是table-layout设置为auto的table并没有按照设置的宽度渲染，而是根据文本内容。table-layout设置为fixed的就可以按照指定宽度显示。</p>
55 | </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/CSS/text/block-vertical-center.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-cmn-Hans">
  3 | <head>
  4 |     <meta charset="utf-8" />
  5 |     <title>vertical-center</title>
  6 |     <style>
  7 |         .wrapper{
  8 |             height:300px;
  9 |             background: #eee;
 10 |             margin: 20px;
 11 |             position: relative;
 12 |         }
 13 |         pre{
 14 |             position: absolute;
 15 |             left: 0;
 16 |             top: 0;
 17 |         }
 18 |         .inner{
 19 |             width: 100px;
 20 |             height: 100px;
 21 |             background: #ef5a28;
 22 |         }
 23 |         .first .inner{
 24 |             position: absolute;
 25 |             left: 50%;
 26 |             top: 50%;
 27 |             margin-top: -50px;
 28 |             margin-left: -50px;
 29 |         }
 30 |         .second .inner{
 31 |             margin: auto;
 32 |             position: absolute;
 33 |             top: 0; left: 0; bottom: 0; right: 0;
 34 |         }
 35 |         .third{
 36 |             display: -webkit-box;
 37 |             box-align:center;
 38 |             -webkit-box-align:center;
 39 |             -moz-box-align:center;
 40 |             box-pack:center;
 41 |             -webkit-box-pack:center;
 42 |             -moz-box-pack:center;
 43 |         }
 44 |         .forth{
 45 |             display: table-cell;
 46 |             vertical-align:middle;
 47 |             width: 500px;
 48 |         }
 49 |         .fifth{
 50 |             line-height: 300px;
 51 |         }
 52 |         .fifth pre{
 53 |             line-height: 14px;
 54 |         }
 55 |         .fifth .inner{
 56 |             vertical-align:middle;
 57 |             display: inline-block;
 58 |         }
 59 |     </style>
 60 | </head>
 61 | <body>
 62 | <div class="wrapper first">
 63 |         <pre>
 64 | .first .inner{
 65 |     position: absolute;
 66 |     left: 50%;
 67 |     top: 50%;
 68 |     margin-top: -50px;
 69 |     margin-left: -50px;
 70 | }
 71 |         </pre>
 72 |     <div class="inner"></div>
 73 | </div>
 74 | <div class="wrapper second">
 75 |     <pre>
 76 | .second .inner{
 77 |     margin: auto;
 78 |     position: absolute;
 79 |     top: 0; left: 0; bottom: 0; right: 0;
 80 | }
 81 |     </pre>
 82 |     <div class="inner"></div>
 83 | </div>
 84 | <div class="wrapper third">
 85 |     <pre>
 86 | .third{
 87 |     display: -webkit-box;
 88 |     (-webkit-)box-align:center;
 89 |     (-webkit-)box-pack:center;
 90 | }
 91 |     </pre>
 92 |     <div class="inner"></div>
 93 |     <div class="inner" style="background:green"></div>
 94 | </div>
 95 | <div class="wrapper forth">
 96 |     <pre>
 97 | .forth{
 98 |     display: table-cell;
 99 |     vertical-align:middle;
100 |     width: 500px;
101 | }
102 |     </pre>
103 |     <div class="inner"></div>
104 | </div>
105 | <div class="wrapper fifth">
106 |     <pre>
107 | .fifth{
108 |     height:300px;
109 |     line-height: 300px;
110 | }
111 | .fifth .inner{
112 |     vertical-align:middle;
113 |     display: inline-block;
114 | }
115 |     </pre>
116 |         <span>
117 |             <div class="inner"></div>
118 |         </span>
119 | </div>
120 | </body>
121 | </html>
122 | 
123 | 


--------------------------------------------------------------------------------
/CSS/text/line-height.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>元素内文本的行高</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         .test div{width:300px;margin:15px 0;border:1px solid #000;}
16 |         .test p{margin:0;font-size:30px;}
17 |         .fixed div{line-height:20px;}
18 |         .percentage div{line-height:130%;}
19 |         .gene div{line-height:1.5;}
20 |     </style>
21 | </head>
22 | <body>
23 | <h1>设置对象的行高。即字体最底端与字体内部顶端之间的距离- line-height</h1>
24 | <h2>取值说明</h2>
25 | <ul>
26 |     <li>normal：允许内容顶开或溢出指定的容器边界。</li>
27 |     <li>length：用长度直接指定行高</li>
28 |     <li>percentage：百分比指定行高</li>
29 |     <li>number：乘数因子指定行高</li>
30 | </ul>
31 | <h2>示例</h2>
32 | <ul class="test">
33 |     <li class="fixed">
34 |         <strong>固定数值方式：</strong> - {line-height:20px;}
35 |         <div><p>使用固定数值的方式定义line-height，如设置行高为18px类似这样的固定数值，可能会引发文字重叠的现象。</p></div>
36 |     </li>
37 |     <li class="percentage">
38 |         <strong>百分比方式：</strong> - {line-height:130%;}
39 |         <div>
40 |             如果是这种情况
41 |             <p>使用百分比的方式定义line-height，当小于100%时会引发文字重叠的现象。</p>
42 |         </div>
43 |     </li>
44 |     <li class="gene">
45 |         <strong>因子方式：</strong> - {line-height:1.5;}
46 |         <div>
47 |             如果是这种情况
48 |             <p>使用因子方式定义line-height,当小于1时会出现文字重叠现象。</p>
49 |         </div>
50 |     </li>
51 | </ul>
52 | <h2>注意事项</h2>
53 | <ul>
54 |     <li>该属性的所有单位的取值都不支持负值</li>
55 | </ul>
56 | </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/CSS/text/tab-size.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>制表符的长度</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         .tab-size-4{
17 |             tab-size: 4;
18 |         }
19 |     </style>
20 | </head>
21 | <body>
22 | <h1>设置制表符的长度- tab-size</h1>
23 | <h2>取值说明</h2>
24 | <ul>
25 |     <li>&lt;integer&gt;：用整数值表示制表符长度。</li>
26 |     <li>&lt;length&gt;：长度值表示制表符长度</li>
27 | </ul>
28 | <h2>注意事项</h2>
29 | <ul>
30 |     <li>该属性的默认值是8，而不是4.</li>
31 |     <li>只有当<a href="./white-space.html">white-space</a>属性设置为pre或pre-wrap时，该属性才生效，不然的话空格符都会被合并，也就看不出效果了。</li>
32 | </ul>
33 | <h2>示例</h2>
34 | <pre class="tab-size-4">
35 | 你站在桥上看风景，
36 | 	看风景的人在楼上看你。
37 | 明月装饰了你的窗子，
38 | 	你装饰了别人的梦。
39 | </pre>
40 | <h2>兼容性</h2>
41 | <p>兼容性不是很好，IE不兼容，高级浏览器的高级版本才兼容。</p>
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/CSS/text/text-align&text-align-last.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>文本对齐方式</title>
  6 |     <style>
  7 |         body {
  8 |             margin: 0 50px;
  9 |             font-family: "Times New Roman",Georgia,Serif;
 10 |             line-height: 25px;
 11 |         }
 12 |         a{
 13 |             text-decoration: none;
 14 |         }
 15 |         li ,p{ line-height: 30px; }
 16 |         .normal-start{
 17 |             text-align: start;
 18 |         }
 19 |         .normal-left{
 20 |             text-align: left;
 21 |         }
 22 |         .demo p{
 23 |             border: 1px solid #000;
 24 |         }
 25 |         .tb-rl-start {
 26 |             text-align: start;
 27 |             direction:rtl;
 28 |             unicode-bidi:bidi-override;
 29 |         }
 30 |         .tb-rl-left{
 31 |             text-align: left;
 32 |             direction:rtl;
 33 |             unicode-bidi:bidi-override;
 34 |         }
 35 |         .demo2 p{
 36 |             text-align: justify;
 37 |             -moz-text-align-last: justify;
 38 |             text-align-last: justify;
 39 |             width: 200px;
 40 |             border: 1px solid #000;
 41 |         }
 42 |         .demo3 p{
 43 |             text-align: justify;
 44 |             width: 200px;
 45 |             border: 1px solid #000;
 46 |             overflow: hidden;
 47 |             height: 32px;
 48 |         }
 49 |         .demo3 p:after{
 50 |             display:inline-block;
 51 |             overflow:hidden;
 52 |             width:100%;
 53 |             height:0;
 54 |             content:'';
 55 |         }
 56 |         .use{
 57 |             list-style: none;
 58 |             padding: 0;
 59 |         }
 60 |         .use label{
 61 |             width: 80px;
 62 |             display: inline-block;
 63 |             text-align: justify;
 64 |             -moz-text-align-last: justify;
 65 |             text-align-last: justify;
 66 |             margin-right: 10px;
 67 |             height: 30px;
 68 |             overflow:hidden;
 69 |             vertical-align: bottom;
 70 |         }
 71 |         .use label:after{
 72 |             display:inline-block;
 73 |             overflow:hidden;
 74 |             width:100%;
 75 |             height:0;
 76 |             content:'';
 77 |         }
 78 |         .use input {
 79 |             height: 30px;
 80 |             box-sizing: border-box;
 81 |             border-radius: 4px;
 82 |             border: 1px solid #ddd;
 83 |             outline: none;
 84 |         }
 85 | 
 86 |     </style>
 87 | </head>
 88 | <body>
 89 | <h1>设置文本对齐方式- text-align,text-align-last</h1>
 90 | <h2>取值说明</h2>
 91 | <ul>
 92 |     <li>left：文本居左。</li>
 93 |     <li>center：文本居中。</li>
 94 |     <li>right：文本居右。</li>
 95 |     <li>justify：两端对齐。</li>
 96 |     <li>start：对齐开始边界。</li>
 97 |     <li>end：对齐结束边界。</li>
 98 |     <li>match-parent：不支持。</li>
 99 |     <li>justify-all：不支持。</li>
100 | </ul>
101 | <h2>注意事项</h2>
102 | <ul>
103 |     <li>该属性只是适用于块级元素。</li>
104 |     <li>start和end属性是和文本的起始方向有关的，正常情况下，start和left表现一直，end和right表现一直，当文本方向和正常不一致时，两者表现才出现差异，参看示例一。</li>
105 |     <li>大部分浏览器要使得 text-align  的justify两端对齐生效，需要在汉字间插入有空白，如空格；</li>
106 |     <li>容器内最后一行文本（包括行内只有一行文本的情况，这时既是第一行，也是最后一行文本），单纯的使用justify无法实现两端对齐，需要配合text-align-last属性。</li>
107 | </ul>
108 | <h2>单行文本的两端对齐</h2>
109 | <p>由于所有主流浏览器都支持text-align的justify，但是大部分的浏览器不支持text-align-last属性，所以针对不同的浏览器需要采取不同的措施。</p>
110 | <p>1.当支持text-align-last的时候，使用text-align-last将文本对齐，参看示例二。</p>
111 | <p>2.当浏览器不支持text-align-last时，可以使用可以对非IE及IE7以上浏览器使用伪对象生成额外的内容（IE7及以下的使用）text-align-last，置于第二行并将其隐藏，这时第一行文本（即要对齐的那个单行文本）可使用text-align:justify来对齐。参看示例三。</p>
112 | <h2>示例一</h2>
113 | <div class="demo">
114 |     <p class="normal-start">正常情况下的start</p>
115 |     <p class="normal-left">正常情况下的left</p>
116 |     <p class="tb-rl-start">特殊文本方向情况下的start</p>
117 |     <p class="tb-rl-left">特殊文本方向情况下的left</p>
118 | </div>
119 | <h2>示例二</h2>
120 | <div class="demo2">
121 |     <p>我是 待对齐 文本</p>
122 | </div>
123 | <h2>示例三</h2>
124 | <div class="demo3">
125 |     <p>我也是 待对齐 文本</p>
126 | </div>
127 | <h2>应用场景:form表单的label文本两端对齐</h2>
128 | <ul class="use">
129 |     <li>
130 |         <label for="username">用 户 名</label>
131 |         <input type="text" id="username"/>
132 |     </li>
133 |     <li>
134 |         <label for="pwd">密 码</label>
135 |         <input type="password" id="pwd"/>
136 |     </li>
137 |     <li>
138 |         <label for="phone">联 系 电 话</label>
139 |         <input type="text" id="phone"/>
140 |     </li>
141 | </ul>
142 | </body>
143 | </html>
144 | 


--------------------------------------------------------------------------------
/CSS/text/text-indent.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>文本的缩进</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         .inline span,.block{
17 |             text-indent: 30px;
18 |         }
19 |     </style>
20 | </head>
21 | <body>
22 | <h1>设置文本的缩进- text-indent</h1>
23 | <h2>取值说明</h2>
24 | <ul>
25 |     <li>&lt;length&gt;：缩进长度值，可以为负</li>
26 |     <li>&lt;percent&gt;：缩进长度值百分比</li>
27 | </ul>
28 | <h2>注意事项</h2>
29 | <ul>
30 |     <li>该属性只有在元素是块级元素或者内联块级元素时才生效。</li>
31 | </ul>
32 | <h2>示例</h2>
33 | <p class="inline"><span>我是内敛元素，我设置30px缩进无效</span></p>
34 | <p class="block">我是块级元素，我的左边有30px的缩进</p>
35 | <h2>兼容性</h2>
36 | <p>所有浏览器均不兼容CSS3新特性hanging 和 each-line。</p>
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/CSS/text/text-transform.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>文本的大小写</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         .capitalize span{
17 |             text-transform: capitalize;
18 |         }
19 |         .uppercase span{
20 |             text-transform: uppercase;
21 |         }
22 |         .lowercase span{
23 |             text-transform: lowercase;
24 |         }
25 |         .full-width span{
26 |             text-transform: full-width;
27 |         }
28 |     </style>
29 | </head>
30 | <body>
31 | <h1>文本的大小写- text-transform</h1>
32 | <h2>取值说明</h2>
33 | <ul>
34 |     <li>none:无转换</li>
35 |     <li>capitalize:将每个单词的第一个字母转换成大写</li>
36 |     <li>uppercase:将每个单词转换成大写</li>
37 |     <li>lowercase:将每个单词转换成小写</li>
38 |     <li>full-width:将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号</li>
39 | </ul>
40 | <h2>示例</h2>
41 | 
42 |     <div>
43 |         <h3>无转换</h3>
44 |         <div>转换前:hello world!</div>
45 |         <div class="none">转换后: <span>hello world!</span> </div>
46 |     </div>
47 |     <div>
48 |         <h3>首字母大写</h3>
49 |         <div>转换前:hello world!</div>
50 |         <div class="capitalize">转换后: <span>hello world!</span> </div>
51 |     </div>
52 |     <div>
53 |         <h3>全部大写</h3>
54 |         <div>转换前:hello world!</div>
55 |         <div class="uppercase">转换后: <span>hello world!</span> </div>
56 |     </div>
57 |     <div>
58 |         <h3>全部小写</h3>
59 |         <div>转换前:hello world!</div>
60 |         <div class="lowercase">转换后: <span>hello world!</span> </div>
61 |     </div>
62 |     <div>
63 |         <h3>full-width(在Firefox中才能看到效果)</h3>
64 |         <div>转换前:hello world!</div>
65 |         <div class="full-width">转换后: <span>hello world!</span> </div>
66 |     </div>
67 | 
68 | <h2>兼容性</h2>
69 | <p>full-width只有Firefox兼容</p>
70 | <h2>需要注意的点</h2>
71 | <ul>
72 |     <li>
73 |         <a href="../font/font-variant.html">font-variant</a>属性也可以转换大小写，当font-variant设置未small-caps时可以将文本设置成小型的大写字母，样式展现并不一样。
74 |     </li>
75 | </ul>
76 | </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/CSS/text/vertical-align.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>垂直对齐</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         .test p{border:1px solid #000;font-size:16px;line-height:2;}
17 |         .test a{margin-left:5px;font-size:12px;}
18 |         .baseline a{vertical-align:baseline;}
19 |         .sub a{vertical-align:sub;}
20 |         .super a{vertical-align:super;}
21 |         .top a{vertical-align:top;}
22 |         .text-top a{vertical-align:text-top;}
23 |         .middle a{vertical-align:middle;}
24 |         .bottom a{vertical-align:bottom;}
25 |         .text-bottom a{vertical-align:text-bottom;}
26 |         .length a{vertical-align:10px;}
27 |     </style>
28 | </head>
29 | <body>
30 | <h1>设置文本的垂直对齐- vertical-align</h1>
31 | <h2>取值说明</h2>
32 | <ul>
33 |     <li>baseline：将支持valign特性的对象的内容与基线对齐</li>
34 |     <li>middle：将支持valign特性的对象的内容与对象中部对齐</li>
35 |     <li>bottom：将支持valign特性的对象的文本与对象底端对齐</li>
36 |     <li>......</li>
37 | </ul>
38 | <h2>注意事项</h2>
39 | <ul>
40 |     <li>该属性只有在元素是内联及 table-cell 元素时才生效。</li>
41 | </ul>
42 | <h2>示例</h2>
43 | <ul class="test">
44 |     <li class="baseline">
45 |         <strong>与基线对齐</strong>
46 |         <p>参考内容<a href="?">基线对齐</a></p>
47 |     </li>
48 |     <li class="sub">
49 |         <strong>与参考内容的下标对齐</strong>
50 |         <p>参考内容<a href="?">下标对齐</a></p>
51 |     </li>
52 |     <li class="super">
53 |         <strong>与参考内容的上标对齐</strong>
54 |         <p>参考内容<a href="?">上标对齐</a></p>
55 |     </li>
56 |     <li class="top">
57 |         <strong>对象的内容与对象顶端对齐</strong>
58 |         <p>参考内容<a href="?">要对齐的内容</a></p>
59 |     </li>
60 |     <li class="text-top">
61 |         <strong>对象的文本与对象顶端对齐</strong>
62 |         <p>参考内容<a href="?">要对齐的内容</a></p>
63 |     </li>
64 |     <li class="middle">
65 |         <strong>对象的内容与对象中部对齐</strong>
66 |         <p>参考内容<a href="?">要对齐的内容</a></p>
67 |     </li>
68 |     <li class="bottom">
69 |         <strong>对象的内容与对象底端对齐</strong>
70 |         <p>参考内容<a href="?">要对齐的内容</a></p>
71 |     </li>
72 |     <li class="text-bottom">
73 |         <strong>对象的文本与对象顶端对齐</strong>
74 |         <p>参考内容<a href="?">要对齐的内容</a></p>
75 |     </li>
76 |     <li class="length">
77 |         <strong>与基线算起的偏移量</strong>
78 |         <p>参考内容<a href="?">偏移量对齐</a></p>
79 |     </li>
80 | </ul>
81 | <h2>扩展</h2>
82 | <p>vertical-align只是文本的垂直对齐，而且只适用于内联元素，这里列举了一些块垂直居中的方式，<a href="./block-vertical-center.html">传送门</a></p>
83 | </body>
84 | </html>
85 | 


--------------------------------------------------------------------------------
/CSS/text/white-space.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>文本空格的处理方式</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>元素里文本空格的处理方式- white-space</h1>
20 | <h2>取值说明</h2>
21 | <ul>
22 |     <li>normal：默认处理方式。</li>
23 |     <li>pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象</li>
24 |     <li>nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。</li>
25 |     <li>pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。</li>
26 |     <li>pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。</li>
27 | </ul>
28 | <table border="1">
29 |     <tr>
30 |         <th>取值</th>
31 |         <th>换行符</th>
32 |         <th>空格和制表符</th>
33 |         <th>文字转行</th>
34 |     </tr>
35 |     <tr><td>normal</td><td>合并</td><td>合并</td><td>转行</td></tr>
36 |     <tr><td>nowrap</td><td>合并</td><td>合并</td><td>不转行</td></tr>
37 |     <tr><td>pre</td><td>保留</td><td>保留</td><td>不转行</td></tr>
38 |     <tr><td>pre-wrap</td><td>保留</td><td>保留</td><td>转行</td></tr>
39 |     <tr><td>pre-line</td><td>保留</td><td>合并</td><td>转行</td></tr>
40 | </table>
41 | <h2>兼容性</h2>
42 | <p>除pre-wrap和pre-line比较特殊之外，其他属性均兼容多浏览器，pre-wrap和pre-line个别旧浏览器不兼容。</p>
43 | </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/CSS/text/word-break&word-wrap&overflow-wrap.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>文本的字内换行行为</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>元素内文本的字内换行行为- word-break,word-wrap,overflow-wrap</h1>
20 | <p>
21 |     这三个属性都是定义元素内文本换行行为（内容超出容器边界是否断行）。
22 | </p>
23 | <h2>取值说明</h2>
24 | <h3>word-break</h3>
25 | <ul>
26 |     <li>normal：默认处理方式，允许（亚洲文本）在字内换行，英文不会换行。</li>
27 |     <li>keep-all：对于中日韩文字不允许断开，该值大部分浏览器不支持</li>
28 |     <li>break-all：允许所有的文本呢断开，包括亚洲文本。</li>
29 | </ul>
30 | <h3>word-wrap,overflow-wrap</h3>
31 | <ul>
32 |     <li>normal：默认处理方式，允许文本超出容器边界。</li>
33 |     <li>break-word：内容将在边界内换行。如果需要，单词内部允许断行。</li>
34 | </ul>
35 | <h2>注意事项</h2>
36 | word-break主要用于亚洲语言的折断换行，而word-wrap和overflow-wrap主要用户非亚洲语言的折断换行，而且在CSS3中将 word-wrap改名为overflow-wrap，所以在需要文本超出容器折断换行的话，需要同时写三个属性，即:
37 | <pre>
38 |     word-break:break-all;
39 |     word-wrap:break-word;
40 |     overflow-wrap:break-word;/*为了保证向前兼容*/
41 | </pre>
42 | <p>这样才能保证最大的兼容性。</p>
43 | </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/CSS/text/word-spacing&letter-spacing.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>单词以及字母之间的间距</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         .demo1 .w-s-10{
17 |             word-spacing: 20px;
18 |         }
19 |         .l-s-10{
20 |             letter-spacing: 20px;
21 |         }
22 |     </style>
23 | </head>
24 | <body>
25 | <h1>单词以及字母之间的间距- word-spacing,letter-spacing</h1>
26 | <h2>取值说明</h2>
27 | <ul>
28 |     <li>&lt;length&gt;：长度值。</li>
29 |     <li>&lt;percent&gt;：百分比值，不支持。</li>
30 | </ul>
31 | <h2>注意事项</h2>
32 | <ul>
33 |     <li>word-spacing判断是否为单词的依据是单词间是否有空格。</li>
34 | </ul>
35 | <h2>示例一:word-spacing</h2>
36 | <div class="demo1">
37 |     <p>我是正常文本间距</p>
38 |     <p class="w-s-10">我 的 文 本 间 距 是 20px</p>
39 | </div>
40 | <h2>示例二:letter-spacing</h2>
41 | <div class="demo2">
42 |     <p>Normal Hello World</p>
43 |     <p class="l-s-10">Hello World</p>
44 | </div>
45 | <h2>兼容性</h2>
46 | <p>所有浏览器都不支持百分比属性值。</p>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/CSS/textDecoration/text-decoration.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>文本装饰属性</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>文本装饰属性- text-decoration</h1>
20 | <h2>语法</h2>
21 | <ul>
22 |     <li>text-decoration：<'  text-decoration-line '> || <'  text-decoration-style '> || <'  text-decoration-color '> </li>
23 | </ul>
24 | <h2>说明</h2>
25 | <ul>
26 |     <li>text-decoration-line:指定文本装饰种类，可取值none,underline,overline,line-through,blink</li>
27 |     <li>text-decoration-style:指定文本装饰样式，可取值solid,double,dotted,dashed,wavy</li>
28 |     <li>text-decoration-color:指定文本装饰线条的颜色</li>
29 | </ul>
30 | <h2>注意事项</h2>
31 | <p>1.大部分浏览器都不支持text-decoration-line的blink值。</p>
32 | <p>2.text-decoration-style的取值dotted和dashed取值在除FF的浏览器中要么实现不了，要么表现为实线。</p>
33 | <h2>兼容性</h2>
34 | <p>FireFox对text-decoration属性支持的比较好，其他浏览器欠佳。</p>
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/CSS/textDecoration/text-shadow.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>文本的文字是否有阴影及模糊效果</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         .demo {
17 |             font: bold 100px/1.5 arial,sans-serif;
18 |             text-shadow: 0 0 5px #fff,0 0 20px #fefcc9,10px -10px 30px #feec85,-20px -20px 40px #ffae34,20px -40px 50px #ec760c,-20px -60px 60px #cd4606,0 -80px 70px #973716,10px -90px 80px #451b0e;
19 |         }
20 |     </style>
21 | </head>
22 | <body>
23 | <h1>文本的文字是否有阴影及模糊效果- text-shadow</h1>
24 | <h2>取值</h2>
25 | <ul>
26 |     <li>none:无阴影</li>
27 |     <li>length①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值</li>
28 |     <li>length②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值</li>
29 |     <li>length③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值</li>
30 |     <li>color:阴影颜色值</li>
31 | </ul>
32 | <h2>说明</h2>
33 | <ul>
34 |     <li>参考 <a href="http://css.doyoe.com/properties/border/box-shadow.htm">box-shadow</a> 属性</li>
35 | </ul>
36 | <h2>示例</h2>
37 | <div class="demo">
38 |     <p>火焰文字</p>
39 | </div>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/CSS/writingModes/direction&unicode-bidi.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>文本流的方向</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |         .demo p{
17 |             width: 600px;
18 |             border:1px solid #000;
19 |         }
20 |         .ltr{
21 |             direction:ltr;
22 |         }
23 |         .rtl{
24 |             direction:rtl;
25 |             unicode-bidi:bidi-override;
26 |         }
27 |     </style>
28 | </head>
29 | <body>
30 | <h1>设置文本流的方向- direction&unicode-bidi</h1>
31 | <h2>direction取值</h2>
32 | <ul>
33 |     <li>ltr:文本流从左到右</li>
34 |     <li>rtl:文本流从右到左</li>
35 | </ul>
36 | <h2>unicode-bidi取值</h2>
37 | <ul>
38 |     <li>normal:默认值</li>
39 |     <li>embed:对象打开附加的嵌入层，<' direction '> 属性的值指定嵌入层，在对象内部进行隐式重排序（没看懂-_-!）</li>
40 |     <li>bidi-override:严格按照 <' direction '> 属性的值重排序。忽略隐式双向运算规则（没看懂+1）</li>
41 | </ul>
42 | <h2>说明</h2>
43 | <ul>
44 |     <li>当unicode-bidi的取值为normal时，direction设置为rtl无效</li>
45 | </ul>
46 | <h2>示例</h2>
47 | <div class="demo">
48 |     <p class="ltr">本段文字将按照从左到右的方向进行流动。</p>
49 |     <p class="rtl">本段文字将按照从右到左的方向进行流动。</p>
50 | </div>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/CSS/writingModes/writing-mode.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>文本流的方向</title>
 6 |     <style>
 7 |         body {
 8 |             margin: 0 50px;
 9 |             font-family: "Times New Roman",Georgia,Serif;
10 |             line-height: 25px;
11 |         }
12 |         a{
13 |             text-decoration: none;
14 |         }
15 |         li ,p{ line-height: 30px; }
16 |     </style>
17 | </head>
18 | <body>
19 | <h1>设置对象的内容块固有的书写方向- writing-mode</h1>
20 | <h2>取值</h2>
21 | <ul>
22 |     <li>horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）</li>
23 |     <li>vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）</li>
24 |     <li>vertical-lr：垂直方向自左而右的书写方式。即 top-bottom-left-right</li>
25 |     <li>lr-tb：左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）</li>
26 |     <li>tb-rl：上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的（IE）</li>
27 | </ul>
28 | <h2>说明</h2>
29 | <ul>
30 |     <li>西方语言一般都是 lr-tb 的书写方式，但是亚洲语言 lr-tb | tb-rl 的书写方式都有。</li>
31 |     <li>不关注排版的页面用途不大...不做详细介绍</li>
32 | </ul>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/HTML/doctype.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <title>&lt;!DOCTYPE&gt;标签简介</title>
 6 |         <style>
 7 |             body { margin: 0 50px; }
 8 |             li { line-height: 30px; }
 9 |             li>p { margin: 0; }
10 |         </style>
11 |     </head>
12 |     <body>
13 |         <h1>&lt;!DOCTYPE&gt;标签简介</h1>
14 |         <p>&lt;!DOCTYPE&gt;不是HTML标签，它是一项声明，告诉浏览器目前所处的文档是什么类型的文档，从而让浏览器能够正常的显示网页。</p>
15 |         <p>因为HTML 4.0基于SGML，所以在HTML 4.01中引用了DTD，DTD的作用是规定标记语言的规则；而HTML 5不是基于SGML的，所以不需要引用DTD。</p>
16 |         <h3>常见声明</h3>
17 |         <ul>
18 |             <li>
19 |                 HTML 5<br/>
20 |                 <!-- <!DOCTYPE html> -->
21 |                 <span>&lt;!DOCTYPE html&gt;</span>
22 |             </li>
23 |             <li>
24 |                 <span>HTML 4.01 Strict</span>
25 |                 <p>包含所有HTML元素和属性，但不包括展示性和启用的元素如font等，也不允许框架集(Framesets)。</p>
26 |                 <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
27 |                 <span>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;</span>
28 |             </li>
29 |             <li>
30 |                 <span>HTML 4.01 Transitional</span>
31 |                 <p>包含所有HTML元素和属性，也包括展示性和启用的元素如font等，但不允许框架集(Framesets)。</p>
32 |                 <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -->
33 |                 <span>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;</span>
34 |             </li>
35 |             <li>
36 |                 <span>HTML 4.01 Frameset</span>
37 |                 <p>包含所有HTML元素和属性，也包括展示性和启用的元素如font等，并允许框架集(Framesets)。</p>
38 |                 <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> -->
39 |                 <span>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;</span>
40 |             </li>
41 |             <li>
42 |                 <span>XHTML 1.0 Strict</span>
43 |                 <p>同HTML 4.01 Strict，但必须以格式正确的XML编写标记。</p>
44 |                 <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -->
45 |                 <span>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</span>
46 |             </li>
47 |             <li>
48 |                 <span>XHTML 1.0 Transitional</span>
49 |                 <p>同HTML 4.01 Transitional，但必须以格式正确的XML编写标记。</p>
50 |                 <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
51 |                 <span>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</span>
52 |             </li>
53 |             <li>
54 |                 <span>XHTML 1.0 Frameset</span>
55 |                 <p>同HTML 4.01 Frameset，但必须以格式正确的XML编写标记。</p>
56 |                 <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> -->
57 |                 <span>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;</span>
58 |             </li>
59 |             <li>
60 |                 <span>XHTML 1.1</span>
61 |                 <p>同XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。</p>
62 |                 <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> -->
63 |                 <span>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;</span>
64 |             </li>
65 |         </ul>
66 |     </body>
67 | </html>


--------------------------------------------------------------------------------
/HTML/form/form.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>The form element</title>
 6 |     <style>
 7 |         li{  line-height: 30px;  }
 8 |     </style>
 9 | </head>
10 | <body>
11 | <h1>form元素属性列表</h1>
12 | <ul>
13 |     <li>action；规定当提交表单时向何处发送表单数据；其值是一个url</li>
14 |     <li>method；规定用于发送表单数据的HTTP方法；其值为GET或POST</li>
15 |     <li>
16 |         target；规定在什么地方打开action中的url；其值如下：
17 |         <ol>
18 |             <li>_blank ，在新窗口打开</li>
19 |             <li>_self，在本身的页面中打开，默认值</li>
20 |             <li>_parent，在父框架集中打开</li>
21 |             <li>_top，在整个窗口中打开</li>
22 |             <li>framename，该值为一个指定的frame的名称，url将在这个指定的frame中打开</li>
23 |         </ol>
24 |     </li>
25 |     <li>accept-charset；规定服务器用哪种字符集处理表单数据，其值为服务器可处理的一个或多个字符集，多个字符集用逗号隔开；常用值有utf-8、gb2312等</li>
26 |     <li>
27 |         enctype；规定在发送到服务器之前应该如何对表单数据进行编码；其值如下：
28 |         <ol>
29 |             <li>application/x-www-form-urlencoded，在发送前编码所有字符，默认值</li>
30 |             <li>multipart/form-data，不对字符编码，在使用包含文件上传控件的表单时必须使用该值</li>
31 |             <li>text/plain，空格转换为 "+" 加号，但不对特殊字符编码</li>
32 |         </ol>
33 |     </li>
34 |     <li>autocomplete；是否启用表单的自动完成功能，其值为on或off，不是布尔值</li>
35 |     <li>novalidate；使用该属性则表示提交表单时不进行验证</li>
36 |     <li>name；表单的名称，其值为字符串</li>
37 | </ul>
38 | <h3>示例：</h3>
39 | <ul>
40 |     <li>
41 |         form表单示例：<br/>
42 |         action="/url", method="GET", target="_blank", accept-charset="UTF-8"<br/>
43 |         enctype="application/x-www-form-urlencoded", autocomplete="off", novalidate, name="formname"<br/>
44 |         <form action="/url"
45 |               method="GET"
46 |               target="_blank"
47 |               accept-charset="UTF-8"
48 |               enctype="application/x-www-form-urlencoded"
49 |               autocomplete="off"
50 |               novalidate
51 |               name="formname" >
52 |             <label for="input">我是输入框：</label>
53 |             <input type="text" id="input" />
54 |             <input type="submit" value="提交" />
55 |         </form>
56 |     </li>
57 | </ul>
58 | 
59 | </body>
60 | </html>


--------------------------------------------------------------------------------
/HTML/form/input.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <title>The input Element</title>
  6 |         <style>
  7 |             li{ line-height: 30px; }
  8 |         </style>
  9 |     </head>
 10 |     <body>
 11 |         <h1>input元素属性列表</h1>
 12 |         <ul>
 13 |             <li>
 14 |                 type；input元素的类型；其值如下(未提及部分不被大多数浏览器支持的属性值)：
 15 |                 <ol>
 16 |                     <li>text，单行的输入字段，默认宽度为20个字符</li>
 17 |                     <li>password，密码字段</li>
 18 |                     <li>button，可点击按钮</li>
 19 |                     <li>checkbox，复选框</li>
 20 |                     <li>radio，单选按钮</li>
 21 |                     <li>file，文件类型</li>
 22 |                     <li>image，图像形式的提交按钮</li>
 23 |                     <li>hidden，隐藏的输入字段</li>
 24 |                     <li>reset，重置按钮，清除表单中的所有数据</li>
 25 |                     <li>submit，提交按钮，把表单中的数据提交到服务器</li>
 26 |                     <li>color，拾色器，其返回值为十六进制颜色的字符串</li>
 27 |                     <li>date，日期选择器，其返回值是形式为yyyy-mm-dd的字符串</li>
 28 |                     <li>email，邮箱格式的输入字段，提交时会自动验证</li>
 29 |                     <li>month，月份选择器，其返回值是形式为yyyy-mm的字符串</li>
 30 |                     <li>number，数字格式的输入字段，无法输入数字以外的字段，可以通过min和max属性设置数字范围，提交时会自动验证是否在该数字范围内</li>
 31 |                     <li>range，滑动条，其返回值为0到100之间的整数</li>
 32 |                     <li>search，搜索字段，表现和常规的文本域一样</li>
 33 |                     <li>tel，电话号码格式的输入字段，目前只在Safari 8 中被支持</li>
 34 |                     <li>time，时间选择器</li>
 35 |                     <li>url，url格式的输入字段，提交时会自动验证</li>
 36 |                     <li>week，周选择器，其返回值是形式为yyyy-Wdd(dd是第几周，如是2015年的第12周，则为2015-W12)</li>
 37 |                 </ol>
 38 |             </li>
 39 |             <li>name，input元素的名称</li>
 40 |             <li>value，input元素的值，value与类型为file的input元素不能搭配使用</li>
 41 |             <li>disabled，是否禁用input元素，其值就是disabled</li>
 42 |             <li>autocomplete，是否使用输入字段的自动完成功能，其值为on或者off</li>
 43 |             <li>autofocus，规定页面加载时input元素是否自动获取焦点，其值就是autofocus</li>
 44 |             <li>list，引用数据列表，其中包含输入字段的预定义选项，其值为文档中datalist的id</li>
 45 |             <li>checked，页面加载时input元素是否被选中，与类型为checkbox或radio的input元素搭配使用，其值就是checked</li>
 46 |             <li>readonly，规定输入字段只读，其值就是readonly，与类型为text或password的input元素搭配使用</li>
 47 |             <li>required，规定在提交表单前必须填写该字段，其值就是required</li>
 48 |             <li>size，输入字段的宽度</li>
 49 |             <li>placeholder，帮助用户填写输入字段的提示，与类型为text、search、url、telephone、email以及password的input元素搭配使用</li>
 50 |             <li>pattern，规定用于验证输入字段的正则表达式，与类型为text、search、url、telephone、email以及password的input元素搭配使用</li>
 51 |             <li>max，输入字段所允许的最大值，与类型为number、range、date、month、time以及week的input元素搭配使用</li>
 52 |             <li>min，输入字段所允许的最小值，与类型为number、range、date、month、time以及week的input元素搭配使用</li>
 53 |             <li>step，输入字段的合法数字间隔，与类型为number、range、date、month、time以及week的input元素搭配使用</li>
 54 |             <li>maxlength，输入字段的最大长度(以字符数来计算)，与类型为text或password的input元素搭配使用</li>
 55 |             <li>multiple，规定输入字段可选择多个值，其值就是multiple，与类型为email和file的input元素搭配使用</li>
 56 |             <li>src，引用图像的url，与type="image"搭配使用</li>
 57 |             <li>alt；与type="image"搭配使用，定义图像的替代文本</li>
 58 |             <li>width，input元素的宽度，其值为像素值或者百分比，与type="image"搭配使用</li>
 59 |             <li>height，input元素的高度，其值为像素值或者百分比，与type="image"搭配使用</li>
 60 |             <li>form，input元素所属的一个或多个表单，其值为表单的id，多个表单之间用空格隔开，</li>
 61 |             <li>formaction，覆盖表单的action属性，适用于类型为submit或image的input元素</li>
 62 |             <li>formtarget，覆盖表单的target属性，适用于类型为submit或image的input元素</li>
 63 |             <li>formmethod，覆盖表单的method属性，适用于类型为submit或image的input元素</li>
 64 |             <li>formenctype，覆盖表单的enctype属性，适用于类型为submit或image的input元素</li>
 65 |             <li>formnovalidate，覆盖表单的novalidate属性，适用于类型为submit或image的input元素</li>
 66 |         </ul>
 67 |         <h3>示例：</h3>
 68 |         <ul>
 69 |             <li>
 70 |                 <label for="example1">type='text', name='example1', value='我是text', disabled  : </label>
 71 |                 <input type="text" id="example1" name="example1" value="我是text" disabled/>
 72 |             </li>
 73 |             <li>
 74 |                 <label for="example2">type='password', autocomplete='on', maxlength='5', autofocus, required  : </label>
 75 |                 <input type="password" id="example2" value="12345" autocomplete="on" maxlength="5" autofocus required />
 76 |             </li>
 77 |             <li>
 78 |                 <label for="example3">type='number', list='data_list', placeholder='请输入数字', step='3'  : </label>
 79 |                 <input type="number" id="example3" list="data_list" placeholder="请输入数字" step="3" />
 80 |                 <datalist id="data_list">
 81 |                     <option>3</option>
 82 |                     <option>6</option>
 83 |                     <option>9</option>
 84 |                 </datalist>
 85 |             </li>
 86 |             <li>
 87 |                 <label for="example4">type='range', min='10', max='50'  : </label>
 88 |                 <input type="range" id="example4" min="10" max="50"/>
 89 |             </li>
 90 |             <li>
 91 |                 <label for="example5">type='checkbox', checked  : </label>
 92 |                 <input type="checkbox" id="example5" checked/>
 93 |             </li>
 94 |             <li>
 95 |                 <label for="example6">type='file', multiple  : </label>
 96 |                 <input type="file" id="example6" multiple/>
 97 |             </li>
 98 |             <li>
 99 |                 <label for="example7">type='image', src='image.jpg', alt='图片未加载', width='20px', height='20px'  : </label>
100 |                 <input type="image" id="example7" src="image.jpg" alt="图片未加载" width="40px" height="40px"/>
101 |             </li>
102 |         </ul>
103 |     </body>
104 | </html>
105 | 


--------------------------------------------------------------------------------
/HTML/form/others.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <title>The other Elements</title>
  6 |         <style>
  7 |             li { line-height: 30px; }
  8 |         </style>
  9 |     </head>
 10 |     <body>
 11 |         <h1>form元素中的其它元素简介</h1>
 12 |         <ul>
 13 |             <li>fieldset标签；将表单内的相关元素进行分组，当一组表单元素被放在fieldset标签内时，浏览器会以特殊的方式来显示它们；</li>
 14 |             <li>legend标签；为fieldset标签定义标题</li>
 15 |             <li>label标签；为input元素定义标注，其上有一个属性for可以将label与对应的input元素绑定在一起，其属性值为元素id，不是元素的name</li>
 16 |             <li>
 17 |                 textarea标签；多行文本输入控件，其上的属性如下：
 18 |                 <ol>
 19 |                     <li>autofocus，页面加载后是否自动获取焦点</li>
 20 |                     <li>cols，文本区的可见宽度，以字符数计算</li>
 21 |                     <li>rows，文本区的可见行数</li>
 22 |                     <li>disabled，是否禁用此文本区</li>
 23 |                     <li>form，文本区所属的一个或多个表单</li>
 24 |                     <li>maxlength，文本区的最大字符数</li>
 25 |                     <li>name，文本区的名称</li>
 26 |                     <li>placeholder，帮助用户填写输入字段的提示</li>
 27 |                     <li>readonly，规定文本区只读</li>
 28 |                     <li>required，规定文本区必填</li>
 29 |                     <li>
 30 |                         wrap，规定表单提交时，文本区的内容如何换行，其值如下：
 31 |                         <ul>
 32 |                             <li>soft，提交表单时文本区的内容不换行，默认值</li>
 33 |                             <li>hard，提交表单时文本区的内容换行，会包含换行符，此时必须指定cols属性</li>
 34 |                         </ul>
 35 |                     </li>
 36 |                 </ol>
 37 |             </li>
 38 |             <li>
 39 |                 select标签；单选或多选菜单，其上的属性如下：
 40 |                 <ol>
 41 |                     <li>autofocus，页面加载后是否自动获取焦点</li>
 42 |                     <li>disabled，是否禁用下拉列表</li>
 43 |                     <li>form，下拉列表所属的一个或多个表单</li>
 44 |                     <li>multiple，规定下拉列表可选择多个选项</li>
 45 |                     <li>name，下拉列表的名称</li>
 46 |                     <li>required，必填</li>
 47 |                     <li>size，下拉列表里可见的选项数目</li>
 48 |                 </ol>
 49 |             </li>
 50 |             <li>
 51 |                 option标签；定义下拉列表中的一个选项，其上的属性如下：
 52 |                 <ol>
 53 |                     <li>disabled，禁用该选项</li>
 54 |                     <li>label，定义选项所使用的标注</li>
 55 |                     <li>selected，规定该选项在首次加载下拉列表时被选中</li>
 56 |                     <li>value，定义该选项送往服务器的值</li>
 57 |                 </ol>
 58 |             </li>
 59 |             <li>optgroup标签；用于组合选项，其上必须要有label属性用来为选项组规定描述，可选属性为disabled</li>
 60 |             <li>button标签；可点击按钮</li>
 61 |             <li>datalist标签；定义合法的输入值选项列表，配合input元素使用，该选项列表不会被显示出来</li>
 62 |             <li>keygen标签；规定用于表单的密钥对生成器字段</li>
 63 |         </ul>
 64 |         <h3>示例：</h3>
 65 |         <ul>
 66 |             <li>
 67 |                 fieldset、legend、label标签示例：
 68 |                 <form action="/url" method="get">
 69 |                     <fieldset>
 70 |                         <legend>信息</legend>
 71 |                         <label for="username">用户名：</label>
 72 |                         <input type="text" id="username"/><br/>
 73 |                         <label for="pwd">密码：</label>
 74 |                         <input type="password" id="pwd"/>
 75 |                     </fieldset>
 76 |                 </form>
 77 |             </li>
 78 |             <li>
 79 |                 textarea标签示例：<br/>
 80 |                 <textarea cols="10" rows="5" maxlength="50" placeholder="输入信息"></textarea>
 81 |             </li>
 82 |             <li>
 83 |                 select标签、optgroup标签、option标签示例：<br/>
 84 |                 <select multiple="2">
 85 |                     <optgroup label="水果">
 86 |                         <option value="苹果">苹果11111111111</option>
 87 |                         <option value="水蜜桃">水蜜桃</option>
 88 |                     </optgroup>
 89 |                     <optgroup label="手机">
 90 |                         <option value="三星" selected>三星</option>
 91 |                         <option value="apple">apple</option>
 92 |                     </optgroup>
 93 |                 </select>
 94 |             </li>
 95 |             <li>
 96 |                 datalist标签示例：<br/>
 97 |                 <input type="text" list="data_list"/>
 98 |                 <datalist id="data_list">
 99 |                     <option value="fruit">水果</option>
100 |                     <option value="phone">手机</option>
101 |                     <option value="vegetable">蔬菜</option>
102 |                 </datalist>
103 |             </li>
104 |             <li>
105 |                 button标签示例：<br/>
106 |                 <form action="/url" method="get">
107 |                     <input type="text" placeholder="请输入用户名"/><br/>
108 |                     <input type="password" placeholder="请输入密码"/><br/>
109 |                     <button type="submit">提交</button>&nbsp;
110 |                     <button type="reset">重置</button>&nbsp;
111 |                     <button type="button">普通按钮</button>
112 |                 </form>
113 |             </li>
114 |         </ul>
115 |     </body>
116 | </html>
117 | 


--------------------------------------------------------------------------------
/HTML/head/head.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <title>The head Element</title>
  6 |         <style>
  7 |             body { 
  8 |                 margin: 0 50px;
  9 |                 font-family: "Times New Roman",Georgia,Serif;
 10 |             }
 11 |             p, li { line-height: 30px; }
 12 |         </style>
 13 |     </head>
 14 |     <body>
 15 |         <h1>&lt;head&gt;标签简介</h1>
 16 |         <p>
 17 |             head标签用于描述文档的头部，它是所有文档头部元素的容器。<br/>
 18 |             在head部分可以使用&lt;base&gt;, &lt;link&gt;, &lt;meta&gt;, &lt;script&gt;, &lt;style&gt;以及&lt;title&gt;标签。<br/>
 19 |             在head标签上支持profile属性和html的全局属性，profile属性的值是一个由空格分隔的url列表，这些url包含着有关页面的元数据信息，profile属性主要是为将来的开发保留的占位符。
 20 |         </p>
 21 |         <h3>可以用在head中的标签</h3>
 22 |         <ul>
 23 |             <li>
 24 |                 base；该标签为页面上的所有链接规定默认地址或默认目标，其上的属性如下：
 25 |                 <ol>
 26 |                     <li>href，该属性为base上必需的属性，规定页面中所有相对链接的基准URL。</li>
 27 |                     <li>target，规定在何处打开页面中所有的链接，其值有_blank, _parent, _self, _top, framename。</li>
 28 |                 </ol>
 29 |             </li>
 30 |             <li>
 31 |                 link；该标签定义文档与外部资源的关系，最常见的用途是链接样式表。其上的属性如下：
 32 |                 <ol>
 33 |                     <li>href，被链接文件的位置。</li>
 34 |                     <li>hreflang，规定被链接文档中文本的语言。</li>
 35 |                     <li>
 36 |                         media，规定被链接文档将显示在什么设备上，该属性用于为不同的媒介类型规定不同的样式。<br/>
 37 |                         其属性值有screen、tty、tv、projection、handheld、print、braille、aural、all。
 38 |                     </li>
 39 |                     <li>
 40 |                         rel，规定当前文档与被链接文档间的关系，它的属性值很多，但只有stylesheet得到了所有浏览器支持。<br/>
 41 |                         其上的属性值有alternate、stylesheet、start、next、prev、contents、index、glossary、copyright、chapter、section、subsection、appendix、help、bookmark。<br>
 42 |                         其中有一个比较重要的属性值是prefetch。Link prefetching 是利用浏览器最佳的时间去下载或者预加载一些用户可能将会在不久将来浏览的文档的一种浏览器机制。
 43 |                     </li>
 44 |                     <li>
 45 |                         sizes，规定被链接资源的尺寸，只有当rel="icon"时，才能使用该属性。<br/>
 46 |                         其实属性值有heightxwidth（如16x16）或any，该属性可以接受多个值，值之间用空格分隔。
 47 |                     </li>
 48 |                     <li>type，规定被链接文档的 MIME 类型。</li>
 49 |                 </ol>
 50 |             </li>
 51 |             <li>meta；可提供有关页面的元信息。</li>
 52 |             <li>
 53 |                 script；用于定义客户端脚本，如JavaScript。<br/>
 54 |                 script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。其上的属性如下：
 55 |                 <ol>
 56 |                     <li>
 57 |                         type，指示脚本的 MIME 类型。该属性是必需的。<br/>
 58 |                         其中一些值为text/javascript、text/ecmascript、application/ecmascript、application/javascript、text/vbscript等。
 59 |                     </li>
 60 |                     <li>async，规定异步执行脚本（仅适用于外部脚本）。</li>
 61 |                     <li>charset，规定在外部脚本文件中使用的字符编码。</li>
 62 |                     <li>defer，规定是否对脚本执行进行延迟，直到页面加载为止。</li>
 63 |                     <li>src，外部脚本文件的位置。</li>
 64 |                     <li>xml:space，规定是否保留代码中的空白，其值是preserve。</li>
 65 |                 </ol>
 66 |             </li>
 67 |             <li>
 68 |                 style；用于为 HTML 文档定义样式信息。其上的属性如下：
 69 |                 <ol>
 70 |                     <li>type，规定样式表的 MIME 类型，目前唯一可能的值是text/css。</li>
 71 |                     <li>media，为样式表规定不同的媒介类型。</li>
 72 |                 </ol>
 73 |             </li>
 74 |             <li>
 75 |                 title；该元素定义文档的标题。<br/>
 76 |                 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。<br/>
 77 |                 该标签是head中唯一被要求包含的东西。其上的属性如下：
 78 |                 <ol>
 79 |                     <li>dir，规定元素中内容的文本方向。</li>
 80 |                     <li>lang，规定元素中内容的语言代码。</li>
 81 |                     <li>xml:lang，规定 XHTML 文档中元素内容的语言代码。</li>
 82 |                 </ol>
 83 |             </li>
 84 |         </ul>
 85 |         <h3>示例：</h3>
 86 |         <ul>
 87 |             <li>
 88 |                 head标签<br/>
 89 |                 &lt;head&gt;<br/>
 90 |                     &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="UTF-8"&gt;<br/>
 91 |                     &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;The head Element&lt;/title&gt;<br/>
 92 |                 &lt;/head&gt;<br/>
 93 |             </li>
 94 |             <li>
 95 |                 base标签
 96 |                 <ol>
 97 |                     <li>&lt;base href="http://www.w3school.com.cn/i/" /&gt;</li>
 98 |                     <li>&lt;base target="_blank" /&gt;</li>
 99 |                 </ol>
100 | 
101 |             </li>
102 |             <li>
103 |                 link标签<br/>
104 |                 &lt;link rel="stylesheet" type="text/css" href="theme.css" /&gt;
105 |             </li>
106 |             <li>
107 |                 link预加载<br>
108 |                 &lt;link rel="prefetch" href="http://www.meituan.com" /&gt;<br>
109 |                 &lt;link rel="prefetch" href="image.png" /&gt;
110 |             </li>
111 |             <li>
112 |                 meta标签<br/>
113 |                 &lt;meta charset="UTF-8"&gt;
114 |             </li>
115 |             <li>
116 |                 script标签
117 |                 <ol>
118 |                     <li>
119 |                         外部脚本文件<br/>
120 |                         &lt;script src="code.js"&gt;&lt;script /&gt;
121 |                     </li>
122 |                     <li>
123 |                         包含脚本语句<br/>
124 |                         &lt;script&gt;
125 |                             console.log('Hello world!');
126 |                         &lt;script /&gt;
127 |                     </li>
128 |                 </ol>
129 |             </li>
130 |             <li>
131 |                 style标签<br/>
132 |                 &lt;style type="text/css"&gt;
133 |                 body { margin: 0; }
134 |                 &lt;style /&gt;
135 |             </li>
136 |             <li>
137 |                 title标签<br/>
138 |                 &lt;title&gt;我是标题&lt;title /&gt;
139 |             </li>
140 |         </ul>
141 |     </body>
142 | </html>


--------------------------------------------------------------------------------
/HTML/head/meta.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <title>The meta Element</title>
 6 |         <style>
 7 |             body { margin: 0 50px; }
 8 |             p, li { line-height: 30px; }
 9 |         </style>
10 |     </head>
11 |     <body>
12 |         <h1>&lt;meta&gt;标签简介</h1>
13 |         <p>
14 |             meta元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
15 |             meta标签位于文档的头部，不包含任何内容。&lt;meta&gt;标签的属性定义了与文档相关联的名称/值对。
16 |         </p>
17 |         <h3>meta标签上的属性</h3>
18 |         <ul>
19 |             <li>
20 |                 content，提供了名称/值对中的值，该值可以是任何有效的字符串。<br/>
21 |                 该属性始终要和 name 属性或 http-equiv 属性一起使用。
22 |             </li>
23 |             <li>
24 |                 http-equiv，该属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。<br/>
25 |                 其上的属性值通常有content-type、expires、refresh、set-cookie。
26 |             </li>
27 |             <li>
28 |                 name，该属性提供了名称/值对中的名称。<br/>
29 |                 通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。<br/>
30 |                 "keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。<br/>
31 |                 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。<br/>
32 |                 其上的属性值通常有author、description、keywords、generator、revised、others。
33 |             </li>
34 |             <li>scheme，该属性用于指定要用来翻译属性值的方案。此方案应该在由head标签的 profile 属性指定的概况文件中进行了定义。</li>
35 |             <li>charset，规定文档使用的字符编码。</li>
36 |         </ul>
37 |         <h3>示例：</h3>
38 |         <ul>
39 |             <li>&lt;meta name="keywords" content="HTML,ASP,PHP,SQL"&gt;</li>
40 |             <li>&lt;meta http-equiv="charset" content="iso-8859-1"&gt;</li>
41 |             <li>&lt;meta charset="UTF-8"&gt;</li>
42 |         </ul>
43 |     </body>
44 | </html>


--------------------------------------------------------------------------------
/HTML/html.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <title>The html Element</title>
 6 |         <style>
 7 |             body { margin: 0 50px; }
 8 |             div, li{ line-height: 30px; }
 9 |             div { border: 1px solid gray;
10 |                 padding: 10px; }
11 |         </style>
12 |     </head>
13 |     <body>
14 |         <h1>&lt;html&gt;标签简介</h1>
15 |         <p>html元素的作用是告诉浏览器其本身是一个html文档。</p>
16 |         <p>&lt;html&gt;与&lt;/html&gt;标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。</p>
17 |         <h3>&lt;html&gt;标签上的属性如下：</h3>
18 |         <ul>
19 |             <li>manifest；定义一个 URL，这个url是文档的缓存 manifest 的位置</li>
20 |             <li>
21 |                 xmlns；定义 XML namespace 属性。<br/>
22 |                 xmlns 属性在 XHTML 中是必需的，但在 HTML 中不是。<br/>
23 |                 不过，即使 XHTML 文档中的&lt;html&gt;没有使用此属性，W3C 的验证器也不会报错。这是因为 "xmlns=http://www.w3.org/1999/xhtml" 是一个固定值，即使您没有包含它，此值也会被添加到&lt;html&gt;标签中。
24 |             </li>
25 |             <li>html的全局属性也可以在&lt;html&gt;标签上使用。</li>
26 |         </ul>
27 |         <h3>html的全局属性如下（忽略部分被大多数浏览器不支持的属性）：</h3>
28 |         <ul>
29 |             <li>
30 |                 accesskey，规定激活元素的快捷键。<br/>
31 |                 支持accesskey属性的元素有a, area, button, input, label, legend以及textarea。
32 |             </li>
33 |             <li>class，元素的一个或多个类名，多个类之间用空格隔开。</li>
34 |             <li>contenteditable，规定元素内容是否可编辑，其值为true或false。</li>
35 |             <li>
36 |                 contentmenu，规定元素的上下文菜单。上下文菜单在用户点击元素时显示。<br/>
37 |                 与&lt;menu&gt;标签搭配使用，contentmenu的值就是menu元素的id。
38 |             </li>
39 |             <li>
40 |                 data-*，用于存储页面或应用程序的私有自定义数据，其值为任意字符串。
41 |             </li>
42 |             <li>
43 |                 dir，规定元素内容的文本方向，其值为ltr（从左向右）或rtl（从右向左）。<br/>
44 |                 dir在元素base, br, frame, frameset, hr, iframe, param以及script中无效。
45 |             </li>
46 |             <li>
47 |                 draggable，规定元素是否可拖动。<br/>
48 |                 其值为true、false或auto，值为auto时会使用浏览器的默认行为。
49 |             </li>
50 |             <li>hidden，规定元素仍未或不再相关。该属性为布尔属性，如果元素设置了该属性，则浏览器不会显示该元素。</li>
51 |             <li>id，元素的唯一id。</li>
52 |             <li>
53 |                 lang，规定元素内容的语言。<br/>
54 |                 lang属性在元素base, br, frame, frameset, hr, iframe, param以及script中无效。
55 |             </li>
56 |             <li>
57 |                 spellcheck，规定是否对元素进行拼写和语法检查，其值为true或false。<br/>
58 |                 可以对input元素中的输入内容（非密码），textarea元素中的文本和可编辑元素的内容进行检查。
59 |             </li>
60 |             <li>style，规定元素的行内CSS样式。</li>
61 |             <li>tabindex，规定元素的tab键次序。</li>
62 |             <li>title，规定关于元素的额外信息，这个额外信息通常是tooltip的内容。</li>
63 |         </ul>
64 |         <h3>html标签示例：</h3>
65 |         <div>
66 |         &lt;!DOCTYPE html&gt;<br/>
67 |         &lt;html lang="en"&gt;<br/>
68 |             &nbsp;&nbsp;&lt;head&gt;<br/>
69 |             &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="UTF-8"&gt;<br/>
70 |             &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;&lt;/title&gt;<br/>
71 |             &nbsp;&nbsp;&lt;/head&gt;<br/>
72 |             &nbsp;&nbsp;&lt;body&gt;<br/>
73 |             &nbsp;&nbsp;&lt;/body&gt;<br/>
74 |         &lt;/html&gt;<br/>
75 |         </div>
76 |     </body>
77 | </html>


--------------------------------------------------------------------------------
/HTML/iframe.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="utf-8" />
 5 |         <title>The Iframe element</title>
 6 |         <style>
 7 |             li{  line-height: 30px;  }
 8 |              body {
 9 |                 margin: 0 50px;
10 |                 font-family: "Times New Roman",Georgia,Serif;
11 |             }
12 |             li ,p{ line-height: 30px; }
13 |         </style>
14 |     </head>
15 |     <body>
16 |         <h1>iframe元素</h1>
17 |         <ul>
18 |             <li>src: 文件的路径，既可是HTML文件，也可以是文本、ASP等</li>
19 |             <li>width、height:”内部框架“区域的宽和高</li>
20 |             <li>
21 |                 scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项
22 |                 <ol>
23 |                     <li>如果为 NO，则不出现滚动条；</li>
24 |                     <li>如果为Yes，则显示;</li>
25 |                     <li> 如果为 Auto：则自动出现滚动条</li>
26 |                 </ol>
27 |             </li>
28 |             <li>FrameBorder:设置或获取是否显示框架的边框。(1，0 或 no，yes)</li>
29 |             <li>name:框架的名字</li>
30 |             <li>
31 |                 align:规定如何根据周围元素对齐框架
32 |                 <span class="tips">建议用样式代替</span>
33 |             </li>
34 |             <li>
35 |                 marginheight:规定 iframe 的顶部和底部的空白边距，以像素计。
36 |             </li>
37 |             <li>
38 |                 marginwidth:规定 iframe 的左侧和右侧的空白边距，以像素计。
39 |             </li>
40 |             <li>
41 |                 sandbox:sandbox 属性将会启用一系列对行内框架中内容的额外限制。其值如下：
42 |                 <ol>
43 |                     <li>"":应用以下所有的限制。</li>
44 |                     <li>allow-same-origin:允许 iframe 内容被视为与包含文档有相同的来源。</li>
45 |                     <li>allow-top-navigation:允许 iframe 内容从包含文档导航（加载）内容。</li>
46 |                     <li>allow-forms:允许表单提交。</li>
47 |                     <li>allow-scripts:允许脚本执行。</li>
48 |                 </ol>
49 |             </li>
50 |             <li>autocomplete；是否启用表单的自动完成功能，其值为on或off，不是布尔值</li>
51 |             <li>novalidate；使用该属性则表示提交表单时不进行验证</li>
52 |             <li>name；表单的名称，其值为字符串</li>
53 |         </ul>
54 |         <h3>示例：</h3>
55 |         <ul>
56 |             <li>
57 |                 iframe示例：内嵌百度<br/>
58 |                 src="http://www.baidu.com" width="500" height="500" scrolling="no" frameborder="0" name="main"<br/>
59 |                 <Iframe id="test" src="http://www.baidu.com" width="500" height="500" scrolling="no" frameborder="0" name="main"></iframe>
60 |             </li>
61 | 
62 |              <li>
63 |                 获取子iframe中DOM节点：(必须是同域)<br/>
64 |                  <pre>
65 |      function ShowExit() {
66 |      //获取iframe的window对象
67 |         var topWin = window.top.document.getElementById("frame").contentWindow;
68 |         //通过获取到的window对象操作HTML元素，这和普通页面一样
69 |         title = topWin.document.title;
70 |         console.log(title);
71 |      }
72 |                  </pre>
73 |                  <h3 style="color:red" id="title2"></h3>
74 |                <Iframe onload="run()"id="frame" src="video.html" width="500" height="500" scrolling="no" frameborder="0" name="main"></iframe>
75 |             </li>
76 | 
77 |         </ul>
78 | 
79 | 
80 |     </body>
81 |     <script>
82 |         function run() {
83 |             //获取iframe的window对象
84 |             var topWin = window.top.document.getElementById("frame").contentWindow;
85 |             //通过获取到的window对象操作HTML元素，这和普通页面一样
86 |             title = topWin.document.title;
87 |             if (title) document.getElementById("title2").innerHTML = "子iframe中的title为：" + title;
88 |         }
89 |     </script>
90 | </html>


--------------------------------------------------------------------------------
/HTML/layout.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <title>布局标签简介</title>
  6 |         <style>
  7 |             body {
  8 |                 margin: 0 50px;
  9 |                 font-family: "Times New Roman",Georgia,Serif;
 10 |             }
 11 |             li ,p{ line-height: 30px; }
 12 |             .layout-img{
 13 |                 float: right;
 14 |             }
 15 |         </style>
 16 |     </head>
 17 |     <body>
 18 |         <h1>布局标签简介</h1>
 19 |         <h3>布局类标签</h3>
 20 |         <img class="layout-img" src="http://www.w3schools.com/html/img_sem_elements.gif" alt="HTML5 layout" title="HTML5 页面布局结构图"/>
 21 |         <ul>
 22 |             <li>
 23 |                 标签：&lt;header&gt;<br/>
 24 |                 涵义：定义文档的页眉（介绍信息），主要是语义化方面的应用<br/>
 25 |                 示例：<header>Hello World</header>
 26 |             </li>
 27 |             <li>
 28 |                 标签：&lt;nav&gt;<br/>
 29 |                 涵义：定义导航链接的部分。<br/>
 30 |                 示例：<nav><a href="#back">后退</a>|<a href="#">首页</a>|<a href="#about">关于</a></nav>
 31 |                 注：如果文档中有“前后”按钮，则应该把它放到 &lt;nav&gt; 元素中。
 32 |             </li>
 33 |             <li>
 34 |                 标签：&lt;body&gt;<br/>
 35 |                 涵义：页面主体标签，不做介绍<br/>
 36 |             </li>
 37 |             <li>
 38 |                 标签：&lt;article&gt;<br/>
 39 |                 涵义：规定独立的自包含内容,一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发，如论坛帖子、报纸文章、博客条目、用户评论等<br/>
 40 |                 示例：<article>The HTML Article Element (&lt;article&gt;) represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). This could be a forum post, a magazine or newspaper article, a blog entry, an object, or any other independent item of content. Each &lt;article&gt; should be identified, typically by including a heading (h1-h6 element) as a child of the &lt;article&gt; element.</article>
 41 |             </li>
 42 |             <li>
 43 |                 标签：&lt;section&gt;<br/>
 44 |                 涵义：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分<br/>
 45 |                 示例：<section>
 46 |                         <h1>PRC</h1>
 47 |                         <p>The People's Republic of China was born in 1949...</p>
 48 |                     </section>
 49 |             </li>
 50 |             <li>
 51 |                 标签：&lt;h1&gt;---&lt;h6&gt;<br/>
 52 |                 涵义：各种标题<br/>
 53 |             </li>
 54 |             <li>
 55 |                 标签：&lt;hgroup&gt;<br/>
 56 |                 涵义：定义一组标题文本【实验性的技术】<br/>
 57 |                 示例：<hgroup>
 58 |                         <h1>Main title</h1>
 59 |                         <h2>Secondary title</h2>
 60 |                     </hgroup>
 61 |             </li>
 62 |             <li>
 63 |                 标签：&lt;address&gt;<br/>
 64 |                 涵义：作者使用，用来标示自己的联系信息<br/>
 65 |                 示例：<address>You can contact me at <a href="www.meituan.com">meituan</a><br/>MEITUAN.com <br/>CN</address>
 66 |             </li>
 67 |             <li>
 68 |                 标签：&lt;aside&gt;<br/>
 69 |                 涵义：定义其所处内容之外的内容,&lt;aside&gt;的内容应该与附近的内容相关<br/>
 70 |                 示例：<p>Me and my family visited The Epcot center this summer.</p>
 71 |                     <aside>
 72 |                         <h4>Epcot Center</h4>
 73 |                         The Epcot Center is a theme park in Disney World, Florida.
 74 |                     </aside>
 75 |             </li>
 76 |             <li>
 77 |                 标签：&lt;footer&gt;<br/>
 78 |                 涵义：定义文档或节的页脚,页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等，同一文档可多次使用&lt;footer&gt;<br/>
 79 |                 示例：<footer>
 80 |                         <p>Posted by: W3School</p>
 81 |                         <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
 82 |                     </footer>
 83 |             </li>
 84 |         </ul>
 85 |         <h3>列表类标签</h3>
 86 |         <ul>
 87 |             <li>
 88 |                 标签：&lt;ul&gt;<br/>
 89 |                 涵义：定义一组无序列表,每一个&lt;li&gt;都是一个列表项<br/>
 90 |                 示例：基础技术要求 <ul>
 91 |                         <li>JavaScript</li>
 92 |                         <li>CSS</li>
 93 |                         <li>HTML</li>
 94 |                     </ul>
 95 |             </li>
 96 |             <li>
 97 |                 标签：&lt;ol&gt;<br/>
 98 |                 涵义：定义一组有序列表,每一个&lt;li&gt;都是一个列表项<br/>
 99 |                 示例：RD三件套<ol>
100 |                         <li>人体工学椅</li>
101 |                         <li>MacBook Pro</li>
102 |                         <li>大屏显示器</li>
103 |                     </ol>
104 |             </li>
105 |             <li>
106 |                 标签：&lt;li&gt;<br/>
107 |                 涵义：定义列表项目<br/>
108 |                 示例：同上
109 |             </li>
110 |             <li>
111 |                 标签：&lt;dl&gt;<br/>
112 |                 涵义：定义了定义列表,常和&lt;dd&gt;&lt;dt&gt;搭配使用<br/>
113 |                 示例：
114 |                     <dl>
115 |                         <dt>计算机</dt>
116 |                         <dd>用来计算的仪器 ... ...</dd>
117 |                         <dt>显示器</dt>
118 |                         <dd>以视觉方式显示信息的装置 ... ...</dd>
119 |                     </dl>
120 |             </li>
121 |             <li>
122 |                 标签：&lt;dt&gt;<br/>
123 |                 涵义：定义了定义列表中的项目（即术语部分）<br/>
124 |                 示例：同上
125 |             </li>
126 |             <li>
127 |                 标签：&lt;dd&gt;<br/>
128 |                 涵义：定义列表中定义条目的定义部分<br/>
129 |                 示例：同上
130 |             </li>
131 |         </ul>
132 |     </body>
133 | </html>
134 | 


--------------------------------------------------------------------------------
/HTML/special.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <title>特殊标签简介</title>
  6 |         <style>
  7 |             body {
  8 |                 margin: 0 50px;
  9 |                 font-family: "Times New Roman",Georgia,Serif;
 10 |             }
 11 |             li ,p{ line-height: 30px; }
 12 |         </style>
 13 |     </head>
 14 |     <body>
 15 |         <h1>特殊标签简介</h1>
 16 |         <ul>
 17 |             <li>
 18 |                 标签：&lt;command&gt;<br/>
 19 |                 涵义：指定一个用户可以调用的命令【已废弃】<br/>
 20 |                 示例：Try This :<command>Hello</command>
 21 |             </li>
 22 |             <li>
 23 |                 标签：&lt;menu&gt;<br/>
 24 |                 涵义：代表一组用户可以操作或者激活的命令。【试验阶段，浏览器基本都不支持】<br/>
 25 |             </li>
 26 |             <li>
 27 |                 标签：&lt;progress&gt;<br/>
 28 |                 涵义：显示一个进度条<br/>
 29 |                 示例：<progress value="70" max="100">70 %</progress> <br/>
 30 |                 属性：
 31 |                 <ul>
 32 |                     <li>
 33 |                         value：当前值
 34 |                     </li>
 35 |                     <li>
 36 |                         max：最大值
 37 |                     </li>
 38 |                 </ul>
 39 |             </li>
 40 |             <li>
 41 |                 标签：&lt;meter&gt;<br/>
 42 |                 涵义：定义已知范围或分数值内的标量测量<br/>
 43 |                 示例：<meter min="200" low="300" max="500" value="350">350 degrees</meter> <br/>
 44 |                 属性：
 45 |                 <ul>
 46 |                     <li>
 47 |                         value：当前值
 48 |                     </li>
 49 |                     <li>
 50 |                         max：最大值
 51 |                     </li>
 52 |                     <li>
 53 |                         min：最小值
 54 |                     </li>
 55 |                     <li>
 56 |                         low：规定被视作低的值的范围
 57 |                     </li>
 58 |                     <li>
 59 |                         high：规定被视作高的值的范围
 60 |                     </li>
 61 |                     <li>
 62 |                         optimum：规定度量的优化值
 63 |                     </li>
 64 |                     <li>
 65 |                         form：规定 &lt;meter&gt;元素所属的一个或多个表单
 66 |                     </li>
 67 |                 </ul>
 68 |             </li>
 69 |             <li>
 70 |                 标签：&lt;spacer&gt;<br/>
 71 |                 涵义：用来在网页中插入空格【已废弃】<br/>
 72 |             </li>
 73 |             <li>
 74 |                 标签：&lt;track&gt;<br/>
 75 |                 涵义：HTML &lt;track&gt; 元素 被当作媒体元素—&lt;audio&gt; 和 &lt;video&gt;的子元素来使用。它允许指定计时字幕（或者基于事件的数据），例如自动处理字幕。<br/>
 76 |             </li>
 77 |             <li>
 78 |                 标签：&lt;figure&gt;<br/>
 79 |                 涵义：设置独立的流内容（图像、图表、照片、代码等等）, 经常与标题 标签&lt;figcaption&gt;配合使用<br/>
 80 |                 示例：<figure>
 81 |                         <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
 82 |                     </figure>
 83 |                     <figure>
 84 |                         <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
 85 |                         <figcaption>Fig1. MDN Logo</figcaption>
 86 |                     </figure>
 87 |             </li>
 88 |             <li>
 89 |                 标签：&lt;figcaption&gt;<br/>
 90 |                 涵义：标签定义 &lt;figure&gt; 元素的标题,应该被置于 &lt;figure&gt; 元素的第一个或最后一个子元素的位置。<br/>
 91 |                 示例：同上
 92 |             </li>
 93 |             <li>
 94 |                 标签：&lt;map&gt;<br/>
 95 |                 涵义：定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像<br/>
 96 |                 示例：
 97 |                 <img src="http://www.w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
 98 |                     <map name="planetmap" id="planetmap">
 99 |                         <area
100 |                                 shape="circle"
101 |                                 coords="180,139,14"
102 |                                 href ="http://www.w3school.com.cn/example/html/venus.html"
103 |                                 target ="_blank"
104 |                                 alt="Venus" />
105 | 
106 |                         <area
107 |                                 shape="circle"
108 |                                 coords="129,161,10"
109 |                                 href ="http://www.w3school.com.cn/example/html/mercur.html"
110 |                                 target ="_blank"
111 |                                 alt="Mercury" />
112 | 
113 |                         <area
114 |                                 shape="rect"
115 |                                 coords="0,0,110,260"
116 |                                 href ="http://www.w3school.com.cn/example/html/sun.html"
117 |                                 target ="_blank"
118 |                                 alt="Sun" />
119 | 
120 |                     </map>
121 |             </li>
122 |             <li>
123 |                 标签：&lt;area&gt;<br/>
124 |                 涵义：定义图像映射中的区域,永远嵌套在 &lt;map&gt; 元素内部（注：图像映射指得是带有可点击区域的图像）。<br/>
125 |                 示例：同上 <br/>
126 |                 属性：
127 |                 <ul>
128 |                     <li>
129 |                         coords：定义可点击区域（对鼠标敏感的区域）的坐标【逗号分隔的四个数字】
130 |                     </li>
131 |                     <li>
132 |                         href：定义此区域的目标 URL
133 |                     </li>
134 |                     <li>
135 |                         nohref：从图像映射排除某个区域【nohref】
136 |                     </li>
137 |                     <li>
138 |                         shape：定义区域的形状【default/rect/circ/poly】
139 |                     </li>
140 |                     <li>
141 |                         target：规定在何处打开 href 属性指定的目标 URL【_blank/_parent/_self/_top】
142 |                     </li>
143 |                 </ul>
144 |             </li>
145 |         </ul>
146 |     </body>
147 | </html>
148 | 


--------------------------------------------------------------------------------
/HTML/svg/svg.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 	<head>
  4 | 		<meta charset="UTF-8" />
  5 | 		<title>SVG简介</title>
  6 | 		<style type="text/css">
  7 | 			body {
  8 | 				margin: 0 30px;
  9 | 				font-family: "Times New Roman",Georgia,Serif;
 10 | 			}
 11 | 			.code {
 12 | 				border: 1px solid lightgray;
 13 | 				padding: 0 20px;
 14 | 				line-height: 20px;
 15 | 			}
 16 | 		</style>
 17 | 	</head> 
 18 | 	<body>
 19 | 		<h1>SVG简介</h1>
 20 | 		<p>SVG意为可缩放矢量图形，全称为Scalable Vector Graphics。</p>
 21 | 		<p>SVG是使用 XML 来描述二维图形和绘图程序的语言。</p>
 22 | 		<h3>SVG的使用形式</h3>
 23 | 		<ul>
 24 | 			<li>
 25 | 				<h4>SVG文件</h4>
 26 | 				<p>SVG文件必须以.svg为后缀来保存，具体示例如下：</p>
 27 | 				<div id='svgFile' class='code'>
 28 | 					<pre>
 29 | &lt;?xml version="1.0" standalone="no"?>
 30 | &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 31 | &lt;svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">
 32 |     &lt;circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
 33 | &lt;/svg>
 34 | 					</pre>
 35 | 				</div>
 36 | 				<p>第一行包含了 XML 声明。该属性规定此SVG文件是否是“独立的”，或含有对外部文件的引用。第二和第三行引用了这个外部的 SVG DTD。</p>
 37 | 			</li>
 38 | 			<li>
 39 | 				<h4>嵌在HTML中的SVG</h4>
 40 | 				<p>SVG可通过多种方式嵌入到HTML中，方式如下：</p>
 41 | 				<ol>
 42 | 					<li>
 43 | 						<p>通过embed的src属性来嵌入SVG。</p>
 44 | 						<p>&lt;embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /></p>
 45 | 					</li>
 46 | 					<li>
 47 | 						<p>通过object的data属性来嵌入SVG。</p>
 48 | 						<p>&lt;object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" /></p>
 49 | 					</li>
 50 | 					<li>
 51 | 						<p>通过iframe标签嵌入SVG。</p>
 52 | 						<p>&lt;iframe src="rect.svg" width="300" height="100">&lt;/iframe></p>
 53 | 					</li>	
 54 | 					<li>
 55 | 						<p>通过img标签的src属性嵌入SVG。</p>
 56 | 						<p>&lt;img src="../image.svg"  width="300" /></p>
 57 | 					</li>
 58 | 					<li>
 59 | 						<p>通过元素的background-image属性嵌入SVG。</p>
 60 | 						<p>div { background-image: url('../image.svg'); }</p>
 61 | 					</li>
 62 | 					<li>
 63 | 						<p>直接通过在svg标签嵌入到HTML中。</p>
 64 | 						<div class='code'>
 65 | 							<pre>
 66 | &lt;div>
 67 |     &lt;svg width='100px' height='100px'>
 68 |         &lt;circle cx='10' cy='10' r='5'>&lt;/circle>
 69 |     &lt;/svg>
 70 | &lt;/div>
 71 | 							</pre>
 72 | 						</div>
 73 | 					</li>
 74 | 				</ol>	
 75 | 			</li>
 76 | 		</ul>
 77 | 		<h3>SVG中的全局属性</h3>
 78 | 		<p>有一些属性在SVG内的元素上是基本通用的，它们是：</p>
 79 | 		<ul>
 80 | 			<li>stroke属性，定义形状的描边。</li>
 81 | 			<li>stroke-width属性，定义描边的宽度。</li>
 82 | 			<li>opacity属性，定义形状的透明度。</li>
 83 | 			<li>fill属性，定义形状的填充色。</li>
 84 | 			<li>fill-opacity属性，定义形状填充色的透明度。</li>
 85 | 			<li>transform属性，定义svg图形或者坐标的变换。</li>
 86 | 		</ul>
 87 | 		<p>在SVG中，值可以带单位也不可以不带。一个不带单位的值可以在用户空间中通过用户单位声明。如果值通过用户单位声明，那么这个值的数值被认为和px单位的数值一样。</p>
 88 | 		<h3>SVG的兼容性</h3>
 89 | 		<p>目前除了IE在9之前（不包括9）不支持SVG以外，各大浏览器基本都对SVG进行了支持，详情可参见<a href='http://caniuse.com/#search=svg' target='_blank'>Caniuse</a>。</p>
 90 | 		<h3>参考资料</h3>
 91 | 		<ul>
 92 | 			<li>
 93 | 				<a href="http://www.w3school.com.cn/svg/index.asp" target="_blank">SVG教程(w3school)</a>
 94 | 			</li>
 95 | 			<li>
 96 | 				<a href="http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html" target="_blank">SVG简介与嵌入HTML页面的方式</a>
 97 | 			</li>
 98 | 		</ul>
 99 | 	</body>
100 | </html>


--------------------------------------------------------------------------------
/HTML/svg/svg_others.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 	<head>
  4 | 		<meta charset='UTF-8'>
  5 | 		<title>SVG元素</title>
  6 | 		<style type="text/css">
  7 | 			body {
  8 | 				margin: 0 30px;
  9 | 				font-family: "Times New Roman",Georgia,Serif;
 10 | 			}
 11 | 			li {
 12 | 				padding: 5px 0;
 13 | 			}
 14 | 			.example {
 15 | 				border: 1px solid lightgray;
 16 | 			}
 17 | 			.code {
 18 | 				
 19 | 				padding: 0 20px;
 20 | 				border-bottom: 1px solid lightgray;
 21 | 			}
 22 | 		</style>
 23 | 	</head>
 24 | 	<body>
 25 | 		<h1>SVG除形状和结构外的常用元素</h1>
 26 | 		<ul>
 27 | 			<li>
 28 | 				<h4>text元素</h4>
 29 | 				<p>text元素用来创建文字，其上的属性如下：</p>
 30 | 				<ol>
 31 | 					<li>x属性和y属性，每个字的位置，值可以是一个数字也可以是一个数字序列，如果值为一个数字则为第一个字的位置，后面的字紧随其后。</li>
 32 | 					<li>dx属性和dy属性，字的相对位置，x、y 是基於原本的位置去做改變，而 dx、dy 則是基於前一個字的位置去做變化。</li>
 33 | 					<li>rotate属性，字的旋转角度，值可以为一个数字或者一个数字序列。</li>
 34 | 					<li>textLength，设定这段文字的长度，与lengthAdjust搭配使用。</li>
 35 | 					<li>lengthAdjust，设定对这段文字长度的调整，值为spacing（拉宽文字间距）或者spacingAndGlyphs（拉宽文字）。</li>
 36 | 				</ol>
 37 | 				<p>示例及其代码如下：</p>
 38 | 				<div class='example'>
 39 | 					<div class='code'>
 40 | 						<pre>
 41 | &lt;svg>
 42 |     &lt;text x='50,100,150,200,250' y='50' rotate='90' fill='red' >我是文字！&lt;/text>
 43 |     &lt;text x='50' y='100' textLength='200' lengthAdjust='spacingAndGlyphs' fill='blue' >我是文字！&lt;/text>
 44 | &lt;/svg>
 45 | 						</pre>
 46 | 					</div>
 47 | 					<div class='shape'>
 48 | 						<svg>
 49 | 							<text x='50,100,150,200,250' y='50' rotate='90' fill='red' >我是文字！</text>
 50 | 							<text x='50' y='100' textLength='200' lengthAdjust='spacingAndGlyphs' fill='blue' >我是文字！</text>
 51 | 						</svg>
 52 | 					</div>
 53 | 				</div>
 54 | 			</li>
 55 | 			<li>
 56 | 				<h4>linearGradient元素</h4>
 57 | 				<p>该元素嵌套在defs元素中用来定义线性渐变。其上有x1、y1、x2和y2属性，用来形成一条直线，渐变就沿这条直线来变化。示例如下：</p>
 58 | 				<div class='example'>
 59 | 					<div class='code'>
 60 | 						<pre>
 61 | &lt;svg height='100'>
 62 |     &lt;defs>
 63 |         &lt;linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 64 |             &lt;stop offset="0%" stop-color='rgb(255,255,0)'stop-opacity='0.5' />
 65 |             &lt;stop offset="100%" stop-color='rgb(255,0,0)'stop-opacity='1' />
 66 |         &lt;/linearGradient>
 67 |     &lt;/defs>
 68 |     &lt;rect x="50" y="50" width="85" height="35" fill="url(#grad1)" />
 69 | &lt;/svg>
 70 | 						</pre>
 71 | 					</div>
 72 | 					<div class='shape'>
 73 | 						<svg height='100'>
 74 | 							<defs>
 75 | 							    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 76 | 							      <stop offset="0%" stop-color='rgb(255,255,0)'stop-opacity='0.5' />
 77 | 							      <stop offset="100%" stop-color='rgb(255,0,0)'stop-opacity='1' />
 78 | 							    </linearGradient>
 79 | 							</defs>
 80 | 							<rect x="50" y="50" width="85" height="35" fill="url(#grad1)" />
 81 | 						</svg>
 82 | 					</div>
 83 | 				</div>
 84 | 			</li>
 85 | 			<li>
 86 | 				<h4>radialGradient元素</h4>
 87 | 				<p>该元素嵌套在defs元素中用来定义放射性渐变，其上的属性如下：</p>
 88 | 				<ol>
 89 | 					<li>cx属性和cy属性定义渐变的外圈的圆心，r属性定义外圈的半径。</li>
 90 | 					<li>fx属性和fy属性定义渐变焦点的位置。</li>
 91 | 				</ol>
 92 | 				<p>放射性渐变是从焦点沿各个方向向外圈进行渐变。示例如下：</p>
 93 | 				<div class='example'>
 94 | 					<div class='code'>
 95 | 						<pre>
 96 | &lt;svg>
 97 |     &lt;defs>
 98 |         &lt;radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
 99 |             &lt;stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
100 |             &lt;stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
101 |         &lt;/radialGradient>
102 |     &lt;/defs>
103 |     &lt;ellipse cx="120" cy="70" rx="85" ry="55" fill="url(#grad2)" />
104 | &lt;/svg>
105 | 						</pre>
106 | 					</div>
107 | 					<div class='shape'>
108 | 						<svg>
109 | 							<defs>
110 | 							    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
111 | 							      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
112 | 							      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
113 | 							    </radialGradient>
114 | 							</defs>
115 | 							<ellipse cx="120" cy="70" rx="85" ry="55" fill="url(#grad2)" />
116 | 						</svg>
117 | 					</div>
118 | 				</div>
119 | 			</li>
120 | 			<li>
121 | 				<h4>stop标签</h4>
122 | 				<p>该标签嵌套在linearGradient或radialGradient元素中，用来指定渐变应该在什么位置形成什么颜色。其上的属性有：</p>
123 | 				<ol>
124 | 					<li>offset属性，定义偏移位置，它必须从0%到1%（或者从0到1）。</li>
125 | 					<li>stop-color属性，定义颜色状态。</li>
126 | 					<li>stop-opacity属性，定义透明度状态。</li>
127 | 				</ol>
128 | 			</li>
129 | 			<li>
130 | 				<h4>a元素</h4>
131 | 				<p>该元素可以用于在svg图形中创建链接，注意这里链接的属性变成了xlink:href。示例如下：</p>
132 | 				<div class='example'>
133 | 					<div class='code'>
134 | 						<pre>
135 | &lt;svg height='100'>
136 |     &lt;a xlink:href='http://www.meituan.com' target='_blank'>
137 |         &lt;rect x='20' y='20' width='100' height='30' fill='blue' />
138 |     &lt;/a>
139 | &lt;/svg>
140 | 						</pre>
141 | 					</div>
142 | 					<div class='shape'>
143 | 						<svg height='100'>
144 | 							<a xlink:href='http://www.meituan.com' target='_blank'>
145 | 								<rect x='20' y='20' width='100' height='30' fill='blue' />
146 | 							</a>
147 | 						</svg>
148 | 					</div>
149 | 				</div>
150 | 			</li>
151 | 			<li>
152 | 				<h4>image元素</h4>
153 | 				<p>该元素用于在你的SVG图像中嵌入普通的位图。</p>
154 | 			</li>
155 | 		</ul>
156 | 		<h3>参考资料</h3>
157 | 		<ul>
158 | 			<li>
159 | 				<a href="http://www.oxxostudio.tw/articles/201406/svg-08-text.html" target="_blank">SVG 研究之路 (8) - text 文字</a>
160 | 			</li>
161 | 			<li>
162 | 				<a href="http://www.runoob.com/svg/svg-grad-linear.html" target="_blank">SVG 渐变 - 线性</a>
163 | 			</li>
164 | 			<li>
165 | 				<a href="http://www.runoob.com/svg/svg-grad-radial.html" target="_blank">SVG 渐变- 放射性</a>
166 | 			</li>
167 | 		</ul>
168 | 	</body>
169 | </html>


--------------------------------------------------------------------------------
/HTML/svg/svg_shape.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 	<head>
  4 | 		<meta charset='UTF-8'>
  5 | 		<title>SVG形状相关元素</title>
  6 | 		<style type="text/css">
  7 | 			body {
  8 | 				margin: 0 30px;
  9 | 				font-family: "Times New Roman",Georgia,Serif;
 10 | 			}
 11 | 			li {
 12 | 				padding: 5px 0;
 13 | 			}
 14 | 			.example {
 15 | 				border: 1px solid lightgray;
 16 | 			}
 17 | 			.code {
 18 | 				padding: 0 20px;
 19 | 				border-bottom: 1px solid lightgray;
 20 | 			}
 21 | 		</style>
 22 | 	</head>
 23 | 	<body>
 24 | 		<h1>SVG形状相关元素</h1>
 25 | 		<ul>
 26 | 			<li>
 27 | 				<h4>矩形&lt;rect></h4>
 28 | 				<p>rect元素用于创建矩形和矩形的变种。其上的属性如下：</p>
 29 | 				<ol>
 30 | 					<li>x属性和y属性，定义矩形的左侧位置和顶端位置，它们一起定义了矩形的左上角。</li>
 31 | 					<li>width属性，定义矩形的宽，以左上角点沿x正轴延伸的距离。</li>
 32 | 					<li>height属性，定义矩形的高，以左上角点向y正轴延伸的距离。</li>
 33 | 					<li>rx属性和ry属性，定义矩形圆角的尺寸。</li>
 34 | 				</ol>
 35 | 				<p>示例及代码如下：</p>
 36 | 				<div class='example'>
 37 | 					<div class='code'>
 38 | 						<pre>
 39 | &lt;svg>
 40 |     &lt;rect x='100' y='20' rx='10' ry='10' width='100' height='100' style='stroke: black; stroke-width: 1px;' />
 41 | &lt;/svg>
 42 | 						</pre>
 43 | 					</div>
 44 | 					<div class='shape'>
 45 | 						<svg height='100'>
 46 | 							<rect x='100' y='20' rx='10' ry='10' width='100' height='50' />
 47 | 						</svg>
 48 | 					</div>
 49 | 				</div>	
 50 | 			</li>
 51 | 			<li>
 52 | 				<h4>圆形&lt;circle></h4>
 53 | 				<p>circle元素用于创建一个圆。其上的属性如下：</p>
 54 | 				<ol>
 55 | 					<li>cx属性和cy属性，分别定义圆心的x坐标和y坐标，如果没有设置，则为默认的(0, 0)。</li>
 56 | 					<li>r属性，定义圆的半径。</li>
 57 | 				</ol>
 58 | 				<p>示例及代码如下：</p>
 59 | 				<div class='example'>
 60 | 					<div class='code'>
 61 | 						<pre>
 62 | &lt;svg>
 63 |     &lt;circle cx='50' cy='50' r='10' />
 64 | &lt;/svg>
 65 | 						</pre>
 66 | 					</div>
 67 | 					<div class='shape'>
 68 | 						<svg height='100'>
 69 | 							<circle cx='50' cy='50' r='10' />
 70 | 						</svg>
 71 | 					</div>
 72 | 				</div>
 73 | 			</li>
 74 | 			<li>
 75 | 				<h4>椭圆&lt;ellipse></h4>
 76 | 				<p>ellipse元素用于创建椭圆，其上的属性如下：</p>
 77 | 				<ol>
 78 | 					<li>cx属性和cy属性，定义圆心的位置。</li>
 79 | 					<li>rx属性和ry属性，定义椭圆的水平半径和垂直半径。</li>
 80 | 				</ol>
 81 | 				<p>示例及代码如下：</p>
 82 | 				<div class='example'>
 83 | 					<div class='code'>
 84 | 						<pre>
 85 | &lt;svg>
 86 |     &lt;ellipse cx='50' cy='50' rx='10' ry='5' />
 87 | &lt;/svg>
 88 | 						</pre>
 89 | 					</div>
 90 | 					<div class='shape'>
 91 | 						<svg height='100'>
 92 | 							<ellipse cx='50' cy='50' rx='20' ry='10' />
 93 | 						</svg>
 94 | 					</div>
 95 | 				</div>
 96 | 			</li>
 97 | 			<li>
 98 | 				<h4>线条&lt;line></h4>
 99 | 				<p>line元素用来创建线条（直线）。其上的属性如下：</p>
100 | 				<ol>
101 | 					<li>x1属性和y1属性，定义线条起始点的位置。</li>
102 | 					<li>x2属性和y2属性，定义线条终止点的位置。</li>
103 | 				</ol>
104 | 				<p>示例及代码如下：</p>
105 | 				<div class='example'>
106 | 					<div class='code'>
107 | 						<pre>
108 | &lt;svg>
109 |     &lt;line x1='50' y1='50' x2='200' y2='50' style='stroke: black;stroke-width: 2;' />
110 | &lt;/svg>
111 | 						</pre>
112 | 					</div>
113 | 					<div class='shape'>
114 | 						<svg height='100'>
115 | 							<line x1='50' y1='50' x2='200' y2='50' style='stroke: black;stroke-width: 2;' />
116 | 						</svg>
117 | 					</div>
118 | 				</div>
119 | 			</li>
120 | 			<li>
121 | 				<h4>多边形&lt;polygon></h4>
122 | 				<p>polygon元素用来创建含有不少于三条边的图形。</p>
123 | 				<p>其上的points属性，定义多边形每个角的x坐标和y坐标，坐标间可以用逗号或者空格隔开。具体示例及代码如下：</p>
124 | 				<div class='example'>
125 | 					<div class='code'>
126 | 						<pre>
127 | &lt;svg>
128 |     &lt;polygon points='100,10 20,80 180,80' style='fill: white;stroke: black;' />
129 | &lt;/svg>
130 | 						</pre>
131 | 					</div>
132 | 					<div class='shape'>
133 | 						<svg height='100'>
134 | 							<polygon points='100,10 20,80 180,80' style='fill: white;stroke: black;' />
135 | 						</svg>
136 | 					</div>
137 | 				</div>
138 | 			</li>
139 | 			<li>
140 | 				<h4>折线&lt;polyline></h4>
141 | 				<p>polyline用来创建仅包含直线的形状。</p>
142 | 				<p>其上的points属性，定义折线的各个点的坐标。示例及其代码如下：</p>
143 | 				<div class='example'>
144 | 					<div class='code'>
145 | 						<pre>
146 | &lt;svg>
147 |     &lt;polyline points='100,10 20,80 180,80' style='fill: white;stroke: black;' />
148 | &lt;/svg>
149 | 						</pre>
150 | 					</div>
151 | 					<div class='shape'>
152 | 						<svg height='100'>
153 | 							<polyline points='100,10 20,80 180,80' style='fill: white;stroke: black;' />
154 | 						</svg>
155 | 					</div>
156 | 				</div>
157 | 			</li>
158 | 			<li>
159 | 				<h4>路径&lt;path></h4>
160 | 				<p>path元素用来定义路径，其上的d属性用来定义路径信息，它的值是由一个“命令+参数”的序列。每一个命令都有两种表示方式，大写字母表示采用绝对定位，小写字母表示采用相对定位（以上一个点为基准来计算）。具体命令如下：</p>
161 | 				<ol>
162 | 					<li>M，moveto，该命令会把画笔移动到后面紧跟的参数表示的位置，但不画线。</li>
163 | 					<li>L，lineto，该命令会在紧跟其后的参数表示的位置和L前面画笔所在点间画一条直线。</li>
164 | 					<li>H，该命令用来绘制平行线，后面紧跟一个参数，表示在x轴移动的位置。</li>
165 | 					<li>V，该命令用来绘制垂直线，后面紧跟一个参数，表示在y轴移动的位置。</li>
166 | 					<li>Z，该命令用来闭合路径，从当前点画一条直线到路径的起点，Z命令不区分大小写。</li>
167 | 					<li>C，该命令用来绘制三次贝塞尔曲线，其后跟随着三个点参数，前两个是控制点，最后一个是曲线的终点。</li>
168 | 					<li>S，该命令与C命令或者S命令搭配使用，画出一条三次贝塞尔曲线，其后跟随两个点参数，第一个是终点的控制点，第二个是终点，而起点的控制点默认为上一个控制点的对称点。</li>
169 | 					<li>Q，该命令用来创建二次贝塞尔曲线，其后跟随两个点参数，一个是控制点，另一个是终点。</li>
170 | 					<li>T，该命令与Q命令或者T命令搭配使用，它和Q的关系和S与C的很像，其后跟随一个点参数，即终点，控制点默认为上一个控制点的对称点。</li>
171 | 					<li>A，该命令用来创建弧形曲线。</li>
172 | 				</ol>
173 | 				<p>示例及代码如下：</p>
174 | 				<div class='example'>
175 | 					<div class='code'>
176 | 						<pre>
177 | &lt;svg width='600'>
178 |     &lt;path d='M20,20 L100,20 V80 H20 Z' style='fill: white;stroke: black;' >
179 |     &lt;path d='M150,80 C180,10 205,10 235,80 S310,150 320,80' stroke='red' fill='white' />
180 |     &lt;path d="M330,80 Q372.5,10 415,80 T500,80" stroke="blue" fill="white"/>
181 | &lt;/svg>
182 | 						</pre>
183 | 					</div>
184 | 					<div class='shape'>
185 | 						<svg width='100%' height='150'>
186 | 							<path d='M20,20 L100,20 V80 H20 Z' style='fill: white;stroke: black;' />
187 | 							<path d='M150,80 C180,10 205,10 235,80 S310,150 320,80' stroke='red' fill='white' />
188 | 							<path d="M330,80 Q372.5,10 415,80 T500,80" stroke="blue" fill="white"/>
189 | 						</svg>
190 | 					</div>
191 | 				</div>	
192 | 			</li>
193 | 		</ul>
194 | 		<h3>参考资料</h3>
195 | 		<ul>
196 | 			<li>
197 | 				<a href="http://www.w3school.com.cn/svg/index.asp" target="_blank">SVG教程(w3school)</a>
198 | 			</li>
199 | 			<li>
200 | 				<a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths" target="_blank">路径(MDN)</a>
201 | 			</li>
202 | 		</ul>
203 | 	</body>
204 | </html>


--------------------------------------------------------------------------------
/HTML/svg/svg_structure.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 	<head>
  4 | 		<meta charset='UTF-8'>
  5 | 		<title>SVG结构相关元素</title>
  6 | 		<style>
  7 | 			body {
  8 | 				margin: 0 30px;
  9 | 				font-family: "Times New Roman",Georgia,Serif;
 10 | 			}
 11 | 			li {
 12 | 				padding: 5px 0;
 13 | 			}
 14 | 			.example {
 15 | 				border: 1px solid lightgray;
 16 | 			}
 17 | 			.code {
 18 | 				padding: 0 20px;
 19 | 				border-bottom: 1px solid lightgray;
 20 | 			}
 21 | 		</style>
 22 | 	</head>
 23 | 	<body>
 24 | 		<h1>SVG结构相关元素</h1>
 25 | 		<ul>
 26 | 			<li>
 27 | 				<h4>g元素</h4>
 28 | 				<p>g元素是分组元素，用于在逻辑上将相关的元素进行分组。给g元素添加的样式或者属性都会被应用到它所有的子元素上。如下示例所示，想对三个圆进行移动，可以直接在g上进行操作，这样既达到了移动的目的，也没有破坏他们之间的位置关系。</p>
 29 | 				<div class='example'>
 30 | 					<div class='code'>
 31 | 						<pre>
 32 | &lt;svg width='100%' height='100'>
 33 |     &lt;g transform='translate(50,50)'>
 34 |         &lt;circle cx='10' cy='10' r='5' />
 35 |         &lt;circle cx='30' cy='10' r='5' />
 36 |         &lt;circle cx='50' cy='10' r='5' />
 37 |     &lt;/g>
 38 | &lt;/svg>
 39 | 						</pre>
 40 | 					</div>
 41 | 					<div class='shape'>
 42 | 						<svg width='100%' height='100'>
 43 | 							<g transform='translate(50,50)'>
 44 | 								<circle cx='10' cy='10' r='5' />
 45 | 								<circle cx='30' cy='10' r='5' />
 46 | 								<circle cx='50' cy='10' r='5' />
 47 | 							</g>
 48 | 						</svg>
 49 | 					</div>
 50 | 				</div>
 51 | 			</li>
 52 | 			<li>
 53 | 				<h4>title元素和desc元素</h4>
 54 | 				<p>这两个标签可以用在g元素中使用，添加一些描述性的信息，使其更容易被屏幕阅读器解读，让代码的整体可读性更好。</p>
 55 | 			</li>
 56 | 			<li>
 57 | 				<h4>use元素</h4>
 58 | 				<p>该元素可以实现元素的重用，可以重用单个元素，也可以重用一组元素。use元素复制出的副本的样式和初始元素一样，不能覆盖初始元素的样式。其上的属性如下：</p>
 59 | 				<ol>
 60 | 					<li>x属性和y属性，重用的元素的位置。这两个属性是相对被重用的元素的位置来定位的。</li>
 61 | 					<li>width属性和height属性，重用元素的宽高。</li>
 62 | 					<li>xlink:href属性，引用内容的url，如id值。</li>
 63 | 				</ol>
 64 | 				<p>示例如下：</p>
 65 | 				<div class='example'>
 66 | 					<div class='code' style='width: 100%;'>
 67 | 						<pre>
 68 | &lt;svg>
 69 |     &lt;g id='circles' transform='translate(100,100)'>
 70 |         &lt;circle cx='10' cy='10' r='5' />
 71 |         &lt;circle cx='30' cy='10' r='5' />
 72 |         &lt;circle cx='50' cy='10' r='5' />
 73 |     &lt;/g>
 74 |     &lt;use x='10' y='10' xlink:href='#circles' />
 75 | &lt;/svg>
 76 | 						</pre>
 77 | 					</div>
 78 | 				</div>
 79 | 			</li>
 80 | 			<li>
 81 | 				<h4>defs元素</h4>
 82 | 				<p>该元素可以存储我们想重用的元素，但是不渲染它们，等到后面再被其他SVG元素应用或显示。defs元素的副本的x和y是相对于用户坐标系统来定位的。其副本可以用use元素来创建。示例如下：</p>
 83 | 				<div class='example'>
 84 | 					<div class='code' style='width: 100%;'>
 85 | 						<pre>
 86 | &lt;svg>
 87 |     &lt;defs>
 88 |         &lt;linearGradient id="gradient">
 89 |             &lt;stop offset="0%" style="stop-color: deepPink">&lt;/stop>
 90 |             &lt;stop offset="100%" style="stop-color: #009966">&lt;/stop>
 91 |         &lt;/linearGradient>
 92 |     &lt;/defs>
 93 |     &lt;rect stroke="#eee" stroke-width="5" fill="url(#gradient)">&lt;/rect>
 94 | &lt;/svg>
 95 | 						</pre>
 96 | 					</div>
 97 | 				</div>
 98 | 			</li>
 99 | 			<li>
100 | 				<h4>symbol元素</h4>
101 | 				<p>该元素和g元素相似，它提供了一种对元素进行分组的方式。该元素不会被渲染，同时它可以有自己的viewBox和preserveAspectRatio属性。</p>
102 | 			</li>
103 | 		</ul>
104 | 		<h3>参考资料</h3>
105 | 		<ul>
106 | 			<li>
107 | 				<a href="http://www.w3cplus.com/svg/structuring-grouping-referencing-in-svg.html" target="_blank">SVG中的结构化、分组和引用元素</a>
108 | 			</li>
109 | 		</ul>
110 | 	</body>
111 | </html>


--------------------------------------------------------------------------------
/HTML/table/others.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8" />
  5 |         <title>The Table element</title>
  6 |         <style>
  7 |             li{  line-height: 30px;  }
  8 |             .tips{ color:red;display:block;}
  9 |              body {
 10 |                     margin: 0 50px;
 11 |                     font-family: "Times New Roman",Georgia,Serif;
 12 |                 }
 13 |                 li ,p{ line-height: 30px; }
 14 |         </style>
 15 |     </head>
 16 |     <body>
 17 |         <h1>&lt;th&gt;&lt;td&gt;</h1>
 18 |         <ul>
 19 |              <li>
 20 |                 valign:规定单元格内容的垂直排列方式。取值有top、middle、bottom、baseline
 21 |              </li>
 22 |             <li>
 23 |                 align:规定单元格中内容的水平对齐方式。，其值为left、right、center、justify、char。
 24 |             </li>
 25 |             <li>
 26 |                 bgcolor:规定单元格的背景颜色。
 27 |                 <span class="tips">建议用样式代替</span>
 28 |             </li>
 29 |             <li>
 30 |                 axis:对单元进行分类。
 31 |             </li>
 32 |             <li>
 33 |                 char:规定根据哪个字符来进行内容的对齐。
 34 |             </li>
 35 |             <li>
 36 |                 charoff:charoff 属性设置内容相对于由 char 属性规定的字符的对齐偏移量。
 37 |             </li>
 38 |             <li>
 39 |                 colspan:规定规定单元格可横跨的列数。值为数字。
 40 |                 <span class="tips">若colspan的值大于总列数，则该行的宽度增加到行尾</span>
 41 |             </li>
 42 |             <li>
 43 |                 rowspan:规定规定单元格可横跨的行数。值为数字。
 44 |                 <span class="tips">若rowspan的值大于总列数，则该行的宽度增加到列尾</span>
 45 |             </li>
 46 |             <li>
 47 |                 headers:定义将表头单元与数据单元相关联的方法。
 48 |             </li>
 49 |             <li>
 50 |                 height:规定表格单元格的高度。
 51 |                 <span class="tips">建议用样式代替</span>
 52 |             </li>
 53 |             <li>
 54 |                 nowrap:规定表格单元格中的内容不换行。
 55 |                 <span class="tips">建议用样式代替</span>
 56 |             </li>
 57 |             <li>
 58 |                 scope:定义将表头单元与数据单元相关联的方法。
 59 |             </li>
 60 |             <li>
 61 |                 abbr:规定单元格中内容的缩写版本。
 62 |             </li>
 63 |             <li>
 64 |                 width:规定表格单元格的宽度。
 65 |                 <span class="tips">建议用样式代替</span>
 66 |             </li>
 67 |         </ul>
 68 |         <h1>&lt;col&gt;</h1>
 69 |         <ul>
 70 |              <li>
 71 |                 &lt;col&gt;标签为表格中一个或多个列定义属性值。
 72 |              </li>
 73 |              <li>
 74 |                 如需对全部列应用样式，col标签很有用，这样就不需要对各个单元和各行重复应用样式了。
 75 |              </li>
 76 |             <li>
 77 |                 没有结束标签
 78 |             </li>
 79 |             <li>
 80 |                 属性值有：
 81 |                 <ol>
 82 |                     <li>
 83 |                         align(水平对齐方式)
 84 |                     </li>
 85 |                     <li>
 86 |                         垂直对齐方式(水平对齐方式)
 87 |                     </li>
 88 | 
 89 |                     <li>
 90 |                         char（根据字符对齐相关内容）
 91 |                     </li>
 92 |                     <li>
 93 |                         charoff(规定第一个对齐字符的偏移量)
 94 |                     </li>
 95 |                     <li>
 96 |                         span(规定col元素横跨的列数)
 97 |                     </li>
 98 |                     <li>
 99 |                         width(规定col元素的宽度)
100 |                     </li>
101 |                 </ol>
102 |             </li>
103 |             <li>
104 |                 <span class="tips">请为 col 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。</span>
105 |             </li>
106 |         </ul>
107 |         <h1>&lt;colgroup&gt;</h1>
108 |         <ul>
109 |              <li>
110 |                 &lt;col&gt;用于对表格中的列进行组合，以便对其进行格式化,其属性与&lt;col&gt;相同。
111 |              </li>
112 |         
113 |             <li>
114 |                 有结束标签
115 |             </li>
116 |             <li>
117 |                 属性值有：
118 |                 <ol>
119 |                     <li>
120 |                         align(水平对齐方式)
121 |                     </li>
122 |                     <li>
123 |                         垂直对齐方式(水平对齐方式)
124 |                     </li>
125 | 
126 |                     <li>
127 |                         char（根据字符对齐相关内容）
128 |                     </li>
129 |                     <li>
130 |                         charoff(规定第一个对齐字符的偏移量)
131 |                     </li>
132 |                     <li>
133 |                         span(规定colgroup元素横跨的列数)
134 |                     </li>
135 |                     <li>
136 |                         width(规定colgroup元素的宽度)
137 |                     </li>
138 |                 </ol>
139 |             </li>
140 |             <li>
141 |                 <span class="tips">请为 colgroup 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。</span>
142 |             </li>
143 |         </ul>
144 |         <h1>&lt;caption&gt;</h1>
145 |         <ul>
146 |              <li>
147 |                 &lt;col&gt;用于定义表格标题。
148 |              </li>
149 |         
150 |             <li>
151 |                 caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
152 |             </li>
153 |         </ul>
154 |         <h3>示例：</h3>
155 |         <ul>
156 |              <li>
157 |                 align属性：align="right"
158 |                 <br/>
159 |                 <table width="50%" border="1">
160 |                   <tr>
161 |                     <th align="center">Month</th>
162 |                     <th>Savings</th>
163 |                   </tr>
164 |                   <tr>
165 |                     <td>January</td>
166 |                     <td align="right">$100</td>
167 |                   </tr>
168 |                 </table>
169 |             </li>
170 |             <li>
171 |                 合并单元格
172 |                 rowspan="2"
173 |                 colspan="2"
174 |                 <br/>
175 |                 <table width="50%" border="1">
176 |                   <tr>
177 |                     <th>Month</th>
178 |                     <th>Savings</th>
179 |                     <th>Savings for holiday!</th>
180 |                   </tr>
181 |                   <tr>
182 |                     <td colspan="2">January</td>
183 |                     <td rowspan="2">$50</td>
184 |                   </tr>
185 |                   <tr>
186 |                     <td>February</td>
187 |                     <td>$80</td>
188 |                   </tr>
189 |                 </table> 
190 |             </li>
191 |             <li>
192 |                 valign属性：
193 |                 取值为bottom或baseline。
194 |                 <br/>
195 |                 <table border="1" style="height:200px">
196 |                   <tr>
197 |                     <th>Month</th>
198 |                     <th>Savings</th>
199 |                   </tr>
200 |                   <tr>
201 |                     <td valign="bottom">January</td>
202 |                     <td valign="bottom">$100</td>
203 |                   </tr>
204 |                   <tr> 
205 |                    <td valign="baseline">February</td>
206 |                    <td  valign="baseline" style="font-size:200%">$80</td>
207 |                   </tr>
208 |                 </table>
209 | 
210 |             </li>
211 |             <li>
212 |                 caption标题：
213 |                 <table border="6">
214 |                 <caption>我的标题</caption>
215 |                 <tr>
216 |                   <td>100</td>
217 |                   <td>200</td>
218 |                   <td>300</td>
219 |                 </tr>
220 |                 <tr>
221 |                   <td>400</td>
222 |                   <td>500</td>
223 |                   <td>600</td>
224 |                 </tr>
225 |                 </table>
226 |             </li>   
227 |          
228 |         </ul>
229 | 
230 |     </body>
231 | </html>


--------------------------------------------------------------------------------
/HTML/table/table.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8" />
  5 |         <title>The Table element</title>
  6 |         <style>
  7 |             li{  line-height: 30px;  }
  8 |             .tips{ color:red;display:block;}
  9 |             thead {color:green}
 10 |             tbody {color:blue;height:50px}
 11 |             tfoot {color:red}
 12 |              body {
 13 |                 margin: 0 50px;
 14 |                 font-family: "Times New Roman",Georgia,Serif;
 15 |             }
 16 |             li ,p{ line-height: 30px; }
 17 |         </style>
 18 |     </head>
 19 |     <body>
 20 |         <h1 id="h1">table标签属性列表</h1>
 21 |         <ul>
 22 |             <li>
 23 |                 width:规定单元格的宽度，值为数字，单位为px。
 24 |             </li>
 25 | 
 26 |             <li>
 27 |                 align:规定表格相对周围元素对齐方式，其值为left、right、center。
 28 |                 <span class="tips">可实现其他HTML元素围绕表格的效果，建议用样式代替</span>
 29 |             </li>
 30 |             <li>
 31 |                 bgcolor:规定表格的背景颜色。
 32 |                 <span class="tips">建议用样式代替</span>
 33 |             </li>
 34 |             <li>
 35 |                 border:规定表格边框的宽度，值为数字
 36 |                 <span class="tips">自带border属性样式比较丑，建议设置单元格border属性代替</span>
 37 |             </li>
 38 |             <li>
 39 |                 cellpadding:规定单元格的内边距，值为数字，代表内边距的百分比
 40 |                 <span class="tips">从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来添加内边距</span>
 41 |             </li>
 42 |             <li>
 43 |                 cellspacing:规定单元格的外边距，值为数字，代表内边距的百分比
 44 |                 <span class="tips">从实用角度出发，最好不要规定 cellspacing，而是使用 CSS 来添加内边距</span>
 45 |             </li>
 46 |             <li>
 47 |                 frame:规定外部边框哪个部分是可见的。
 48 |                 <span class="tips">建议用样式代替</span>
 49 |             </li>
 50 |             <li>
 51 |                 rules:规定内部边框哪个部分是可见的。
 52 |                 <span class="tips">建议用样式代替</span>
 53 |                 <span class="tips">frame和rules组合技：frame="box" rules="all"展示所有边框</span>
 54 |             </li>
 55 |             <li>
 56 |                 summary:规定表格内容的摘要。
 57 |                 <span class="tips">不会产生任何视觉变化</span>
 58 |             </li>
 59 |         </ul>
 60 |         <h1>thead、tbody、tfoot</h1>
 61 |         <ul>
 62 |             <li>
 63 |                 thead 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
 64 |             </li>
 65 |             <li>
 66 |                 thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
 67 |                 <span class="tips">&lt;thead&gt; 内部必须拥有 &lt;tr&gt; 标签！</span>
 68 |             </li>
 69 |             <li>
 70 |                 thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
 71 |             </li>
 72 |             <li>
 73 |                 <span class="tips">当table中省略这三个标签时，浏览器会自动在&lt;tr&gt;标签外层套一个&lt;tbody&gt;标签</span>
 74 |             </li>
 75 |             <li>
 76 |                 注意点：
 77 |                 <ol>
 78 |                     <li>thead和tfoot在一张表中都只能有一个，而tbody可以有多个。</li>
 79 |                     <li>tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要。</li>
 80 |                     <li> thead、tbody和tfoot里面都必须使用tr标签。</li>
 81 |                 </ol>
 82 |             </li>
 83 |         </ul>
 84 | 
 85 |         <h3>示例：</h3>
 86 |         <ul>
 87 |              <li>
 88 |                 align属性：
 89 |                 <br/>
 90 |                 <table border="1" align="right">
 91 |                   <tr>
 92 |                     <th>Month</th>
 93 |                     <th>Savings</th>
 94 |                   </tr>
 95 |                   <tr>
 96 |                     <td>January</td>
 97 |                     <td>$100</td>
 98 |                   </tr>
 99 |                   <tr>
100 |                     <td>February</td>
101 |                     <td>$80</td>
102 |                   </tr>
103 |                 </table>
104 | 
105 |                 <p>align 属性可以使文本围绕在表格周围。</p>
106 | 
107 |                 <p>在 HTML 4.01 中，不赞成使用 body 元素的 align 属性；在 XHTML 1.0 Strict DTD 中，不支持 body 元素的 align 属性。</p>
108 |             </li>
109 |             <li>
110 |                 内边距和外边距：
111 |                 cellpadding="10"
112 |                 cellspacing="10"
113 |                 <br/>
114 |                 <table border="1" style="display:inline-block" cellpadding="10">
115 |                   <tr>
116 |                     <th>Month</th>
117 |                     <th>Savings</th>
118 |                   </tr>
119 |                   <tr>
120 |                     <td>January</td>
121 |                     <td>$100</td>
122 |                   </tr>
123 |                 </table>  
124 |                 <table border="1" cellspacing="10"  style="display:inline-block" >
125 |                   <tr>
126 |                     <th>Month</th>
127 |                     <th>Savings</th>
128 |                   </tr>
129 |                   <tr>
130 |                     <td>January</td>
131 |                     <td>$100</td>
132 |                   </tr>
133 |                 </table>
134 |             </li>
135 |             <li>
136 |                 frame和rules属性：
137 |                 table frame="box" rules="all"
138 |                 <br/>
139 |                 <table frame="box" rules="all">
140 |                   <tr>
141 |                     <th>Month</th>
142 |                     <th>Savings</th>
143 |                   </tr>
144 |                   <tr>
145 |                     <td>January</td>
146 |                     <td>$100</td>
147 |                   </tr>
148 |                 </table>
149 |             </li>
150 |             <li>
151 |                 tbody、thead、tfoot:
152 |                 <br/>
153 |                     thead {color:green}
154 |                     tbody {color:blue;height:50px}
155 |                     tfoot {color:red}
156 |                 <br/>
157 |                 <table border="1">
158 |                   <thead>
159 |                     <tr>
160 |                       <th>Month</th>
161 |                       <th>Savings</th>
162 |                     </tr>
163 |                   </thead>
164 |                   <tbody>
165 |                     <tr>
166 |                       <td>January</td>
167 |                       <td>$100</td>
168 |                     </tr>
169 |                     <tr>
170 |                       <td>February</td>
171 |                       <td>$80</td>
172 |                     </tr>
173 |                   </tbody>
174 |                   <tfoot>
175 |                     <tr>
176 |                       <td>Sum</td>
177 |                       <td>$180</td>
178 |                     </tr>
179 |                   </tfoot>
180 |                 </table>
181 |             </li>
182 |         </ul>
183 | 
184 |     </body>
185 | </html>


--------------------------------------------------------------------------------
/HTML/text/text.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <title>文本类标签简介</title>
  6 |         <style>
  7 |             body {
  8 |                 margin: 0 50px;
  9 |                 font-family: "Times New Roman",Georgia,Serif;
 10 |             }
 11 |             li ,p{ line-height: 30px; }
 12 |         </style>
 13 |     </head>
 14 |     <body>
 15 |         <h1>文本类标签简介</h1>
 16 |         <p>HTML 文本标签用来组织文本块或者片段，一般放置在body标签中。这些标签具有较强的语义化涵义，对于可访问性和搜索引擎优化有积极的作用。</p>
 17 |         <h3>常见标签</h3>
 18 |         <ul>
 19 |             <li>
 20 |                 标签：&lt;a&gt;<br/>
 21 |                 涵义：定义一个超链接<br/>
 22 |                 示例：<a href="www.meituan.com">美团网</a> <br/>
 23 |                 属性：
 24 |                 <ul>
 25 |                     <li>
 26 |                         href：链接地址
 27 |                     </li>
 28 |                     <li>
 29 |                         target：目标网页【_blank/_self/_parent/_top】
 30 |                     </li>
 31 |                 </ul>
 32 |             </li>
 33 |             <li>
 34 |                 标签：&lt;bdi&gt;<br/>
 35 |                 涵义：把用户名从周围的文本方向设置中隔离出来<br/>
 36 |                 示例：<p>Username <bdi>Bill</bdi>:80 points</p><br/>
 37 |                 属性：
 38 |                 <ul>
 39 |                     <li>
 40 |                         dir：规定 &lt;bdi&gt; 元素内的文本的文本方向【ltr/trl/auto】
 41 |                     </li>
 42 |                 </ul>
 43 |             </li>
 44 |             <li>
 45 |                 标签：&lt;i&gt;<br/>
 46 |                 涵义：以斜体显示特殊文本，如技术术语、外文短语，或者小说中人物的中心思想。<br/>
 47 |                 示例：The <i>Queen Mary</i> Tsailed last night <br/>
 48 |                 注：&lt;i&gt;最开始只是表示斜体，无实际意义，但是在最新的HTML5规范中，&lt;i&gt;被赋予了新的语义化涵义，用来表示特殊文本，如技术术语、外文短语，或者小说中人物的中心思想等。
 49 |             </li>
 50 |             <li>
 51 |                 标签：&lt;em&gt;<br/>
 52 |                 涵义：以斜体显示文本，在于强调的重点。<br/>
 53 |                 示例：We <em>had to</em> do something about it <br>
 54 |                 注：和&lt;i&gt; 的区别在于语义化方面的不同，&lt;em&gt;是表达要素(phrase elements)，表示句子中的强调，即强调语义。
 55 |             </li>
 56 |             <li>
 57 |                 标签：&lt;b&gt;<br/>
 58 |                 涵义：以粗体显示文本。<br/>
 59 |                 示例：<b>Text is bold</b> <br/>
 60 |                 注：最开始的&lt;b&gt;表示无意义的加粗，但是在最新的HTML5规范中&lt;b&gt;表示文体上突出的不包含任何额外的重要性的一段文本，例如：文档概要中的关键字，评论中的产品名等。
 61 |             </li>
 62 |             <li>
 63 |                 标签：&lt;strong&gt;<br/>
 64 |                 涵义：以粗体显示文本，用于强调，比&lt;em&gt;更重点的强调<br/>
 65 |                 示例：<strong>Text is bold</strong><br>
 66 |                 注：同&lt;em&gt;也是表达元素，表示页面中的强调。
 67 |             </li>
 68 |             <li>
 69 |                 标签：&lt;sup&gt;<br/>
 70 |                 涵义：以上标显示文本<br/>
 71 |                 示例：This text is <sup>superscripted</sup> <br>
 72 |             </li>
 73 |             <li>
 74 |                 标签：&lt;sub&gt;<br/>
 75 |                 涵义：以下标显示文本<br/>
 76 |                 示例：水的化学表达式是H<sub>2</sub>O <br>
 77 |             </li>
 78 |             <li>
 79 |                 标签：&lt;big&gt;<br/>
 80 |                 涵义：增大显示文本【已废弃】
 81 |             </li>
 82 |             <li>
 83 |                 标签：&lt;small&gt;<br/>
 84 |                 涵义：使文本以更小的字号显示<br/>
 85 |                 示例：<small>&copy;版权所有</small> <br>
 86 |                 注：最开始是没有语义化色彩的，在HTML5规范中，&lt;small&gt;用来表示版权或法律信息等。
 87 |             </li>
 88 |             <li>
 89 |                 标签：&lt;ins&gt;<br/>
 90 |                 涵义：表示被插入的文本<br/>
 91 |                 示例：This text has been <ins>inserted</ins>. <br>
 92 |                 属性：
 93 |                 <ul>
 94 |                     <li>cite：该属性定义了资源的URI,解释了变化的来源。</li>
 95 |                     <li>datetime：这个属性表示变化的时间和日期。</li>
 96 |                 </ul>
 97 |             </li>
 98 |             <li>
 99 |                 标签：&lt;del&gt;<br/>
100 |                 涵义：表示被删除的文本<br/>
101 |                 示例：<del>This text has been deleted</del>, here is the rest of the paragraph. <br>
102 |                 属性：同&lt;ins&gt;
103 |             </li>
104 |             <li>
105 |                 标签：&lt;bdo&gt;<br/>
106 |                 涵义：自定义文本的方向<br/>
107 |                 示例：This is normal direction.<bdo dir="rtl">And this will right to left.</bdo> <br/>
108 |                 属性:dir-文本方向，可选值[rtl/ltr/auto]
109 |             </li>
110 |             <li>
111 |                 标签：&lt;cite&gt;<br/>
112 |                 涵义：表示一些“有创意”的文本，如人们约定俗成的语言缩写<br/>
113 |                 示例：我们经常用的文件编码格式是 <cite>[UTF-8]</cite>
114 |             </li>
115 |             <li>
116 |                 标签：&lt;q&gt;<br/>
117 |                 涵义：表示一小段外部引用文本，会自动加上双引号<br/>
118 |                 示例：Mary said <q cite="http://developer.mozilla.org">Oh My God.</q>
119 |                 属性：cite-表示引用来源
120 |             </li>
121 |             <li>
122 |                 标签：&lt;blockquote&gt;<br/>
123 |                 涵义：表示大段外部引用文本<br/>
124 |                 示例：<blockquote cite="http://developer.mozilla.org">
125 |                         <p>This is a quotation taken from the Mozilla Developer Center.</p>
126 |                     </blockquote>
127 |             </li>
128 |             <li>
129 |                 标签：&lt;dfn&gt;<br/>
130 |                 涵义：表示定义一个专业术语名词<br/>
131 |                 示例：I love <dfn>WWW</dfn>
132 |             </li>
133 |             <li>
134 |                 标签：&lt;abbr&gt;<br/>
135 |                 涵义：表示文本缩写<br/>
136 |                 示例：I'm a <abbr title="Front End">FE</abbr> engineer.
137 |             </li>
138 |         </ul>
139 |         <h3>计算机相关标签</h3>
140 |         <ul>
141 |             <li>
142 |                 标签：&lt;kbd&gt;<br/>
143 |                 涵义：表示用户键盘输入<br/>
144 |                 示例：press <kbd>ESC</kbd> to exit.
145 |             </li>
146 |             <li>
147 |                 标签：&lt;var&gt;<br/>
148 |                 涵义：代表了一个数学表达式或编程上下文<br/>
149 |                 示例：A simple equation: <var>x</var> = <var>y</var> + 2
150 |             </li>
151 |             <li>
152 |                 标签：&lt;samp&gt;<br/>
153 |                 涵义：表示计算机编程的简单输出<br/>
154 |                 示例：This program outputs:<samp>This is sample text.</samp>
155 |             </li>
156 |             <li>
157 |                 标签：&lt;tt&gt;<br/>
158 |                 涵义：显示一段打字文本（大致是这个意思）【已废弃】
159 |             </li>
160 |             <li>
161 |                 标签：&lt;code&gt;<br/>
162 |                 涵义：显示一段计算机代码片段 <br/>
163 |                 示例：write <code>console.log(window)</code> to see window object.
164 |             </li>
165 |             <li>
166 |                 标签：&lt;pre&gt;<br/>
167 |                 涵义：显示一段格式化的文本 <br/>
168 |                 示例：<pre>
169 |                         body{
170 |                             margin:0;
171 |                             padding:0;
172 |                         }
173 |                     </pre>
174 |             </li>
175 |         </ul>
176 |         <h3>其他特殊文本标签</h3>
177 |         <ul>
178 |             <li>
179 |                 标签：&lt;mark&gt;<br/>
180 |                 涵义：显示一段高亮文本 <br/>
181 |                 示例：The &lt;mark&gt; element is used to <mark>highlight</mark> text
182 |             </li>
183 |             <li>
184 |                 标签：&lt;time&gt;<br/>
185 |                 涵义：显示一个时间<br/>
186 |                 示例：Time is <time datetime="2015-5-12 10:00">May 12</time> <br/>
187 |                 属性：datetime-指定时间
188 |             </li>
189 |             <li>
190 |                 标签：&lt;ruby&gt;<br/>
191 |                 涵义：定义 ruby 注释（中文注音或字符）,和 &lt;rt&gt; 标签一同使用,&lt;ruby&gt; 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 &lt;rt&gt; 元素组成，还包括可选的 &lt;rp&gt; 元素，定义当浏览器不支持 &lt;ruby&gt; 元素时显示的内容<br/>
192 |                 示例：<ruby>
193 |                         示例 <rt>shi li</rt>
194 |                     </ruby>
195 |                     <ruby>
196 |                         不支持 <rt>shi li</rt><rp>浏览器不支持&lt;ruby&gt;</rp>
197 |                     </ruby>
198 |             </li>
199 |             <li>
200 |                 标签：&lt;rt&gt;<br/>
201 |                 涵义：定义&lt;ruby&gt;元素的注释<br/>
202 |                 示例：同上
203 |             </li>
204 |             <li>
205 |                 标签：&lt;ruby&gt;<br/>
206 |                 涵义：定义当浏览器不支持 &lt;ruby&gt; 元素时显示的内容<br/>
207 |                 示例：同上
208 |             </li>
209 |             <li>
210 |                 标签：&lt;wbr&gt;<br/>
211 |                 涵义：定义文本换行的时机，指定在何处添加换行符<br/>
212 |                 示例：不得不说，<wbr>electroencephalography<wbr>是一个很长的单词
213 |             </li>
214 |             <li>
215 |                 标签：&lt;details&gt;<br/>
216 |                 涵义：用于描述文档或文档某个部分的细节,目前只有 Chrome 支持 &lt;details&gt; 标签。一般和&lt;summary&gt;配合使用,没有&lt;summary&gt;的话默认显示“详细信息”<br/>
217 |                 示例：<details>
218 |                         <p>All pages and graphics on this web site are the property of W3School.</p>
219 |                     </details>
220 |                 属性：open - 设置是否打开细节
221 |             </li>
222 |             <li>
223 |                 标签：&lt;summary&gt;<br/>
224 |                 涵义：包含 &lt;details&gt; 元素的标题，&lt;details&gt; 元素用于描述有关文档或文档片段的详细信息。&lt;summary&gt; 元素应该是 &lt;details&gt; 元素的第一个子元素。<br/>
225 |                 示例：<details>
226 |                         <summary>HTML5</summary>
227 |                         This document teaches you everything you have to learn about HTML 5.
228 |                     </details>
229 |             </li>
230 |         </ul>
231 |     </body>
232 | </html>
233 | 


--------------------------------------------------------------------------------
/HTML/video.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8" />
  5 |         <title>The VIDEO element</title>
  6 |         <style>
  7 |             li{  line-height: 30px;  }
  8 |             .tips{ color:red;display:block;}
  9 |             thead {color:green}
 10 |             tbody {color:blue;height:50px}
 11 |             tfoot {color:red}
 12 |              body {
 13 |                 margin: 0 50px;
 14 |                 font-family: "Times New Roman",Georgia,Serif;
 15 |             }
 16 |             li ,p{ line-height: 30px; }
 17 |         </style>
 18 |     </head>
 19 |     <body>
 20 |         <h1 >video标签属性列表</h1>
 21 |         <ul>
 22 |             <li>
 23 |                 width:设置视频播放器的宽度。
 24 |             </li>
 25 |             <li>
 26 |                 height:设置视频播放器的高度。
 27 |             </li>
 28 |             <li>
 29 |                 autoplay:如果出现该属性，则视频在就绪后马上播放,取值为autoplay。
 30 |                 <span class="tips">如果设置了该属性，视频将自动播放。</span>
 31 |             </li>
 32 |             <li>
 33 |                 controls:规定浏览器应该为视频提供播放控件。<br/>
 34 |                 浏览器控件应该包括：播放、暂停、定位、音量、全屏切换、字幕（如果可用）、音轨（如果可用）
 35 |                 <span class="tips">如果设置了该属性，则规定不存在作者设置的脚本控件。</span>
 36 |             </li>
 37 |             <li>
 38 |                 loop:当设置该属性后，它规定视频的音频输出应该被静音。
 39 |             </li>
 40 |             <li>
 41 |                 muted:规定单元格的内边距，值为数字，代表内边距的百分比
 42 |                 <span class="tips">从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来添加内边距</span>
 43 |             </li>
 44 |             <li>
 45 |                 poster:规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
 46 |                 <span class="tips">如果未设置该属性，则使用视频的第一帧来代替</span>
 47 |             </li>
 48 |             <li>
 49 |                 preload:规定是否在页面加载后载入视频。其值如下：
 50 |                 <span class="tips">如果设置了 autoplay 属性，则忽略该属性。</span>
 51 |             </li>
 52 |      
 53 |             <li>
 54 |                 src:规定要播放的视频的 URL。
 55 |                 <span class="tips">其值可以填相对URL和绝对URL</span>
 56 |             </li>
 57 |         </ul>
 58 |         <h1>audio标签属性列表</h1>
 59 |         <ul>
 60 |             <li>
 61 |                 autoplay:如果出现该属性，则音频在就绪后马上播放,取值为autoplay。
 62 |             </li>
 63 |             <li>
 64 |                 controls:如果出现该属性，则向用户显示控件，比如播放按钮。<br/>
 65 |             </li>
 66 |             <li>
 67 |                 loop:如果出现该属性，则每当音频结束时重新开始播放。
 68 |             </li>
 69 |             <li>
 70 |                 muted:规定视频输出应该被静音。
 71 |             </li>
 72 |             <li>
 73 |                 preload:如果出现该属性，则音频在页面加载时进行加载，并预备播放。
 74 |                 <span class="tips">如果设置了 autoplay 属性，则忽略该属性。</span>
 75 |             </li>
 76 |      
 77 |             <li>
 78 |                 src:规定要播放的音频的 URL。
 79 |             </li>
 80 |         </ul>
 81 | 
 82 |         <h3>示例：</h3>
 83 |         <ul>
 84 |              <li>
 85 |                 autoplay属性：
 86 |                 <br/>
 87 |                 <video autoplay="autoplay">
 88 |                   <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" />
 89 |                   <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />
 90 |                 Your browser does not support the video tag.
 91 |                 </video>
 92 |             </li>
 93 |             <li>
 94 |                 controls工具栏：
 95 |                 <br/>
 96 |                 <video controls="controls">
 97 |                   <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" />
 98 |                   <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />
 99 |                 Your browser does not support the video tag.
100 |                 </video>
101 |             </li>
102 |             <li>
103 |                 loop循环播放：
104 |                 <br/>
105 |                 <video loop="loop" autoplay="autoplay">
106 |                   <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" />
107 |                   <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />
108 |                 Your browser does not support the video tag.
109 |                 </video>
110 |             </li>
111 |              <li>
112 |                 muted默认静音
113 |                 <br/>
114 |                 <video muted="muted" controls="controls">
115 |                   <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" />
116 |                   <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />
117 |                 Your browser does not support the video tag.
118 |                 </video>
119 |             </li>
120 |             
121 |             <li>
122 |                 添加封面
123 |                 <br/>
124 |                 <video poster="http://img4.duitang.com/uploads/item/201212/12/20121212161025_YGFjR.gif" controls="controls">
125 |                   <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" />
126 |                   <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />
127 |                 Your browser does not support the video tag.
128 |                 </video>
129 |             </li>
130 |             
131 |         </ul>
132 | 
133 |     </body>
134 | </html>


--------------------------------------------------------------------------------
/JavaScript/undefined.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html><html>
  2 | 
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <title>undefined</title>
  6 | <style type="text/css">
  7 | h1,
  8 | h2,
  9 | h3,
 10 | h4,
 11 | h5,
 12 | h6,
 13 | p,
 14 | blockquote {
 15 |     margin: 0;
 16 |     padding: 0;
 17 | }
 18 | body {
 19 |     font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
 20 |     font-size: 13px;
 21 |     line-height: 18px;
 22 |     color: #737373;
 23 |     background-color: white;
 24 |     margin: 10px 13px 10px 13px;
 25 | }
 26 | table {
 27 | 	margin: 10px 0 15px 0;
 28 | 	border-collapse: collapse;
 29 | }
 30 | td,th {	
 31 | 	border: 1px solid #ddd;
 32 | 	padding: 3px 10px;
 33 | }
 34 | th {
 35 | 	padding: 5px 10px;	
 36 | }
 37 | 
 38 | a {
 39 |     color: #0069d6;
 40 | }
 41 | a:hover {
 42 |     color: #0050a3;
 43 |     text-decoration: none;
 44 | }
 45 | a img {
 46 |     border: none;
 47 | }
 48 | p {
 49 |     margin-bottom: 9px;
 50 | }
 51 | h1,
 52 | h2,
 53 | h3,
 54 | h4,
 55 | h5,
 56 | h6 {
 57 |     color: #404040;
 58 |     line-height: 36px;
 59 | }
 60 | h1 {
 61 |     margin-bottom: 18px;
 62 |     font-size: 30px;
 63 | }
 64 | h2 {
 65 |     font-size: 24px;
 66 | }
 67 | h3 {
 68 |     font-size: 18px;
 69 | }
 70 | h4 {
 71 |     font-size: 16px;
 72 | }
 73 | h5 {
 74 |     font-size: 14px;
 75 | }
 76 | h6 {
 77 |     font-size: 13px;
 78 | }
 79 | hr {
 80 |     margin: 0 0 19px;
 81 |     border: 0;
 82 |     border-bottom: 1px solid #ccc;
 83 | }
 84 | blockquote {
 85 |     padding: 13px 13px 21px 15px;
 86 |     margin-bottom: 18px;
 87 |     font-family:georgia,serif;
 88 |     font-style: italic;
 89 | }
 90 | blockquote:before {
 91 |     content:"\201C";
 92 |     font-size:40px;
 93 |     margin-left:-10px;
 94 |     font-family:georgia,serif;
 95 |     color:#eee;
 96 | }
 97 | blockquote p {
 98 |     font-size: 14px;
 99 |     font-weight: 300;
100 |     line-height: 18px;
101 |     margin-bottom: 0;
102 |     font-style: italic;
103 | }
104 | code, pre {
105 |     font-family: Monaco, Andale Mono, Courier New, monospace;
106 | }
107 | code {
108 |     background-color: #fee9cc;
109 |     color: rgba(0, 0, 0, 0.75);
110 |     padding: 1px 3px;
111 |     font-size: 12px;
112 |     -webkit-border-radius: 3px;
113 |     -moz-border-radius: 3px;
114 |     border-radius: 3px;
115 | }
116 | pre {
117 |     display: block;
118 |     padding: 14px;
119 |     margin: 0 0 18px;
120 |     line-height: 16px;
121 |     font-size: 11px;
122 |     border: 1px solid #d9d9d9;
123 |     white-space: pre-wrap;
124 |     word-wrap: break-word;
125 | }
126 | pre code {
127 |     background-color: #fff;
128 |     color:#737373;
129 |     font-size: 11px;
130 |     padding: 0;
131 | }
132 | sup {
133 |     font-size: 0.83em;
134 |     vertical-align: super;
135 |     line-height: 0;
136 | }
137 | * {
138 | 	-webkit-print-color-adjust: exact;
139 | }
140 | @media screen and (min-width: 914px) {
141 |     body {
142 |         width: 854px;
143 |         margin:10px auto;
144 |     }
145 | }
146 | @media print {
147 | 	body,code,pre code,h1,h2,h3,h4,h5,h6 {
148 | 		color: black;
149 | 	}
150 | 	table, pre {
151 | 		page-break-inside: avoid;
152 | 	}
153 | }
154 | </style>
155 | </head>
156 | <body>
157 | <h1 id="toc_0">undefined</h1>
158 | 
159 | <ul>
160 | <li>说明：全局对象的一个属性&quot;undefined&quot;.</li>
161 | <li>如何检测一个变量是不是undefined
162 | 
163 | <ul>
164 | <li>1.typeof v === &#39;undefined&#39;（angular.isUndefined）<br>
165 | <strong>如果一个变量根本没有被声明,必须使用typeof判断</strong></li>
166 | <li>2.v === undefined/void 0（underscore.isUndefined）</li>
167 | </ul></li>
168 | </ul>
169 | 
170 | 
171 | </body>
172 | 
173 | </html>
174 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 鲜果FE
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Basics
2 | Frontend Basic Knowledge
3 | 


--------------------------------------------------------------------------------
/Webpack/Concepts/README.md:
--------------------------------------------------------------------------------
1 | # Webpack: concepts
2 | 


--------------------------------------------------------------------------------
/Webpack/Concepts/concepts-part2.md:
--------------------------------------------------------------------------------
  1 | 	by huopanpan 2018.07
  2 | 
  3 | ### 目录：
  4 | * configuration
  5 | 	* 基本配置
  6 | 	* 多个Target
  7 | 	* 使用其他配置语言
  8 | * modules
  9 | 	* webpack模块
 10 | 	* 支持的模块类型
 11 | * module resolution
 12 | 	* webpack中的解析规则
 13 | 	* Resolving Loaders
 14 | 	* 缓存
 15 | * dependency graph
 16 | 	* 如何生成依赖关系
 17 | 	* Stats Data
 18 | 
 19 | ## 配置(configuration)
 20 | 
 21 | 你可能注意到，很少有webpack配置看起来完全相同。这是因为webpack的配置文件，是导出一个对象的JavaScript文件。此对象是由webpack根据对象定义的属性进行解析。
 22 | 
 23 | 因为webpack配置是标准的Node.js CommonJS模块，你可以做到以下事情：
 24 | 
 25 | - 通过 `require(...)` 导入其他文件
 26 | - 通过 `require(...)` 使用npm的工具函数
 27 | - 使用JavaScript控制流表达式，例如 `?:` 操作符
 28 | - 对常用值使用常量或变量
 29 | - 编写并执行函数来生成部分配置
 30 | 
 31 | 请在合适的时机使用这些特性。
 32 | 
 33 | 虽然技术上可以，但应避免以下做法：
 34 | 
 35 | - 在使用webpack命令接口(CLI)时访问CLI参数（应该编写自己的命令接口(CLI)，或者使用 `--env`）
 36 | - 导出不确定的值（调用webpack两次应该产生同样的输出文件）
 37 | - 编写很长的配置（应该将配置拆分为多个文件）
 38 | 
 39 | webpack配置可以有很多种的格式和风格，但为了团队能够易于理解和维护，团队中应始终采取同一种用法、格式和风格。
 40 | 
 41 | ### 基本配置
 42 | 
 43 | webpack.config.js
 44 | 
 45 | ```
 46 | var path = require('path');
 47 | 
 48 | module.exports = {
 49 |   mode: 'development',
 50 |   entry: './foo.js',
 51 |   output: {
 52 |     path: path.resolve(__dirname, 'dist'),
 53 |     filename: 'foo.bundle.js'
 54 |   }
 55 | };
 56 | ```
 57 | 
 58 | ### 多个Target
 59 | 
 60 | - 导出为一个函数
 61 | - 导出一个Promise
 62 | - 导出多个配置对象
 63 | 
 64 | **更详细地内容请参考之后配置中的configuration types部分。**
 65 | 
 66 | ### 使用其他配置语言
 67 | 
 68 | webpack接受以多种编程和数据语言编写的配置文件。
 69 | 
 70 | - TypeScript
 71 | - CoffeeScript
 72 | - Babel and JSX
 73 | 
 74 | **更详细地内容请参考之后配置中的configuration languages部分。**
 75 | 
 76 | ## 模块(modules)
 77 | 
 78 | 在模块化编程中，开发者将程序分解成离散功能块，并称之为模块。
 79 | 
 80 | 每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。精心编写的模块提供可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
 81 | 
 82 | Node.js从最一开始就支持模块化编程。然而，在web，模块化的支持正缓慢到来。在web存在多种支持JavaScript模块化的工具，这些工具各有优势和限制。webpack基于从这些系统获得的经验教训，并将模块的概念应用于项目中的任何文件。
 83 | 
 84 | ### 什么是webpack模块
 85 | 
 86 | 与Node.js模块相比较，webpack模块能够以各种方式表达它们的依赖关系，例子如下：
 87 | 
 88 | - ES2015 `import` 语句
 89 | - CommonJS require() 语句
 90 | - AMD define 和 require 语句
 91 | - css/sass/less 文件中的 `@import` 语句
 92 | - 样式( `url(...)` )或HTML文件（ `<img src=...>` ）中的图片链接(image url)
 93 | 
 94 | *webpack1 需要特定的loader来转换ES2015 `import` ，然而通过webpack2可以直接使用。*
 95 | 
 96 | ### 支持的模块类型
 97 | webpack通过loder可以支持各种语言和预处理器编写模块。loader描述了webpack如何处理非JavaScript(non-JavaScript)模块，并且在bundle中引入这些依赖。webpack社区已经为各种流行语言和语言处理器构建了loader，包括：
 98 | 
 99 | - CoffeeScript
100 | - TypeScript
101 | - ESNext(Babel)
102 | - Sass
103 | - Less
104 | - Stylus
105 | 
106 | 总的来说，webpack提供了可定制的、强大和丰富的API，允许任何技术栈使用webpack，保持了在开发、测试和生成流程中**无侵入性(non-opinionated)**。
107 | 
108 | **有关完整的列表，请参看之后的loader章节或自己编写。**
109 | 
110 | ## 模块解析(module resolution)
111 | 
112 | resolver是一个库(library),用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用。如下：
113 | 
114 | ```
115 | import foo from 'path/to/module'
116 | // 或者
117 | require('path/to/module')
118 | ```
119 | 所依赖的模块可以是来自应用程序代码或第三方的库(library)。resolver帮助webpack找到bundle中需要引入的模块代码，这些代码在包含每个 `require` / `import`语句中。当打包模块时，`webpack` 使用enhanced-resolve来解析文件路径
120 | 
121 | ### webpack中的解析规则
122 | 
123 | 使用 `enhanced-resolve` ,webpack能够解析三种文件路径：
124 | 
125 | - 绝对路径
126 | - 相对路径
127 | - 模块路径
128 | 
129 | ### 绝对路径
130 | 
131 | ```
132 | import "/home/me/file";
133 | 
134 | import "C:\\Users\\me\\file";
135 | ```
136 | 
137 | 已经取得文件的绝对路径，因此不需要进一步再做解析。
138 | 
139 | ### 相对路径
140 | 
141 | ```
142 | import "../src/file1";
143 | import "./file2";
144 | ```
145 | 
146 | 在这种情况下，使用 `import` 或 `require` 的资源文件(resource file)所在的目录被认为是上下文目录(context directory)。在 `import/require` 中给定的相对路径，会添加此上下文路径(context path)，以产生模块的绝对路径(absolute path)。
147 | 
148 | ### 模块路径
149 | 
150 | ```
151 | import "module";
152 | import "module/lib/file";
153 | ```
154 | 
155 | 模块将在 `resolve.modules` 中指定的所有目录内搜索。也可以替换初始模块路径，此替换路径通过使用 `resolve.alias` 配置选项来创建一个别名。
156 | 
157 | 一旦根据上述规则解析路径后，解析器(resolver)将检查路径是否指向文件或目录。如果路径指向一个文件：
158 | 
159 | - 如果路径具有文件扩展名，则直接将文件打包。
160 | 	 否则，将使用[ `resolve.extensions` ]选项作为文件扩展名来解析，此选项告诉解析器在解析中能够接受哪些扩展名（例如 `.js` ， `.jsx	`） 。
161 | 
162 | 如果路径指向一个文件夹，则采取以下步骤找到具有正确扩展名的正确文件：
163 | 
164 | - 如果文件夹中包含 `package.json` 文件，则按照顺序查找 `resolve.mainFields` 配置选项中指定的字段，并且 `package.json` 中的第一个这样的字段确定文件路径。
165 | - 如果 `package.json` 文件不存在或者 `package.json` 文件中的main字段没有返回一个有效路径，则按照顺序查找 `resolve.mainFiles` 配置选项中指定的文件名，看是否能在 import/require 目录下匹配到一个存在的文件名。
166 | - 文件扩展名通过 `resolve.extensions` 选项采用类似的方法进行解析。
167 | 
168 | webpack根据构建目标为这些选项提供了合理的默认配置。
169 | 
170 | ### 解析Loader(Resolving Loaders)
171 | 
172 | Loader解析遵循与文件解析器指定的规则相同的队则。但是 `resolveLoader` 配置选项可以用来为Loader提供独立的解析规则。
173 | 
174 | ### 缓存
175 | 
176 | 每个文件系统访问都被缓存，以便更快触发对同一文件的多个并行或串行请求。在观察模式下，只有修改过的文件会从缓存中摘出。如果关闭观察模式，在每次编译前清理缓存。
177 | 
178 | **更多详细地模块解析内容，请参考之后配置章节的解析(resolve)部分。**
179 | 
180 | ## 依赖图(dependency graph)
181 | 
182 | 任何时候，一个文件依赖于另一个文件，webpack就把此视为文件之间有依赖关系。这使得webpack可以接收非代码资源（例如图像或web字体），并且可以把它们作为依赖提供给应用程序。
183 | 
184 | webpack从命令行或配置文件中定义的一个模块列表开始，处理应用程序。从这个入口起点开始，webpack递归地构建一个依赖图，这个依赖图包含着应用程序所需的每个模块，然后将所有这些模块打包为少量的bundle - 通常只有一个 - 可由浏览器加载
185 | 
186 | *对于HTTP/1.1客户端，由webpack打包应用程序会尤其强大，因为在浏览器发起一个新请求时，它能够减少应用程序必须等待的实践。对于HTTP/2，可以使用代码拆分以及通过webpack打包来实现最佳优化*
187 | 
188 | 
189 | **如何生成依赖关系**
190 | 
191 | 通过 webpack 编译源文件时，用户可以生成包含有关于模块的统计数据的 JSON 文件。这些统计数据不仅可以帮助开发者来分析应用的依赖图表，还可以优化编译的速度。这个 JSON 文件可以通过以下的命令来生成:
192 | 
193 | ```
194 | webpack --profile --json > compilation-stats.json
195 | ```
196 | 
197 | 这个标识是告诉 webpack compilation-stats.json 要包含依赖的图表以及各种其他的编译信息。一般来说，也会把 --profile 一起加入，这样每一个包含自身编译数据的模块对象(modules object) 都会添加 profile 。
198 | 
199 | 为了能直观地观察依赖关系，可以访问[可视化依赖关系分析](http://webpack.github.io/analyse/)
200 | 
201 | **详细地Stats Data内容，可以参看API模块的Stats Data部分**concepts-part1
202 | 


--------------------------------------------------------------------------------
/Webpack/Concepts/concepts-part3.md:
--------------------------------------------------------------------------------
  1 | 	by pengxiaojia 2018.07
  2 | 	
  3 | ### 目录：
  4 | 
  5 | * The Manifest
  6 | 	* Runtime
  7 | 	* Manifest
  8 | * Target
  9 | 	* 用法
 10 | 	* 多个Target
 11 | 	* 资源
 12 | * Hot module replacement
 13 | 	*  应用程序中
 14 | 	*  编译器中
 15 | 	*  模块中
 16 | 	*  HMR Runtime中
 17 | 
 18 | ##The Manifest
 19 | **使用webpack构建的典型应用程序或站点,会有三种主要的代码类型**
 20 | 
 21 | 1. 你或你的团队编写的源码。
 22 | 2. 你的源码会依赖的任何第三方的 library 或 "vendor" 代码。
 23 | 3. webpack 的 runtime 和 manifest，管理所有模块的交互。
 24 | 
 25 | 这里重点介绍着三部分中的最后部分,**runtime**和**manifest**
 26 | 
 27 | ###Runtime
 28 | 这里我们只是简单的介绍一下. runtime连同manifest数据,主要是指:在浏览器运行时，webpack 用来连接模块化的应用程序的所有代码。runtime 包含：在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。
 29 | 
 30 | ###Manifest
 31 | 那么，一旦你的应用程序中，形如 index.html 文件、一些 bundle 和各种资源加载到浏览器中，会发生什么？你精心安排的 /src 目录的文件结构现在已经不存在，所以 webpack 如何管理所有模块之间的交互呢？这就是 manifest 数据用途的由来……
 32 | 
 33 | 当编译器(compiler)开始执行、解析和映射应用程序时，它会保留所有模块的详细要点。这个数据集合称为 "Manifest"，当完成打包并发送到浏览器时，会在运行时通过 Manifest 来解析和加载模块。无论你选择哪种模块语法(ES6,commonJS,AMD)，那些 import 或 require 语句现在都已经转换为 \__webpack _ require__ 方法，此方法指向模块标识符(module identifier)。通过使用 manifest 中的数据，runtime 将能够查询模块标识符，检索出背后对应的模块。
 34 | 
 35 | ###问题
 36 | 所以，现在你应该对 webpack 在幕后工作有一点了解。“但是，这对我有什么影响呢？”，你可能会问。答案是大多数情况下没有。runtime 做自己该做的，使用 manifest 来执行其操作，然后，一旦你的应用程序加载到浏览器中，所有内容将展现出魔幻般运行。然而，如果你决定通过使用浏览器缓存来改善项目的性能，理解这一过程将突然变得尤为重要。
 37 | 
 38 | 通过使用 bundle 计算出内容散列(content hash)作为文件名称，这样在内容或文件修改时，浏览器中将通过新的内容散列指向新的文件，从而使缓存无效。一旦你开始这样做，你会立即注意到一些有趣的行为。即使表面上某些内容没有修改，计算出的哈希还是会改变。这是因为，runtime 和 manifest 的注入在每次构建都会发生变化。
 39 | 
 40 | 查看管理构建文件指南的 [manifest](https://www.webpackjs.com/guides/output-management#the-manifest) 部分，了解如何提取 manifest，并阅读下面的指南，以了解更多长效缓存错综复杂之处。
 41 | ###进一步阅读
 42 | 
 43 | - [分离 Manifest](https://survivejs.com/webpack/optimizing/separating-manifest/)
 44 | - [使用 webpack 提供可预测的长效缓存](https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31)
 45 | - [缓存](https://www.webpackjs.com/guides/caching)
 46 | 
 47 | ##Target
 48 | **因为服务器和浏览器代码都可以用 JavaScript 编写，所以 webpack 提供了多种构建目标(target)，你可以在你的 webpack 配置中设置。**
 49 | 
 50 | ###用法
 51 | 设置 target 属性，只需要在你的 webpack 配置中设置 target 的值。
 52 | 
 53 | **webpack.config.js**
 54 | 
 55 | ```
 56 | module.exports = {
 57 |   target: 'node'
 58 | };
 59 | ```
 60 | 在上面例子中，使用 node webpack 会编译为用于「类 Node.js」环境（使用 Node.js 的 require ，而不是使用任意内置模块（如 fs 或 path）来加载 chunk）。
 61 | 每个target都有各种部署(deployment)/环境(environment)特定的附加项，以支持满足其需求。查看[target 的可用值](https://www.webpackjs.com/configuration/target)。
 62 | 
 63 | ###多个Target
 64 | 尽管 webpack 不支持向 target 传入多个字符串，你可以通过打包两份分离的配置来创建同构的库：
 65 | 
 66 | **webpack.config.js**
 67 | 
 68 | ```
 69 | var path = require('path');
 70 | var serverConfig = {
 71 |   target: 'node',
 72 |   output: {
 73 |     path: path.resolve(__dirname, 'dist'),
 74 |     filename: 'lib.node.js'
 75 |   }
 76 |   //…
 77 | };
 78 | 
 79 | var clientConfig = {
 80 |   target: 'web', // <=== 默认是 'web'，可省略
 81 |   output: {
 82 |     path: path.resolve(__dirname, 'dist'),
 83 |     filename: 'lib.js'
 84 |   }
 85 |   //…
 86 | };
 87 | 
 88 | module.exports = [ serverConfig, clientConfig ];
 89 | ```
 90 | 上面的例子将在你的 dist 文件夹下创建 lib.js 和 lib.node.js 文件。
 91 | ###资源
 92 | 从上面的选项可以看出有多个不同的部署_目标_可供选择。下面是一个示例列表，以及你可以参考的资源。
 93 | 
 94 | [compare-webpack-target-bundles](https://github.com/TheLarkInn/compare-webpack-target-bundles)：有关「测试和查看」不同的 webpack target 的大量资源。也有大量 bug 报告。
 95 | 
 96 | [Boilerplate of Electron-React Application](https://github.com/chentsulin/electron-react-boilerplate)：一个 electron 主进程和渲染进程构建过程的很好的例子。
 97 | 
 98 | ##Hot module replacement
 99 | 
100 | **模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。**主要是通过以下几种方式，来显著加快开发速度：
101 | 
102 | - 保留在完全重新加载页面时丢失的应用程序状态。
103 | - 只更新变更内容，以节省宝贵的开发时间。
104 | - 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
105 | 
106 | ###这一切是如何运行的
107 | 让我们从一些不同的角度观察，以了解 HMR 的工作原理.
108 | 
109 | ####在应用程序中
110 | 通过以下步骤，可以做到在应用程序中置换(swap in and out)模块：
111 | 
112 | 1. 应用程序代码要求 HMR runtime 检查更新。
113 | 2. HMR runtime（异步）下载更新，然后通知应用程序代码。
114 | 3. 应用程序代码要求 HMR runtime 应用更新。
115 | 4. HMR runtime（异步）应用更新。
116 | 
117 | 你可以设置 HMR，以使此进程自动触发更新，或者你可以选择要求在用户交互时进行更新。
118 | 
119 | ####在编译器中
120 | 除了普通资源，编译器(compiler)需要发出 "update"，以允许更新之前的版本到新的版本。"update" 由两部分组成：
121 | 
122 | 1. 更新后的 [manifest](https://www.webpackjs.com/concepts/manifest)(JSON)
123 | 2. 一个或多个更新后的 chunk (JavaScript)
124 | 
125 | manifest 包括新的编译 hash 和所有的待更新 chunk 目录。每个更新 chunk 都含有对应于此 chunk 的全部更新模块（或一个 flag 用于表明此模块要被移除）的代码。
126 | 
127 | 编译器确保模块 ID 和 chunk ID 在这些构建之间保持一致。通常将这些 ID 存储在内存中（例如，使用 [webpack-dev-server](https://www.webpackjs.com/configuration/dev-server/) 时），但是也可能将它们存储在一个 JSON 文件中。
128 | 
129 | ####在模块中
130 | HMR 是可选功能，只会影响包含 HMR 代码的模块。举个例子，通过 style-loader 为 style 样式追加补丁。 为了运行追加补丁，style-loader 实现了 HMR 接口；当它通过 HMR 接收到更新，它会使用新的样式替换旧的样式。
131 | 
132 | 类似的，当在一个模块中实现了 HMR 接口，你可以描述出当模块被更新后发生了什么。然而在多数情况下，不需要强制在每个模块中写入 HMR 代码。如果一个模块没有 HMR 处理函数，更新就会冒泡。这意味着一个简单的处理函数能够对整个模块树(complete module tree)进行更新。如果在这个模块树中，一个单独的模块被更新，那么整组依赖模块都会被重新加载。
133 | 
134 | 有关 module.hot 接口的详细信息，请查看 [HMR API](https://www.webpackjs.com/api/hot-module-replacement) 页面。
135 | 
136 | ####在HMR Runtime中
137 | 这些事情比较有技术性……如果你对其内部不感兴趣，可以随时跳到 [HMR API](https://www.webpackjs.com/api/hot-module-replacement) 页面或 [HMR 指南](https://www.webpackjs.com/guides/hot-module-replacement)。
138 | 
139 | 对于模块系统的 runtime，附加的代码被发送到 parents 和 children 跟踪模块。在管理方面，runtime 支持两个方法 check 和 apply。
140 | 
141 | check 发送 HTTP 请求来更新 manifest。如果请求失败，说明没有可用更新。如果请求成功，待更新 chunk 会和当前加载过的 chunk 进行比较。对每个加载过的 chunk，会下载相对应的待更新 chunk。当所有待更新 chunk 完成下载，就会准备切换到 ready 状态。
142 | 
143 | apply 方法将所有被更新模块标记为无效。对于每个无效模块，都需要在模块中有一个更新处理函数，或者在它的父级模块们中有更新处理函数。否则，无效标记冒泡，并也使父级无效。每个冒泡继续直到到达应用程序入口起点，或者到达带有更新处理函数的模块（以最先到达为准）。如果它从入口起点开始冒泡，则此过程失败。
144 | 
145 | 之后，所有无效模块都被（通过 dispose 处理函数）处理和解除加载。然后更新当前 hash，并且调用所有 "accept" 处理函数。runtime 切换回闲置状态，一切照常继续。
146 | 
147 | ###入门
148 | 在开发过程中，可以将 HMR 作为 LiveReload 的替代。[webpack-dev-server](https://www.webpackjs.com/configuration/dev-server/) 支持 hot 模式，在试图重新加载整个页面之前，热模式会尝试使用 HMR 来更新。更多细节请查看[模块热更新指南](https://www.webpackjs.com/guides/hot-module-replacement)。
149 | 
150 | 与许多其他功能一样，webpack 的强大之处在于它的可定制化。取决于特定项目需求，会有许多种配置 HMR 的方式。然而，对于多数实现来说，webpack-dev-server 能够配合良好，可以让你快速入门 HMR。
151 | 
152 | 


--------------------------------------------------------------------------------
/Webpack/Configuration/README.md:
--------------------------------------------------------------------------------
1 | # Webpack: configuration
2 | 


--------------------------------------------------------------------------------
/Webpack/Loaders/README.md:
--------------------------------------------------------------------------------
1 | # Webpack: loaders


--------------------------------------------------------------------------------
/Webpack/Loaders/loaders-part4.md:
--------------------------------------------------------------------------------
  1 | 	by wangpan 2018.11
  2 | 	
  3 | * postcss-loader
  4 | * raw-loader
  5 | * react-proxy-loader
  6 | * restyle-loader
  7 | * sass-loader
  8 | * script-loader
  9 | * source-map-loader
 10 | * style-loader
 11 | 
 12 | ### postcss-loader
 13 | 
 14 | install
 15 | >npm i -D postcss-loader
 16 | 
 17 | postcss.config.js
 18 | 
 19 | ```
 20 | module.exports = {
 21 | 	plugins: {
 22 | 		'postcss-cssnext': {}
 23 | 	}
 24 | }
 25 | ```
 26 | 
 27 | webpack.config.js
 28 | 
 29 | ```
 30 | module.exports = {
 31 | 	module: {
 32 | 		rules: [
 33 | 			{
 34 | 				test: /.\css/
 35 | 				use: [
 36 | 					'style-loader',
 37 | 					{ loader: 'css-loader', options: { importLoaders: 1 } },
 38 | 					'postcss-loader'
 39 | 				]
 40 | 			}
 41 | 		]
 42 | 	}
 43 | }
 44 | ```
 45 | 常用插件列表
 46 | 
 47 | 1. autoprefixer: 方便写出规范兼容的css，它的来源主要是can i use，插件的配置参数是browsers
 48 | 	```
 49 | 	module.exports = {
 50 | 		plugins: [
 51 | 			require('autoprefixer')({ browsers: 'last 2 versions' })
 52 | 		]
 53 | 	}
 54 | 	```
 55 | 2. postcss-partial-import: 让css文件支持@import
 56 | 3. cssnano : css代码的压缩工具
 57 | 4. postcss-px2rem: 移动端适配使用的将px转换为rem的插件
 58 | 
 59 | 推荐阅读：《深入Postcss Web设计》
 60 | 
 61 | 
 62 | #### raw-loader
 63 | 
 64 | 把文件内容作为字符串返回。
 65 | 
 66 | install
 67 | >npm install -D raw-loader
 68 | 
 69 | 
 70 | webpack.config
 71 | 
 72 | ```
 73 | module.exports = {
 74 | 	module: {
 75 | 		rules: [
 76 | 			test: /.\txt$/,
 77 | 			use: 'raw-loader'
 78 | 		]
 79 | 	}
 80 | }
 81 | ```
 82 | 
 83 | usage:
 84 | 
 85 | ```
 86 | import txt from 'file.txt'
 87 | ```
 88 | 
 89 | 
 90 | #### restyle-loader
 91 | 
 92 | 通过hash值来触发样式重载
 93 | 
 94 | install
 95 | > npm install --save-dev restyle-loader
 96 | 
 97 | 
 98 | webpack.config
 99 | 
100 | ```
101 | module.exports = {
102 | 	{
103 | 	  test: /\.css?$/,
104 | 	  use: [
105 | 	    {
106 | 	      loader: "restyle-loader"
107 | 	    },
108 | 	    {
109 | 	      loader: "file-loader",
110 | 	      options: {
111 | 	        name: "[name].css?[hash:8]"
112 | 	      }
113 | 	    }
114 | 	  ]
115 | 	}
116 | }
117 | ```
118 | 
119 | #### sass-loader
120 | 对sass/scss css预编译语言进行编译
121 | install
122 | >npm install --save-dev node-sass sass-loader
123 | 
124 | 
125 | webpack.config
126 | 
127 | ```
128 | module.exports = {
129 |   module: {
130 |     rules: [{
131 |       test: /\.scss$/,
132 |       use: [{
133 |           loader: "style-loader" // 将 JS 字符串生成为 style 节点
134 |       }, {
135 |           loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
136 |       }, {
137 |           loader: "sass-loader" // 将 Sass 编译成 CSS
138 |       }]
139 |     }]
140 |   }
141 | };
142 | ```
143 | 
144 | Source maps
145 | 
146 | 要启用 CSS source map，需要将 sourceMap 选项作为参数，传递给 sass-loader 和 css-loader
147 | 
148 | webpack.config
149 | 
150 | ```
151 | module.exports = {
152 |     devtool: "source-map", // any "source-map"-like devtool is possible
153 |     module: {
154 |         rules: [{
155 |             test: /\.scss$/,
156 |             use: [{
157 |                 loader: "style-loader"
158 |             }, {
159 |                 loader: "css-loader", options: {
160 |                     sourceMap: true
161 |                 }
162 |             }, {
163 |                 loader: "sass-loader", options: {
164 |                     sourceMap: true
165 |                 }
166 |             }]
167 |         }]
168 |     }
169 | };
170 | ```
171 | 
172 | 
173 | #### script-loader
174 | 在全局上下文(global context)执行一次 JS 脚本。在 node.js 中不会运行
175 | 
176 | install
177 | >npm install --save-dev script-loader
178 | 
179 | webpack.config.js
180 | 
181 | ```
182 | module.exports = {
183 |   module: {
184 |     rules: [
185 |       {
186 |         test: /\.exec\.js$/,
187 |         use: [ 'script-loader' ]
188 |       }
189 |     ]
190 |   }
191 | }
192 | ```
193 | 
194 | #### demo-source-map
195 | 对打包压缩过的文件进行源码映射，前提是该js文件有正确引用
196 | 
197 | install
198 | >npm i -D source-map-loader
199 | 
200 | 
201 | ```
202 | module.exports = {
203 |   module: {
204 |     rules: [
205 |       {
206 |         test: /\.js$/,
207 |         use: ["source-map-loader"],
208 |         enforce: "pre"
209 |       }
210 |     ]
211 |   }
212 | };
213 | ```
214 | 
215 | #### style-loader
216 | 
217 | Adds CSS to the DOM by injecting a <style> tag
218 | 
219 | install
220 | >npm i style-loader --save-dev
221 | 
222 | 
223 | webpack.config
224 | 
225 | ```
226 | {
227 |   module: {
228 |     rules: [
229 |       {
230 |         test: /\.css$/,
231 |         use: [
232 |           { loader: "style-loader" },
233 |           { loader: "css-loader" }
234 |         ]
235 |       }
236 |     ]
237 |   }
238 | }
239 | ```
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 
247 | 
248 | 


--------------------------------------------------------------------------------
/Webpack/Plugins/README.md:
--------------------------------------------------------------------------------
1 | # Webpack: plugins
2 | 


--------------------------------------------------------------------------------
/Webpack/Plugins/webpack-plugins19-24.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/Webpack/Plugins/webpack-plugins19-24.md


--------------------------------------------------------------------------------
/Webpack/Plugins/webpack-plugins25-30.md:
--------------------------------------------------------------------------------
  1 | 	by jiangxiang 2019.01
  2 | 
  3 | * NpmInstallWebpackPlugin
  4 | * PrefetchPlugin
  5 | * ProfilingPlugin
  6 | * ProgressPlugin
  7 | * ProvidePlugin
  8 | * SourceMapDevToolPlugin
  9 | 
 10 | 
 11 | # NpmInstallWebpackPlugin
 12 | 
 13 | 通过”自动安装“并”保存依赖“提高开发效率。
 14 | 
 15 | 通过Ctrl-C去复制一些构建脚本添加那些你也不清楚的依赖是低效的。
 16 | 
 17 | 取而代之，使用这个插件我们可以像往常一样使用require和import，那些缺少的依赖会自动的被安装。
 18 | 
 19 | #### 安装
 20 | 
 21 | ```sh
 22 | $ npm install --save-dev npm-install-webpack-plugin
 23 | ```
 24 | 
 25 | #### 使用
 26 | 
 27 | ```js
 28 | plugins: [
 29 |   new NpmInstallPlugin()
 30 | ]
 31 | // 等同于
 32 | plugins: [
 33 |   new NpmInstallPlugin({
 34 |     // 使用 --save 还是 --save-dev
 35 |     dev: false,
 36 |     // 安装缺省的同伴依赖
 37 |     peerDependencies: true,
 38 |     // 减少日志的打印
 39 |     quiet: false,
 40 |     // 在内部使用npm，还不支持yarn
 41 |     npm: 'tnpm' -> 'npm'
 42 |   });
 43 | ]
 44 | ```
 45 | 
 46 | 你也可以给dev属性传入一个Function，让它动态的进行判断
 47 | 
 48 | ```js
 49 | plugins: [
 50 |   new NpmInstallPlugin({
 51 |     dev: function(module, path) {
 52 |       return [
 53 |         "babel-preset-react-hmre",
 54 |         "webpack-dev-middleware",
 55 |         "webpack-hot-middleware",
 56 |       ].indexOf(module) !== -1;
 57 |     },
 58 |   }),
 59 | ]
 60 | ```
 61 | 
 62 | # PrefetchPlugin
 63 | 
 64 | 预取出普通的模块请求(module request)，可以让这些模块在他们被 import 或者是 require 之前就解析并且编译。使用这个预取插件可以提升性能。可以多试试在编译前记录时间(profile)来决定最佳的预取的节点。
 65 | 
 66 | ### 使用
 67 | 
 68 | ```js
 69 | new webpack.PrefetchPlugin([context], request);
 70 | ```
 71 | 
 72 | ### 选项
 73 | 
 74 | - ```context``` 文件夹的绝对路径
 75 | - ```request``` 普通模块的 request 字符串
 76 | 
 77 | http://webpack.github.io/analyse/#hints
 78 | 
 79 | # ProfilingPlugin
 80 | 
 81 | 生成Chrome描述文件，其中包含插件执行的时间。默认情况下输出events.json文件。可以使用outputPath选项提供自定义文件路径。
 82 | 
 83 | ### 选项
 84 | 
 85 | - ```outputPath``` 一个相对路径保存自定义的输出文件
 86 | 
 87 | ### 使用
 88 | 
 89 | ```js
 90 | new webpack.debug.ProfilingPlugin();
 91 | ```
 92 | 
 93 | 自定义输出文件
 94 | 
 95 | ```js
 96 | new webpack.debug.ProfilingPlugin({
 97 |   outputPath: 'profiling/profileEvents.json'
 98 | });
 99 | ```
100 | 
101 | # ProgressPlugin
102 | 
103 | ProgressPlugin提供了一种在编译期间自定义报告进度的方法。
104 | 
105 | ### 使用
106 | 
107 | 创建ProgressPlugin实例，当报告进度时将调用该钩子函数：
108 | 
109 | ```js
110 | const handler = (percentage, message, ...args) => {
111 |   // e.g. Output each progress message directly to the console:
112 |   console.info(percentage, message, ...args);
113 | };
114 | 
115 | new webpack.ProgressPlugin(handler);
116 | ```
117 | 
118 | - ```handler``` 钩子函数
119 | - ```percentage``` 一个介于0~1之间的值表示编译执行的进度百分比
120 | - ```message``` 一个当前执行进度的简短描述
121 | - ```...args``` 空或多个描述当前进度的附加字符串
122 | 
123 | # ProvidePlugin
124 | 
125 | 自动加载模块，而不必到处 import 或 require 。
126 | 
127 | ```js
128 | new webpack.ProvidePlugin({
129 |   identifier: 'module1',
130 |   // ...
131 | });
132 | ```
133 | 或
134 | ```js
135 | new webpack.ProvidePlugin({
136 |   identifier: ['module1', 'property1'],
137 |   // ...
138 | });
139 | ```
140 | 
141 | 任何时候，当 identifier 被当作未赋值的变量时，module 就会自动被加载，并且 identifier 会被这个 module 输出的内容所赋值。（模块的 property 用于支持命名导出(named export)）。
142 | 
143 | > 对于 ES2015 模块的 default export，你必须指定模块的 default 属性。
144 | 
145 | ### 使用：jQuery
146 | 
147 | 要自动加载 jquery，我们可以将两个变量都指向对应的 node 模块：
148 | 
149 | ```js
150 | new webpack.ProvidePlugin({
151 |   $: 'jquery',
152 |   jQuery: 'jquery'
153 | });
154 | ```
155 | 
156 | 然后在我们任意源码中：
157 | 
158 | ```js
159 | // in a module
160 | $('#item'); // <= 起作用
161 | jQuery('#item'); // <= 起作用
162 | // $ 自动被设置为 "jquery" 输出的内容
163 | ```
164 | 
165 | ### 使用：jQuery 和 Angular 1 
166 | 
167 | ```js
168 | new webpack.ProvidePlugin({
169 |   'window.jQuery': 'jquery'
170 | });
171 | ```
172 | 
173 | ### 使用：Lodash Map
174 | 
175 | ```js
176 | new webpack.ProvidePlugin({
177 |   _map: ['lodash', 'map']
178 | });
179 | ```
180 | 
181 | ### 使用：Vue.js
182 | 
183 | ```js
184 | new webpack.ProvidePlugin({
185 |   Vue: ['vue/dist/vue.esm.js', 'default']
186 | });
187 | ```
188 | 
189 | # SourceMapDevToolPlugin
190 | 
191 | 本插件实现了对 source map 生成，进行更细粒度的控制。它可以替代 devtool 选项。
192 | 
193 | ```js
194 | new webpack.SourceMapDevToolPlugin(options);
195 | ```
196 | 
197 | ### 选项
198 | 
199 | - ```test(string|regex|array)``` 匹配并生成相关模块的sourcemap（默认支持```.js```，```.mjs```，和```.css```）
200 | - ```include(string|regex|array)``` 匹配的模块为其生成sourcemap
201 | - ```exclude(string|regex|array)``` 匹配的模块不为其生成sourcemap
202 | - ```filename(string)``` 定义输出的sourcemap的文件名（默认是内联的base64字符）
203 | - ```append(string)``` 打印给定的文件源地址，通常是以```#sourceMappingURL```添加注释，```[url]```会被替换成sourcemap文件名，```false```会取消打印文件源地址
204 | - ```moduleFilenameTemplate(string)``` 
205 | - ```module(boolean)``` 表示loader是否生成source map（默认为```true```）
206 | - ```columns(boolean)``` 是否支持列映射（默认为```true```）
207 | - ```noSources(boolean)``` 防止源文件的内容被包含在 source map 里（默认为 ```false```）。
208 | - ```publicPath(string)``` 生成带 public path 前缀的绝对 URL，例如：```https://example.com/project/```。
209 | - ```fileContext(string)``` 使得 [file] 参数作为本目录的相对路径。
210 | 
211 | > 如果在开发模式下使用自定义配置，需要手动将devtool设置为false，即```devtool: false```
212 | 
213 | ### 使用
214 | 
215 | ### 基本用法
216 | 
217 | 如下的配置等价于```devtool: inline-source-map```
218 | 
219 | ```js
220 | module.exports = {
221 |   // ...
222 |   devtool: false,
223 |   plugins: [
224 |     new webpack.SourceMapDevToolPlugin({})
225 |   ]
226 | };
227 | ```
228 | 
229 | ### 排除 vendor 的 map
230 | 
231 | 以下代码会排除 vendor.js 内模块的 source map。
232 | 
233 | ```js
234 | new webpack.SourceMapDevToolPlugin({
235 |   filename: '[name].js.map',
236 |   exclude: ['vendor.js']
237 | });
238 | ```
239 | 
240 | ### 在宿主环境外部化 source map
241 | 
242 | 设置 source map 的 URL。在宿主环境需要授权的情况下很有用。
243 | 
244 | ```js
245 | new webpack.SourceMapDevToolPlugin({
246 |   append: '\n//# sourceMappingURL=http://example.com/sourcemap/[url]',
247 |   filename: '[name].map'
248 | });
249 | ```
250 | 
251 | 还有一种场景，source map 存储在上层目录中时：
252 | 
253 | ```js
254 | project
255 | |- dist
256 |   |- public
257 |     |- bundle-[hash].js
258 |   |- sourcemaps
259 |     |- bundle-[hash].js.map
260 | ```
261 | 
262 | 如下设置：
263 | 
264 | ```js
265 | new webpack.SourceMapDevToolPlugin({
266 |   filename: 'sourcemaps/[file].map',
267 |   publicPath: 'https://example.com/project/',
268 |   fileContext: 'public'
269 | });
270 | ```
271 | 
272 | 将会生成以下 URL：
273 | 
274 | ```js
275 | https://example.com/project/sourcemaps/bundle-[hash].js.map
276 | ```
277 | 


--------------------------------------------------------------------------------
/images/Object-Function-prototype-proto.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/images/Object-Function-prototype-proto.png


--------------------------------------------------------------------------------
/images/__proto__-prototype.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/images/__proto__-prototype.png


--------------------------------------------------------------------------------
/images/hasOwnProperty-browser-support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/images/hasOwnProperty-browser-support.png


--------------------------------------------------------------------------------
/images/toString.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xgfe/Basics/4a400988c69dd8cc8afd301f40b3f297eebc632c/images/toString.png


--------------------------------------------------------------------------------