TML面試題總結

1. 對 HTML 語義化的理解

1. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構；
2. 代碼結構清晰，方便團隊的管理和維護，并且語義化更具有可讀性，減少差異化；
3. 提升用戶體驗； 例如：title、alt用于解釋名詞或者圖片信息、label標簽的活用
4. 有利于SEO優化，提升搜索引擎排名； 和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息； 爬蟲依賴于標簽來確上下文和關鍵字的權重；
5. 方便其他設備的解析（屏幕閱讀器、盲人閱讀器、移動設備等等）；

2. H5新增特性

1. 語義化更好的標簽： header、nav、aside、article、section、footer；
2. 音視頻標簽： audio、video； 如果瀏覽器不支持自動播放怎么辦? 在屬性中添加autoplay(谷歌瀏覽器不支持音頻自動播放，但是視頻支持靜音自動播放)；
3. 以 data- 開頭的自定義屬性；
4. 本地存儲： localStorage、sessionStorage；
5. 表單控件； 給 type 屬性設置值； url、search、file、email、date、number、month、color、tel；
6. 畫布； Canvas；
7. 拖拽釋放： drag、drop；
8. 新技術： 瀏覽器多線程：webWorker； 前后臺持久化通信技術：webSocket；

3. HTML5常用的結構標簽有哪些，它替換了之前的哪些標簽？

• header、nav、main、article、aside、footer、section
• <div class="header">、<div class="nav">、<div class="main">...

4. HTML文檔采用 UTF-8編碼集 的優勢是什么？

1. utf-8： 使用3個字節表示一個符號，基本上可以覆蓋世界上所有的語言；
2. 優勢： 與傳統的gb2312、gbk相比，可識別的字符集更多，也是行業界推薦的；

5. 標簽中常用的屬性有哪些？

• id、class、title、style；

6. 標簽中的 title屬性 和 alt屬性 的區別是什么？

1. title： 是標簽的描述屬性，當鼠標移入時，稍等一會兒就會出現title屬性的屬性值；
2. alt: 用在可置換元素上，當外部資源無法正確加載時，alt屬性的屬性值就會顯示在占位符上；

7. 什么是置換元素 和 非置換元素，每種類型至少舉出三個例子

1. 置換元素： 置換元素的內容來自外部，該元素僅是外部資源的占位符； <img>、<video>、<audio>...；
2. 非置換元素： 非置換元素內容來自當前文檔，必須使用雙標簽； <p>、<h1> ~ <h6>、<ul>...；

8. 標簽中的 href屬性 和 src屬性 有什么區別？

1. 二者都是對外部資源的引用；
2. href： 用于超文本或樣式，用在 <link>標簽 和 <a>標簽上；
3. src： 用在外部資源占位符上，如<img>、<iframe>、<script>、<video>...；

9. iframe標簽有什么優缺點？

1. 優點： 重載頁面時不需要加載整個頁面，只需要重載頁面中的一個框架頁，從另一方面來說，減少數據的傳輸，加快了網頁下載速度； 技術易于掌握，使用方便，可主要使用于不需要搜索引擎來搜索的頁面； 當前頁面，直接加載其他頁面，而不必發生跳轉；
2. 缺點： iframe 會阻塞主頁面中的 Onload 事件； 會產生很多頁面，不容易管理； 多框架的頁面會增加服務器的http請求，影響頁面的并行加載； 并行加載：同一時間針對不同域名下的請求，iframe和所在頁面在同一個域下面，而瀏覽器的并行加載的數量是有限制的；

10. 表單中的按鈕有幾種，常用的標簽有哪幾個？

1. 按鈕有三種： 普通按鈕、提交按鈕、重置按鈕；
2. 常用標簽：

<input type="button" />
<input type="submit" />
<input type="rest" />
<button />

11. 表單數據的提交方式有幾種，分析使用場景？

1. POST： 表單數據通過請求體發送；
2. GET： 表單數據通過URL地址欄發送；

12. 什么是 重繪 和 重排？

1. 重繪： 當元素的一部分屬性發生改變，如外觀、背景、顏色等不會引起布局變化，只需瀏覽器根據元素的新屬性重新繪制，使元素呈現新的外觀叫做重繪；
2. 重排： 和重繪相反，當改變布局的時候，就會引起重排；
3. 重繪不一定需要重排（比如顏色的改變），重排必然導致重繪（比如改變網頁位置）

們經常會遇到這樣的一個問題。

設計出了很牛逼的設計稿，客戶確認了，前端靜態制作也出來，還原設計稿95%以上，客戶也確認了。

那是個完美啊！！做完程序了，交給客戶了。然后客戶自己上傳了圖片了。那個悲催啊！！慘不忍睹啊！！

完全和設計稿兩碼事？圖片不好看，到處都跑位。

客戶就罵過來了，你們是否也遇到這樣的事情？因為客戶的公司沒有設計師啊，哈哈，這個問題可能遇到的不少。

其實大家都會說，這歸根到底都是客戶沒有處理圖片的問題所造成的。然后大家都推來推去。

