web前端系列HTML題庫，難度系數(shù)：三顆星

時間：2023-09-28 05:48:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-28 05:48:01 來源：網(wǎng)站運(yùn)營

web前端系列HTML題庫，難度系數(shù)：三顆星：


01

在一個結(jié)構(gòu)良好的web網(wǎng)頁里，多個h1標(biāo)簽會不利于SEO嗎？

點(diǎn)擊空白處查看答案

不影響

02

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

點(diǎn)擊空白處查看答案

（1）聲明位于文檔中的最前面，處于標(biāo)簽之前。告知瀏覽器的解析器，用什么文檔類型規(guī)范來解析這個文檔。

（2）嚴(yán)格模式的排版和 JS 運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。

（3）在混雜模式中，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。

03

行內(nèi)元素有哪些？塊級元素有哪些？

點(diǎn)擊空白處查看答案

（1）CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認(rèn)的display值，比如div默認(rèn)display屬性值為“block”，成為“塊級”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。

（2）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣）。

（3） 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p。

04

link 和@import 的區(qū)別是？

點(diǎn)擊空白處查看答案

（1）link屬于XHTML標(biāo)簽，而@import是CSS提供的；

（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載；

（3）import只在IE5以上才能識別，而link是XHTML標(biāo)簽，無兼容問題；

（4）link方式的樣式的權(quán)重高于@import的權(quán)重。

05

當(dāng)下列的HTML代碼加載時會觸發(fā)新的HTTP請求嗎？

<div style="display: none;">

<img src="mypic.jpg" alt="My photo">

</div>

點(diǎn)擊空白處查看答案

會

06

對WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識？

點(diǎn)擊空白處查看答案

標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件，容易維護(hù)、改版方便，不需要變動頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性。




07

iframe有那些缺點(diǎn)？

點(diǎn)擊空白處查看答案

iframe會阻塞主頁面的Onload事件；

iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用iframe之前需要考慮這兩個缺點(diǎn)。如果需要使用iframe，最好是通過javascript動態(tài)給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。




08

XHTML和HTML有什么區(qū)別？

點(diǎn)擊空白處查看答案

HTML是一種基本的WEB網(wǎng)頁設(shè)計語言，XHTML是一個基于XML的置標(biāo)語言。

最主要的不同：
XHTML 元素必須被正確地嵌套；
XHTML 元素必須被關(guān)閉，標(biāo)簽名必須用小寫字母；
XHTML 文檔必須擁有根元素。




09

寫出幾種IE6 BUG的解決方法。

點(diǎn)擊空白處查看答案

1.雙邊距BUG float引起的 使用display；
2.3像素問題 使用float引起的 使用dislpay:inline -3px；
3.超鏈接hover 點(diǎn)擊后失效 使用正確的書寫順序 link visited hover active；
4.Ie z-index問題給父級添加position:relative；
5.Png 透明 使用js代碼改；
6.Min-height 最小高度 !Important 解決；
7.select 在ie6下遮蓋 使用iframe嵌套；
8.為什么沒有辦法定義1px左右的寬度容器(IE6默認(rèn)的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)；
9.ie 6 不支持!important；

10

img標(biāo)簽上title與alt屬性的區(qū)別是什么?

點(diǎn)擊空白處查看答案

Alt 當(dāng)圖片不顯示是用文字代表；
Title 為該屬性提供信息。


11

你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化?

點(diǎn)擊空白處查看答案

文件合并
文件最小化/文件壓縮
使用CDN托管
緩存的使用

12

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

點(diǎn)擊空白處查看答案

href 是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，用于超鏈接。

src是指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。當(dāng)瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。




13

什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)？

點(diǎn)擊空白處查看答案

漸進(jìn)增強(qiáng)progressive enhancement：

針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗。

優(yōu)雅降級graceful degradation：

一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。




區(qū)別：

a. 優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給；

b. 漸進(jìn)增強(qiáng)則是從一個非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要；

c. 降級（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時保證其根基處于安全地帶。




14

瀏覽器的內(nèi)核分別是什么？

點(diǎn)擊空白處查看答案

IE: trident內(nèi)核

Firefox：gecko內(nèi)核

Safari：webkit內(nèi)核

Opera：以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核

Chrome：Blink(基于webkit，Google與Opera Software共同開發(fā))




15

一次完整的HTTP事務(wù)是怎樣的一個過程（瀏覽器渲染頁面的過程）？

點(diǎn)擊空白處查看答案

基本流程：

a.用戶輸入URL地址；

b.瀏覽器解析URL，解析出主機(jī)名；

c.瀏覽器將主機(jī)名轉(zhuǎn)換成服務(wù)器IP地址（瀏覽器先查找本地DNS緩存列表，如果沒有就向瀏覽器默認(rèn)的DNS服務(wù)器發(fā)送查詢請求，同時緩存）；

d.瀏覽器將端口號從URL中解析出來；

b.瀏覽器建立一條與目標(biāo)web服務(wù)器的TCP連接，發(fā)起TCP的3次握手；

e.瀏覽器向服務(wù)器發(fā)送一條HTTP請求報文；

f.服務(wù)器端響應(yīng)http請求，瀏覽器得到html代碼；

g.瀏覽器解析html代碼，并請求html代碼中的資源；

h.瀏覽器對頁面進(jìn)行渲染呈現(xiàn)給用戶；




未完待續(xù)......