HTML和CSS通常有哪些功能？(聊~平時常出現的那些知識)

　　簡單一點點

HTML行內標籤有哪些？

　　通常行內的標籤包含哪些？

　　如：a - 錨點, span - 經常使用內聯或定義塊級容器, i - 斜體, b - 粗體, strong - 粗體強調, var - 定義變量, abbr - 強調縮寫

如何讓行內元素水平居中？

　　在給行內元素設置margin: 0 auto以前，咱們須要給父元素設置一個text-align: center水平居中，而後你想在行級元素幹嗎均可以。

如何讓塊級元素垂直居中？

　　第一種設置position，transform和top。

    position: relative;
    top: 50%;
    transform: translateY(-50%);

 　　第二種先給父元素設置display：:table，再給塊級元素display爲table-cell，而後設置vertical-align爲middle便可。

　　第三種

display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;

 

如何實現自適應？

　　設置calc的大小
　　基於上一個div塊的百分比實現，子的塊的二列布局，當第一個子的width: calc(100% - 另外一個子的寬度px)。

如何避免行內的標籤之間存在的空隙?

　　若是在塊內插入行內元素，有時候會出現行內元素以前存在的間距，此刻可使用float來給父元素清除浮動，使用float：left來達到效果。

如何給行文字添加...爲更多文字？

　　使用text-overflow設置溢出文字爲ellipsis，而後設置空白爲nowrap不換行元素，最後設置overflow：hidden便可。

如何給文字添加破折號？

　　使用text-decoration：line-through便可實現。商品

如何清除邊框之間的空隙？

　　使用border-spacing設置爲0便可實現無縫邊框的效果，最佳使用場景爲table內部和span的行樣式。

如何清除圖片的resize自適應？

　　給img設置樣式width爲100%便可。

如何覆蓋css的屬性？

　　在html塊設置class類以下：<div class="color_1 color_2" ></div>此刻的color_2將覆蓋color_1類，頁面會顯示color_2屬性。

margin水平居中的最佳方式。

　　避免使用margin: 0 auto方式，替代寫法爲margin-left: auto;margin-right: auto;

關於頁面底部出現多餘的白色部分？

　　儘可能設置body,html二個元素的css屬性height爲100%，避免只設置body一個元素的css屬性。

 如何讓子塊級元素居左？

　　若是子塊有二個，那麼前一個子塊級設置float:left，後面的子塊級就會隨着前一個子塊級的float浮動效果自動居左。

哪一種格式的圖片的最優？

　　首選webP格式。這種格式的圖片的體積比jpeg小，有利於加載速度。

src有何意思？

　　src可替換目前的元素。

cookie的使用方法？

　　cookie的獲取和設置須要自行封裝才能夠，而且每次加載都會暫用寬帶資源。

如何選取數組的元素？

　　使用數組的slice方法能夠選取某一個元素，第一個參數爲開始，第二個爲結束項。如[1,20,3].slice(1,2) => 20

如何垂直居中一個<img>?

　　設置display：table-cell，而後是text-align：center，最後是vertical-align：middle

關於超連接點擊失效的方法。

　　從新更換css的順序爲link visited hover active

如何定義最小的寬width和高height？

　　設置css屬性爲!important便可實現。

垂直居中的方法。

　　給父元素設置{display:flex; align-items:center;}

什麼是CSS盒模型？

　　就是由內容content、內邊距padding、邊框border、外邊距margin組成的一種思惟模型。若是給行內元素使用盒模型，須要設置display屬性，那麼寬度和高度會不同，高度是內容元素的高度，寬度是內容+內邊距+邊框+外邊距的和。ie盒模型寬度兼是由內容+內邊距+邊框組成。然而兼容盒模型使用box-sizing:border-box;那麼寬度爲內容+內邊距+邊框組成。

如何實現數組的添加、刪除？

　　使用數組的splice方法可以實現添加和刪除的數組，而且會改變原始調用的數組。第一個是開始項，第二個是刪除項的數量，第三個是插入項，後面更可能是插入項。

this如何指向？

　　this老是指向調用他的對象。

做用域有哪些？

　　分別有局部和全局做用域。做爲js的做用域有函數做用域，變量做用域，做用域鏈。函數做用域的意思指在函數內聲明的變量在函數內均可見的，那麼在函數內均可以使用。變量做用域的意思有二種，若是是全局變量內部能夠訪問外部，若是是局部變量外部不能訪問內部。做用域鏈的意思是在一個執行的環境中的有權訪問當前環境下(上)的活動變量和活動函數的有序集合。

 input聚焦如何清楚邊框？

　　使用input的css屬性focus設置爲外廓無outline: none;

es6有哪些特性？

　　使用箭頭代替func函數，class類代替this指針的功能，let和const具備可變與不可變量區別。

