當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

「offer来了」面试中必考的15个html知识点

發布時間：2023/12/4 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了「offer来了」面试中必考的15个html知识点小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

「面試專欄」前端面試之html篇

?序言
?一、題集內容搶先看
🌠二、規范相關
- 1、你如何理解HTML結構的語義化
- 2、瀏覽器是怎么對 Html5 的離線儲存資源進行管理和加載的呢
- 3、HTML W3C的標準
- 4、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
- 5、viewport的content屬性作用
- 6、meta 相關
💫三、標簽相關
- 1、說說 title 和 alt 屬性
- 2、 iframe 有那些缺點？
- 3、Html5 有哪些新特性、移除了哪些元素
- - （1）新增元素
  - （2）移除的元素
  - （3）支持 HTML5 新標簽
- 4、Label 的作用是什么？是怎么用的？
- 5、div+css的布局較table布局有什么優點
- 6、簡述一下src與href的區別
- 7、知道網頁制作會用到的圖片格式有哪些嗎
- 8、如何在 HTML5頁面中嵌入音頻與視頻？
- 9、HTML全局屬性(global attribute)有哪些
?四、結束語
🐣彩蛋 One More Thing
- （：資料獲取
- （：更新地址
- （：番外篇

?序言

對于前端開發人員來說， html 可能是最早接觸的一門語言之一。基本上剛開始學前端，都會先學 html 。雖說它的內容看起來不多，但是在面試中，還是有一些考點需要我們去注意。下面就 html 在前端面試中的考點，進行介紹。一起來學習吧~🧐

?一、題集內容搶先看

🌠二、規范相關

1、你如何理解HTML結構的語義化

更符合 W3C 統一的規范標準，是技術趨勢。
沒有樣式時瀏覽器的默認樣式也能讓頁面結構很清晰。
對功能障礙用戶友好。屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁。
對其他非主流終端設備友好。例如機頂盒、 PDA 、各種移動終端。
對 SEO 友好。

2、瀏覽器是怎么對 Html5 的離線儲存資源進行管理和加載的呢

是什么：

在線的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問 app ，那么瀏覽器就會根據 manifest 的內容下載相應的資源并且進行離線存儲。
如果已經訪問過 app 并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。

如何使用：

頁面頭部像上面一樣加入一個 manifest 的屬性；
在 cache.manifest 文件下編寫離線存儲的資源；
在離線狀態時，操作 window.applicationCache 進行需求實現。

3、HTML W3C的標準

標簽閉合、標簽小寫、不亂嵌套、使用外鏈 css 和 js 、結構行為表現的分離。

4、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

<!DOCTYPE> 聲明位于文檔中的最前面，處于 html 標簽之前。告知瀏覽器的解析器，用什么文檔類型、規范來解析這個文檔。
嚴格模式的排版和 JS 運作模式是以該瀏覽器支持的最高標準運行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
DOCTYPE 不存在或格式不正確會導致文檔以混雜模式呈現。

5、viewport的content屬性作用

附帶問題： 怎樣處理移動端 1px 被渲染成 2px 問題?

局部處理：

meta 標簽中的 viewport 屬性， initial-scale 設置為 1 。

rem 按照設計稿標準走，外加利用 transfrome 的 scale(0.5) 縮小一倍即可。

全局處理：

meta 標簽中的 viewport 屬性， initial-scale 設置為 0.5 。

rem 按照設計稿標準走即可。

6、meta 相關

<!DOCTYPE html>  <head lang=”en”>  <meta charset=’utf-8?>  <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>  <meta name=”description” content=”不超過150個字符”/>  <meta name=”keywords” content=””/>  <meta name=”author” content=”name, email@gmail.com”/>  <meta name=”robots” content=”index,follow”/>  <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-sc <meta name=”apple-mobile-web-app-title” content=”標題”>  <meta name=”apple-mobile-web-app-capable” content=”yes”/>  <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> <meta name=”renderer” content=”webkit”>  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  <meta http-equiv=”Cache-Control” content=”no-siteapp” />  <meta name=”HandheldFriendly” content=”true”>  <meta name=”MobileOptimized” content=”320″>  <meta name=”screen-orientation” content=”portrait”>  <meta name=”x5-orientation” content=”portrait”>  <meta name=”full-screen” content=”yes”>  <meta name=”x5-fullscreen” content=”true”>

💫三、標簽相關

1、說說 title 和 alt 屬性

