溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

web前端高頻知識點面試題有哪些

發布時間:2023-03-07 09:50:03 來源:億速云 閱讀:99 作者:iii 欄目:web開發

Web前端高頻知識點面試題有哪些

目錄

  1. HTML
  2. CSS
  3. JavaScript
  4. ES6+
  5. TypeScript
  6. Vue.js
  7. React
  8. Node.js
  9. Webpack
  10. 性能優化
  11. 瀏覽器原理
  12. 網絡協議
  13. 安全
  14. 數據結構與算法
  15. 設計模式
  16. 前端工程化
  17. 跨平臺開發
  18. 其他

HTML

1. HTML5 新特性有哪些?

HTML5 引入了許多新特性,主要包括:

  • 語義化標簽:如 <header>、<footer>、<article>、<section> 等,使得頁面結構更加清晰。
  • 表單增強:新增了 <input> 類型如 email、url、date 等,以及 placeholder、required 等屬性。
  • 多媒體支持:新增了 <audio><video> 標簽,使得在網頁中嵌入音頻和視頻更加方便。
  • Canvas 和 SVG:提供了 <canvas> 標簽用于繪制圖形,以及 <svg> 標簽用于矢量圖形。
  • 本地存儲:引入了 localStoragesessionStorage,用于在客戶端存儲數據。
  • Web Workers:允許在后臺運行 JavaScript 代碼,避免阻塞主線程。
  • WebSocket:提供了全雙工通信協議,使得客戶端和服務器之間的實時通信更加高效。

2. 什么是語義化標簽?為什么要使用語義化標簽?

語義化標簽是指使用具有明確含義的 HTML 標簽來描述頁面內容的結構。例如,使用 <header> 表示頁面的頭部,使用 <footer> 表示頁面的底部。

為什么要使用語義化標簽?

  • 提高可讀性:語義化標簽使得代碼更加清晰易懂,便于開發者理解和維護。
  • SEO 優化:搜索引擎更容易理解頁面的結構,從而提高頁面的搜索排名。
  • 無障礙訪問:屏幕閱讀器等輔助工具可以更好地解析頁面內容,提升用戶體驗。

3. HTML 中的 <meta> 標簽有哪些常見用途?

<meta> 標簽用于提供頁面的元數據,常見的用途包括:

  • 字符編碼<meta charset="UTF-8"> 指定頁面的字符編碼。
  • 視口設置<meta name="viewport" content="width=device-width, initial-scale=1.0"> 用于移動端頁面適配。
  • 頁面描述<meta name="description" content="頁面描述"> 提供頁面的簡短描述。
  • 關鍵詞<meta name="keywords" content="關鍵詞1, 關鍵詞2"> 提供頁面的關鍵詞,有助于 SEO。
  • 作者信息<meta name="author" content="作者名"> 提供頁面的作者信息。

4. HTML 中的 <script> 標簽的 asyncdefer 屬性有什么區別?

<script> 標簽的 asyncdefer 屬性都用于控制腳本的加載和執行順序,但它們的行為有所不同:

  • async:腳本會異步加載,加載完成后立即執行。多個 async 腳本的執行順序不確定。
  • defer:腳本會異步加載,但會在文檔解析完成后按照順序執行。

使用場景:

  • async:適用于不依賴其他腳本的獨立腳本,如廣告、統計代碼等。
  • defer:適用于需要按順序執行的腳本,如依賴其他腳本的庫。

5. HTML 中的 <iframe> 標簽有什么作用?如何使用?

<iframe> 標簽用于在頁面中嵌入另一個 HTML 頁面。常見的用途包括嵌入地圖、視頻、廣告等。

基本用法:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

常用屬性:

  • src:指定嵌入頁面的 URL。
  • widthheight:指定嵌入頁面的寬度和高度。
  • frameborder:指定是否顯示邊框,通常設置為 0 以去除邊框。
  • sandbox:用于限制嵌入頁面的行為,如禁止腳本執行、表單提交等。

6. HTML 中的 <canvas><svg> 有什么區別?

<canvas><svg> 都用于在網頁中繪制圖形,但它們的工作原理和適用場景有所不同:

  • <canvas>

    • 基于像素的繪圖 API,適合處理復雜的圖形和動畫。
    • 通過 JavaScript 動態繪制圖形,適合游戲、數據可視化等場景。
    • 不支持事件處理,需要手動實現交互邏輯。
  • <svg>

    • 基于矢量的圖形格式,適合處理簡單的圖形和圖標。
    • 通過 XML 描述圖形,適合圖標、圖表等場景。
    • 支持事件處理,可以直接添加交互邏輯。

7. HTML 中的 <form> 標簽有哪些常用屬性?

