TML

src和href的區(qū)別

src和href都是用來(lái)加載外部資源，區(qū)別如下

src當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的加載和處理，直到該資源加載完成。 它會(huì)將資源內(nèi)容嵌入到當(dāng)前標(biāo)簽所在的位置，將其指向的資源下載應(yīng)用到文檔內(nèi)，如js腳本等。常用在img、script、iframe等標(biāo)簽。

href指向外部資源所在的位置，和當(dāng)前元素位置建立鏈接，當(dāng)瀏覽器解識(shí)別到它指向的位置，將其下載的時(shí)候不會(huì)阻止其他資源的加載解析。常用在a 、 link標(biāo)簽。

HTML5新增特性

• 新增語(yǔ)義化標(biāo)簽，head、footer、nav、main、section等
• 新增表單類型屬性，email、number、時(shí)間控件、color顏色拾取器、placeholder、autofocus自動(dòng)獲取焦點(diǎn)...
• 新增音視頻標(biāo)簽，video、audio
• 新增canvas畫布、websocket通信、拖拽等
• 新增本地存儲(chǔ)localStorage、sessionStorage

對(duì)HTML語(yǔ)義化理解

根據(jù)內(nèi)容來(lái)選擇合適的標(biāo)簽

• 方便瀏覽器爬蟲更好的識(shí)別內(nèi)容。
• 有利于代碼可讀性，開發(fā)者能清晰的看出網(wǎng)頁(yè)的結(jié)構(gòu)，便于團(tuán)隊(duì)的開發(fā)與維護(hù)。

DOCTYPE(?檔類型) 的作?

DOCTYPE是HTML5中一種標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的文檔類型聲明，是用來(lái)告訴瀏覽器的解析器，該用什么樣的方式去加載識(shí)別文檔。

iframe 有那些優(yōu)點(diǎn)和缺點(diǎn)？

iframe通常用來(lái)加載外部鏈接，不會(huì)影響網(wǎng)頁(yè)內(nèi)容的加載。

優(yōu)點(diǎn)

• 可以將網(wǎng)頁(yè)原封不動(dòng)的加載進(jìn)來(lái)
• 增加代碼的可用性
• 用來(lái)加載顯示較慢的內(nèi)容，如廣告、視頻等

缺點(diǎn)

• 加載的內(nèi)容無(wú)法被瀏覽器引擎識(shí)別，對(duì)SEO不友好
• 會(huì)阻塞onload事件加載
• 會(huì)產(chǎn)生很多頁(yè)面，不利于管理

Canvas和SVG的區(qū)別

• canvas畫布，是通過(guò)javascript來(lái)繪制2d圖，是逐像素進(jìn)行渲染。
• SVG矢量圖，是基于XML描述的2D圖形語(yǔ)言，每個(gè)元素都是可用的，可以為其添加事件。

script標(biāo)簽中defer和async的區(qū)別

他倆都是表示異步加載外部JS腳本，不會(huì)阻礙頁(yè)面的加載解析。 區(qū)別

• 執(zhí)行順序：有多個(gè)async標(biāo)簽不能保證先后加載順序，而多個(gè)defer標(biāo)簽可以按先后順序加載。
• 是否立即執(zhí)行：async加載完腳本后會(huì)立即執(zhí)行，defer是要等文檔解析完成后才執(zhí)行。

行內(nèi)元素、塊級(jí)元素、空（void）

• 行內(nèi)： a、b、span、input、img、select、 strong
• 塊：p、div、h1、ul、ol、li、dl、dt、dd
• 空：<hr>、<br>、<img>、<input>、<link>、<meta>

怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)

• 添加節(jié)點(diǎn)document.appendChild(dom)
• 移除節(jié)點(diǎn)document.removeChild(dom)
• 移動(dòng)節(jié)點(diǎn)document.appendChild(targetDom)
• 復(fù)制節(jié)點(diǎn)dom.cloneNode(true)，參數(shù)true表示是否復(fù)制子節(jié)點(diǎn)
• 創(chuàng)建節(jié)點(diǎn)document.createElement(dom)
• 查找節(jié)點(diǎn): document.getElementById("elementId") document.getElementsByClassName("className") document.getElementsByTagName("tagName") document.querySelector("selector") document.querySelectorAll("selector")

