js、html、css的基礎(chǔ)知識(shí)

發(fā)布時(shí)間：2020-06-19 12:50:21 來源：億速云閱讀：131 作者：鴿子欄目：web開發(fā)

關(guān)于HTML

html是超文本標(biāo)記語(yǔ)言(Hyper Text Markup Language）的簡(jiǎn)寫，標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用。HTML不是一個(gè)編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言，是網(wǎng)頁(yè)制作的必備。可包含圖片、音樂、視頻、鏈接、程序等非文本元素。

DOCTYPE的作用

DOCTYPE是document type的縮寫，它并不是html的標(biāo)簽，它是一種標(biāo)記語(yǔ)言的文檔類型聲明，意在告訴瀏覽器當(dāng)前HTML是用什么版本編寫的。覽器要通過哪一種規(guī)范（DTD）解析文檔（比如HTML或XHTML規(guī)范）。

HTML5新增了哪些新標(biāo)簽以及優(yōu)點(diǎn)
<head>定義頁(yè)面或者區(qū)域頭部
<main>規(guī)定文檔主要內(nèi)容
<footer>定義頁(yè)面或者區(qū)域底部
<article>定義一篇文章
<nav>定義導(dǎo)航鏈接
<scetion>定義一個(gè)區(qū)域
<aside>定義頁(yè)面內(nèi)容部分側(cè)邊欄
<hgroup>用于對(duì)網(wǎng)頁(yè)或者區(qū)域段的標(biāo)題組合
<figure>定義一組媒體內(nèi)容以及標(biāo)題
<figcaption>定義figure元素標(biāo)題
<address>定義文章?lián)碛姓叩穆?lián)系信息
新增表單標(biāo)簽
date、time、email、url、search 等類型
video標(biāo)簽
<video width="" height="" controls></video>
audio標(biāo)簽
<audio src=""></audio>
優(yōu)點(diǎn)：根據(jù)內(nèi)容的結(jié)構(gòu)化使用語(yǔ)義化標(biāo)簽，能夠使開發(fā)者更好的閱讀和理解以及瀏覽器爬蟲與搜索引擎解析。
關(guān)于CSS
css是層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
什么是盒模型

盒模型也叫框模型 (Box Model)，包含元素內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）。計(jì)算一個(gè)盒子的寬高：content+padding+border。

常用的css單位

1.px(表示像素，是絕對(duì)單位。不會(huì)因?yàn)槠渌氐某叽缱兓兓?yè)面按照精確像素展示）
2.pt(磅 Points，是一種絕對(duì)單位，是物理長(zhǎng)度單位，等于 1/72 寸。它的取值范圍和 px 類似）
3.em(相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體大小，如，body的font-size:12px;則body內(nèi)部的子元素而言，1em=12px)
4.rem(相對(duì)于根元素字體大小的單位，也是一個(gè)相對(duì)單位，和em有點(diǎn)類似，只不過一個(gè)計(jì)算的規(guī)則依賴根元素一個(gè)依賴父元素)
5.vh(布局視口高度的1/100)
6.vw(布局視口高度的1/100)

清除浮動(dòng)

什么時(shí)候需要清除浮動(dòng)，清除浮動(dòng)的方法有哪些？
當(dāng)子元素設(shè)置了float屬性之后，并且父元素沒有設(shè)置寬高，是由子元素?fù)纹饋淼?，則會(huì)導(dǎo)致父元素的寬高坍塌，這個(gè)時(shí)候需要清除浮動(dòng)。
方法：1、父元素設(shè)置屬性overflow:hidden || auto

 2、子元素最后一個(gè)元素添加clear:both
 3、父級(jí)定義偽類：after和zoom 
 {display:block;clear:both;content:"",visibility:hidden;height:0}
 {zoom:1}
 4、父級(jí)定義height
 5、父級(jí)也一起浮動(dòng)

如何保持一個(gè)元素水平垂直居中

1、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.當(dāng)子元素寬高固定，父元素寬高不為0時(shí)
.parent{

height:200px;

}
.children{

width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin: -50px 0 0 -50px;

}

css選擇器有哪些以及優(yōu)先級(jí)是怎樣的

1、標(biāo)簽選擇器（body、p等）
2、類選擇器（class="box")
3、ID選擇器（id="app")
4、全局選擇器（*{}）
5、組合選擇器（.header .header_box)
6、后代選擇器（.#header ul li）
7、群組選擇器（.box .header .content）
8、繼承選擇器（ p p）
9、偽類選擇器（link visited active hover）
10、字符串匹配的屬性選擇符（^ $ * 分別對(duì)應(yīng)開始、結(jié)尾、包含）
11、子選擇器（p>p）
12、css相鄰兄弟選擇器（p+p）

