花10分鐘看了一篇前端文章就入門了，現在複製粘貼這篇文章給你們看

行內標籤和塊標籤有哪些以及都有什麼特點

塊標籤

每一個塊屬性標籤都是從新的一行開始，而且之後的元素也都會從新的一行開始

可以設置寬度、高度，行高，距頂部距離，距底部距離

塊屬性標籤的寬度假如不做設置，會直接默認爲父元素寬度的100%

塊屬性標籤是可以直接嵌套的

p標籤中不能嵌套div標籤

<div>、<p>、<h1>…<h6>、<ol>、<ul>、<li>、<address>、<blockquote>、<form>

行內標籤

行屬性標籤它和其它標籤處在同一行內

無法設置寬度，高度行高距頂部距離距底部距離

寬度是直接由內部的文字或者圖片等內容撐開的

行屬性標籤內部不能嵌套行屬性標籤

<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

img標籤的用法

<img src="/i/eg_tulip.jpg"  alt="上海鮮花港 - 鬱金香" />

img 元素向網頁中嵌入一幅圖像。

請注意，從技術上講，<img> 標籤並不會在網頁中插入圖像，而是從網頁上鍊接圖像。<img> 標籤創建的是被引用圖像的佔位空間。

HTML 與 XHTML 之間的差異

在 HTML 中，<img> 標籤沒有結束標籤。

在 XHTML 中，<img> 標籤必須被正確地關閉。

請描述一下cookies，sessionStorage和localStorage的區別？

相同點：都存儲在客戶端

不同點：

1.存儲大小

2.有效時間

數據與服務器之間的交互方式

image.png

設置Cookie

var name = "jack";  
var pwd = "123";  
var now = new Date();  
now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);//轉毫秒  
var path = "/";//可以是具體的網頁  
document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;//姓名  
document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密碼

高度跟據內容自適應的div 如何實現垂直居中？

div{
display:flex;
align-items:center;
}

Bom是什麼？列舉你知道的Bom對象

BOM是browser object model的縮寫，簡稱瀏覽器對象模型

Bom對象

window對象

document對象

location對象

navigator對象

screen對象

history對象

hybrid通信的實現原理

1.H5向Native通信

2.Native向H5通信

3.H5頁面之間通信

fetch和ajax的區別

Ajax

利用的是XMLHttpRequest對象來請求數據的

fetch

window的一個方法主要特點是

1、第一個參數是URL

2、第二個參數可選參數可以控制不同的init對象

3、使用了js 中的promise對象

data-xxx 屬性的作用是什麼？

data-爲H5新增的爲前端開發者提供自定義的屬性，這些屬性集可以通過對象的 dataset 屬性獲取，不支持該屬性的瀏覽器可以通過 getAttribute 方法獲取

什麼是瀏覽器的標準模式和怪異模式

標準模式：瀏覽器按W3C標準解析執行代碼

怪異模式：使用瀏覽器自己的方式解析執行代碼，因爲不同瀏覽器解析執行的方式不一樣，所以稱之爲怪異模式。

這裏寫圖片描述

XSS是什麼說一下？

XSS 指的是：黑客通過 “HTML 注入 ” 篡改網頁，插入惡意腳本，從而在用戶瀏覽網頁時，控制用戶瀏覽器的一種攻擊。

CSRF瞭解嗎？

CSRF（Cross-site request forgery）跨站請求僞造，也被稱爲“One Click Attack”或者Session Riding，通常縮寫爲CSRF或者XSRF，是一種對網站的惡意利用。

如何理解跨域

跨域是瀏覽器施加的安全顯示，即不同源的的網站不能問其他網站的內容

跨域，所謂域就是指http(s)://host:port，只要這一串與當前網站不一致，瀏覽器會認爲你已經跨域了。

image.png

cookie是什麼，怎麼存儲

Cookie是保存在客戶端的純文本文件

jquery.cookie.js擴展包

$.cookie("test", "1", { expires: 7 }); 

//讀取cookie
$.cookie("test");

//刪除cookie
$.cookie("test", "1", { expires: -1 }); 
//設置過期時間爲負就失效了

如何用CSS實現一個三角形

image.png

手寫bind函數

image.png

什麼是函數節流？

簡單講就是讓一個函數無法在短時間內連續調用，只有當上一次函數執行後過了規定的時間間隔，才能進行下一次該函數的調用。