<form> 標簽用于創建表單,常見的屬性包括:

  • action:指定表單提交的 URL。
  • method:指定表單提交的 HTTP 方法,如 GETPOST。
  • enctype:指定表單數據的編碼類型,如 application/x-www-form-urlencoded(默認)、multipart/form-data(文件上傳)等。
  • target:指定表單提交后響應的顯示位置,如 _blank(新窗口)、_self(當前窗口)等。
  • autocomplete:指定是否啟用表單的自動填充功能。

8. HTML 中的 <input> 標簽有哪些常用類型?

<input> 標簽用于創建各種輸入控件,常見的類型包括:

  • text:單行文本輸入框。
  • password:密碼輸入框。
  • email:電子郵件輸入框。
  • url:URL 輸入框。
  • number:數字輸入框。
  • date:日期選擇器。
  • checkbox:復選框。
  • radio:單選框。
  • file:文件上傳控件。
  • submit:提交按鈕。
  • reset:重置按鈕。
  • button:普通按鈕。

9. HTML 中的 <label> 標簽有什么作用?

<label> 標簽用于為表單控件添加標簽,提升用戶體驗和可訪問性。通過 for 屬性將 <label> 與對應的表單控件關聯起來,點擊標簽時可以聚焦到對應的控件。

示例:

<label for="username">用戶名:</label>
<input type="text" id="username" name="username">

10. HTML 中的 <table> 標簽有哪些常用子標簽?

<table> 標簽用于創建表格,常見的子標簽包括:

  • <thead>:表頭部分。
  • <tbody>:表體部分。
  • <tfoot>:表尾部分。
  • <tr>:表格行。
  • <th>:表頭單元格。
  • <td>:表格單元格。

示例:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年齡</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>張三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

CSS

1. CSS 盒模型是什么?標準盒模型和 IE 盒模型有什么區別?

CSS 盒模型是用于描述元素在頁面中占據空間的模型,包括內容區域、內邊距、邊框和外邊距。

標準盒模型(W3C 盒模型): - 元素的寬度和高度只包括內容區域,不包括內邊距、邊框和外邊距。 - 計算公式:width = content width

IE 盒模型(怪異盒模型): - 元素的寬度和高度包括內容區域、內邊距和邊框,但不包括外邊距。 - 計算公式:width = content width + padding + border

如何切換盒模型:

/* 標準盒模型 */
box-sizing: content-box;

/* IE 盒模型 */
box-sizing: border-box;

2. CSS 中的 position 屬性有哪些值?它們有什么區別?

position 屬性用于指定元素的定位方式,常見的值包括:

  • static:默認值,元素按照正常的文檔流進行布局。
  • relative:相對定位,元素相對于其正常位置進行偏移。
  • absolute:絕對定位,元素相對于最近的已定位祖先元素進行定位。
  • fixed:固定定位,元素相對于瀏覽器窗口進行定位,不隨頁面滾動而移動。
  • sticky:粘性定位,元素在滾動到特定位置時變為固定定位。

3. CSS 中的 display 屬性有哪些常用值?它們有什么區別?

display 屬性用于指定元素的顯示方式,常見的值包括:

  • block:塊級元素,獨占一行,可以設置寬度和高度。
  • inline:行內元素,不獨占一行,不能設置寬度和高度。
  • inline-block:行內塊元素,不獨占一行,但可以設置寬度和高度。
  • none:元素不顯示,且不占據空間。
  • flex:彈性盒子布局,用于創建靈活的布局。
  • grid:網格布局,用于創建復雜的網格布局。

4. CSS 中的 float 屬性有什么作用?如何清除浮動?

float 屬性用于使元素浮動在頁面的左側或右側,常用于實現文字環繞圖片的效果。

清除浮動的方法:

  • 使用 clear 屬性:在浮動元素后面添加一個空元素,并設置 clear: both;。
  • 使用 overflow 屬性:在父元素上設置 overflow: hidden;overflow: auto;。
  • 使用偽元素:在父元素上使用 ::after 偽元素清除浮動。
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

5. CSS 中的 flexbox 布局有哪些常用屬性?

flexbox 是一種彈性盒子布局模型,常用的屬性包括:

  • display: flex;:將容器設置為彈性盒子布局。
  • flex-direction:指定主軸的方向,如 row(水平)、column(垂直)。
  • justify-content:指定主軸上的對齊方式,如 flex-start、center、space-between。
  • align-items:指定交叉軸上的對齊方式,如 flex-start、center、stretch。
  • flex-wrap:指定是否換行,如 nowrap(不換行)、wrap(換行)。
  • align-content:指定多行內容在交叉軸上的對齊方式。

6. CSS 中的 grid 布局有哪些常用屬性?

grid 是一種網格布局模型,常用的屬性包括:

  • display: grid;:將容器設置為網格布局。
  • grid-template-columns:指定列的寬度。
  • grid-template-rows:指定行的高度。
  • grid-gap:指定網格之間的間距。
  • grid-columngrid-row:指定元素在網格中的位置。
  • justify-itemsalign-items:指定網格項在單元格內的對齊方式。
  • justify-contentalign-content:指定網格在容器內的對齊方式。