優(yōu)先級(jí)：
!important > 行內(nèi)樣式 > ID選擇器 > 類選擇器 > 標(biāo)簽選擇器 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性

每個(gè)選擇器的權(quán)值：
行內(nèi)樣式 1000
ID選擇器 100
class選擇器 10
HTML標(biāo)簽選擇器 1

sass

sass: 是一款強(qiáng)化css的輔助工具，它在css語(yǔ)法的基礎(chǔ)上變量、嵌套、混合、導(dǎo)入等高級(jí)功能，可提高開發(fā)效率。
sass有兩種語(yǔ)法格式，首先是scss，是在css3的語(yǔ)法基礎(chǔ)上進(jìn)行拓展，所有css3語(yǔ)法在scss中都是通用的，同時(shí)加入sass的特色功能。此外，scss也支持大多數(shù)css hacks寫法以及瀏覽器前綴寫法，以及早期的IE濾鏡寫法，這種格式以.scss作為拓展名。
另一種也是最早的sass語(yǔ)法格式，被稱為縮進(jìn)格式（Indented Sass）通常簡(jiǎn)稱“sass”，只是與scss相比個(gè)別地方采取了不同的表達(dá)方式。
使用：
定義變量（$width:5rem #box{width:$width})
混合器（@Minxin class {

border-radius:5px;
background:#f00;

}
.box{

@include class

}
具體更多用法參考文檔sass官方文檔。

javascript基礎(chǔ)

1、js有哪些數(shù)據(jù)類型：

原始數(shù)據(jù)類型 - String Number Boolean Undefined null
對(duì)象類型 - Array Function Object

null和undefined的區(qū)別 - undefined是一個(gè)特殊值，通常不是變量尚未賦值。null是在計(jì)算機(jī)中具有保留的值，用于指示指針不引用有效對(duì)象?？梢园製ndefined作為空的變量，null看做是空的對(duì)象。
原始類型和引用類型的區(qū)別 - 基本類型指的是保存在棧內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段，
引用類型指的是那些保存在堆內(nèi)存中的對(duì)象，意思是，變量中保存的實(shí)際上是只是一個(gè)指針，這個(gè)指針執(zhí)行內(nèi)存中的另一個(gè)位置，由該位置保存對(duì)象。
訪問的方式也不同 - 基本類型是按值訪問，操作也是他們的實(shí)際保存的值，
引用類型是按引用方式訪問，當(dāng)查詢時(shí)，我們需要先從棧中讀取內(nèi)存地址，然后再找到保存在堆內(nèi)存中的值。
復(fù)制的類型也不同 - 基本類型變量的復(fù)制，從一個(gè)變量向另一個(gè)變量復(fù)制時(shí)，會(huì)在棧中創(chuàng)建一個(gè)新值，然后把值復(fù)制到新變量分配的位置上。
引用類型復(fù)制，復(fù)制的是存儲(chǔ)在棧中的指針，將指針復(fù)制到棧中為新變量分配的空間中，而這個(gè)指針副本和原指針執(zhí)行存儲(chǔ)在堆中的同一個(gè)對(duì)象；復(fù)制結(jié)束后，兩個(gè)變量實(shí)際上引用同一個(gè)對(duì)象，因此改變其中一個(gè)，講影響另一個(gè)。

2、如何理解prototype，什么時(shí)候用prototype
在javascript中，所有的對(duì)象都是Object的實(shí)例，并且會(huì)繼承Object.prototype的屬性和方法，那么，Object.prototype是所有對(duì)象的爸爸。我們?cè)趧?chuàng)建對(duì)象時(shí)，就會(huì)有一些已經(jīng)定義好的屬性，在定義函數(shù)時(shí)候，這個(gè)預(yù)定義的屬性就是prototype,是函數(shù)的一個(gè)屬性，是一個(gè)指向?qū)ο蟮闹羔?。而定義一個(gè)普通對(duì)象時(shí)候，會(huì)生成一個(gè)__proto__,指向的是對(duì)象的構(gòu)造函數(shù)prototype。
js中構(gòu)造函數(shù)和實(shí)例之間有著微妙的關(guān)系，構(gòu)造函數(shù)通過定義prototype來約定其實(shí)例的規(guī)格，再通過new來構(gòu)造實(shí)例，他們的作用就是產(chǎn)生對(duì)象。通過new構(gòu)造對(duì)象的特點(diǎn)是，obj的prototype指向了構(gòu)造器的prototype屬性。
什么時(shí)候用prototype呢？
使用prototype的好處是不會(huì)產(chǎn)生額外的內(nèi)存，所有實(shí)例化后的對(duì)象都會(huì)從原型上繼承這個(gè)方法，相當(dāng)于公共方法，就是一個(gè)子類擁有父類的某些特性，又可以給自己添加一些獨(dú)立的屬性，而且不會(huì)影響父時(shí)使用prototype。
prototype通常來解決一個(gè)問題：對(duì)象的創(chuàng)建比較耗費(fèi)資源，例如，對(duì)象創(chuàng)建的時(shí)候需要訪問數(shù)據(jù)庫(kù)、讀取外部文件、需要使用網(wǎng)絡(luò)。這些都是比較耗費(fèi)時(shí)間和內(nèi)存的。
寫一個(gè)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.什么是閉包、使用場(chǎng)景有哪些、閉包會(huì)引起什么問題
概念：閉包就是一種可以重復(fù)使用變量而且不會(huì)造成全局變量污染的機(jī)制，它是一種特殊的對(duì)象。
它由兩部分組成：函數(shù)以及創(chuàng)建該函數(shù)的環(huán)境。而環(huán)境是由閉包創(chuàng)建時(shí)在作用域中的任何局部變量組成。可以用來定義私有屬性和方法。
小栗子：

