html：

1如何理解HTML5結(jié)構(gòu)語義化?

HTML5結(jié)構(gòu)語義化是指使用合適的HTML標(biāo)簽來描述網(wǎng)頁內(nèi)容的結(jié)構(gòu)和含義，以便于開發(fā)者和搜索引擎理解和解析頁面。通過使用語義化標(biāo)簽，可以使網(wǎng)頁具有更好的可讀性、可維護(hù)性和可訪問性。

2.htm15的新特性?

HTML5的新特性包括但不限于以下幾個(gè)方面：

• 新增的語義化標(biāo)簽，如<header>、<footer>、<nav>等，用于更好地描述網(wǎng)頁結(jié)構(gòu)。
• 新增的表單元素，如<input type="date">、<input type="email">等，方便用戶輸入驗(yàn)證和互動(dòng)。
• 強(qiáng)大的多媒體支持，包括<video>和<audio>標(biāo)簽，以及相關(guān)的API。
• Canvas繪圖功能，使得在網(wǎng)頁中可以使用JavaScript進(jìn)行高性能繪圖。
• Web存儲(chǔ)功能，包括localStorage和sessionStorage，用于在瀏覽器端存儲(chǔ)數(shù)據(jù)。
• 改進(jìn)的JavaScript API，包括歷史管理、地理位置、拖放等。
• HTML5語義化的優(yōu)點(diǎn)包話
• 1.提升頁面的可讀性和可維護(hù)性:通過使用具有語義的標(biāo)簽，可以更清晰地描述頁面內(nèi)容的結(jié)構(gòu)和意義，使代碼更易于理解和維護(hù)。
• 2.有助于搜索引擎優(yōu)化:搜索引擎可以通過標(biāo)簽來判斷頁面的內(nèi)容和重要性，從而更好地抓取并展示頁面內(nèi)容。
• 3.提高網(wǎng)站的可用性和無障礙性;使用具有語義的標(biāo)簽可以使屏幕閱讀器等輔助技術(shù)更好地理解頁面內(nèi)容，從而提高網(wǎng)站的可用性和無障礙件。
• 4.更好的跨平臺(tái)和跨設(shè)備支持:通過使用HTML5標(biāo)準(zhǔn)的語義化標(biāo)簽，可以更好地支持各種設(shè)備包括桌面、移動(dòng)設(shè)等)和各種平臺(tái)(包括瀏覽器、搜索引擎等)。
• 常用的HTML5語義化標(biāo)簽包括: header、nav、main、article、section、aside、footer、h1-h6、p、a、ul、ol、 figure，figcaption、time、address等，當(dāng)然，語義化不是萬能的，需要根據(jù)具體情況和需求來選擇合適的標(biāo)簽

3.請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別?

cookies、sessionStorage和localStorage是網(wǎng)頁中用于存儲(chǔ)和管理數(shù)據(jù)的三種機(jī)制，它們的區(qū)別如下：

• cookies: 是由服務(wù)器發(fā)送到瀏覽器并保存在瀏覽器中的小段文本數(shù)據(jù)。每次發(fā)送HTTP請(qǐng)求時(shí)，瀏覽器都會(huì)將cookies發(fā)送到服務(wù)器。Cookies具有過期時(shí)間，可以設(shè)置過期時(shí)間后自動(dòng)刪除。
• sessionStorage: 是瀏覽器中的一個(gè)對(duì)象，用于臨時(shí)保存用戶會(huì)話數(shù)據(jù)，數(shù)據(jù)只在當(dāng)前會(huì)話有效，關(guān)閉瀏覽器標(biāo)簽頁或窗口后被刪除。
• localStorage: 也是瀏覽器中的一個(gè)對(duì)象，用于持久保存數(shù)據(jù)，數(shù)據(jù)在瀏覽器關(guān)閉后仍然存在。

4.瀏覽器的渲染機(jī)制一般分為幾個(gè)步驟?

