HTML5 引入了許多新特性,主要包括:
<header>
、<footer>
、<article>
、<section>
等,使得頁面結構更加清晰。<input>
類型如 email
、url
、date
等,以及 placeholder
、required
等屬性。<audio>
和 <video>
標簽,使得在網頁中嵌入音頻和視頻更加方便。<canvas>
標簽用于繪制圖形,以及 <svg>
標簽用于矢量圖形。localStorage
和 sessionStorage
,用于在客戶端存儲數據。語義化標簽是指使用具有明確含義的 HTML 標簽來描述頁面內容的結構。例如,使用 <header>
表示頁面的頭部,使用 <footer>
表示頁面的底部。
為什么要使用語義化標簽?
<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="作者名">
提供頁面的作者信息。<script>
標簽的 async
和 defer
屬性有什么區別?<script>
標簽的 async
和 defer
屬性都用于控制腳本的加載和執行順序,但它們的行為有所不同:
async
:腳本會異步加載,加載完成后立即執行。多個 async
腳本的執行順序不確定。defer
:腳本會異步加載,但會在文檔解析完成后按照順序執行。使用場景:
async
:適用于不依賴其他腳本的獨立腳本,如廣告、統計代碼等。defer
:適用于需要按順序執行的腳本,如依賴其他腳本的庫。<iframe>
標簽有什么作用?如何使用?<iframe>
標簽用于在頁面中嵌入另一個 HTML 頁面。常見的用途包括嵌入地圖、視頻、廣告等。
基本用法:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
常用屬性:
src
:指定嵌入頁面的 URL。width
和 height
:指定嵌入頁面的寬度和高度。frameborder
:指定是否顯示邊框,通常設置為 0
以去除邊框。sandbox
:用于限制嵌入頁面的行為,如禁止腳本執行、表單提交等。<canvas>
和 <svg>
有什么區別?<canvas>
和 <svg>
都用于在網頁中繪制圖形,但它們的工作原理和適用場景有所不同:
<canvas>
:
<svg>
:
<form>
標簽有哪些常用屬性?<form>
標簽用于創建表單,常見的屬性包括:
action
:指定表單提交的 URL。method
:指定表單提交的 HTTP 方法,如 GET
或 POST
。enctype
:指定表單數據的編碼類型,如 application/x-www-form-urlencoded
(默認)、multipart/form-data
(文件上傳)等。target
:指定表單提交后響應的顯示位置,如 _blank
(新窗口)、_self
(當前窗口)等。autocomplete
:指定是否啟用表單的自動填充功能。<input>
標簽有哪些常用類型?<input>
標簽用于創建各種輸入控件,常見的類型包括:
text
:單行文本輸入框。password
:密碼輸入框。email
:電子郵件輸入框。url
:URL 輸入框。number
:數字輸入框。date
:日期選擇器。checkbox
:復選框。radio
:單選框。file
:文件上傳控件。submit
:提交按鈕。reset
:重置按鈕。button
:普通按鈕。<label>
標簽有什么作用?<label>
標簽用于為表單控件添加標簽,提升用戶體驗和可訪問性。通過 for
屬性將 <label>
與對應的表單控件關聯起來,點擊標簽時可以聚焦到對應的控件。
示例:
<label for="username">用戶名:</label>
<input type="text" id="username" name="username">
<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 盒模型是用于描述元素在頁面中占據空間的模型,包括內容區域、內邊距、邊框和外邊距。
標準盒模型(W3C 盒模型):
- 元素的寬度和高度只包括內容區域,不包括內邊距、邊框和外邊距。
- 計算公式:width = content width
IE 盒模型(怪異盒模型):
- 元素的寬度和高度包括內容區域、內邊距和邊框,但不包括外邊距。
- 計算公式:width = content width + padding + border
如何切換盒模型:
/* 標準盒模型 */
box-sizing: content-box;
/* IE 盒模型 */
box-sizing: border-box;
position
屬性有哪些值?它們有什么區別?position
屬性用于指定元素的定位方式,常見的值包括:
static
:默認值,元素按照正常的文檔流進行布局。relative
:相對定位,元素相對于其正常位置進行偏移。absolute
:絕對定位,元素相對于最近的已定位祖先元素進行定位。fixed
:固定定位,元素相對于瀏覽器窗口進行定位,不隨頁面滾動而移動。sticky
:粘性定位,元素在滾動到特定位置時變為固定定位。display
屬性有哪些常用值?它們有什么區別?display
屬性用于指定元素的顯示方式,常見的值包括:
block
:塊級元素,獨占一行,可以設置寬度和高度。inline
:行內元素,不獨占一行,不能設置寬度和高度。inline-block
:行內塊元素,不獨占一行,但可以設置寬度和高度。none
:元素不顯示,且不占據空間。flex
:彈性盒子布局,用于創建靈活的布局。grid
:網格布局,用于創建復雜的網格布局。float
屬性有什么作用?如何清除浮動?float
屬性用于使元素浮動在頁面的左側或右側,常用于實現文字環繞圖片的效果。
清除浮動的方法:
clear
屬性:在浮動元素后面添加一個空元素,并設置 clear: both;
。overflow
屬性:在父元素上設置 overflow: hidden;
或 overflow: auto;
。::after
偽元素清除浮動。.clearfix::after {
content: "";
display: block;
clear: both;
}
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
:指定多行內容在交叉軸上的對齊方式。grid
布局有哪些常用屬性?grid
是一種網格布局模型,常用的屬性包括:
display: grid;
:將容器設置為網格布局。grid-template-columns
:指定列的寬度。grid-template-rows
:指定行的高度。grid-gap
:指定網格之間的間距。grid-column
和 grid-row
:指定元素在網格中的位置。justify-items
和 align-items
:指定網格項在單元格內的對齊方式。justify-content
和 align-content
:指定網格在容器內的對齊方式。BEM
命名規范是什么?BEM
是一種 CSS 命名規范,全稱為 Block Element Modifier,用于提高 CSS 代碼的可維護性和可讀性。
.header
、.menu
。.header__logo
、.menu__item
。.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>
偽類
和 偽元素
有什么區別?:hover
、:focus
、:nth-child()
。::before
、::after
、::first-line
。示例:
/* 偽類 */
a:hover {
color: red;
}
/* 偽元素 */
p::before {
content: "前綴";
}
媒體查詢
是什么?如何使用?媒體查詢用于根據設備的特性(如屏幕寬度、分辨率)應用不同的樣式,常用于響應式設計。
示例:
/* 當屏幕寬度小于 600px 時應用此樣式 */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
動畫
和 過渡
有什么區別?@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 中的數據類型分為兩大類:原始類型 和 引用類型。
原始類型:
number
:數字,包括整數和浮點數。string
:字符串。boolean
:布爾值,true
或 false
。null
:表示空值。undefined
:表示未定義的值。symbol
:表示唯一的標識符(ES6 新增)。引用類型:
object
:對象,包括數組、函數、日期等。==
和 ===
有什么區別?==
:寬松相等,會進行類型轉換后再比較。===
:嚴格相等,不會進行類型轉換,只有類型和值都相同時才返回 true
。示例:
1 == '1'; // true
1 === '1'; // false
閉包
是什么?有什么作用?閉包是指函數能夠訪問其詞法作用域中的變量,即使函數在其詞法作用域之外執行。
作用:
示例:
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
原型鏈
是什么?原型鏈是 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
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
事件循環
是什么?事件循環是 JavaScript 處理異步操作的機制。JavaScript 是單線程的,但通過事件循環可以實現非阻塞的異步操作。
事件循環的工作流程:
Promise
的 then
回調)。setTimeout
回調)。免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。