web前端開發面試題(六)
阿新 • • 發佈：2021-01-22
技術標籤：JavaScriptcssweb前端cssjshtml5htmljavascript
前端面試題第六天
一、 HTML 部分
1.1 label都有哪些作用
label 元素不會向用戶呈現任何特殊效果。
不過，它為滑鼠使用者改進了可用性。
如果在 label 元素內點選文字，就會觸發此控制元件。
就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。
程式碼示例：
<body>
<label for="title">標題：</label>
<input id="title" 
總結：
- 一般要實現點選單選按鈕框文字或多選按鈕框文字對應選擇按鈕被選擇，使用label標籤即可，注意for與id值相同即可實現。
- Label標籤預設情況下是沒有任何樣式，可以使用CSS設定css寬度、css高度、css邊框等樣式
二、CSS 部分
2.1 用css建立一個三角形，並簡述原理
先附上程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" 
實現原理：
當我們設定一個div其width與height為100px，並且設定其四邊框的寬度為100px，且分別設定其顏色後，我們可以看到如下的一張圖片
此時如果設定這個div的height為0的話，其他不變，會得到下面這個圖形
下面把其寬度也設定為0後，得到如下的一張圖片
所以這就是我們把width，height設定為0後得到的效果
詳解：
.box {
width: 100px;
height: 100px;
border-top: 30px solid #000;
border-right: 30px solid #ff0000;
border-left: 30px solid #00ff00;
border-bottom: 30px solid #0000ff;
}
會得到如下的一張圖
接著當不設定border-bottom，即預設其為0時，可以得到下面的圖片
然後當設定其width為0時，如下圖
繼續設定其height為0
最後假若你把border-left,border-right設定為透明之後，就可以看到如下的三角形了
三、 JS 部分
3.1 寫一個去除製表符和換行符的方法
3.1.1 知識點：
- \t 水平製表符 將當前位置移到下一個tab位置。
- \r 回車 將當前位置移到本行的開頭。
- \n 回車換行 將當前位置移到下一行的開頭。
- \f 換頁 將當前位置移到下一頁的開頭。
<script>
var str = '我是JS第六天的內容 \n 我要去除製表符 和 換行符';
function fn(str) {
var res = str.replace(/[\t|\n|\r|\f\+]/g,'');
return res;
}
console.log(fn(str))
</script>
解釋一下為什麼不用 /s：
/s會把所有空格也全部匹配上 所以老老實實用 [\t|\n|\r|\f+]