瀏覽器的渲染機(jī)制一般分為以下幾個(gè)步驟：

• 解析HTML：瀏覽器將HTML文檔解析為DOM樹。
• 構(gòu)建渲染樹：瀏覽器將DOM樹和CSS樣式表結(jié)合，構(gòu)建出渲染樹，渲染樹只包含需要顯示的元素。
• 布局計(jì)算：瀏覽器根據(jù)渲染樹的信息，計(jì)算出每個(gè)元素在頁面中的位置和大小。
• 繪制頁面：瀏覽器按照渲染樹和布局計(jì)算的結(jié)果，將頁面繪制到屏幕上。
• 重繪和回流：如果頁面的某些部分發(fā)生變化，瀏覽器會(huì)重新計(jì)算樣式和布局，并進(jìn)行重繪。如果影響了頁面布局，就會(huì)觸發(fā)回流（重排）。

5.重繪(Repaint) 和回流 (Reflow)

重繪（Repaint）和回流（Reflow）是瀏覽器中的兩個(gè)概念：

• 重繪：當(dāng)元素的可見樣式發(fā)生改變，但不影響布局（如顏色、背景等），瀏覽器會(huì)將這些元素重新繪制一次，這個(gè)過程稱為重繪。
• 回流：當(dāng)元素的布局發(fā)生改變，瀏覽器需要重新計(jì)算元素的大小和位置，然后重新繪制，這個(gè)過程稱為回流（也稱為重排）。

回流比重繪的成本更高，因?yàn)樗鼤?huì)涉及到整個(gè)渲染樹的重新計(jì)算和布局。所以在開發(fā)中，應(yīng)盡量避免頻繁的回流操作，以提高性能。

css：

1. display: none; 與 visibility: hidden; 的區(qū)別

display: none; 和 visibility: hidden; 的區(qū)別如下：

• display: none;：元素在布局中完全不占據(jù)空間，即元素被隱藏且不影響周圍元素的布局，無法通過JavaScript獲取其尺寸和位置。
• visibility: hidden;：元素被隱藏但仍占據(jù)空間，即元素不可見但仍會(huì)影響周圍元素的布局，可以通過JavaScript獲取其尺寸和位置。

2.外邊距折暨(collapsing margins)

外邊距折疊（collapsing margins）是指在某些情況下，相鄰兩個(gè)元素之間的外邊距會(huì)合并（折疊）成一個(gè)較大的外邊距。具體情況包括：

• 父元素與第一個(gè)子元素之間的外邊距會(huì)折疊。
• 相鄰的兄弟元素之間的外邊距會(huì)折疊。

3.z-index是什么?在position的值什么時(shí)候可以觸發(fā)?

z-index是CSS屬性，用于控制元素的堆疊順序（層級(jí)）。當(dāng)元素設(shè)置了定位（position）屬性（如relative、absolute、fixed）時(shí)，z-index屬性才會(huì)生效。z-index的值越高，元素在堆疊順序中越靠上，即越接近用戶。

4.簡(jiǎn)述box-sizing的有效值以及所對(duì)應(yīng)的盒模型規(guī)則

box-sizing是CSS屬性，用于控制盒模型的計(jì)算方式，它的有效值有兩個(gè)：

• content-box：默認(rèn)值，寬度和高度僅包括內(nèi)容，不包括邊框和內(nèi)邊距。
• border-box：盒模型的寬度和高度包括內(nèi)容、邊框和內(nèi)邊距，即總寬度 = 內(nèi)容寬度 + 邊框?qū)挾?+ 內(nèi)邊距寬度，總高度 = 內(nèi)容高度 + 邊框高度 + 內(nèi)邊距高度。

5.移動(dòng)端適配怎么做?

移動(dòng)端適配需要考慮不同設(shè)備的屏幕尺寸和像素密度。常用的方法有：

