Think in WEB

/* 这些语法都表示同一个颜色：a fully opaque hot pink */
/* 十六进制语法 */
#f09
#F09
#ff0099
#FF0099

/* 函数语法 */
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* 错误：不要混用数字和百分比 */
rgb(255 0 153)

/* 带有alpha值的十六进制语法 */
#f09f
#F09F
#ff0099ff
#FF0099FF

/* 带有alpha值的函数语法 */
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)

/* 空格语法 */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* 带有浮点值的函数语法 */
rgb(255, 0, 153.6, 1)
rgb(1e2, .5e1, .5e0, +.25e2%)

~~`#000000`~~ : `#000`
~~`#336699`~~ : `#369`

Margin-top: 2px; 
Margin-right: 5px; 
Margin-bottom: 2em; 
Margin-left: 15px;    

Padding:2px 5px 2em 15px; // top-right-bot-left
padding:10px 5px; // top&bot left&right
padding:10px 5px 15px; // // top left&right BOT
padding:10px; // left&right&top&bot

Border-width: 1px; 
Border-style: solid; 
Border-color: #000 

Font-style: italic; 
Font-variant: small-caps; 
Font-weight: bold; 
Font-size: 1em; 
Line-height: 140%; 
Font-family: sans-serif; 

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

Background-color: #f00; 
Background-image: url(background.gif); 
Background-repeat: no-repeat; 
Background-attachment: fixed; 
Background-position: 0 0; 

list-style-type: square; 
list-style-position: inside; 
List-style-image: url(image.gif)

* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
p.info.error { color:#900; font-weight:bold; }
#info { background:#ff0; }
p#info { background:#ff0; }

div p { color:#f00; }
#nav li { display:inline; }
#nav a { font-weight:bold; }
div > strong { color:#f00; }
p + p { color:#f00; }

p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }

p:first-child { font-style:italic; }
input[type=text]:focus { color:#000; background:#ffe; }
input[type=text]:focus:hover { background:#fff; }
q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }
/*-伪元素-*/
p:first-line { font-weight:bold; color;#600; }
.preamble:first-letter { font-size:1.5em; font-weight:bold; }
.cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }
a:link:after { content: " (" attr(href) ") "; }

$(document).ready(function(){
    document.getElementById('elm_id').style.fontSize = '12px'; // modify style 
    /* recommand use querySelector: 
    document.querySelector('#elm_id')\document.querySelector('.cls_id') ,
    support complex css selector like :
    var el = elem.querySelector("div.user-panel.main input[name='login']");
    var els = elem.querySelectorAll('div')*/
    $ = jQuery.noConflict();
    jQuery("#id").css("color", chk.checked ? "black" : "gray");
    # OR： document.querySelector('#id').style.color = "black"
    jQuery("#id").css("color", chk.checked ? "black" : "gray");    
    jQuery("#id").prop("disabled", true);
    jQuery("#id").attr("label", true);
    var checked = jQuery("#id").prop('checked');
    $("#info_area").css("padding-top", '20px'); // set padding 
    //显示隐藏id:none->inline-block
    jQuery("#id").css("display", 'inline-block');
    // document.getElementById('id').style.display='[none/inline/block/inline-block]' 
    // or: .style.visibility = 'hidden|visible'
    // gray all button-
    for (var elem of document.getElementsByClassName("mango_button")){
        elem.style.backgroundColor = "gray";
    }
    //attr vs prop:具有 true 和 false 两个属性的属性，
    // 如 checked, selected 或者 disabled 使用prop();
    //其他的使用 attr()-HTML attribute
    // trigger event.
    $('#_selecter').val(5).trigger('change');
    // each
    $(".infoTitle[title]").each(function( index,data){ console.log(data.innerHTML)} )
});

function GetBirthDay(str='1985-11-17'){
    var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正则表达式 匹配出生日期(简单匹配)
    r.exec(str);
    s1=RegExp.$1;
    s2=RegExp.$2;
    s3=RegExp.$3;
    console.log(s1+" "+s2+" "+s3)//结果为1985 10 15
}

/* Get search param url?key=val..*/
function GetVars(str)
{
    url=location.search.substring(1);
    var parameterList=url.split("&");
    for (var i=0;i<parameterList.length;i++)
    {
         parameter=parameterList[i].split("=");
         if (parameter[0] == str)
            return (decodeURIComponent(parameter[1]));
    }
}

function test(){
    if (thisThing) {
        debugger;
    }
}

var animals = [  
    { animal: 'Horse', name: 'Henry', age: 43 },   
    { animal: 'Dog', name: 'Fred', age: 13 },    
    { animal: 'Cat', name: 'Frodo', age: 18 }
    ];
console.table(animals)
const data = [{
  id: "7cb1-e041b126-f3b8",
  seller: "WAL0412",
  buyer: "WAL3023",
  price: 203450,
  time: 1539688433
},
{
  id: "1d4c-31f8f14b-1571",
  seller: "WAL0452",
  buyer: "WAL3023",
  price: 348299,
  time: 1539688433
},
{
  id: "b12c-b3adf58f-809f",
  seller: "WAL0012",
  buyer: "WAL2025",
  price: 59240,
  time: 1539688433
}];
console.table(data, ["id", "price"]);

console.time('Timer1'); 
var items = [];
for(var i = 0; i < 100000; i++){
    items.push({index: i});
}
console.timeEnd('Timer1');

console.trace('stack var')
console.error(new Error().stack)
console.info("now is %o !", new Date())
console.assert(1>2,"1>2 is ok?")
console.log("the operation was %csuccessful", 'color:green;background-color:LightGreen;padding:3px 5px') // %c带颜色打印
clear() //清除console

npm install --save-dev --global babel-preset-env babel-cli # instll babel @global scope
+.babelrc file: 
{"presets": ["env"]}
npm i -g express --registry https://registry.npm.taobao.org #npm临时使用淘宝镜像安装express依赖包
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev # 其他插件如webpack-dev-server、webpack-dev-middleware、webpack-hot-middleware
npm install style-loader --save
npm install --save-dev file-loader
npm install --save-dev csv-loader xml-loader

npm list --depth 0 # add -g  to check global packages.

module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
     ]
}

const path = require('path');

module.exports = {
  entry: './src/index.js', // input script, depends on lodash.js
  output: {
    filename: 'bundle.js', // output script
    path: path.resolve(__dirname, 'dist')
  }
};

npx webpack --config webpack.config.js