兩個屬性都是當鼠標滑動到元素上的時候顯示。
alt 是 img 的特有屬性，是圖片內容的等價描述，圖片無法正常顯示時候的替代文字。
title 屬性可以用在除了base，basefont，head，html，meta，param，script和title 之外的所有標簽，是對dom元素的一種類似注釋說明。

2、 iframe 有那些缺點？

iframe 會阻塞主頁面的 Onload 事件
搜索引擎的檢索程序無法解讀這種頁面，不利于 SEO
iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載
使用 iframe 之前需要考慮這兩個缺點。如果需要使用 iframe ，最好是通過 javascript 動態
給 iframe 添加 src 屬性值，這樣可以繞開以上兩個問題

3、Html5 有哪些新特性、移除了哪些元素

（1）新增元素

繪畫 canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
sessionStorage 的數據在瀏覽器關閉后會自動刪除
語義化更好的內容元素，比如 article 、footer、header、nav、section
表單控件， calendar 、 date 、 time 、 email 、 url 、 search
新的技術 webworker 、 websocket 、 Geolocation

（2）移除的元素

純表現的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
對可用性產生負面影響的元素： frame 、 frameset 、 noframes

（3）支持 HTML5 新標簽

IE8/IE7/IE6 支持通過 document.createElement 方法產生的標簽。
可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽。
瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

4、Label 的作用是什么？是怎么用的？

label 標簽用來定義表單控制間的關系，當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。

<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label>

5、div+css的布局較table布局有什么優點

改版的時候更方便，只需要修改 css 文件。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易于優化 seo ，搜索引擎更友好，排名更容易靠前。

6、簡述一下src與href的區別

src 用于替換當前元素， href 用于在當前文檔和引用資源之間確立聯系。
src 是 source 的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求 src 資源時會將其指向的資源下載并應用到文檔內，例如 js 腳本， img 圖片和 frame 等元素。
同時， src 指的是，當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也就是為什么將 js 腳本放在底部而不是頭部。
href 是 Hypertext Reference 的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加 <link href="common.css" rel="stylesheet"> ，那么瀏覽器會識別該文檔為 css 文件，就會并行下載資源并且不會停止對當前文檔的處理。這也是為什么建議使用 link 方式來加載 css ，而不是使用 @import 方式。

7、知道網頁制作會用到的圖片格式有哪些嗎

png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面試官想要的最后答案。面試官希望聽到是Webp。（考察是否有關注新技術，新鮮事物）
科普一下 Webp ： WebP 格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有 JPEG 的 2/3 ，并能節省大量的服務器帶寬資源和數據空間。Facebook 、 Ebay 等知名網站已經開始測試并使用 WebP 格式。
在質量相同的情況下， WebP 格式圖像的體積要比 JPEG 格式圖像小40%。

8、如何在 HTML5頁面中嵌入音頻與視頻？

HTML5 包含嵌入音頻文件的標準方式，支持的格式包括 MP3、Wav 和 Ogg：

<audio controls> <source src="jamshed.mp3" type="audio/mpeg"> Your browser does'nt support audio embedding feature. </audio>

和音頻一樣，HTML5 定義了嵌入視頻的標準方法，支持的格式包括：MP4、WebM 和 Ogg：

<video width="450" height="340" controls> <source src="jamshed.mp4" type="video/mp4">Your browser does'nt support video embedding feature. </video>

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

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

?四、結束語

html 相關的內容在面試中考察的部分不多，但該記憶的內容還是得稍微記一下，以防在面試中突然被面試官問倒。

關于 html 相關的題目整理到這里就結束啦！希望對大家有幫助！

如文章有誤或有想補充的新內容，歡迎加我微信指出呀，👉 vx: MondayLaboratory~

周一在整個春秋招備試的過程中，深知從0到1準備是非常不容易的。也想要把我所學的所有內容進行整理，讓這個面試專欄更加盡善盡美，造福更多在準備面試的小伙伴~💬

往后專欄內容如有新補充也將放在下面的更新地址，大家可以戳下方鏈接直達~

🐣彩蛋 One More Thing

（：資料獲取

👉 微信關注公眾號星期一研究室，回復關鍵字 html面試pdf 即可獲取相關資料~
👉 回復面試大全pdf 可獲取全系列資料！

（：更新地址

👉 offer來了面試專欄

（：番外篇

如果您覺得這篇文章有幫助到您的的話不妨點贊支持一下喲~~😉
以上就是本文的全部內容！我們下期見！👋👋👋

總結

以上是生活随笔為你收集整理的「offer来了」面试中必考的15个html知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： PXE
下一篇： Redux从入门到进阶，看这一篇就够了！