CSS

CSS3新增特性

• 新增CSS選擇器、偽類
• 特效：text-shadow、box-shadow
• 線性漸變: gradient
• 旋轉(zhuǎn)過(guò)渡：transform、transtion
• 動(dòng)畫: animation
• 圓角: border-radius

盒模型

盒模型都是由四個(gè)部分組成的，分別是margin、border、padding和content。

標(biāo)準(zhǔn)盒模型和IE盒模型的區(qū)別在于設(shè)置width和height時(shí)，對(duì)應(yīng)的范圍不同。

• 標(biāo)準(zhǔn)盒模型的width、height只包含了content
• IE盒模型的的width、height除了content本身，還包含了border、padding

通過(guò)修改元素的box-sizing屬性來(lái)改變?cè)氐暮心Ｐ?/p>

• box-sizeing: content-box表示標(biāo)準(zhǔn)盒模型（默認(rèn)值）
• box-sizeing: border-box表示IE盒模型（IE盒模型)

CSS選擇器和優(yōu)先級(jí)

選擇器

優(yōu)先級(jí)

• !important
• 內(nèi)聯(lián)樣式
• ID選擇器
• 類選擇器/偽類選擇器/屬性選擇器
• 標(biāo)簽選擇器/偽元素選擇器
• 關(guān)系選擇器/通配符選擇器

CSS可繼承屬性和不可繼承屬性

可繼承

• font-weight
• color
• font-size
• line-height
• cursor
• ...

不可繼承

• margin、padding、border
• display
• background
• overflow
• width、height
• position
• ...

dislpay的屬性和作用

隱藏元素的方式

• display：none：元素在文檔中不存在，不會(huì)占據(jù)位置。
• visibility： hidden：元素在文檔中的位置還保留，仍然占據(jù)空間。
• opacity：0：將透明度設(shè)置為0。
• z-index：負(fù)值：直接將元素放置在最下層，利用其他元素來(lái)遮蓋。
• position：absolute：將元素定位到可視區(qū)域以外。

單行、多行文本溢出

單行

css

復(fù)制代碼

overflow: hidden; // 溢出隱藏 text-overflow: ellipsis; // 溢出用省略號(hào)顯示 whtie-space: nowrap; //規(guī)定段落中的文本不進(jìn)行換行

多行

CSS

復(fù)制代碼

overflow:hidden text-overflow: ellipsis; // 溢出用省略號(hào)顯示 display:-webkit-box; // 作為彈性伸縮盒子模型顯示。 -webkit-box-orient:vertical; // 設(shè)置伸縮盒子的子元素排列方式：從上到下垂直排列 -webkit-line-clamp:3; // 顯示的行數(shù)

有了使用過(guò)Sass、Less 嗎？他們的區(qū)別是什么？

他們都是 CSS 預(yù)處理器，是 CSS 上的一種抽象層。他們是一種特殊的語(yǔ)法/語(yǔ)言編譯成 CSS。 增加了 CSS代碼的復(fù)用性，層級(jí)，mixin， 變量，循環(huán)， 函數(shù)等對(duì)編寫以及開發(fā)UI組件都極為方便。 區(qū)別

1. 編譯環(huán)境不一樣 Sass是在服務(wù)端處理的，以前是Ruby，現(xiàn)在是Dart-Sass或Node-Sass 而Less是需要引入less.js來(lái)處理Less代碼輸出CSS到瀏覽器，也可以在開發(fā)服務(wù)器將Less語(yǔ)法編譯成css文件，輸出CSS文件到生產(chǎn)包目錄
2. 變量符不一樣，Less是@，而Scss是$。
3. Sass支持條件語(yǔ)句，可以使用if{}else{},for{}循環(huán)等等。而Less不支持

link和@import的區(qū)別

