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的内容
1、找到之前提交的git commit的id
git log
找到想要撤销的id
2、git reset –hard id
完成撤销,同时将代码恢复到前一commit_id 对应的版本
3、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包如何发布？

1、命令行工具登录npm

2、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"
}

3、同级目录下新建index.js并编写内容

4、使用发布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部分组成：

1、请求方法/URI协议/版本

2、 请求头(Request Header)

3、 请求正文

下面是一个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区别总结：

1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接
2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付

Tcp通过校验和，重传控制，序号标识，滑动窗口、确认应答实现可靠传输。如丢包时的重发控制，还可以对次序乱掉的分包进行顺序控制。

3、UDP具有较好的实时性，工作效率比TCP高，适用于对高速传输和实时性有较高的通信或广播通信。

4.每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信

5、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表示插入一段选中的文本内容和粘贴内容。

转载于:https://www.cnblogs.com/hao5599/p/7944855.html