前端筆記

時間  2021-08-12
標籤 javascript css html html5 java 算法 canvas 小程序 api 數組 欄目 JavaScript 简体版
原文   原文鏈接

1、html

一、html語義化

定義：語義化是根據內容結構化（內容語義化），選擇合適的標籤（代碼語義化），便於開發者閱讀和寫出更優雅代碼的同時，讓瀏覽器的爬蟲和機器更好的解析javascript

做用：
一、有利於SEO，有助於爬蟲抓取更多的有效信息，爬蟲是依賴於標籤來肯定上下文和各個關鍵字的權重
二、語義化的HTML在沒有CSS的狀況下也能呈現較好的內容結構與代碼結構
三、方便其餘設備的解析
四、便於團隊開發和維護
css

注意：
一、儘量少的使用無語義的標籤 div 和 span
二、在語義不明顯時，既可使用 div 或者 p 時，儘可能用 p, 由於 p 在默認狀況下有上下間距，對兼容 特殊終端有利
三、不要使用純樣式標籤，如:b、font、u 等，改用 css 設置
四、須要強調的文本，能夠包含在 strong 或者 em 標籤中(瀏覽器預設樣式，能用CSS 指定就不用他 們)，strong 默認樣式是加粗(不要用 b)，em 是斜體(不用i)
五、使用表格時，標題要用 caption，表頭用 thead，主體部分用 tbody 包圍，尾部用 tfoot 包圍。表 頭和通常單元格要區分開，表頭用 th，單元格用 td
六、表單域要用 fieldset 標籤包起來，並用 legend 標籤說明表單的用途
七、每一個 input 標籤對應的說明文本都須要使用 label 標籤，而且經過爲 input 設置id 屬性，在 lable 標籤中設置 for=someld 來讓說明文本和相對應的 input 關聯起來
html

html5新標籤:
一、article: 定義文檔內的文章
二、footer: 頁腳
三、header: 頁眉
四、section: 定義文檔中的章節
五、dialog: 定義對話框或窗口
六、canvas: 可被用來經過JavaScript（Canvas API 或 WebGL API）繪製圖形及圖形動畫html5

二、canvas相關

使用前需先得到上下文環境，暫不支持3djava

經常使用api：
一、fillRect(x, y, width, height)實心矩形
二、strokeRect(x, y, width, height)空心矩形
三、fillText('殺死那個河南人'，200, 200)實心文字
四、strokeRect('殺死那個河南人', 200, 200)空心文字
算法

新版本兼容低版本:
一、ie9 以前版本經過 createElement 建立 html5 新標籤
二、引入 html5shiv.jscanvas

三、svg和canvas的區別

一、canvas是h5提供的新的繪圖方法
二、svg已經有了十多年的歷史 canvas畫圖基於像素點，是位圖，若是進行放大或縮小會失真
三、svg基於圖形，用html標籤描繪形狀，放大縮小不會失真
四、canvas須要在js中繪製，svg在html繪製
五、canvas支持顏色比svg多
六、canvas沒法對已經繪製的圖像進行修改、操做，svg能夠獲取到標籤進行操做
小程序

四、html5新特性

HTML5主要是關於圖像，位置，存儲，多任務等功能的增長。
一、拖拽釋放(Drag and drop) API
二、語義化更好的內容標籤(header,nav,footer,aside,article,section) 音頻、視頻API(audio,video)
三、畫布(Canvas) API
四、地理(Geolocation) API
五、本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失; sessionStorage 的數據在瀏覽器關閉後自動刪除
六、表單控件，calendar、date、time、email、url、search
api

五、如何處理HTML5新標籤的瀏覽器兼容問題

IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持 HTML5新標籤，固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架數組

六、說說 title 和 alt 屬性

一、兩個屬性都是當鼠標滑動到元素上的時候顯示
二、alt 是 img 的特有屬性，是圖片內容的等價描述，圖片沒法正常顯示時候的替代文字。
三、title 屬性能夠用在除了base，basefont，head，html，meta，param，script和title以外的全部標籤，是對dom元素的一種相似註釋說明

七、HTML全局屬性(global attribute)有哪些

class :爲元素設置類標識
data-* : 爲元素增長自定義屬性
draggable : 設置元素是否可拖拽
id : 元素 id ，文檔內惟一
lang : 元素內容的的語言
style : 行內 css 樣式
title : 元素相關的建議信息

八、

2、CSS

一、讓一個元素水平垂直居中，到底有多少種方案?

image.png

二、浮動佈局的優勢?有什麼缺點?清除浮動有哪些方式?

浮動佈局簡介

當元素浮動之後能夠向左或向右移動，直到它的外邊緣碰到包含它的框或者另一 個浮動元素的邊框爲止。元素浮動之後會脫離正常的文檔流，因此文檔的普通流中的框就變現的好 像浮動元素不存在同樣。

優勢