• link是HTML提供的標(biāo)簽，不僅可以加載CSS文件，還可以定義RSS、rel連接屬性等
• @import是CSS提供等語(yǔ)法規(guī)則，只有導(dǎo)入樣式表帶作用。
• link標(biāo)簽引入的CSS被同時(shí)加載，而@import引入的CSS將在頁(yè)面加載完畢后被加載
• @import是CSS2.1才有的語(yǔ)法，存在兼容性，而link作為HTML標(biāo)簽不存在兼容性問題

常見的CSS單位

• px像素 CSS像素 物理像素
• 百分比%，作用于父元素， 當(dāng)瀏覽器的寬度或者高度發(fā)生變化時(shí)，當(dāng)前元素依據(jù)比例發(fā)生變化。
• em和rem，相對(duì)長(zhǎng)度單位，它們之間的區(qū)別：em相對(duì)于父元素，rem相對(duì)于根元素。
• vw/vh是與視圖窗口有關(guān)的單位，代表視圖窗口的寬高。

px、em、rem的區(qū)別

• px 固定像素單位，不能隨其它元素的變化而變化
• em是相對(duì)于父元素的單位，會(huì)隨著父元素變化而變化
• rem是相對(duì)于根元素html，它會(huì)隨著html元素變化而變化

兩欄布局

• 利用浮動(dòng)，將左邊元素寬度設(shè)置為200px，并且設(shè)置向左浮動(dòng)。將右邊元素的margin-left設(shè)置為200px，寬度設(shè)置為auto（默認(rèn)為auto，撐滿整個(gè)父元素）。

CSS

復(fù)制代碼

.outer { height: 100px; } .left { float: left; width: 200px; background: tomato; } .right { margin-left: 200px; width: auto; background: gold; }

• 利用浮動(dòng)，左側(cè)元素設(shè)置固定大小，并左浮動(dòng)，右側(cè)元素設(shè)置overflow: hidden; 這樣右邊就觸發(fā)了BFC，BFC的區(qū)域不會(huì)與浮動(dòng)元素發(fā)生重疊，所以兩側(cè)就不會(huì)發(fā)生重疊。

CSS

復(fù)制代碼

.left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; }

• 利用flex布局，將左邊元素設(shè)置為固定寬度200px，將右邊的元素設(shè)置為flex:1。

CSS

復(fù)制代碼

.outer { display: flex; height: 100px; } .left { width: 200px; background: tomato; } .right { flex: 1; background: gold; }

• 利用絕對(duì)定位，將父級(jí)元素設(shè)置為相對(duì)定位。左邊元素設(shè)置為absolute定位，并且寬度設(shè)置為200px。將右邊元素的margin-left的值設(shè)置為200px。

CSS

復(fù)制代碼

.outer { position: relative; height: 100px; } .left { position: absolute; width: 200px; height: 100px; background: tomato; } .right { margin-left: 200px; background: gold; }

三欄布局

• 利用絕對(duì)定位，左右兩欄設(shè)置為絕對(duì)定位，中間設(shè)置對(duì)應(yīng)方向大小的margin的值。
• 利用flex布局，左右兩欄設(shè)置固定大小，中間一欄設(shè)置為flex:1。
• 利用浮動(dòng)，左右兩欄設(shè)置固定大小，并設(shè)置對(duì)應(yīng)方向的浮動(dòng)。中間一欄設(shè)置左右兩個(gè)方向的margin值，注意這種方式，中間一欄必須放到最后：
• 圣杯布局，利用浮動(dòng)和負(fù)邊距來(lái)實(shí)現(xiàn)。父級(jí)元素設(shè)置左右的 padding，三列均設(shè)置向左浮動(dòng)，中間一列放在最前面，寬度設(shè)置為父級(jí)元素的寬度，因此后面兩列都被擠到了下一行，通過(guò)設(shè)置 margin 負(fù)值將其移動(dòng)到上一行，再利用相對(duì)定位，定位到兩邊。
• 雙飛翼布局，雙飛翼布局相對(duì)于圣杯布局來(lái)說(shuō)，左右位置的保留是通過(guò)中間列的 margin 值來(lái)實(shí)現(xiàn)的，而不是通過(guò)父元素的 padding 來(lái)實(shí)現(xiàn)的。本質(zhì)上來(lái)說(shuō)，也是通過(guò)浮動(dòng)和外邊距負(fù)值來(lái)實(shí)現(xiàn)的。