reactDom.render和react.render之間的區別。

　　reactDom.render主要爲了執行單一的dom組件，而非包含react的組件的功能，也就是說react包含reactdom的組件。也有的說，他是爲了把dom元素儲存起來和新的元素對比，若有不一樣進行渲染dom。

react的state和props之間的區別。

　　因react是自上而下執行，若是props是父，那麼state是子。因爲props是管道、道具之意，主讓某些物體從管道流出的做用，因此props如同遊戲裏面的傳遞門，那麼在JS框架內也同樣，因此props具備數據傳遞的功能，如同物體從左邊進右邊出，物體始終還保留原來的形態和特徵，故數據流進流出也同理，不可變動。state是狀態之意，物體原來的狀態，故表示本身的初始狀態，因此state就從我開始，我在幹嗎，在寫代碼，因此我是可變的，故我會管理本身的行爲和動做，所以state是管理數據的狀態。

v8引擎

　　chrome是基於v8引擎，它由虛擬機組成，故v8是由c語言寫，然而v8內部還可嵌入其餘語言如JavaScript，而後nodejs又是基於V8引擎開發的，那麼nodejs就是在虛擬機上的跑的，因此nodejs就是一臺服務器，又由於v8具備嵌入JavaScript的能力，因此nodejs能幫忙v8解釋和執行JavaScript，也就是說v8把解釋和執行JavaScript的能力交給了nodejs來完成，c能將一個類或者對象以二進制格式保存和讀入。

 轉換中文字符

　　utf-8轉換中文字符使用decodeURI("XXX")便可實現轉義。再轉使用encodeURI().

npm包的package.json文件devDependencies和dependencies區別？

　　dependencies是線上運行的依賴，devDependencies是開發階段的依賴庫。好比構建、開發、完成所需的插件都是開發環境的依賴庫(webpack/gulp/bower等)。而能在線上運行的代碼關聯的庫都是項目運行依賴庫(好比三大主流框架)。

npm命令

　　uninstall清除插件

JS中6種類型？

　　Number, String, Undefined, Null, Boolean, 最後object.

判斷JS類型有哪4種方式？

　　typeof, instanceof, constructor.name, Object.prototype.toString.call()

 跨域的解決方式。

　　使用jsonp的方式調用直接執行script腳本能夠直接訪問其餘端口的數據。

react的props/state/setstate的意思？

　　props就是傳遞數據的意思。state表示能夠修改的數據，他是管理和渲染有關的狀態。setState是異步調用，this.setState()被調用的時候,React會從新調用render方法來從新渲染Ui。

typeof不能使用object。

　　由於Null和object或array都是object對象。

待解決問題vue生命週期---雙向綁定原理 & 如何實現---vuex 原理---vue 數據更新後執行？

vue綁定事件。

　　v-on:click等價於@click，後面就是調用的方法。如下寫法會出錯。

<div id="demo">
        <div v-show="active">Show</div>
        <div v-on="mouseover: mouseOver">Hover over me!</div>
    </div>

var demo = new Vue({
    el: '#demo',
    data: {
        active: false
    },
    methods: {
        mouseOver: function(){
            this.active = !this.active;   
        }
    }
});

View Code

<div @mouseover="upHere = true" @mouseleave="upHere = false" >
    <h2> Something Something </h2>
    <some-component v-show="upHere"></some-component>
</div>

data : {
    upHere : false
}

View Code

 注：組件的data必須是一個函數定義的才能被監聽到，以下是正確的。https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

data: function () {
  return {
    count: 0
  }
}

View Code

 namespaceURI在createElementNS中的意思？
　　這不是一個計算值，它是基於範圍內的名稱空間聲明檢查的名稱空間查找的結果。節點命名空間在節點建立時被凍結。

tab切換返回操做。

　　使用shift+tab能夠實現返回操做。

如何初始化git倉庫。

　　rm -rf .git && git init && npm init

如何得到原型鏈的對象？

　　實例一個構造函數，只能得到構造函數的原型和內部的指針的對象，綁定在原型上的無論是新對象仍是新構造函數，都不能得到新構造函數內部的指針，只能得到新對象和構造函數上的屬性。

　　理解原型鏈

var obj = funciton () {}
var newObj = new obj()

此時 newObj.__proto__ 就是obj函數鏈上的一個對象，這個對象就是 obj.prototype 上的對象

此時 這個對象 obj.prototype.__proto__ 就是這個 Object.prototype 上的對象.
這個 Object.prototype.__proto__ 就是這個對象 null

 

windows下安裝node-gyp，缺乏vcbuild.exe編譯?