這樣作的優勢就是在圖文混排的時候能夠很好的使文字環繞在圖片周圍，由於浮動元素會脫離網頁文檔，與其餘元素髮生重疊，可是，不會與文字內容發生重疊。另外當元素浮動了起來以後， 它有着塊級元素的一些性質例如能夠設置寬高等，但它與inline-block仍是有一些區別的，第一個就是關 於橫向排序的時候，float能夠設置方向而inline-block方向是固定的;還有一個就是inline-block在使用 時有時會有空白間隙的問題

缺點

最明顯的缺點就是浮動元素一旦脫離了文檔流，就沒法撐起父元素，會形成父級元素高度塌陷。

清除浮動的方式

1）添加額外標籤

<div class="parent"> //添加額外標籤而且添加clear屬性
  <div style="clear:both"></div> //也能夠加一個br標籤
</div>
複製代碼

2）父級添加overflow屬性，或者設置高度

<div class="parent" style="overflow:hidden">//auto 也能夠 //將父元素的overflow設置爲hidden
  <div class="f"></div>
</div>
複製代碼

3）創建僞類選擇器清除浮動(推薦)

//在css中添加:after僞元素
.parent:after {
/* 設置添加子元素的內容是空 */
  content: '';
/* 設置添加子元素爲塊級元素 */
  display: block;
/* 設置添加的子元素的高度0 */
  height: 0;
/* 設置添加子元素看不見 */
  visibility: hidden;
/* 設置clear:both */
  clear: both;
}
<div class="parent">
    <div class="f"></div>
</div>
複製代碼

三、使用display:inline-block會產生什麼問題?解決方法?

問題復現

問題: 兩個display:inline-block元素放到一塊兒會產生一段空白。
如代碼:

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>
<style>
.container { width: 800px; height: 200px;
}
.left {
font-size: 14px; background: red; display: inline-block; width: 100px;
height: 100px;
}
.right {
font-size: 14px; background: blue; display: inline-block; width: 100px;
height: 100px;
}
    </style>
  </head>
<body>

 
<div class="container">
  <div class="left">
左
</div><div class="right"> 右
  </div>
</div>

<div class="container">
      <div class="left">
左
      </div>
      <div class="right">
右
      </div>
    </div>
  </body>
</html>
複製代碼

效果以下:

image.png

產生空白的緣由

元素被當成行內元素排版的時候，元素之間的空白符(空格、回車換行等)都會被瀏覽器處理，根據 CSS中white-space屬性的處理方式(默認是normal，合併多餘空白)，原來HTML代碼中的回車換行被 轉成一個空白符，在字體不爲0的狀況下，空白符佔據必定寬度，因此inline-block的元素之間就出現了空隙。

解決辦法

1）將子元素標籤的結束符和下一個標籤的開始符寫在同一行或把全部子標籤寫在同一行

<div class="container">
  <div class="left"> 左 </div><div class="right"> 右 </div>
</div>
複製代碼

2）父元素中設置font-size: 0，在子元素上重置正確的font-size

.container{ width:800px; height:200px; font-size: 0;}
複製代碼

3）爲子元素設置float:left

.left{
float: left; font-size: 14px; background: red; display: inline-block; width: 100px;
height: 100px;
} //right是同理
複製代碼

四、佈局題:div垂直居中，左右10px，高度始終爲寬度一半

問題描述: 實現一個div垂直居中, 其距離屏幕左右兩邊各10px, 其高度始終是寬度的50%。同時div 中有一個文字A，文字須要水平垂直居中。

思路一:利用height:0; padding-bottom: 50%;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        .outer_wrapper {
            margin: 0 10px;
            height: 100%;
            /* flex佈局讓塊垂直居中 */
            display: flex;
            align-items: center;
        }

        .inner_wrapper {
            background: red;
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 50%;
        }

        .box {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="outer_wrapper">
        <div class="inner_wrapper">
            <div class="box">A</div>
        </div>
    </div>
</body>

</html>
複製代碼

強調兩點:

1）padding-bottom到底是相對於誰的?

答案是相對於 父元素的width值 。 那麼對於這個out_wrapper的用意就很好理解了。 CSS呈流式佈局，div默認寬度填滿，即100%大小， 給out_wrapper設置margin: 0 10px;至關於讓左右分別減小了10px。

2）父元素相對定位，那絕對定位下的子元素寬高若設爲百分比，是相對誰而言的?

相對於父元素的(content + padding)值, 注意不含border 延伸:若是子元素不是絕對定位，那寬高設爲百分比是相對於父元素的寬高，標準盒模型下是 content, IE盒模型是content+padding+border。

思路二: 利用calc和vw

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .wrapper {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .box {
            margin-left: 10px;
            /* vw是視口的寬度， 1vw表明1%的視口寬度 */
            width: calc(100vw - 20px);
            /* 寬度的一半 */
            height: calc(50vw - 10px);
            position: absolute;
            background: red;
            /* 下面兩行讓塊垂直居中 */
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box">A</div>
    </div>
</body>

</html>
複製代碼

3、javascript

4、框架

  • React

  • Vue

5、Typescript

6、算法

一、兩個數不使用四則運算得出和

1)按位與
8 & 7 // -> 0
// 1000 & 0111 -> 0000 -> 0
每一位都爲 1，結果才爲 1
2)按位或
8 | 7 // -> 15
// 1000 | 0111 -> 1111 -> 15
其中一位爲 1，結果就是 1
3)按位異或 每一位都不一樣，結果才爲 1
8 ^ 7 // -> 15
8 ^ 8 // -> 0
// 1000 ^ 0111 -> 1111 -> 15 // 1000 ^ 1000 -> 0000 -> 0
從以上代碼中能夠發現按位異或就是不進位加法

