「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屬性作用
<meta name="viewport" content="" /> width – viewport的寬度[device-width | pixel_value]width如果直接設置pixel_value數值,大部分的安卓手機不支持,但是ios支持;height – viewport 的高度 (范圍從 223 到 10,000 )user-scalable [yes | no]是否允許縮放initial-scale [數值] 初始化比例(范圍從 > 0 到 10)minimum-scale [數值] 允許縮放的最小比例maximum-scale [數值] 允許縮放的最大比例target-densitydpi 值有以下(一般推薦設置中等響度密度或者低像素密度,后者設置具體的值 dpi_value,另外webkit內核已不準備再支持此屬性) -- dpi_value 一般是70-400//沒英寸像素點的個數-- device-dpi設備默認像素密度-- high-dpi 高像素密度-- medium-dpi 中等像素密度-- low-dpi 低像素密度附帶問題: 怎樣處理 移動端 1px 被 渲染成 2px 問題?
局部處理:
meta 標簽中的 viewport 屬性 , initial-scale 設置為 1 。
rem 按照設計稿標準走,外加利用 transfrome 的 scale(0.5) 縮小一倍即可。
全局處理:
meta 標簽中的 viewport 屬性 , initial-scale 設置為 0.5 。
rem 按照設計稿標準走即可。
6、meta 相關
<!DOCTYPE html> <!--H5標準聲明,使用 HTML5 doctype,不區分大小寫--> <head lang=”en”> <!--標準的 lang 屬性寫法--> <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=”標題”> <!--iOS 設備 begin--> <meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的標 是否啟用 WebApp 全屏模式,刪除蘋果默認的工具欄和菜單欄--> <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> <meta name=”renderer” content=”webkit”> <!-- 啟用360瀏覽器的極速模式(webkit)--> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!--避免IE使用兼容模式--> <meta http-equiv=”Cache-Control” content=”no-siteapp” /> <!--不讓百度轉碼--> <meta name=”HandheldFriendly” content=”true”> <!--針對手持設備優化,主要是針對一些老的 不識別viewport的瀏覽器--> <meta name=”MobileOptimized” content=”320″> <!--微軟的老式瀏覽器--> <meta name=”screen-orientation” content=”portrait”> <!--uc強制豎屏--> <meta name=”x5-orientation” content=”portrait”> <!--QQ強制豎屏--> <meta name=”full-screen” content=”yes”> <!--UC強制全屏--> <meta name=”x5-fullscreen” content=”true”> <!--QQ強制全屏-->💫三、標簽相關
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从入门到进阶,看这一篇就够了!