　　win7/8 evn: npm config set msvs_version 2015 --global (http://blog.mojijs.com/post/156.html)

盒子百分百寬帶，如何設置邊距的功能？

　　使用box-sizing：border-box便可實現邊距border-box

金錢的四捨五入的方法？

　　使用parseFloat(param).toFixed()但是實現四捨五入後取到小數位。

git如何查看提交歷史？

　　git log -g.或git log

git如何展開提交版本的 差別？

　　git log -p -2  （其中2是展示最近更新的差別）

git如何回退到上一個版本？

　　使用git log,而後使用git reset --hard '好比commit(3a2345a234d3eca323)',不過會把新添加到git commit的文件刪除掉。

pr的實現？

　　使用fork做者的repository到本身的repository，而後clone到本地，使用remote -v 看到本身的分支，而後push本地到遠程的repository合併以後，再和做者的ssh同步遠程地址創建鏈接git remote add upstream  git@github.com:koringz/s3.git，而後在本身的repository上進行new pull request，再點create pull request，點擊提交commit便可，等待做者的合併。遠程和本地合併git pull origin localversion.

> git撤銷修改？

　　使用git add. 以後使用git stash,再次使用git reset --soft ，表示保留修改部分。若是是--hard就不會保留修改的部分，撤銷暫存區使用git stash pop。

> 如何把分支推入遠程repo？

　　使用git push origin <branch-name>

> 如何設置placeholder的字體顏色？

input::-webkit-input-placeholder{
    color: #b1b1b1;
    opacity:1;
}
input::-ms-input-placeholder{
    color: #b1b1b1;
    opacity:1;
}

> 如何建立git遠程分支？

　　在 建立分支時，必定要在master主分支下面才能建立分支，若是在其餘分支下面，不可建立新的分支。

　　git branch v1.1便可建立分支，建立以後就要push到分支，最後推入才能看分支，git branch -a查看分支。crl+ z 退出git pull。切換分支git checkout your_name。刪除分支git branch -D your_name. 如何建立分支而且檢出分支 git checkout -b <branch-name> (# Create a new branch and check it out)

> 回退本地上一個版本，可是不會退遠程版本。

　　git reset --hard HEAD^

> 如何查找字符串的映射？

　　使用字符串的charAt方法，能夠查找字符串中第幾位的字符。好比想要找class和id，可使用charAt(0)查找第一個字符是否等於點'.'和'#'。'#hi'.charAt(0) == '#'

> 設計的寬高定位如何佈局？

　　目前已19比9執行寬高的定位。最佳的黃金分割，1:0.618

> git倉庫如何修改？

　　只須要修改本地和遠程的倉庫地址同樣便可。

　　git remote rn origin // 修改本地的地址

　　而後進入github頁面修改name

　　git remote add origin git@github.com:username/newreponame.git

> 瀏覽器如何返回？

　　使用window.history.length > 1? window.history.go(-1); 

> 數組去重的方式。

var hash = {}; 
arr = [].reduce(function(item, next) { 
hash[next.name] ? '' : hash[next.name] = true && item.push(next); 
return item 
}, []) 

 > 在vue裏面，如何把template加入到html？

　　在app.vue和html前後加上<route-view/> 或者使用<router-view/> ，也就是在當前頁面設置連接直接在當前頁面加載其餘子頁面的信息。

　　

<template>
    <div>
      <router-link to="">aaa
       </router-link>
    <div>
    <div>
    </router-view/>
    </div>    
</template>

// 在router config
{path: /a,component:[], children: [{path: /b}, component: []}]

 

> git merge?

打開([O]), 直接編輯((E)), 恢復((R)), 刪除交換文件((D)), 退出((Q)), 停止((A)):

> git衝突conflict？

git log --merge在git add. 推入

https://blog.csdn.net/hudashi/article/details/7668798

> 非git倉庫的文件在git裏面不能使用git移除文件,如何使用cmd？

　　打開cmd命令 執行rd /s filename 就是強制刪除文件下面帶有子文件的文件。

> npm開發環境下和依賴環境？

　　npm i --save-dev codeLib 和 npm i --save codeLib 

> jq的鼠標按下和鬆開事件？

　　分別是mousedown和mouseup。

> vue如何單獨給單頁面設置background顏色？

　　vue方法create內部設置don.body.style.background = "#fff"; ...height = "100vh"

> 背景的圖片和內容的高度一致？

　　使用background-size: contain;填充內容

> 在npm下面如何更新版本？

　　分別使用npm update -D 和npm update -S分別爲更新開發和依賴的庫。

> 如何替代disable的屬性不可點擊？

　　給元素設置css屬性便可使用 pointer-events：none：元素永遠不會成爲鼠標事件的target。不然pointer-events：inherit

> es6導入圖片的方式？

　　使用import導入便可。

import val from '../../image/back.png';

 > 經常使用的正則驗證的表達式有那哪些？（身份證、銀行卡、手機號等）

手機號：/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/

郵箱：/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/

密碼：/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_]{8,20}/gi

> sublime3如何選中多行？

　　使用命令ctrl+shift+L

> vue報錯誤提示爲‘ expected an Object, but got Function.’

　　通常封裝組件，在加載子組件以後，在當前vue文件裏面的script寫了methods，可是沒有給methods添加方法和對象就會致使出錯，因此methods方法不寫方法就不要聲明methods方法。

> git衝突取消？

　　git am --abort前面方法用於已經commit的更改

> git push推入分支出錯以下？

　　error: src refspec v1.6 matches more than one.

　　error: failed to push some refs to 
　　先查看分支git tag 隨後刪除多出的分支git tag -d v1.4

 > vue項目添加favicon文件的方式

　　在HtmlWebpackPlugin添加{inject: true, favicon: path.resolve('./src/template/favicon.ico'}

> 如何remote移除？

　　git remote remove origin 便可

> 如何使用git拉取fork的代碼？

　　git fetch upstream 而後  git fetch upstream/master

   或者https://blog.csdn.net/qq1332479771/article/details/56087333


> 爲什麼顯示Permission denied (publickey).？

fatal: Could not read from remote repository.Please make sure you have the correct access rights and the repository exists.

　　沒有添加公鑰ssh，因此須要添加到我的帳戶SSH keys下添加new SSH key。git生成ssh：cat ~/.ssh/id_rsa.pub

> git顯示以下hint錯誤？

error: failed to push some refs to 'git@github.com---------.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes

提示須要合併遠程以前其餘人提交的版本。

git pull origin yourVersion

 

> 遠程和本地pull合併時，如何操做以下界面 Please enter a commit message to explain why this merge is necessary.？

1.按鍵盤字母 i 進入insert模式 2.修改最上面那行黃色合併信息,能夠不修改 3.按鍵盤左上角"Esc" 4.輸入":wq",注意是冒號+wq,按回車鍵便可

 

括號大全？

<>()（）〈〉‹›﹛﹜『』〖〗［］《》﹝﹞〔〕{}「」【】︵︶︷︸︿﹀︹︺︽︾﹁﹂﹃﹄︻︼

>在git push的時候，有時候咱們會想辦法撤銷git commit的內容
一、找到以前提交的git commit的id
git log
找到想要撤銷的id
二、git reset –hard id
完成撤銷,同時將代碼恢復到前一commit_id 對應的版本
三、git reset id
完成Commit命令的撤銷，可是不對代碼修改進行撤銷，能夠直接經過git commit 從新提交對本地代碼的修改

> swiper的使用？

 var swiper = new Swiper('.swiper-container', {
      effect: 'coverflow',
      grabCursor: true,
      loop: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      initialSlide: 1,
       navigation: {
        nextEl: '.poster-prev-btn',
        prevEl: '.poster-next-btn',
      },
      coverflowEffect: {
        rotate: 0,
        stretch: 4,
        depth: 250,
        modifier: 1,
        slideShadows : true,
      },
      pagination: {
        el: '.swiper-pagination',
        type: 'custom',
        renderCustom: function (swiper, current, total) {

            $('.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-left').css({
              backgroundImage: 'linear-gradient(to left,rgba(222,222,222,.5),rgba(222,222,222,.5))'
            })

            var hr = '';
            switch(current)
            {
                case 1:
                    hr = ' <p class="honor-footer-bottom">上海黃金交易所會員資格證書</p>';
                    break;
                case 2:
                    hr = '<p class="honor-footer-bottom">上海黃金交易所行情發佈推廣單位（上海黃金交易所惟一指定單位）<p></p>';
                    break;
                case 3:
                    hr = '<p class="honor-footer-bottom">貴金屬投資領域人才培訓</p>';
                    break;
                case 4:
                    hr = '<p class="honor-footer-bottom">貴金屬投資領域人才培訓</p>';
                    break;
                default:
                    break;
            }
            return hr;
        }
      },

    });

View Code

 vue組件的switch開關重要的一環？

使用this.$emit('input', !this.checked ? this.activeValue : false);和change進行改變值便可實現其餘地方經過checked獲取value進行條件判斷返回true或false

cmd自動建立一個文件的方式。

使用cd. > file.js便可完成在當前目錄建立一個新的文件。

> 如何把父組件的元素傳入到組件內部？

使用的時候在子組件裏面v-bind="$attrs"便可把父組件的屬性全綁定到子組件的v-bind元素節點上。好比父<coinput placeholder="123"就會到子co-input內部的div上使用v-bind

> 如何給vue傳入數據爲精確類型？

使用冒號加參數 如 下<inp :name="2" ></inp>就能正確傳入一個數字類型的值。

> vue裏面傳遞數據報錯緣由？

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "checked"
vue2 在組件內部, 使用props數據只進行單項傳遞, 不可修改, 想要修改數據必須在data裏面設置。data() { return { checked: false }}

> vue組件封裝綁定問題？

在vue中，若是給data(){}綁定數據參數時，參數類型type爲數組[]，而且給當前input綁定了v-model值，那麼在當前input監聽事件時，若是點擊input要給每個多選框推入到參數裏面，必需要使用watch監聽value才能夠實現。

第二問題，不能直接把props傳遞的數據直接綁定到view層，必須把props參數綁定到data裏面的參數上，使用data上面的數據來完成綁定view層。由於props數據不可改變，可是view層數據都是要改變的值。

> css3動畫選擇的方法如何？

 默認狀況 初始狀態    
  transition: transform .3s;
  transform: rotate(180deg);

 改變的狀態
  transform: rotate(0deg);

 滾動原理？

監聽scroll是否觸發，若是trigger，就使用el.scrollTop是否大於當前offsetHeight便可

若是使用vue的冒號:？

只有在data裏面設置過的元素，才能使用冒號：進行props數據的傳輸。

> 如何把遠程repo分支更新到本地？ 

 git pull origin master

> css設置flex位置等比例佈局？

使用flex爲彈性佈局實現子節點等比例排列，同時子元素要設置的css樣式以下：width:100%;height:100%;flex-shrink:0;

> 動畫效果的執行？

使用transitionDuration：設置一個毫秒數 而後設置transform一個運動的路徑 能夠實現動畫效果

transition-duration: 300ms ; transfrom: translate3d(0,300px, 0);

> vue-cli安裝的步驟

地址 https://blog.csdn.net/wulala_hei/article/details/80488674

> cmd建立文件夾的方式？

用 md test 在當前路徑下創建test文件夾

> npm包如何發佈？

一、命令行工具登陸npm

二、npm init
如下爲package.json內容：

{
  "name": "codialog",
  "version": "2.0.0",
  "description": "it is a example npm",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "koringz",
  "license": "ISC"
}

三、同級目錄下新建index.js並編寫內容

四、使用發佈npm publish。注意不能有包的名稱和線上的同名。

> v-text && v-html && v-bind如何使用？

v-text只輸出純文本格式。 v-html會輸出html格式。 v-bind會把htm屬性綁定起來輸出。

> github如何得到我的信息以及得到釋放最新版本信息？

我的信息地址：https://api.github.com/repos/koringz/co-dialog

release最新地址：https://api.github.com/repos/koringz/co-dialog/releases/latest

> 兼容IE8如下的DOM屬性有哪些？

得到父標籤 parentElement（ie8不兼容parentNode） 數組的查找方式 $.inArray(arr,val)（不兼容indexOf）

 > 兼容IE8如下的undefined屬性有哪些？

typeof undefined == ‘undefined’（兼容ie8）

> 兼容IE8如下的border邊框的樣式寫法？

border: none;

border: 1px solid #aaa\9;
border:calc(0px);

> aria的意思？

參考w3，aria就是輔助驗證的意思。

好比：

aria-label作了不少相同的事情，但它適用於那些在屏幕上貼標籤不實際或不可取的狀況。 以MDN爲例：

<button aria-label =「Close」onclick =「myDialog.close（）」> X </ button>`
大多數人都可以直觀地推斷出這個按鈕會關閉對話框。 使用輔助技術的盲人可能會聽到「X」大聲朗讀，若是沒有視覺線索，這並不意味着什麼。 aria-label明確告訴他們按鈕會作什麼。

類型：aria-checked  aria-disabled aria-expanded aria-hidden aria-invalid aria-pressed aria-selected aria-hidden

> 選擇器封裝？

https://www.cnblogs.com/pengyan89/p/6907258.html

> ie8如下不支持getElementsByClassName？

var divTagName = parent.getElementsByTagName('*');
var divTagNameLength = divTagName.length;
var saveSensitiveElement = [];

　　

> ie7寬度百分百不兼容解決？

    *min-width: auto;
    *width: expression(this.offsetWidth < 1 ? auto : '392px');

> 兼容ie添加css樣式的方法？

地址http://www.bubuko.com/infodetail-1206683.html； 主要代碼：

var cssStyle = d.createStyleSheet();
cssStyle.cssText = s;

> form表單提交如何作？

給input type=「submit」 設置點擊事件，時間內部的返回值true就是form請求的method爲post或get方法成功，而且執行action地址。

 > vue下載方式如何？vue-cli 3.0

vue add @vue/eslint

> 如何添加vue的fontawesome-icon？

第一步添加

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { 
    faCoffee,
    faArrowCircleRight 
} from '@fortawesome/free-solid-svg-icons'

第二步

library.add(faCoffee, faArrowCircleRight)

第三步temp.vue調用

<font-awesome-icon icon="arrow-circle-right" :style="{ marginRight: 10 }"/>

 > echarts組件報錯如何解決？

"Error: Component series.candlestick not exists. Load it first."

setOptions({series: { name : " ", type: 'candlestick',}})，只要設置了series屬性，，那麼就要引入type類型相應的echarts插件才能使用。其中candlestick就是要引入的組件。

 import 'echarts/lib/chart/candlestick'

 

> echarts如何設置canvas的寬度

grid: {
    left: '-10%',
    right: '0%',
    bottom: '3%',
    containLabel: true // ** 必須有
}

> echarts如何設置線的顏色

xAxis 和 yAxis
xAxis : {
    axisLine:{
        lineStyle:{
            color:'#5D71B5', // 線的顏色
            width: 0,//這裏是爲了突出顯示加上的
        }
    },
}

> echarts設置線如下的背景漸變色

在series: {
    areaStyle: { // 設置這個便可
        normal: {
            color: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#5D71B5'
            }, {
                offset: 1,
                color: '#202437'
            }])
        }
    }
}

 > 全局安裝 browser-sync，如何在其餘文件夾使用browser-sync？

$ browser-sync start --server --files index.html

 > echarts如何設置圖表內部的背景色？

參考官網http://echarts.baidu.com/echarts2/doc/example.html

 splitArea : {
    show: true,
    areaStyle:{
       color:['rgba(205,92,92,0.3)','rgba(255,215,0,0.3)']
    }
}

http://echarts.baidu.com/echarts2/doc/example/axis.html

> echarts如何去掉線上面的小圓點。

series: {
    showSymbol: false //前者表示hover效果 或 Symbol: false
}

 > Unstaged changes after reset:

git stash drop #丟棄指定條目

>使用git pull提示refusing to merge unrelated histories

最新的版本須要添加 --allow-unrelated-histories 告訴 git 容許不相關歷史合併, 以後就是git status看到變化, 而後去commit便可推送

>vue-cli 3.0路由配置實現跨域的方式？

proxy: {
     '/api' : {
           target: 'http://147.211.0.1:8081',
          changeOrigin: true,               // needed for virtual hosted sites
     },
}

其中/api必須和代理target接口的第一個路徑相同的, vue的router開頭和接口的開頭必須有/api, 如此才能實現共同的跨域.
> hash的意思？
就是把一個任意長度的散列值壓縮成固定長度的值。
> git進入vim編輯模式如何操做？

進入vim
$ i  // 編輯插入

$ zz 或 wq 保存

$ :wq 保存並退出

 > git commit 如何修改已經提交的註釋？

git commit --amend,就會進入一個文本編輯界面（以下），在註釋的地方修改 ，保存而後退出，這樣註釋就修改了，再從新push.

 https://blog.csdn.net/zym18351887819/article/details/80468525

進入上4個歷史註釋 git rebase -i HEAD~4

修改之後要記得敲下面的命令：

 git add .    

git rebase --continue

若是你想放棄此次壓縮的話，執行如下命令：

git rebase --abort

> es6的類class如何使用？

靜態方法。相似直接綁定在函數外部的屬性上而已，不具備this指針做用

class Foo {
  static bar () {
    this.baz();
  }
  static baz () {
    console.log('hello');
  }
  baz () {
    console.log('world');
  }
}

Foo.bar() // hello

原型方法。綁定在this的原型上，須要new實例才能使用

class Father {
       constructor () {
            super();
       }
       
       foo () {
             return 'foo prototype '   
      }    
}

Father.foo() // 'foo prototype '

構造器

class Father {
     constructor () {
          super();
          this.val = 'yes'
     }
}
Father.val() // 'yes' 

例子：

class  Father {
      constructor () {
           this.x =1;//這個this指向的是Father對象的實例
      }
      print () {
           console.log(this.x);
      }
}

class Son extends Father {
      constructor () {
           super();
           this.x = 2;//這個this指向的是Son對象的實例
      }
      m() {
           super.print();       
      }
}
let s = new  Son();
s.m();
//2 
實際上執行的是 super.print.call(this)

class Father {}
Father.prototype.x = 2;

class Son extends Father {
  constructor() {
    super();
    console.log(super.x) // 2
  }
}

let b = new Son();
ES6 規定，經過super調用父類的方法時，super會綁定子類的this。

super既能夠看成函數使用，也能夠看成對象使用.
super就是繼承對象，super()調用會生成一個空對象，做爲middleware來調用父類的constructor構造函數，並從父類的構造函數裏面拿到this屬性，而後返回this對象，做爲子類constructor的

middleware並繼續調用父類的構造函數。

class Parent {
       static myMethod (msg) {
                console.log("static",msg);
       }
       myMethod (msg) {
                console.log("instance" ,msg);
       }
}

class Child  extends Parent {
      static myMethod(msg) {
             super.myMethod(msg);
      }
      myMethod (msg) {
             super.myMethod(msg);
      }
}

Child.myMethod(1); //static 1 var child = new Child(); child.myMethod(2); //instance 2

 

>原型鏈使用的較多，如何實現原生的繼承？

function flower (name) {
  this.name = name || 'Animal';
  this.sleep = function(){
    console.log(this.name + '...！');
  }
}

flower.prototype.some = function(food) {
  console.log(this.name + '...：' + food);
};

function son(name){
  flower.call(this);
  this.name = name || 'Tom';
}

var father = function(){};
father.prototype = flower.prototype;

//把實例做爲子類使用
son.prototype = new father();

var child = new son();
console.log(child.name);
console.log(child.sleep());
console.log(child instanceof flower); // true
console.log(child instanceof son); //true

 > sublime text3 如何安裝壓縮工具？

Sublime Text 3插件Minify安裝比較簡單，快捷鍵ctrl+shift+p調出package control輸入install package找到minify回車安裝便可，安裝結成功後該文檔在編輯器中彈出。

Install required Node.js CLI apps:

使用nodejs安裝所需依賴包

npm install -g clean-css-cli uglifycss js-beautify html-minifier uglify-js minjson svgo

如何使用快捷鍵 https://segmentfault.com/a/1190000012557203

ctrl + alt + m ( super + alt + m Mac OS X )

> git pull request

git checkout master . git merge --no-ff origin newVersion. git push

>.狀態行--狀態碼, 大體分類以下所示：

100-199 用於指定客戶端應相應的某些動做。

200-299 用於表示請求成功。

300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。

400-499 用於指出客戶端的錯誤。

500-599 用於支持服務器錯誤。

>前端學習路線

地址https://blog.csdn.net/u011047006/article/details/52597178

第三部分 ajax和http原理爲 重點

 >當client向Web服務器發出請求時，它向服務器傳遞了一個數據塊，也就是請求頭信息，HTTP請求信息由3部分組成：

一、請求方法/URI協議/版本

二、 請求頭(Request Header)

三、 請求正文

下面是一個HTTP請求的例子：

GET/sample.jspHTTP/1.1

Accept:image/gif.image/jpeg,*/*

Accept-Language:zh-cn

Connection:Keep-Alive

Host:localhost

User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)

Accept-Encoding:gzip,deflate

username=koringz&password=abc123

>服務器響應

1XX－信息類(Information),表示收到Web瀏覽器請求，正在進一步的處理中

2XX－成功類（Successful）,表示用戶請求被正確接收，理解和處理例如：200 OK

3XX - 重定向類(Redirection),表示請求沒有成功，客戶必須採起進一步的動做。

4XX - 客戶端錯誤(Client Error)，表示客戶端提交的請求有錯誤 例如：404 NOT  Found，意味着請求中所引用的文檔不存在。

5XX - 服務器錯誤(Server Error)表示服務器不能完成對請求的處理：如 500

>tcp傳輸控制協議？

第一：從傳輸層，先說下TCP鏈接，咱們要和服務端鏈接TCP鏈接，須要經過三次鏈接，包括：請求，確認，創建鏈接。即傳說中的「三次握手協議」。

>如何理解tcp | http

TCP是底層通信協議，定義的是數據傳輸和鏈接方式的規範
HTTP是應用層協議，定義的是傳輸數據的內容的規範
HTTP協議中的數據是利用TCP協議傳輸的，因此支持HTTP也就必定支持TCP      

HTTP支持的是www服務 
而TCP/IP是協議 
它是Internet國際互聯網絡的基礎。TCP/IP是網絡中使用的基本的通訊協議。 
TCP/IP其實是一組協議，它包括上百個各類功能的協議，如：遠程登陸、文件傳輸和電子郵件等，而TCP協議和IP協議是保證數據完整傳輸的兩個基本的重要協議。一般說TCP/IP是Internet協議族，而不僅僅是TCP和IP。

HTTP協議簡單來講，仍是請求，確認，鏈接。

> dns查看

地址：https://www.cnblogs.com/clsn/p/7736985.html

>TCP與UDP區別總結：

一、TCP面向鏈接（如打電話要先撥號創建鏈接）;UDP是無鏈接的，即發送數據以前不須要創建鏈接
二、TCP提供可靠的服務。也就是說，經過TCP鏈接傳送的數據，無差錯，不丟失，不重複，且按序到達;UDP盡最大努力交付，即不保證可靠交付

Tcp經過校驗和，重傳控制，序號標識，滑動窗口、確認應答實現可靠傳輸。如丟包時的重發控制，還能夠對次序亂掉的分包進行順序控制。

三、UDP具備較好的實時性，工做效率比TCP高，適用於對高速傳輸和實時性有較高的通訊或廣播通訊。

4.每一條TCP鏈接只能是點到點的;UDP支持一對一，一對多，多對一和多對多的交互通訊

五、TCP對系統資源要求較多，UDP對系統資源要求較少。

>css,jquery,vue,react,webpack,http,ajax原理？

css是從右往左查找的，當解析HTML時加載css，最後解析生成dom樹。jquery是操做dom實現的。vue是vm操做視圖和數據項結合的。webpack原理就是全部文件都以模塊化的方式處理。http原理基於tcp/ip協議實現的數據傳輸的協議。ajax原理。https://github.com/gwuhaolin/blog/issues/4

>vue改變router路由重定向

在routes對象的數組 json 數據中使用alias: '/'就能夠實如今http:aa.com/下面訪問baseurl地址 

> es6如何在外部循環綁定原型對象？

在constructor內部執行一個外部的函數，而且給函數傳入this指針便可綁定。this[name] = function () {} 

>es6 for of 替代for...in 和 forEach()

相似與foreach循環遍歷每一項，for(let el of [1,2,3]) { var getEL = el; if(el == 3) break;}

for...of 容許你遍歷 Arrays（數組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的數據結構等。

>array.fileter過濾

經過一個函數 return 輸出 一個條件，若是條件成立，推入到一個數組裏面儲存起來，條件全成立，最後返回一個新數組。新數組就是咱們的過濾以後的結果。

>babel轉換以後仍是不兼容ie

https://www.cnblogs.com/chris-oil/p/5931180.html

>babel錯誤 Error: Plugin/Preset files are not allowed to export objects, only functions

打開你的package.json 把一下插件版本換成下面的版本，而後再次從新安裝 （ cnpm i ）

    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",

 >git建立多個tag，查看tag。

// 查看簡寫的提交記錄 git log --oneline

// 查看本地的全部Tag git tag

// 查看某一系列tag git tag -l v1.*

建立Tag 命令 git tag -a v1.0 -m "對Tag的描述信息"

咱們也能夠對之前的某次commit 設置tag。 git tag -a v1.1 2b04b38 -m "Tag的描述信息"

提交本地的Tag 到遠程服務器的命令 git push origin --tags

刪除本地的tag 命令 git tag -d v1.0

要刪除遠程服務器上的tag。git push origin --delete tag v1.0

git切換到某個tag, 由於 tag 至關因而一個快照，是不能更改它的代碼  git checkout -b branch_name tag_name

合併上一個分支commit到當前分支，在當前執行 git merge 0bdc7e3(上一個id)

git修改分支名稱 git branch -m 舊名字 新名字

git 補打標籤便可 git tag -a v0.1.1 9fbc3d0 其中9fbc3d0就是已經commit註釋的提交。以後push推送v0.1.1便可

git如何更新tag，能夠先刪除tag v.10，而後再推送push origin --tags

>如何使用git tag操做new pull request

先切換到master主分支，使用git pull把線上代碼和本地合併，再使用git merge <tagname version>，把tag分支和本地master合併，再 git push -u origin master -f 把本地的主分支提交到remote遠程master分支合併。

>sublime編輯信息快捷鍵。

設置行高和保存https://segmentfault.com/a/1190000002596724

 >vue-li 3.0 路徑配置缺乏點.和.css內部url路徑

訪問html缺乏點在config文件下index.js 文件下對象{build: { assetsPublicPath : './'}} 其中css內部文件的url地址配置不對，重置找 {fallback: 'vue-style-loader',publicPath: '../../'}添加一行代碼 publicPath: '../../' 便可

>yarn 

yarn add：爲當前正在開發的包新增一個依賴包；
yarn init：初始化包；
yarn install：安裝package.json 文件裏定義的全部依賴包；
yarn publish：發佈一個包到包管理器；
yarn remove：從當前包裏移除一個未使用的包。

>.mjs後綴名

nodejs9支持的新語法的功能，建立全新的文件類型 index.mjs 文件，.mjs(Module JavaScript) 就是表示當前文件用 ESM 的方式進行加載，若是是普通的 .js 文件，則採用 CJS 的方式加載。如今暫時還不支持選擇性導入，import {a, b} from './cjs'。可是支持所有導入 import * as cjs from 'cjs'，此時 cjs 中會包含 default。你不能在 ESM 中使用 require()，由於 ESM 是使用 URL 的方式，因此會產生一些區別，因此不能使用 require()。

>git error : fatal: refusing to merge unrelated histories

強制拉去遠程和本地合併。git pull origin master --allow-unrelated-histories

>shift + insert表示插入一段選中的文本內容和粘貼內容。