那么，前端制作工程師是否有辦法解決這樣的問題，其實是可以的。如果因圖片問題導致布局變了，解決了這個問題就只剩下圖片的美觀性，那這個就可以跟客戶說你要請個設計師幫你處理圖片啊。這樣不就解決問題了嗎？

這種方式和微信朋友圈的九宮格圖片展示方式類似，只顯示圖片中間的內容，其他的將會被隱藏。

舉個栗子：

這個列表是不是很整齊，看起來比較舒服，雖然圖片有那么點點的變形，但不影響閱讀。

如果其中有一張圖片的尺寸稍微有一點點不一樣，肯定會出現跑位的情況。就像下面這樣。這樣客戶看到不被投訴才怪哦！！

那么就以這個來說說解決方式。

大家都知道圖片有一種特性，就是當圖片的寬度改變時，高度也會隨著等比例在改變。

例如：一張寬高都為100px的圖片，如果把寬度調至200px，那么高度是不是也會隨之變成200px；沒錯的，就是利用這個特性來解決布局亂的情況。

這里就拿上一次說到的 “圖文列表 純css布局” 那次說的布局來說說，因為都是做好，和上面那個圖類似。偷偷懶。如果沒看過那篇，搜一下 “圖文列表 純css布局”，就可以找到了。（如需下載源碼，請關注微信公眾號：JS學吧）

效果是這樣的：

如何切出占位圖呢？如下操作

用PS打開文件，用裁剪工具把圖片完整的裁下來，如下圖

裁完成，再點擊菜單欄目 “圖像 > 圖像大小” 或 按著 Alt鍵，再點兩次 I 鍵。可以調出 “圖像大小” 彈窗。

可以看到 “像素大小” 的寬度和高度都為260px，那么只要調其中一個就可以，就可以達到等比例調整。

我們先調成10px，確定后，再把圖層的 “小眼睛” 關掉，另存為一個 png24 的透明圖片，記得哦！！一定是要png24的。名字自己定啦！！

然后把 img 中的圖片路徑改為如下：

<a href=""><img src="rect.png" alt="" width="100%"></a>然后刷新看看效果，是不是發現原來的圖片不見的，變成空白的，但是原來的布局結構沒有改變。其實要的就是這樣的效果。

然后我們在 img 的外層再包個div，就拿這個div來放圖片。順便加個背景色看看效果。

<a href="">

<div style="background: #000;">

<img src="rect.png" alt="" width="100%">

</div>

</a>

看，占位圖片的效果出來了。外層div的寬度和高度都被img撐開了。是不是達到了想要的效果。

關鍵的時候來了。就是處理圖片。我們要把產品圖片做為背景的形式輸出即可以。把圖片的路徑寫在div上面的就解決了。再加上css3新屬性就可以了。

HTML如下：

<a href="">

<div class="cover-img" style="background-image: url(pic001.jpg);">

<img src="rect.png" alt="" width="100%">

</div>

</a>

用背景樣式 background-image 定入路徑。再添加一個 cover-img 的類名。然后 cover-img 的樣式如下：

.cover-img {

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

注意、注意、注意，中要的事說三遍。重點就在于 css3 的新屬性 background-size: cove；

這個屬性就是會把背景圖片，以等比例的形式保持圖像本身的寬高比例，將圖片縮放到正好完全覆蓋定義背景的區域。

是不是不明白，那就對了，挺不好理解。最好還是用實際效果來看看。

最終出來的效果就是和最開始的那張圖片一樣的，只是看不出來而已。

那么我們就來玩真的。直接上網整一張大圖的路徑放進去看看就知道了。

上某某網站找特大尺寸的圖片來，例如下面這張：尺寸是2533x1583，夠大了，也不是正方形哦！！我們一開始說的都是正方形，現在弄個不是正方形的圖片來試試效果。

HTML如下：

<a href="">

<div class="cover-img" style="background-image: url(pic002.jpg);">

<img src="rect.png" alt="" width="100%">

</div>

</a>

更改url里的路徑即可

出來的效果如下：

是不是自動調整了。

我們再換一張高形狀的圖片。二哈圖：尺寸是2448x3264

HTML：如下

<a href="">

<div class="cover-img" style="background-image: url(pic003.jpg);">

<img src="rect.png" alt="" width="100%">

</div>

</a>

最終效果：

怎么樣，效果還可以吧！！不知道你們看出了什么了沒有。

第一張是寬形狀的圖片，是以高度填滿 div 的區域。

第二張是高形狀的圖片，是以寬度填滿 div 的區域。

全都是靠著 background-size: cover; 這個屬性解決了。但也是有不好的地方。

例如不支持IE瀏覽器，圖片顯示不全，多一個文件服務器要多請求一次.....等等問題！！做圖時的內容盡可能在正中間。

然后，不管客戶上傳什么鬼形狀的圖片，都不會產生布局變亂的情況。

獲取《vue3.0大公司后臺管理系統開發 正規開發流程項目實踐》視頻，

請點擊下面 “了解更多” 或 請關注微信公眾號《手把手擼碼前端》