通過以下 HTML/CSS/JavaScript 相關技巧，希望能幫助大家填補一點點關於前端開發方面的知識空白。
元素這項 HTML 元素的使用頻率極低，今天我們就要為它正名！
< datalist>標籤用於為< input>元素提供一項「自動補全」功能。在鍵入過程中，您會看到如下圖所示的預定義下拉菜單及選項。
示例：
<input**list="animals"**name="animal" id="animal"><datalist**id="animals"**><option value="Cat"><option value="Dog"><option value="Chicken"><option value="Cow"><option value="Pig"></datalist>如果大家希望使用帶有複選框的可點擊標籤，最常見的作法可能是將 label 元素與「for」屬性結合使用，詳見以下代碼。
<input type="checkbox" name="checkbox" id="checkbox_id" value="value"><label for="checkbox_id">I agree</label>實際上，您完全可以將 label 元素直接放在複選框旁邊以達成相同的效果。這樣，我們就能點擊「I agree」並輕鬆選中該複選框！
示例：
<label><input type="checkbox" name="checkbox" id="checkbox_id" value="value"></label>這可能是本份清單中知名度最高的技巧了，但大多數朋友並沒有意識到它的強大力量。
子選擇器用於匹配某一指定元素的全部子元素。它能夠給出兩項元素之間的關係。
示例：
/* 1st <li> element */li:first-child{ color: red;}
/* Last <li> element */li:last-child{ color: green;}
// Select All <li> elements but The First Three */li:nth-child(n+4) { color: yellow;}
/* Select only the first 3 <li>elemets*/li:nth-child(-n+3) { color: green;}
/* Styles are elements that are not a <p> */.my-class:not(p) { display: none;}寫作模式是一項鮮為人知，但卻極為強大的 CSS 屬性。
您可以藉此讓文本以垂直形式排列：
完成此操作的代碼非常簡單。
writing-mode: vertical-rl;完整示例：
<style>.sideway { writing-mode: vertical-rl;}.normal { width: 5%; float: left;}</style><p> Hi some paragraph text</p><p> Hey I'm somesidwaytext</p>其中 writing-mode 屬性還包含五個具體選項。
writing-mode: horizontal-tb;writing-mode: vertical-rl;writing-mode: vertical-lr;writing-mode: sideways-rl;writing-mode: sideways-lr;calc()CSS 函數允許您在指定 CSS 屬性值的前提下執行計算。
大家在 calc() 中用得最多的功能，應該就是混合單位了，例如將百分比與像素相混合。這項任務無法由預處理器完成，只能在渲染過程中執行。
示例：
width:calc(5px + 100px);width:calc(6em * 8);width:calc(100% - 50px); 6 Math.round 與 Math.floor 備選項這項技巧雖然有點難度，但效果也相當出色。
Math.floor() 您可以使用 0|:
**0|**743.4343 // returns 743Math.floor(743.4343) // returns 743Math.round() 您可以使用 +.5|0:
812.777**+.5|0**// returns 813Math.round(812.777) // returns 813不少朋友可能已經聽說並使用過 console.log()，但對於 console.table() 恐怕還比較陌生。它的作用是接收一個數組或者一個對象，從而以非常整潔的方式在控制臺視圖內顯示一份表格！
數組示例：
let car1 ={ name: "Audi", model : "A4" }let car2 = { name : "Volvo", model : "XC90" }let car3 = { name : "Ford", model : "Fusion" }console.table([car1, car2, car3]);
另一項非常實用的控制臺方法。console.time() 會啟動一個計時器，以參數作為標籤，而後使用具有相同標籤名稱的 console.timeEnd()，使控制臺以毫秒為單位輸出以 console.time() 及 console.timeEnd() 調用為起點的時間。
示例：
// Starts the timerconsole.time("MyTimer");// Ends the timer and outputs the time in millisecondsconsole.timeEnd("MyTimer");「In」操作符能夠檢查數組中是否存在索引，並返回 true 或 false 結果。
示例：
let cars = ['Audi', 'BMW', 'Mini', 'Bentley', 'Porsche'];0 in cars // returns true3 in cars // returns true6 in cars // returns false您也可以藉此檢查對象中是否存在某項屬性。
示例：
constperson ={firstName: "Dave", surname: "Smith", age: 34 };'firstName' in person // returns true'surname' in person // returns true'age' in person // returns true'gendar' in person // returns false這是一項偶然的發現：如果大家在 Chrome 瀏覽器的網址欄中輸入以下內容，然後按下回車，瀏覽器就會變成記事本形式。
data:text/html, <html contenteditable>11 在 if 代碼塊中，去掉多個語句之間的大括號if (1 === 1)alert("Alert 1"), alert("Alert 2");雖然這 11 項技巧未必都很實用，但至少也算是各具價值，而且大多沒能在實際前端開發中得到重視。肯定還有更多重要技巧等待我們挖掘，期待聽到大家的分享與推薦！
原文連結：
https://medium.com/javascript-in-plain-english/11-frontend-tricks-that-most-frontend-developers-dont-know-about-68dc48199ed6