這道題中能夠按位異或，由於按位異或就是不進位加法，8 ^ 8 = 0 若是進位了，就是 16 了，因此咱們只須要將兩個數進行異或操做，而後進位。那麼也就是說兩個二進制都是 1 的位置，左邊應該有一個 進位 1，因此能夠得出如下公式 a + b = (a ^ b) + ((a & b) << 1) ，而後經過迭代的方式模擬加法

答案：

function sum(a, b) {<br>
    if (a == 0) return b<br>
    if (b == 0) return a<br>
    let newA = a ^ b<br>
    let newB = (a & b) << 1<br>
    return sum(newA, newB)<br>
}
複製代碼

二、冒泡排序

冒泡排序的原理以下，從第一個元素開始，把當前元素和下一個索引元素進行比較。若是當前元素大， 那麼就交換位置，重複操做直到比較到最後一個元素，那麼此時最後一個元素就是該數組中最大的數。 下一輪重複以上操做，可是此時最後一個元素已是最大數了，因此不須要再比較最後一個元素，只需 要比較到 length - 1 的位置。

function checkArray(array) {
  if (!array || array.length <= 2) return
}

function swap(array, left, right) {
  let rightValue = array[right]
  array[right] = array[left]
  array[left] = rightValue
}

function bubble(array) {
  checkArray(array);
  for (let i = array.length - 1; i > 0; i--) {
    // 從 0 到 `length-1` 遍歷
    for (let j = 0; j < i; j++) {
      if (array[j] > array[j + 1]) swap(array, j, j + 1)
    }
  }
  return array;
}
複製代碼

時間複雜度: 等差數列，去掉常數項後爲O(n*n)

三、插入排序

image.png 有點像冒泡排序的逆向操做。冒泡排序是從最後一個開始排，插入排序是從第一個開始排

冒泡排序的原理以下，從第一個元素開始，把當前元素和下一個索引元素進行比較。若是當前元素大， 那麼就交換位置，重複操做直到比較到最後一個元素，那麼此時最後一個元素就是該數組中最大的數。 下一輪重複以上操做，可是此時最後一個元素已是最大數了，因此不須要再比較最後一個元素，只需 要比較到 length - 1 的位置。

function checkArray(array) {
  if (!array || array.length <= 2) return
}

function swap(array, left, right) {
  let rightValue = array[right]
  array[right] = array[left]
  array[left] = rightValue
}

function sort(arr) {
  for(let i = 1; i < arr.length; i++) {
    for(let j = i -1; j >= 0 && arr[j] > arr[j + 1]; j--) {
      swap(arr, j, j + 1)
    }
  }
  return arr
}
複製代碼

時間複雜度: 等差數列，去掉常數項後爲O(n*n)

四、選擇排序

image.png

選擇排序的原理

遍歷數組，設置最小值的索引爲 0，若是取出的值比當前最小值小，就替換最小 值索引，遍歷完成後，將第一個元素和最小值索引上的值交換。如上操做後，第一個元素就是數組中的 最小值，下次遍歷就能夠從索引 1 開始重複上述操做。

function selection(array) { checkArray(array);
for (let i = 0; i < array.length - 1; i++) {
let minIndex = i;
for (let j = i + 1; j < array.length; j++) {
      minIndex = array[j] < array[minIndex] ? j : minIndex;
    }
    swap(array, i, minIndex);
  }
  return array;
}
複製代碼

時間複雜度: 等差數列，去掉常數項後爲O(n*n)

7、小程序

8、瀏覽器

一、瀏覽器每幀執行動做

  • 首先須要處理輸入事件，可以讓用戶獲得最先的反饋；

  • 接下來是處理定時器，須要檢查定時器是否到時間，並執行對應的回調；

  • 接下來處理 Begin Frame（開始幀），即每一幀的事件，包括 window.resize、scroll、media query change 等；

  • 接下來執行請求動畫幀 requestAnimationFrame（rAF），即在每次繪製以前，會執行 rAF 回調；

  • 緊接着進行 Layout 操做，包括計算佈局和更新佈局，即這個元素的樣式是怎樣的，它應該在頁面如何展現；

  • 接着進行 Paint 操做，獲得樹中每一個節點的尺寸與位置等信息，瀏覽器針對每一個元素進行內容填充；

  • 到這時以上的六個階段都已經完成了，接下來處於空閒階段，能夠在這時執行 requestIdleCallback 裏註冊的任務；

二、

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程