image.png

實現一個響應式的正方形

image.png

倒計時怎麼做？

image.png

React 組件生命週期

image.png

React生命週期分爲了掛載（裝配）、更新、卸載以及捕錯四個狀態階段

image.png

react怎樣提高性能

react的組件渲染分爲初始化渲染和更新渲染

vue頁面之間的通信

第一種，父子組件通信

一.父組件向子組件傳值

image.png

二.子組件向父組件傳值或更新父組件值

image.png

vuex

狀態管理模式、集中式存儲管理

介紹一下CSS的盒子模型

盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)

有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 、padding

絕對定位、相對定位相關知識

positon:relative; 和 position:absolute

絕對定位：該元素相對於其父元素

相對定位：該元素相對於自己原有位置，偏移一定距離。相對的是自己。

什麼時候需要清除浮動？清除浮動方法總結

父元素高度塌陷了

在父元素的最後加一個冗餘元素併爲其設置clear:both

採用僞元素，這裏我們使用:after

使用overflow屬性，給父元素添加overflow:hidden ||auto

保持浮動層水平垂直居中

image.png

利用定位與margin：auto

image.png

如何保持文字水平垂直居中

text-align:center; /*水平居中*/

div{
width:200px;height:200px; /*設置div的大小*/
border:1px solid green; /*邊框*/
text-align: center; /*文字水平居中對齊*/
line-height: 200px; /*設置文字行距等於div的高度*/
overflow:hidden;
}
//進羣：983840410可以獲取Web前端編程從入門到精通學習資料！

display和position的取值、各自的意思和用法

position屬性取值：static(默認)、relative、absolute、fixed、inherit

display屬性取值：none、inline、inline-block、block、flex、inherit

選擇器的種類及其優先級

1、類型選擇器

2、簡單屬性選擇器

3、組合選擇器類型

歸納爲!important > 內聯 > ID > 類 > 僞類 | 屬性選擇 > 標籤 | 僞對象 > 通配符 > 繼承

canvas與svg的區別

image.png

px、em、rem的區別

px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的

em是相對長度單位。相對於當前對象內文本的字體尺寸。

rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。

JavaScript的基本數據類型有哪些、解釋一下原始數據類型和引用數據類型

ECMAScript包括兩個不同類型的值：基本數據類型和引用數據類型。

JS有六大數據類型：

Number、String、Boolean、Null、Undefined、Object

存在堆中：引用數據類型（object、function）

存在棧中：基本數據類型（number、string、boolean、null、unedfined）

基本數據類型(5個)：Undefined,Null,Boolean,Number,String

引用（複雜）數據類型：Object (object,array,function,date等)

聲明變量時不同的內存分配

不同的內存分配機制也帶來了不同的訪問機制

複製變量時的不同

參數傳遞的不同

談談null與undefined的區別

在JavaScript中，將一個變量賦值爲undefined或null，老實說，幾乎沒區別。

image.png

null表示"沒有對象"，即該處不應該有值。

undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。

變量類型檢測的方法有哪些

判斷數據類型共有四種方法：

1.typeof

2.instanceof

3.constructor

4.Object.prototype.toString.call

談談對原型鏈的理解，prototype是什麼，什麼時候用

prototype對象是實現面向對象的一個重要機制

在JavaScript中沒有類的概念，都是函數

1.原型和原型鏈是JS實現繼承的一種模型。

2.原型鏈的形成是真正是靠 proto 而非prototype

函數裏的this什麼含義，this的指向問題

1.當函數沒有用作構造函數時，this指向window

2.用作構造函數時，this指向新生成的對象

apply與call的區別，有哪些應用

本身無該方法，才選擇調用

call方法：call(obj,x,y,z,.....)

調用一個對象的一個方法，以另一個對象替換當前對象

apply方法：apply(obj,[x,y,z])

應用某一對象的一個方法，用另一個對象替換當前對象。

參數方式是不一樣的

各大瀏覽器的內核總結

image.png

JavaScript中split()和join()的區別

split()用於分割字符串，返回一個數組

join()用於連接多個字符或字符串

數組方法push()、pop()、unshift()、shift()

不同的是 push()、pop() 是從數組的尾部進行增減，unshift()、shift() 是從數組的頭部進行增減。