7. CSS 中的 BEM 命名規范是什么?

BEM 是一種 CSS 命名規范,全稱為 Block Element Modifier,用于提高 CSS 代碼的可維護性和可讀性。

  • Block:獨立的模塊或組件,如 .header、.menu。
  • Element:塊中的子元素,如 .header__logo、.menu__item。
  • Modifier:塊或元素的狀態或變體,如 .header--fixed、.menu__item--active。

示例:

<div class="header">
  <div class="header__logo"></div>
  <div class="header__menu">
    <div class="header__menu__item header__menu__item--active"></div>
  </div>
</div>

8. CSS 中的 偽類偽元素 有什么區別?

  • 偽類:用于選擇元素的特定狀態,如 :hover、:focus、:nth-child()。
  • 偽元素:用于創建不在 DOM 中的虛擬元素,如 ::before、::after、::first-line。

示例:

/* 偽類 */
a:hover {
  color: red;
}

/* 偽元素 */
p::before {
  content: "前綴";
}

9. CSS 中的 媒體查詢 是什么?如何使用?

媒體查詢用于根據設備的特性(如屏幕寬度、分辨率)應用不同的樣式,常用于響應式設計。

示例:

/* 當屏幕寬度小于 600px 時應用此樣式 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

10. CSS 中的 動畫過渡 有什么區別?

  • 動畫:通過 @keyframes 定義動畫的關鍵幀,可以控制動畫的每一幀。
  • 過渡:通過 transition 定義元素在狀態變化時的過渡效果,如顏色、大小等。

示例:

/* 動畫 */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.element {
  animation: slide 2s infinite;
}

/* 過渡 */
.element {
  transition: background-color 0.5s ease;
}

.element:hover {
  background-color: red;
}

JavaScript

1. JavaScript 中的數據類型有哪些?

JavaScript 中的數據類型分為兩大類:原始類型引用類型。

  • 原始類型

    • number:數字,包括整數和浮點數。
    • string:字符串。
    • boolean:布爾值,truefalse。
    • null:表示空值。
    • undefined:表示未定義的值。
    • symbol:表示唯一的標識符(ES6 新增)。
  • 引用類型

    • object:對象,包括數組、函數、日期等。

2. JavaScript 中的 ===== 有什么區別?

  • ==:寬松相等,會進行類型轉換后再比較。
  • ===:嚴格相等,不會進行類型轉換,只有類型和值都相同時才返回 true。

示例:

1 == '1';  // true
1 === '1'; // false

3. JavaScript 中的 閉包 是什么?有什么作用?

閉包是指函數能夠訪問其詞法作用域中的變量,即使函數在其詞法作用域之外執行。

作用:

  • 數據封裝:可以創建私有變量,避免全局污染。
  • 函數柯里化:通過閉包實現函數的柯里化,即部分應用函數參數。

示例:

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

4. JavaScript 中的 原型鏈 是什么?

原型鏈是 JavaScript 中實現繼承的機制。每個對象都有一個原型對象,通過 __proto__ 屬性指向其原型對象。當訪問對象的屬性或方法時,如果對象本身沒有該屬性或方法,JavaScript 會沿著原型鏈向上查找,直到找到該屬性或方法或到達原型鏈的頂端(null)。

示例:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}`);
};

const person = new Person('Alice');
person.sayHello(); // Hello, Alice

5. JavaScript 中的 this 指向什么?

this 的指向取決于函數的調用方式:

  • 全局上下文:在全局作用域中,this 指向 window(瀏覽器)或 global(Node.js)。
  • 函數調用:在普通函數中,this 指向 window(非嚴格模式)或 undefined(嚴格模式)。
  • 方法調用:在對象方法中,this 指向調用該方法的對象。
  • 構造函數:在構造函數中,this 指向新創建的對象。
  • 箭頭函數:箭頭函數沒有自己的 this,this 指向外層作用域的 this。

示例:

const obj = {
  name: 'Alice',
  sayHello: function() {
    console.log(`Hello, ${this.name}`);
  }
};

obj.sayHello(); // Hello, Alice

6. JavaScript 中的 事件循環 是什么?

事件循環是 JavaScript 處理異步操作的機制。JavaScript 是單線程的,但通過事件循環可以實現非阻塞的異步操作。

事件循環的工作流程:

  1. 執行同步代碼:首先執行所有的同步代碼。
  2. 處理微任務:執行所有的微任務(如 Promisethen 回調)。
  3. 處理宏任務:執行一個宏任務(如 setTimeout 回調)。
  4. 重復:重復上述步驟,直到所有任務執行完畢。
向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女