前端面試題(五)

• label 有哪些做用, 並舉例說明

  • 首先最經常使用的是 label 與表單的關聯

    <label for="hobby">愛好</label>
    <input id="hobby" type="checkbox"  value="0">

  • 方便鼠標點擊使用，加強用戶操做體驗
  • 用來顯示文字信息，能夠固定也能夠從數據庫中讀出信息綁定。

其實 label 標籤有兩個屬性比較經常使用 一個是 for 一個是accesskey
for 屬性:

表示這個label 是爲哪一個控件服務的,for 屬性綁定的 html 元素的 id 或者 name 屬性. 你點擊這個標籤的時候，所綁定的元素將獲取焦點 ，點擊label所包裹內容，自動指向for指定的id或name

accesskey 屬性:

則定義了訪問這個控件的熱鍵( 所設置的快捷鍵不能與瀏覽器的快捷鍵衝突，不然將優先激活瀏覽器的快捷鍵 )

---

• 用 css 建立一個三角形, 並說明其原理

  首先咱們先看下實現的代碼

  width: 0;
      height: 0;
      margin: 100px auto;
      border-top: 50px solid transparent;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 50px solid blue;

  效果以下:
  

  咱們如今來分析一下這個是如何實現的

  這裏咱們對 border 可能有一下誤解. 一般咱們經常使用的就是作個邊框 border: 1px solid 這樣相似的.只是給圖形一個1px 的邊框.咱們會誤解爲border 就是四邊邊框.
  可是其實並非.其實元素的 border 是由 三角形組成的.咱們舉個例子, 把邊框的寬度變大一些

  div {
      width: 50px;
      height: 50px;
      border: 40px solid;
      border-color: orange blue red green;
  }

  效果以下:
  

  因此當咱們把 div 的寬高設爲 0 的時候 就徹底用 border 撐起來就是以下樣子

  

  這下就很明顯了 想要獲得四個三角形的哪一個 就把其餘邊設爲透明就能夠啦
  這樣是否是就很明瞭了!!!!!!!!

---

• 寫一個去除製表符和換行符的方法

  一般這樣的方法最簡單的是使用正則表達式來篩選

  \f 匹配換頁字符。
  \n 匹配換行字符。
  \r 匹配回車符字符。
  \t 匹配製表字符。
  \v 匹配垂直製表符。

  function fn(str) {
    return str.replace(/[\t\n]/g, '')
  }

  正則表達式的東西仍是蠻多的 真正學起來正則能夠很深很深.實不相瞞,我對正則就是屬於只知其一;不知其二的狀態 每次使用都會去查表 畢竟其實實際用到的不多 都是封裝一次到方法庫裏面了.... 尷尬

面試題摘自 Github