pop()用於移除數組末尾的最後一項，然後返回移除的項

unshift:將參數添加到原數組開頭，並返回數組的長度

shift()：刪除原數組第一項，並返回刪除元素的值

HTTP協議的理解、TCP/IP三次握手

image.png

HTML5新增標籤、屬性

語義化標籤的完善

section

article

aside

hgroup

header

footer

nav

figure

figcaption

mark

progress

time

wbr

datalist

details

Forms

新增input元素的種類：

search : 搜索輸入框

tel : 電話號碼輸入框

url : 輸入url地址

email : 郵件輸入框

number : 數字輸入框

range :特定範圍內的數值選擇器(通過拖動滾動條改變一定範圍內的數字)

color : 顏色選取器只在 Opera 和 Blackberry 瀏覽器

datetime : 顯示完整日期和時間 UTC標準時間

datetime-local : 顯示完整日期和時間

time : 顯示時間

month : 顯示月

week : 顯示周

es6與es5的差別

JavaScript一種動態類型、弱類型、基於原型的客戶端腳本語言

什麼是ES5

作爲ECMAScript第五個版本

什麼是ES6

ECMAScript6在保證向下兼容的前提下，提供大量新特性

CSS中clear的作用

圖像的左側和右側均不允許出現浮動元素：

img
  {
  float:left;
  clear:both;
  }

對閉包的理解

image.png

如何判斷一個變量是否是數組

1、instanceof
function isArray (obj) {
  return obj instanceof Array;
}
2、Array對象的 isArray方法
function isArray (obj) {
  return Array.isArray(obj);
}
3、Object.prototype.toString
function isArray (obj) {
  return Object.prototype.toString.call(obj) === '[object Array]';
}
//進羣：983840410可以獲取Web前端編程從入門到精通學習資料！

頁面加載完成有兩種事件

1.load是當頁面所有資源全部加載完成後

2.ready()是當DOM文檔樹加載完成後執行一個函數

談談你對es6箭頭函數的理解

在函數被傳遞後, 如果使用了箭頭函數, this 最終將指向其定義處上下文的 this 對象。

箭頭函數和普通函數一個很大的區別在於箭頭函數不重新綁定作用域。

談談你對模塊化的理解

模塊化——把程序劃分成獨立運行且可以獨立訪問的模塊，每個模塊完成一個子功能，把這些模塊集成起來構成一個整體，可以完成指定的功能滿足用戶的需求。

寫一個數組去重的方法，使用hash表的方式

image.png

border-radius:3px 4px 5px 6px

代表設置對象左上角3px圓角、右上角4px圓角、右下角5px圓角、左下角6px圓角。

對vuex的理解

核心概念

Vuex 是適用於 Vue.js 應用的狀態管理庫

對JavaScript面向對象的瞭解，是否有應用過？

image.png

談談你對MVVM開發模式的理解

MVVM分爲Model、View、ViewModel三者。

Model 代表數據模型，數據和業務邏輯都在Model層中定義；

View 代表UI視圖，負責數據的展示；

ViewModel 負責監聽 Model 中數據的改變並且控制視圖的更新，處理用戶交互操作；

Vue 有哪些指令？

v-html、v-show、v-if、v-for等等

v-if 和 v-show 有什麼區別？

image.png

Vue中如何監控某個屬性值的變化？

watch: {
      obj: {
      handler (newValue, oldValue) {
        console.log('obj changed')
      },
      deep: true
    }
  }

delete和Vue.delete刪除數組的區別

image.png

前端如何優化網站性能？

減少 HTTP 請求數量

控制資源文件加載優先級

利用瀏覽器緩存

減少重排

減少 DOM 操作

圖標使用 IconFont 替換

原生DOM對象轉jQuery對象：
var box = document.getElementById('box');
var $box = $(box);
jQuery對象轉原生DOM對象：
var $box = $('#box');
var box = $box[0];

jQuery如何擴展自定義方法

(jQuery.fn.myMethod=function () {
       alert('myMethod');
})
// 或者：
(function ($) {
        $.fn.extend({
             myMethod : function () {
                  alert('myMethod');
             }
        })
})(jQuery)

(function($){
 $.fn.extend({
  myMethod: function() {
   alert('myMethod');
  }
 })
})(jquery)
//進羣：983840410可以獲取Web前端編程從入門到精通學習資料！