水平垂直居中

• 利用絕對(duì)定位，先將元素的左上角通過(guò)top:50%和left:50%定位到頁(yè)面的中心，然后再通過(guò)translate來(lái)調(diào)整元素的中心點(diǎn)到頁(yè)面的中心。該方法需要考慮瀏覽器兼容問題。

CSS

復(fù)制代碼

.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

• 利用絕對(duì)定位，設(shè)置四個(gè)方向的值都為0，并將margin設(shè)置為auto，由于寬高固定，因此對(duì)應(yīng)方向?qū)崿F(xiàn)平分，可以實(shí)現(xiàn)水平和垂直方向上的居中。該方法適用于盒子有寬高的情況：

CSS

復(fù)制代碼

.parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

• 利用絕對(duì)定位，先將元素的左上角通過(guò)top:50%和left:50%定位到頁(yè)面的中心，然后再通過(guò)margin負(fù)值來(lái)調(diào)整元素的中心點(diǎn)到頁(yè)面的中心。該方法適用于盒子寬高已知的情況。

CSS

復(fù)制代碼

.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 自身 height 的一半 */ margin-left: -50px; /* 自身 width 的一半 */ }

• 使用flex布局，通過(guò)align-items:center和justify-content:center設(shè)置容器的垂直和水平方向上為居中對(duì)齊，然后它的子元素也可以實(shí)現(xiàn)垂直和水平的居中。該方法要考慮兼容的問題，該方法在移動(dòng)端用的較多：

CSS

復(fù)制代碼

.parent { display: flex; justify-content:center; align-items:center; }

flex布局理解

flex布局是CSS3新增的一種布局方式，能夠根據(jù)不同屏幕尺寸的變化來(lái)自適應(yīng)大小。

常用的屬性：

• flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。
• flex-wrap屬性定義，如果一條軸線排不下，如何換行。
• flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。
• justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
• align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
• align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

flex: 1表示什么

flex: 1是flex-grow、flex-shrink、flex-basis的縮寫，默認(rèn)值是0 1 auto。flex：1也表示flex： 1 1 auto。

1. flex-grow定義項(xiàng)目發(fā)大比例，默認(rèn)為0，即存在剩余空間，也不放大。
2. flex-shrink定義項(xiàng)目收縮比例，默認(rèn)為1，即空間不足，也會(huì)進(jìn)行縮小。
3. flex-basis定義項(xiàng)目給上面兩個(gè)屬性分配多余空間之前, 計(jì)算項(xiàng)目是否有多余空間, 默認(rèn)值為 auto, 即項(xiàng)目本身的大小。

對(duì)BFC的理解，如何創(chuàng)建BFC

BFC是塊級(jí)格式上下文（Block Formatting Context，BFC），是CSS布局的一個(gè)概念，在BFC布局里面的元素不受外面元素影響。

創(chuàng)建BFC條件

