① 學習web前端需要記筆記嗎
可以說學習任何一門技術原則上都是需要記筆記的。
中國有句俗話：好記性不如爛筆頭。
前期記筆記有助於加深印象，以後也可以更快速的記住內容。
② 網易有道雲筆記如何取消顯示在最前端的設置
我的是「有道的雲筆記」
在任務欄放的小圖標的位置（如：QQ圖標的位置），滑鼠右鍵點擊「雲筆記」，然後勾選掉「總在前面」的選項就可以了
③ 前端大屏項目自適應(個人筆記)
仔細觀察 網易有數 ， 網路suger ，他們都採用了css3的縮放transform: scale(X)屬性，看到這是不是有種豁然開朗的感覺。
於是我們只要監聽瀏覽器的窗口大小，然後控制變化的比例就好了。
以React的寫法為例
監聽window的resize事件最好加個節流函數debounce
然後一個簡單的組件就封裝好了
樣式文件index.less
只要把頁面放在這個組件中，就能實現跟大廠們類似的效果。這種方式下不管屏幕有多大，解析度有多高，只要屏幕的比例跟你定的比例一致，都能呈現出完美效果。而且開發過程中，樣式的單位也可以直接用px，省去了轉換的煩惱~~~
最後附上npm鏈接： https://www.npmjs.com/package/react-scale-box
④ 前端學習筆記style，currentStyle，getComputedStyle的區別和用法
getComputedStyle與style的區別
我們使用element.style也可以獲取元素的CSS樣式聲明對象，但是其與getComputedStyle方法還有有一些差異的。
只讀與可寫
正如上面提到的getComputedStyle方法是只讀的，只能獲取樣式，不能設置；而element.style能讀能寫，能屈能伸。
獲取的對象范圍
getComputedStyle方法獲取的是最終應用在元素上的所有CSS屬性對象（即使沒有CSS代碼，也會把默認的祖宗八代都顯示出來）；而element.style只能獲取元素style屬性中的CSS樣式。因此對於一個光禿禿的元素<p>，getComputedStyle方法返回對象中length屬性值（如果有）就是190+(據我測試FF:192, IE9:195, Chrome:253, 不同環境結果可能有差異), 而element.style就是0。
⑤ 前端筆記 — canvas
在HTML中添加<canvas>元素，必須設置width跟height屬性
如果瀏覽器不支持canvas元素，就會顯示標簽中間的內容
要在畫布上繪圖，需要取得繪圖上下文，調用getContext('2d')就可以取得canvas的2d上下文
使用toDataURL方法可以導出canvas上繪制的圖像，接受一個參數，圖像的MIME類型格式
常用的屬性控制
矩形是唯一一種可以直接在上下文中繪制的形狀
與矩形有關的方法包括fillRect()、strokeRect()和clearRect()，這三個方法接受4個參數（x, y, width, height）
fillRect()繪制的矩形會填充指定的顏色，顏色通過fillStyle屬性指定
strokeRect()繪制的矩形會使用指定的顏色描邊，描邊顏色通過strokeStyle屬性指定
clearRect()方法用於清除畫布上的矩形區域
要繪制路徑，首選必須調用beginPath()方法，表示開始繪制新路徑，繪制路徑主要有以下方法
調用closePath()可以將路徑的起點與終點連接。路徑完成後，可以使用fill()填充，或者使用stroke()描邊。最後還可以調用clip()，在路徑上創建一個剪切區域
繪制文本主要有兩個方法，fillText()和strokeText()，這個兩個方法接受4個參數：要繪制的文本字元串、x坐標、y坐標和可選的最大像素寬度。這兩個方法都以下列3個屬性為基礎
上下文提供了輔助確定文本大小的方法measureText()，這個方法接受一個參數，即要繪制的文本，返回一個TextMetrics對象，這個對象有一個width屬性，表示文本的寬度
為上下文應用變換，會導致使用不同的變換矩陣應用處理，從而產生不同的結果，可以通過如下方法來修改變換矩陣
如果想把一副圖像繪制到畫布上，可以使用drawImage()方法，調用這個方法時，可以使用三種不同的參數組合，最簡單的方式是傳入一個<img>元素，以及繪制該圖像的起點x和y坐標
可以多傳入兩個參數，表示目標寬度和高度
還可以把圖像中的某個區域繪制到上下文中，需要傳入9個參數：要繪制的圖像、源圖像的x坐標、源圖像的y坐標、源圖像的寬度、源圖像的高度、目標圖像的x坐標、目標圖像的y坐標、目標圖像的寬度、目標圖像的高度
除了給drawImage()方法傳入<img>元素外，還可以傳入另一個<canvas>元素作為其第一個參數。結合drawImage()和其他方法，可以對圖像進行各種基本操作，操作的結果可以通過toDataURL()方法獲得，toDataURL()是canvas的方法而不是上下文的方法
上下文會根據以下幾個屬性，自動為形狀或路徑繪制陰影，需要在繪制路徑之前設置
漸變有CanvasGradient實例表示，要創建一個新的線性漸變，可以調用createLinearGradient()方法，接受4個參數：startX、startY、endX、endY。創建漸變後，使用addColorStop()方法來指定色標，接受兩個參數：色標位置和css顏色值。色標位置是一個0（開始的顏色）到1（結束的顏色）之間的數字
表示從一個畫布上的點(30, 30)到點(70, 70)的漸變。起點的色標是白色，終點的色標是黑色。然後可以把fillStyle或者strokeStyle設置為這個對象，從而使用漸變來繪制形狀或描邊
要創建徑向漸變，可以使用createRadialGradient()方法，接受6個參數，對應著兩個圓的圓心和半徑
模式其實就是重復的圖像，可以用來填充或描邊圖像，使用createPattern()方法並傳入兩個參數：一個<img>元素和一個表示如何重復圖像的字元串。其中第二個參數的值與css的background-repeat屬性值相同，包括「repeat」、「repeat-x」、「repeat-y」和「no-repeat」
模式與漸變一樣，都是從畫布的原點(0, 0)開始的，將填充樣式設置為模式對象，只表示在某個特定的區域內顯示重復的圖像，而不是要從某個位置開始繪制重復圖像
上下文可以通過getImageData(x, y, width, height)取得原始圖像數據
這里返回的對象是ImageData的實例，每個ImageData對象都有三個屬性：width、height和data。其中data是一個數組，保存著圖像中每一個像素的數據。
在data數組中，每一個像素用4個元素來保存，分別表示紅、綠、藍和透明度。因此第一個像素的數據保存在數組的第0到第3個元素中，數組中的每個元素的值都介於0到255之間（包括0和255）
putImageData()方法可以將imageData表示的圖像繪制到畫布上
globalAlpha：用於指定所有繪制的透明度，是一個介於0到1之間的值，默認值為1
如果所有的後續操作都要基於相同的透明度，可以先把globalAlpha設置為適當的值，然後繪制
globalCompositionOperation：表示後繪制的圖形怎樣與先繪制的圖形結合，可能的值如下
⑥ 前端筆記 - HTML 特殊標簽實現文字滾動
小結：試了 HTML 實現文字滾動效果之後，發現比 iOS 簡單方便許多，以後在工作之餘會多學學前端知識，求大神帶哈😀！
⑦ 前端面試一問三不知怎麼辦
前端面試一問三不知的時候，千萬別慌亂，可以先停一停和面試官說這個問題你需要思考一下再回答，或者說你因為太緊張之類的一時想不起來答案。
有些面試官會直接電話過去要求面試，由於面試者(尤其是學生)處於弱勢方，可能並不會拒絕面試要求，但並不意味著面試者處於最佳的物理和精神狀態下，有可能會導致面試者不能很好的發揮自己原有的實力。所以如果面試官突然打電話過來。
沒有準備好的話，不要怕冒犯面試官，一定要另外約個時間，面試官肯定會再打過來的。遭到否定面試官有可能會否定你描述的一些東西，有可能是你字眼寫的太過，比如將「熟悉」的東西寫成了「精通」，勾起了面試官的「好奇」。
有可能故意試壓，考驗你的反應，但遇到否定的時候，不要急於反駁或者是手足無措，而是詢問自省和主動討論。氣場不和有的面試官性格嚴謹沉悶，而面試者可能思維活躍，整個面試過程可能會變成面試官不停的打斷面試者讓其思維聚焦。
而面試者感到思維不停被打斷，很是氣惱，影響發揮。這種情況不可避免，但遇到這樣的面試官，請保持謙和的態度，重點是展示自己技術的廣度、深度，氣場不和並不會產生決定性的影響，面試官也不會因為這樣的原因而給與錯誤的評判。
盡量留下好的印象。結束通知有的面試官會在面試結束後說：「我的問題問完了，如果有進一步消息的話，我們會再聯系你」。面試的大部分結果，其實當場就出來了，如果你感覺給出結果的時間點不夠明確，可以反問他：「如果三天內沒有聯系，是不是就代表沒有通過？」省得讓你懷有不確切的希望。
最後，還可以挽留下面試官，講講這場面試中你的一些疑惑，獲得面試官的反饋，也可以知道自己目前哪一方面做得不足。面試中面對不會的問題面試中遇到問題不會回答，這是非常正常的，畢竟大家在學習過程中遇到的問題，跟我們在工作中遇到的問題是非常不一樣的。
除此之外，我們看問題的角度，也是有差別很大的。舉個例子，很多人都在看ReactFiber，但是如果問你們，為什麼要有Fiber這個東西，可能很多人都回答不上來，因為大家只在社區裡面看到說，Fiber是怎麼工作的啊。
但是為什麼要有Fiber？如果沒有會怎樣，而這種思考，其實是非常底層的。我相信，很多人可能都沒有思考過。那如果遇到的問題不會，你可以先選擇不會，說我覺得自己沒有信心能答出這個問題，當然我更希望聽到你說。
我現在不會，但是你給我兩分鍾思考一下，我想一下這個問題有沒有答案？我覺得這是一個很好的思考習慣，首先你在面對不會的東西是坦然的，我當下不會，很正常，我之前沒有思考過這個問題嘛，那我們再花兩分鍾思考一下。
給一個初步的答案。所以說遇到問題，也不用不會就不會，也可以有一個積極的方式回應。從面試官的角度來說，面試中考察的題目，並不是僅僅考察這道題目本身，題目的對錯並不跟最終結果直接掛鉤。面試官更希望以題目為契機。
考察面試者分析問題，解決問題的能力，以及交流過程中所體現的邏輯推理和思維方式等。跟面試官聊業務業務跟項目是完全不一樣的東西，業務認知和思考也是很重要的一個考察點，這方面面試官可能會問兩個點：業務場景和技術突破。
業務場景：面試官會詢問面試者他們的產品、業務模式、商業模式等，了解下面試者對於產品的誕生、定位、發展的認知。技術突破：技術與業務相結合這點在阿里也是一直在說但鮮有人做的非常好的地方，所以有的時候也會考察面試者。
看看他們所做的技術是如何從業務出發、給業務帶來了哪些改變以及如何去評估兩者之間產生的結果。面試結束反向互動面試官在掛斷之前，基本會給與候選人反問的機會，一般會表述為「你有什麼要問我的嗎」？無論面試的怎樣。
都希望你能說出心中的疑惑，比如面試中的某個題目、整體的評價反饋、你的建議或者了解所負責的業務，所在的團隊等等，而從面試官的角度來看，如果候選人願意反問你問題，至少能證明他是個好學的人。所以不要放棄這個互動的機會。
面試反饋每場面試結束後，面試官都會在系統里留下面試反饋，如果面試失敗，簡歷會放在人才庫里，很多人會在其中撈取簡歷，以後的面試官也可以看到之前所有的面試記錄，之所以講到這一點，是希望大家在面試中能夠保持謙和積極的心態。
認真面對每一場面試，即使這場面試沒有成功，但如果展示了好的品質，也會增加被發掘的機會，為你以後面試成功鋪路。保持聯絡如果跟面試官聊的比較好，可以請求加個微信之類的，面試是一個長期的事情，哪怕此次面試沒有通過。
以後還可能面試進來的，與面試官保持聯絡。前端面試題筆記面試會了，面試題也不能落下，這套面試筆記除了有CSS、JS、Vue、React、性能優化、伺服器埠、設計模式、數據結構和演算法面試題外，加了手寫代碼面試題。
這下面試官讓我們寫代碼也不怕啦！CSS問題flex布局css3的新特性img中alt和title的區別用純CSS創建一個三角形如何理解CSS的盒子模型？如何讓一個div水平居中如何讓一個div水平垂直居中如何清除浮動。
⑧ web前端學習筆記（二）清除浮動的幾種方法
1.父標簽overflow:hidden
2.樣式屬性clear，屬性值一般是both，left，right。
⑨ 《web前端筆記7》js字元—獲取、查找、遍歷、提取、替換方法總結
（1）字元串就是零個或多個排在一起的字元。
（2）放在單引號或雙引號之中。 'abc' "abc"。
（3）單引號字元串的內部，可以使用雙引號。
（4）雙引號字元串的內部，可以使用單引號。
（5）反引號`` ：反引號允許跨行。
反引號允許字元串跨越多行並可以使用
${…} 在字元串中嵌入表達式。
（1）charAt 方法返回指定位置的字元，參數是從0開始編號的位置。
找一個字元串中的某個位置是那個字元串。
charCodeAt：返回字元串指定位置的 Unicode 碼點（十進製表示）
（2）[]
字元串可以被視為字元串數組，因此可以用數組的方括弧運算符，用來返回某個位置的字元
但是字元串只是數組的相似性而已實際上、沒辦法改變字元串中的某個字元
length 只是返回了字元串的長度，該屬性沒辦法改變
字元串使用Unicode字元集，js內部所有的都是Unicode表示的。
JavaScript中的字元串使用的是 UTF-16 編碼。
toLowerCase() 和 toUpperCase()方法可以改變大小寫。
String對象是js原生提供的三個包裝對象之一。用來生成字元串對象。
（1）構造函數
字元串對象是一個類數組對象，很像數組，但不是真正的數組。
（2）將任意的值轉成字元
用於連接兩個字元串，返回一個新字元串，不改變原字元串。
從原字元串取出子字元串並返回，不改變原字元串。
它的第一個參數是子字元串的開始位置，
第二個參數是子字元串的結束位置（不含該位置）。
如果省略第二個參數，則表示子字元串一直到原字元串結束。
用於從原字元串取出子字元串並返回，不改變原字元串，跟slice方法很相像。
它的第一個參數表示子字元串的開始位置，
第二個位置表示結束位置（返回結果不含該位置）
如果省略第二個參數，則表示子字元串一直到原字元串結束。
區別：slice 和 substring的區別？
slice：
如果參數是負值，表示從結尾開始倒數計算的位置，即該負值加上字元串長度。
如果第一個參數大於第二個參數（正數情況下），slice()方法返回一個空字元串。
substring：
如果第一個參數大於第二個參數，substring方法會自動更換兩個參數的位置。
如果參數是負數，substring方法會自動將負數轉為0。
由於這些規則違反直覺，因此不建議使用substring方法，應該優先使用slice。
總結：獲取子字元串，使用 slice 或 substring。
用於確定一個字元串在另一個字元串中第一次出現的位置，
返回結果是匹配開始的位置。如果返回-1，就表示不匹配。
indexOf方法還可以接受第二個參數，表示從該位置開始向後匹配。
lastIndexOf
lastIndexOf方法的用法跟indexOf方法一致，主要的區別是lastIndexOf從尾部開始匹配，indexOf則是從頭部開始匹配。
總結：查找子字元串時，使用 indexOf 或 includes/startsWith/endsWith 進行簡單檢查。
endsWith 用來判斷當前字元串是否是以另外一個給定的子字元串「結尾」的，根據判斷結果返回 true 或 false。
用於去除字元串兩端的空格，返回一個新字元串，不改變原字元串。
toLowerCase方法用於將一個字元串全部轉為小寫，
toUpperCase則是全部轉為大寫。
它們都返回一個新字元串，不改變原字元串
split方法按照給定規則分割字元串，返回一個由分割出來的子字元串組成的數組。
如果分割規則為空字元串，則返回數組的成員是原字元串的每一個字元。
如果省略參數，則返回數組的唯一成員就是原字元串。
split方法還可以接受第二個參數，限定返回數組的最大成員數。
返回一個新字元串，表示將原字元串重復n次。
字元串補全長度的功能。如果某個字元串不夠指定長度，
會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。
trimStart()消除字元串頭部的空格，
trimEnd()消除尾部的空格。
返回一個由替換值（replacement）替換部分或
所有的模式（pattern）匹配項後的新字元串。
模式可以是一個字元串或者一個正則表達式，
替換值可以是一個字元串或者一個每次匹配都要調用的回調函數。
如果pattern是字元串，則僅替換第一個匹配項.
web前端筆記4-有講 如果感興趣、請參考之前文章
⑩ 《web前端筆記30》css三欄布局、左右兩欄寬度固定，中間自適應
三欄布局一般指的是頁面中一共有三欄， 左右兩欄寬度固定，中間自適應的布局 ，三欄布局的具體實現：
利用浮動和負邊距來實現。父級元素設置左右的 padding，三列均設置向左浮動，中間一列放在最前面，寬度設置為父級元素的寬度，因此後面兩列都被擠到了下一行，通過設置 margin 負值將其移動到上一行，再利用相對定位，定位到兩邊。