function sum(){
    let x = 1,y = 2;
    function res(){ //閉包
        return x + y
    }
    return res //閉包函數(shù)
}
let result = sum();
result() // 3

從上面的這個(gè)簡(jiǎn)單的閉包例子可以看出，在外部函數(shù)的內(nèi)部創(chuàng)建一個(gè)內(nèi)部函數(shù)。并且內(nèi)部函數(shù)讀取著外部函數(shù)作用域中定義的局部變量，而內(nèi)部函數(shù)又作為外部函數(shù)的返回值。所以總結(jié)一下：閉包的作用域鏈包含著它自己的作用域，以及包含它的函數(shù)的作用域和全局作用域。
使用場(chǎng)景：需要設(shè)計(jì)私有變量和方法的時(shí)候。
舉栗子：

function Person() {
    let name = 'sunny'
    this.getName = () => name
}
let person = new Person;
person.name //undefined
person.getName() // sunny

閉包引起的問題：正常情況下，一個(gè)函數(shù)的作用域和其所有變量在函數(shù)執(zhí)行后都會(huì)被銷毀，但是在創(chuàng)建一個(gè)閉包后，這個(gè)函數(shù)會(huì)一直保存，直到閉包不存在為止。也就是閉包函數(shù)會(huì)一直保存著父函數(shù)的執(zhí)行期上下文。這樣就會(huì)造成內(nèi)存泄露。
舉個(gè)栗子：

const handleDom = () => {
    let dom = document.getElementById('#el');
    let id = dom.id;
    dom.onclick = () => {
        console.log(id)
    }
    dom = null;
}

上面這個(gè)函數(shù)中的閉包函數(shù)里保存著一個(gè)HTML元素，這就意味著這個(gè)元素?zé)o法銷毀，所以我們應(yīng)該在操作完元素之后要主動(dòng)銷毀。
還有一個(gè)場(chǎng)景是緩存機(jī)制，栗子在下面：

(() => {
    let num = 0;
    setInterval(() => {
        console.log(num++);
    }, 1000)
})() // 1 2 3 4 5 6 ....

這個(gè)就驗(yàn)證了是嗎的說法：閉包函數(shù)會(huì)一直拿著外部函數(shù)的變量，并且不會(huì)銷毀，所以會(huì)一直用著加1之后的最新值。

4.什么是淺拷貝和深拷貝？怎么實(shí)現(xiàn)一個(gè)深拷貝？
在這之前要先理解一下js的基本類型和引用類型的區(qū)別：
基本類型：直接存儲(chǔ)在棧中的數(shù)據(jù)（String、Number、Boolean、Undefined、Null)
引用類型：是把該對(duì)象的引用地址存儲(chǔ)在棧中，對(duì)象里的數(shù)據(jù)放在堆中（Array、Function、Object)
淺拷貝：只拷貝一層，不會(huì)拷貝對(duì)象的子元素，相當(dāng)于直接賦值。
深拷貝：會(huì)克隆出一個(gè)對(duì)象，數(shù)據(jù)是相同的，但是引用地址不同。
舉栗子說明：

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

因?yàn)槭且玫挠靡粋€(gè)地址，所以person1的改變也修改person的值；

深拷貝：
es6的 "..."可以實(shí)現(xiàn)一個(gè)深拷貝，其實(shí)也說不上深拷貝，如果對(duì)象里面包含引用類型，也會(huì)失敗。

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被改變了 ，但是基本類型沒有受到影響

深拷貝實(shí)例：

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;
}

以上就是前端的基礎(chǔ)知識(shí)鞏固的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！

向AI問一下細(xì)節(jié)

js、html、css的基礎(chǔ)知識(shí)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

js、html、css的基礎(chǔ)知識(shí)