• 設(shè)置浮動(dòng)：float有值并不為空
• 設(shè)置絕對(duì)定位： position（absolute、fixed）
• overfilow值為：hidden、auto、`scroll
• display值為：inline-block、table-cell、table-caption、flex等

BFC作用：

• 解決margin重疊問題：由于BFC是一個(gè)獨(dú)立的區(qū)域，內(nèi)部元素和外部元素互不影響，將兩個(gè)元素變?yōu)锽FC，就解決了margin重疊問題
• 創(chuàng)建自適應(yīng)兩欄布局：可以用來(lái)創(chuàng)建自適應(yīng)兩欄布局，左邊寬高固定，右邊寬度自適應(yīng)。
• 解決高度塌陷問題：在子元素設(shè)置浮動(dòng)后，父元素會(huì)發(fā)生高度的塌陷，也就是父元素的高度為0解決這個(gè)問題，只需要將父元素變成一個(gè)BFC。

什么是margin重疊，如何解決

兩個(gè)塊級(jí)元素分別設(shè)置上下margin時(shí)可能會(huì)導(dǎo)致邊距合并為一個(gè)邊距，合并到邊距取最大的那個(gè)值。需要注意的是，浮動(dòng)的元素和絕對(duì)定位這種脫離文檔流的元素的外邊距不會(huì)折疊。重疊只會(huì)出現(xiàn)在垂直方向。

計(jì)算規(guī)則

• 都是正數(shù)，取最大的。20px 40px ---> 40px
• 一正一負(fù)，用正數(shù)減去負(fù)數(shù)后。20px -50px ---> -30px
• 都是負(fù)數(shù)，用0減去兩個(gè)中絕對(duì)值大的那個(gè)。-30px -10px ---> -20px

解決方案 對(duì)于重疊的情況，主要有兩種：兄弟之間重疊（margin合并） 和 父子之間重疊（margin塌陷）

• 兄弟之間重疊 底部元素變?yōu)樾袃?nèi)盒子：display: inline-block 底部元素設(shè)置浮動(dòng)：float 底部元素的position的值為absolute/fixed
• 父子之間重疊 父元素加入：overflow: hidden 父元素添加透明邊框：border:1px solid transparent 子元素變?yōu)樾袃?nèi)盒子：display: inline-block 子元素加入浮動(dòng)屬性或定位

position 常用屬性 默認(rèn)值是什么

• static 默認(rèn)值，沒有定位，元素正常在文檔流中顯示
• relative 相對(duì)定位，相對(duì)于原來(lái)的位置進(jìn)行定位
• absolute 絕對(duì)定位，相對(duì)于static定位意外以外的一個(gè)父元素進(jìn)行定位。
• fixed 絕對(duì)定位，相對(duì)于瀏覽器窗口
• sticky 粘性定位，基于用戶滾動(dòng)位置

實(shí)現(xiàn)一個(gè)三角形

通過(guò)設(shè)置不同方向邊框來(lái)實(shí)現(xiàn)

CSS

復(fù)制代碼

div { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; }

畫一條0.5px的線

• 使用transform: scale()的方式，該方法用來(lái)定義元素的2D 縮放轉(zhuǎn)換：

CSS

復(fù)制代碼

transform: scale(0.5,0.5);

• 采用meta viewport的方式，這樣就能縮放到原來(lái)的0.5倍，如果是1px那么就會(huì)變成0.5px。viewport只針對(duì)于移動(dòng)端，只在移動(dòng)端上才能看到效果。

如何解決1px

1px 問題指的是：在一些 Retina屏幕 的機(jī)型上，移動(dòng)端頁(yè)面的 1px 會(huì)變得很粗，呈現(xiàn)出不止 1px 的效果。原因很簡(jiǎn)單——CSS 中的 1px 并不能和移動(dòng)設(shè)備上的 1px 劃等號(hào)。

• 直接寫0.5px
• 利用偽元素，先放大再縮小
• 使用viewport縮放來(lái)解決

原文章鏈接：https://juejin.cn/post/7269794410573512758

avaScript奇淫技巧：把JS編譯成exe

本文，介紹一種一般人不知道的技術(shù)：把JS代碼編譯成exe，而且不使用第三方工具，僅用系統(tǒng)工具完成。

第一：工具準(zhǔn)備

編譯JS代碼，使用一個(gè)名為jsc.exe的工具，在系統(tǒng)windows目錄中搜索，可找到此文件。

使用jsc /help可獲得此工具的使用說(shuō)明：

第二：編譯js為命令行輸出exe

代碼如下：

var d = new Date();

var n = Math.random();

print('Hello, today is ' + d + 'nand this is random - ' + n);

編譯并執(zhí)行：

第三：編譯js為dll（動(dòng)態(tài)鏈接庫(kù)）

代碼如下：

package LibHello {