「面試專欄」前端面試之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來了面試專欄
（：番外篇
- 如果您覺得這篇文章有幫助到您的的話不妨點贊支持一下喲~~😉
- 以上就是本文的全部內容！我們下期見！👋👋👋
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/323053.html
標籤：其他
上一篇：非函式方法實作四舍五入
下一篇：檔案1.0