鞏固一下前端的基礎知識
分類鞏固一下前端的基礎知識
好久沒有回頭看看html和js的一些基礎知識了，週末閒來無事的時候看到了一篇關於面試題的文章，忽然發現不少都忘記了，好的，那就趁熱打鐵，擼一波基礎知識吧。javascript
- 關於HTML
html是超文本標記語言(Hyper Text Markup Language）的簡寫，標準通用標記語言下的一個應用。HTML不是一個編程語言，而是一種標記語言，是網頁製做的必備。可包含圖片、音樂、視頻、連接、程序等非文本元素。css
- DOCTYPE的做用
DOCTYPE是document type的縮寫，它並非html的標籤，它是一種標記語言的文檔類型聲明，意在告訴瀏覽器當前HTML是用什麼版本編寫的。覽器要經過哪種規範（DTD）解析文檔（好比HTML或XHTML規範）。html
- HTML5新增了哪些新標籤以及優勢
<head>定義頁面或者區域頭部
<main>規定文檔主要內容
<footer>定義頁面或者區域底部
<article>定義一篇文章
<nav>定義導航連接
<scetion>定義一個區域
<aside>定義頁面內容部分側邊欄
<hgroup>用於對網頁或者區域段的標題組合
<figure>定義一組媒體內容以及標題
<figcaption>定義figure元素標題
<address>定義文章擁有者的聯繫信息前端新增表單標籤
date、time、email、url、search 等類型
video標籤
<video width="" height="" controls></video>
audio標籤
<audio src=""></audio>java優勢：根據內容的結構化使用語義化標籤，可以使開發者更好的閱讀和理解以及瀏覽器爬蟲與搜索引擎解析。css3
- 關於CSS
css是層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。es6
- 什麼是盒模型
盒模型也叫框模型 (Box Model)，包含元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）。計算一個盒子的寬高：content+padding+border。web
- 經常使用的css單位
1.px(表示像素，是絕對單位。不會由於其餘元素的尺寸變化而變化，頁面按照精確像素展現）
2.pt(磅 Points，是一種絕對單位，是物理長度單位，等於 1/72 寸。它的取值範圍和 px 相似）
3.em(相對於當前對象內文本的字體大小，如，body的font-size:12px;則body內部的子元素而言，1em=12px)
4.rem(相對於根元素字體大小的單位，也是一個相對單位，和em有點相似，只不過一個計算的規則依賴根元素一個依賴父元素)
5.vh(佈局視口高度的1/100)
6.vw(佈局視口高度的1/100)面試
- 清除浮動
何時須要清除浮動，清除浮動的方法有哪些？
當子元素設置了float屬性以後，而且父元素沒有設置寬高，是由子元素撐起來的，則會致使父元素的寬高坍塌，這個時候須要清除浮動。
方法：一、父元素設置屬性overflow:hidden || auto數據庫
二、子元素最後一個元素添加clear:both
三、父級定義僞類：after和zoom
{display:block;clear:both;content:"",visibility:hidden;height:0}
{zoom:1}
四、父級定義height
五、父級也一塊兒浮動
- 如何保持一個元素水平垂直居中
一、transform
.children{
position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%)
}
2.flexbox
.parent{
display:flex; justify-content:center; align-items: center;
}
3.當子元素寬高固定，父元素寬高不爲0時
.parent{
height:200px;
}
.children{
width:100px; height:100px; position:absolute; top:50%; left:50%; margin: -50px 0 0 -50px;
}
- css選擇器有哪些以及優先級是怎樣的
一、標籤選擇器（body、div等）
二、類選擇器（class="box")
三、ID選擇器（id="app")
四、全局選擇器（*{}）
五、組合選擇器（.header .header_box)
六、後代選擇器（.#header ul li）
七、羣組選擇器（.box .header .content）
八、繼承選擇器（ div p）
九、僞類選擇器（link visited active hover）
十、字符串匹配的屬性選擇符（^ $ * 分別對應開始、結尾、包含）
十一、子選擇器（div>p）
十二、css相鄰兄弟選擇器（div+p）
優先級：
!important > 行內樣式 > ID選擇器 > 類選擇器 > 標籤選擇器 > 通配符 > 繼承 > 瀏覽器默認屬性
每一個選擇器的權值：
行內樣式 1000
ID選擇器 100
class選擇器 10
HTML標籤選擇器 1
- sass
sass: 是一款強化css的輔助工具，它在css語法的基礎上變量、嵌套、混合、導入等高級功能，可提升開發效率。
sass有兩種語法格式，首先是scss，是在css3的語法基礎上進行拓展，全部css3語法在scss中都是通用的，同時加入sass的特點功能。此外，scss也支持大多數css hacks寫法以及瀏覽器前綴寫法，以及早期的IE濾鏡寫法，這種格式以.scss做爲拓展名。
另外一種也是最先的sass語法格式，被稱爲縮進格式（Indented Sass）一般簡稱「sass」，只是與scss相比個別地方採起了不一樣的表達方式。
使用：
定義變量（$width:5rem #box{width:$width})
混合器 （@Minxin class {
border-radius:5px; background:#f00;
}
.box{
@include class
}
具體更多用法參考文檔sass官方文檔。
- javascript基礎
一、js有哪些數據類型：
原始數據類型 - String Number Boolean Undefined null
對象類型 - Array Function Object
null和undefined的區別 - undefined是一個特殊值，一般不是變量還沒有賦值。null是在計算機中具備保留的值，用於指示指針不引用有效對象。能夠把undefined做爲空的變量，null看作是空的對象。
原始類型和引用類型的區別 - 基本類型指的是保存在棧內存中的簡單數據段，
引用類型指的是那些保存在堆內存中的對象，意思是，變量中保存的其實是隻是一個指針，這個指針執行內存中的另外一個位置，由該位置保存對象。
訪問的方式也不一樣 - 基本類型是按值訪問，操做也是他們的實際保存的值，
引用類型是按引用方式訪問，當查詢時，咱們須要先從棧中讀取內存地址，而後再找到保存在堆內存中的值。
複製的類型也不一樣 - 基本類型變量的複製，從一個變量向另外一個變量複製時，會在棧中建立一個新值，而後把值複製到新變量分配的位置上。
引用類型複製，複製的是存儲在棧中的指針，將指針複製到棧中爲新變量分配的空間中，而這個指針副本和原指針執行存儲在堆中的同一個對象；複製結束後，兩個變量實際上引用同一個對象，所以改變其中一個，講影響另外一個。
二、如何理解prototype，何時用prototype
在javascript中，全部的對象都是Object的實例，而且會繼承Object.prototype的屬性和方法，那麼，Object.prototype是全部對象的爸爸。咱們在建立對象時，就會有一些已經定義好的屬性，在定義函數時候，這個預約義的屬性就是prototype,是函數的一個屬性，是一個指向對象的指針。而定義一個普通對象時候，會生成一個__proto__,指向的是對象的構造函數prototype。
js中構造函數和實例之間有着微妙的關係，構造函數經過定義prototype來約定其實例的規格，再經過new來構造實例，他們的做用就是產生對象。經過new構造對象的特色是，obj的prototype指向了構造器的prototype屬性。
何時用prototype呢？
使用prototype的好處是不會產生額外的內存，全部實例化後的對象都會從原型上繼承這個方法，至關於公共方法，就是一個子類擁有父類的某些特性，又能夠給本身添加一些獨立的屬性，並且不會影響父時使用prototype。
prototype一般來解決一個問題：對象的建立比較耗費資源，例如，對象建立的時候須要訪問數據庫、讀取外部文件、須要使用網絡。這些都是比較耗費時間和內存的。
寫一個prototype小栗子：
function Parent(name){
this.drink = function(){
return 'I Can Drink\t' + name
}
}
let parent = new Parent('red wine')
console.log(parent.drink())//I Can Drink red wine
function Person (name, age) {
Parent.call(this,'beer')
this.name = name;
this.age = age;
}
Person.prototype.sayName = function() {
return this.name
}
let person = new Person('sunny', 18)
let person1 = new Person('cherry',28)
console.log(person.sayName()) // sunny
console.log(person1.drink())// I Can Drink beer
3.什麼是閉包、使用場景有哪些、閉包會引發什麼問題
概念：閉包就是一種能夠重複使用變量並且不會形成全局變量污染的機制，它是一種特殊的對象。
它由兩部分組成：函數以及建立該函數的環境。而環境是由閉包建立時在做用域中的任何局部變量組成。能夠用來定義私有屬性和方法。
小栗子：
function sum(){
let x = 1,y = 2;
function res(){ //閉包
return x + y
}
return res //閉包函數
}
let result = sum();
result() // 3
從上面的這個簡單的閉包例子能夠看出，在外部函數的內部建立一個內部函數。而且內部函數讀取着外部函數做用域中定義的局部變量，而內部函數又做爲外部函數的返回值。因此總結一下：閉包的做用域鏈包含着它本身的做用域，以及包含它的函數的做用域和全局做用域。
使用場景：須要設計私有變量和方法的時候。
舉栗子：
function Person() {
let name = 'sunny'
this.getName = () => name
}
let person = new Person;
person.name //undefined
person.getName() // sunny
閉包引發的問題：正常狀況下，一個函數的做用域和其全部變量在函數執行後都會被銷燬，可是在建立一個閉包後，這個函數會一直保存，直到閉包不存在爲止。也就是閉包函數會一直保存着父函數的執行期上下文。這樣就會形成內存泄露。
舉個栗子：
const handleDom = () => {
let dom = document.getElementById('#el');
let id = dom.id;
dom.onclick = () => {
console.log(id)
}
dom = null;
}
上面這個函數中的閉包函數裏保存着一個HTML元素，這就意味着這個元素沒法銷燬，因此咱們應該在操做完元素以後要主動銷燬。
還有一個場景是緩存機制，栗子在下面：
(() => {
let num = 0;
setInterval(() => {
console.log(num++);
}, 1000)
})() // 1 2 3 4 5 6 ....
這個就驗證了是嗎的說法：閉包函數會一直拿着外部函數的變量，而且不會銷燬，因此會一直用着加1以後的最新值。
4.什麼是淺拷貝和深拷貝？怎麼實現一個深拷貝？
在這以前要先理解一下js的基本類型和引用類型的區別：
基本類型：直接存儲在棧中的數據（String、Number、Boolean、Undefined、Null)
引用類型：是把該對象的引用地址存儲在棧中，對象裏的數據放在堆中（Array、Function、Object)
淺拷貝：只拷貝一層，不會拷貝對象的子元素，至關於直接賦值。
深拷貝：會克隆出一個對象，數據是相同的，可是引用地址不一樣。
舉栗子說明：
let person = {
name:'sunny',
age:13,
sayName:function(){
console.log(this.name)
}
}
let person1 = person;
console.log(person1) //和person的相同
person1.name = 'cherry'
console.log(person1.name) //cherry
console.log(person.name) //cherry
由於是引用的用一個地址，因此person1的改變也修改person的值；
深拷貝：
es6的 "..."能夠實現一個深拷貝，其實也說不上深拷貝， 若是對象裏面包含引用類型，也會失敗。
let obj = {
name:'sunny',
age: 30,
arr: [1,2,3,4]
}
let obj1 = obj
// console.log(obj1)
// obj1.name = 'cherry'
// console.log(obj1)
let copyObj = { ...obj }
copyObj.name = 'cherry'
copyObj.arr[0] = 8
console.log(copyObj)
console.log(obj)//obj的arr被改變了 ，可是基本類型沒有受到影響
深拷貝實例：
const deepClone = (val) => {
let res;
if (val && Array.isArray(val)) {
res = [];
val.forEach((item) => {
res.push(deepClone(item));
});
} else if (typeof val === 'object' && val !== null) {
res = {};
for (let key of Object.keys(val)) {
res[key] = deepClone(val[key]);
}
} else {
res = val;
}
return res;
}
-----------------------------分割線------------------------
先更到這裏， 有時間繼續補全~~~
- 1. python基礎知識鞏固
- 2. Java基礎知識鞏固
- 3. 前端知識學習與鞏固
- 4. Java基礎知識點鞏固學習
- 5. 鞏固基礎
- 6. SSM知識鞏固
- 7. 來份平常前端知識鞏固——下篇
- 8. Android基礎知識（定時的基礎知識鞏固，以便自我包裝）
- 9. 前端知識---基礎(一)
- 10. java基礎鞏固-泛型基礎知識整理
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • Kotlin 基礎語法 - Kotlin 教程
- • Kotlin學習（一）基本語法
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. python基礎知識鞏固
- 2. Java基礎知識鞏固
- 3. 前端知識學習與鞏固
- 4. Java基礎知識點鞏固學習
- 5. 鞏固基礎
- 6. SSM知識鞏固
- 7. 來份平常前端知識鞏固——下篇
- 8. Android基礎知識（定時的基礎知識鞏固，以便自我包裝）
- 9. 前端知識---基礎(一)
- 10. java基礎鞏固-泛型基礎知識整理