• 使用響應(yīng)式設(shè)計(jì)：使用CSS媒體查詢針對(duì)不同屏幕寬度設(shè)置不同的樣式。
• 使用Viewport元標(biāo)簽：通過設(shè)置<meta name="viewport">標(biāo)簽來控制視口的尺寸和縮放。
• 彈性布局：使用彈性布局（flexbox）或網(wǎng)格布局（grid）來自適應(yīng)不同屏幕尺寸。
• 使用rem或em單位：使用相對(duì)單位（rem或em）進(jìn)行布局和字體大小設(shè)置，以便根據(jù)根元素的字體大小進(jìn)行相應(yīng)的縮放調(diào)整。
• 使用框架或庫：使用移動(dòng)端適配的框架或庫（如Bootstrap、Ant Design Mobile等），簡(jiǎn)化適配過程。
• 需要注意的是，移動(dòng)端適配是一個(gè)復(fù)雜的問題，具體的實(shí)現(xiàn)方法需要根據(jù)具體項(xiàng)目和需求來選擇和調(diào)整。

6.什么是CSS3 transform? transition? animation? 區(qū)別是什么?

CSS3中的transform、transition和animation是用于實(shí)現(xiàn)動(dòng)畫效果的屬性和特性，它們的區(qū)別如下：

• transform：通過對(duì)元素的旋轉(zhuǎn)、縮放、平移、傾斜等變換操作，實(shí)現(xiàn)對(duì)元素外觀的改變。transform屬性是一個(gè)復(fù)合屬性，可以同時(shí)設(shè)置多個(gè)變換操作。
• transition：用于控制元素在狀態(tài)變化時(shí)的過渡效果，如顏色漸變、尺寸變化等。通過指定過渡屬性的初始值和最終值，并設(shè)置過渡的持續(xù)時(shí)間、延遲時(shí)間和過渡曲線，實(shí)現(xiàn)元素的平滑過渡效果。
• animation：通過關(guān)鍵幀（keyframes）來定義元素的動(dòng)畫效果。通過指定動(dòng)畫的名稱、持續(xù)時(shí)間、循環(huán)次數(shù)等屬性，實(shí)現(xiàn)元素的動(dòng)態(tài)變化?？梢远x多個(gè)關(guān)鍵幀，每個(gè)關(guān)鍵幀指定元素的樣式，瀏覽器會(huì)在指定的時(shí)間內(nèi)自動(dòng)計(jì)算中間幀的樣式。

7.父元素和子元素寬高不固定，如何實(shí)現(xiàn)水平垂直居中

實(shí)現(xiàn)父元素和子元素水平垂直居中的方法有多種，以下是其中一種常用的方法：

.parent {
?display: flex;
?justify-content: center;
?align-items: center;
}

以上代碼使用flex布局，通過設(shè)置父元素的display: flex;和justify-content: center; align-items: center;屬性，實(shí)現(xiàn)子元素在父元素中水平垂直居中。注意，父元素需要有明確的寬度和高度，或者根據(jù)情況設(shè)置相應(yīng)的布局屬性。

8.假設(shè)高度默認(rèn)100px，請(qǐng)寫出三欄布局，其中左欄、右欄各為 300px，中間自適應(yīng)

三欄布局中，左側(cè)欄和右側(cè)欄固定寬度，中間欄自適應(yīng)寬度的示例代碼如下：

<div class="wrapper">
?<div class="left"></div>
?<div class="right"></div>
?<div class="content"></div>
</div>
.wrapper {
?display: flex;
}

.left, .right, .content {
?height: 100px;
}

.left, .right {
?width: 300px;
}

.content {
?flex-grow: 1;
}

以上代碼使用flex布局，將左側(cè)欄和右側(cè)欄設(shè)置固定寬度，中間欄設(shè)置flex-grow: 1;，使其自動(dòng)填充剩余空間，從而實(shí)現(xiàn)左右兩欄固定寬度，中間欄自適應(yīng)寬度的布局。