當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間：2023/12/4 编程问答 22 豆豆

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

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

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

?序言

對于前端開發(fā)人員來說， html 可能是最早接觸的一門語言之一。基本上剛開始學(xué)前端，都會先學(xué) html 。雖說它的內(nèi)容看起來不多，但是在面試中，還是有一些考點需要我們?nèi)プ⒁狻Ｏ旅婢?html 在前端面試中的考點，進(jìn)行介紹。一起來學(xué)習(xí)吧~🧐

?一、題集內(nèi)容搶先看

🌠二、規(guī)范相關(guān)

1、你如何理解HTML結(jié)構(gòu)的語義化

更符合 W3C 統(tǒng)一的規(guī)范標(biāo)準(zhǔn)，是技術(shù)趨勢。
沒有樣式時瀏覽器的默認(rèn)樣式也能讓頁面結(jié)構(gòu)很清晰。
對功能障礙用戶友好。屏幕閱讀器（如果訪客有視障）會完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁。
對其他非主流終端設(shè)備友好。例如機頂盒、 PDA 、各種移動終端。
對 SEO 友好。

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

是什么：

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

如何使用：

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

3、HTML W3C的標(biāo)準(zhǔn)

標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、使用外鏈 css 和 js 、結(jié)構(gòu)行為表現(xiàn)的分離。

4、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

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

5、viewport的content屬性作用

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

局部處理：

meta 標(biāo)簽中的 viewport 屬性， initial-scale 設(shè)置為 1 。

rem 按照設(shè)計稿標(biāo)準(zhǔn)走，外加利用 transfrome 的 scale(0.5) 縮小一倍即可。

全局處理：

meta 標(biāo)簽中的 viewport 屬性， initial-scale 設(shè)置為 0.5 。

rem 按照設(shè)計稿標(biāo)準(zhǔn)走即可。

6、meta 相關(guān)

<!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=”標(biāo)題”>  <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”>

💫三、標(biāo)簽相關(guān)

1、說說 title 和 alt 屬性

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

2、 iframe 有那些缺點？

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

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

（1）新增元素

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

（2）移除的元素

純表現(xiàn)的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
對可用性產(chǎn)生負(fù)面影響的元素： frame 、 frameset 、 noframes

（3）支持 HTML5 新標(biāo)簽

IE8/IE7/IE6 支持通過 document.createElement 方法產(chǎn)生的標(biāo)簽。
可以利用這一特性讓這些瀏覽器支持 HTML5 新標(biāo)簽。
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。

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

label 標(biāo)簽用來定義表單控制間的關(guān)系，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

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

5、div+css的布局較table布局有什么優(yōu)點

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

6、簡述一下src與href的區(qū)別

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

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

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

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

HTML5 包含嵌入音頻文件的標(biāo)準(zhǔn)方式，支持的格式包括 MP3、Wav 和 Ogg：

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

和音頻一樣，HTML5 定義了嵌入視頻的標(biāo)準(zhǔn)方法，支持的格式包括：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 ：為元素設(shè)置類標(biāo)識
data-* ：為元素增加自定義屬性
draggable ：設(shè)置元素是否可拖拽
id ：元素 id ，文檔內(nèi)唯一
lang ：元素內(nèi)容的的語言
style ：行內(nèi) css 樣式
title ：元素相關(guān)的建議信息

?四、結(jié)束語

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

關(guān)于 html 相關(guān)的題目整理到這里就結(jié)束啦！希望對大家有幫助！

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

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

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

🐣彩蛋 One More Thing

（：資料獲取

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

（：更新地址

👉 offer來了面試專欄

（：番外篇

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： PXE
下一篇：网站导致浏览器崩溃的原因总结(多款浏览器