web前端面試題整理（HTML篇）

時間：2023-07-22 23:03:01 | 來源：網(wǎng)站運營

時間：2023-07-22 23:03:01 來源：網(wǎng)站運營

web前端面試題整理（HTML篇）：web前端面試題整理（HTML篇）


需要web前端課程工具和電子書，可以加: 33群105601600; 22群120342833

1. h5的改進:

新元素

畫布canvas: HTML5<canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成

音頻audio

視頻video

語義性: article, nav, footer, section, aside, hgroup等.

時間time

新屬性

拖放: draggable <img draggable="true">

可編輯: contenteditable

新事件

拖放 ondrag ondrop

關閉頁面 onunload

窗口大小改變 onresize

取消了一些元素: font center等

新的DOCTYPE聲明 <!DOCTYPEhtml>

完全支持CSS3

Video和Audio

2D/3D制圖

本地存儲

本地SQL數(shù)據(jù)

Web應用


2. 什么是語義化的html?

what?

根據(jù)內(nèi)容的結構（內(nèi)容語義化），選擇合適的標簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

why?

為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結構、代碼結構:為了裸奔時好看；

用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；

有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重

方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網(wǎng)頁；

便于團隊開發(fā)和維護，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

how?

盡可能少的使用無語義的標簽div和span；

在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；

不要使用純樣式標簽，如：b、font、u等，改用css設置。

需要強調(diào)的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；

使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；

表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；

每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯(lián)起來。


3. 從前端角度出發(fā)談談做好seo需要考慮什么?

語義化html標簽

合理的title, description,keywords;

重要的html代碼放前面

少用iframe, 搜索引擎不會抓取iframe中的內(nèi)容

圖片加上alt


4. 文檔類型(DOCTYPE)

作用:

doctype聲明位于文檔中最前面的位置，處于標簽之前，告知瀏覽器使用的是哪種規(guī)范。

類型:

三種: Strict、Transitional 以及 Frameset

如果不聲明: 不寫doctype，瀏覽器會進入quirks mode （混雜模式）。即，如果不聲明doctype，瀏覽器不引入w3c的標準，那么早期的瀏覽器會按照自己的解析方式渲染頁面。瀏覽器采用自身方式解析頁面的行為稱為"quirksmode（混雜模式也稱怪異模式）"；采用w3c方式解析就是"strict mode（標準模式）"。 如果完全采用strictmode就不會出任何的差錯，但這樣會降低程序的容錯率，加重開發(fā)人員的難度

用哪種:

沒有doctype聲明的采用quirks mode解析

對于有doctype的大多數(shù)采用standard mord。

特殊情況：

對于那些瀏覽器不能識別的doctype,瀏覽器采用quirksmode；

沒有聲明DTD或者html版本聲明低于4.0采用quirks mode，其他使用standard mode；

ie6中，如果在doctype聲明前有一個xml聲明(比如:<?xmlversion="1.0" encoding="iso-8859-1"?>)，則采用quirks mode解析

標準模式與怪異模式的區(qū)別:

標準模式：瀏覽器根據(jù)規(guī)范呈現(xiàn)頁面

混雜模式（怪異模式）：頁面以一種比較寬松的兼容方式顯示。

他們最大的不同是對盒模型的解析。

在strict mode中 ：width是內(nèi)容寬度 ，也就是說,元素真正的寬度 = margin-left +border-left-width + padding-left + width + padding-right + border-right- width+ margin-right;

在quirks mode中 ：width則是元素的實際寬度 ，內(nèi)容寬度 = width - (margin-left +margin-right + padding-left + padding-right + border-left-width + 　border-right-width)


5.使用XHTML的局限有哪些?

XHTML較為嚴格，標簽必須閉合，必須要body，head等

如果頁面使用 'application/xhtml+xml' 一些老的瀏覽器并不兼容


6. 如果網(wǎng)頁內(nèi)容需要多語言,要怎么做?

采用統(tǒng)一編碼utf-8模式

需要web前端課程工具和電子書，可以加: 33群105601600; 22群120342833

【內(nèi)容展示有限，可以加群下載，群文件會定期更新學習資料，以及練手小案例】