前端基礎(chǔ)練習(xí)題（請查收）

時間：2023-09-07 16:06:01 | 來源：網(wǎng)站運營

時間：2023-09-07 16:06:01 來源：網(wǎng)站運營

前端基礎(chǔ)練習(xí)題（請查收）：

1. css的優(yōu)先級算法如何計算？

*或繼承 0.0.0.0 *

元素（標(biāo)簽） 0.0.0.1 p

類，偽類 0.0.1.0 .

Id 0.1.0.0 #

行內(nèi)樣式 1.0.0.0 元素后直接使用

！Important +∞

權(quán)重相同，就近原則

權(quán)重會疊加，沒有進(jìn)制




從小到大排列：

*或繼承<標(biāo)簽<類，偽類<id<行內(nèi)<！Important

1. display:none與visibility：hidden的區(qū)別？

（1）Display:none 隱藏

隱藏后不保留位置

（2）Visibility:hidden 隱藏

隱藏后保留位置

1. position跟display、overflow、float這些特性相互疊加后會怎么樣？

display屬性規(guī)定元素應(yīng)該生成的框的類型；position屬性規(guī)定元素的定位類型；float屬性是一種布局方式，定義元素在哪個方向浮動。

類似于優(yōu)先級機制：position：absolute/fixed優(yōu)先級最高，有他們在時，float不起作用，display值需要調(diào)整。float 或者absolute定位的元素，只能是塊元素或表格。

https://www.cnblogs.com/wulinzi/p/8426383.html

1. CSS優(yōu)化、提高性能的方法有哪些？

1、盡量將樣式寫在單獨的css文件里面，在head元素中引用

　　有時候為了圖方便或者快速搞定功能，我們可能會直接將樣式寫在頁面的style標(biāo)簽或者直接內(nèi)聯(lián)在元素上，這樣雖然簡單方便，但是非常不利于日后的維護(hù)。將代碼寫成單獨的css文件有幾點好處：

　　(1)內(nèi)容和樣式分離，易于管理和維護(hù)

　　(2)減少頁面體積

　　(3)css文件可以被緩存、重用，維護(hù)成本降低

2、不使用@import

　@import影響css文件的加載速度

3、避免使用復(fù)雜的選擇器，層級越少越好

　　有時候項目的模塊越來越多，功能越來越復(fù)雜，我們寫的CSS選擇器會內(nèi)套多層，越來越復(fù)雜。

建議選擇器的嵌套最好不要超過三層

　　簡潔的選擇器不僅可以減少css文件大小，提高頁面的加載性能，瀏覽器解析時也會更加高效，也會提高開發(fā)人員的開發(fā)效率，降低了維護(hù)成本。

4、精簡頁面的樣式文件，去掉不用的樣式

　　很多時候，我們會把所有的樣式文件合并成一個文件，但是這樣有一個問題：很多其他頁面的CSS同時引用到當(dāng)前頁面中，而當(dāng)前頁面并沒有用到它們，這種情況會造成兩個問題：

　　(1)樣式文件偏大，影響加載速度

　　(2)瀏覽器會進(jìn)行多余的樣式匹配，影響渲染時間。

　　正確的處理方法是根據(jù)當(dāng)前頁面需要的css去合并那些當(dāng)前頁面用到的CSS文件。

　　PS：合并成一個文件有一個優(yōu)點：樣式文件會被瀏覽器緩存，進(jìn)入到其他頁面樣式文件不用再去下載。這條規(guī)則應(yīng)根據(jù)場景來區(qū)別對待，如果是大項目，應(yīng)該合并成不同的樣式文件，如果是簡單的項目，建議合并成一個文件即可。如果無法確認(rèn)項目規(guī)模，建議分開成不同的樣式文件，日后要合并也比較方便。

5、利用CSS繼承減少代碼量

　　我們知道有一部分CSS代碼是可以繼承的，如果父元素已經(jīng)設(shè)置了該樣式，子元素就不需要去設(shè)置該樣式，這個也是提高性能的行之有效的方法。

　　常見的可以繼承的屬性比如：

　　color，font-size，font-family等等

　　不可繼承的比如：

　　position，display，float等

6、慎重使用高性能屬性：浮動、定位；

1. li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應(yīng)用樣式，占據(jù)空間，所以會有間隔，把字符大小設(shè)為0，就沒有空格了。

解決方法：

可以將<li>代碼全部寫在一排

浮動li中float：left

在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

1. 什么叫img3px問題，怎么解決？

將一個img放在div里面，你會發(fā)現(xiàn)在img下面無端端的就多出3px的空白出來

1、設(shè)置div{ font-size: 0}

2、設(shè)置img{ display: block}

3、設(shè)置img{ vertical-align:top;}

當(dāng)然推薦第二種方法，讓img對象成為塊級元素。

1. png、jpg、gif 這些圖片格式解釋一下，分別什么時候用？

png是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）是一種無損數(shù)據(jù)壓縮位圖文件格式.優(yōu)點是：壓縮比高，色彩好。 大多數(shù)地方都可以用。

jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調(diào)及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。

gif是一種位圖文件格式，以8位色重現(xiàn)真色彩的圖像?？梢詫崿F(xiàn)動畫效果.

webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，兼容性不好，目前谷歌和opera支持。

1. 文本超出顯示省略號如何實現(xiàn)？

white-space：nowrap; 強制在同一行內(nèi)顯示所有文本，知道文本結(jié)束或遇到br

overflow:hidden;

text-overflow：clip/ellipsis;直接裁切/溢出部分...標(biāo)記

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

web標(biāo)準(zhǔn)簡單來說可以分為結(jié)構(gòu)、表現(xiàn)和行為。其中結(jié)構(gòu)主要是有HTML標(biāo)簽組成?；蛟S通俗點說，在頁面body里面我們寫入的標(biāo)簽都是為了頁面的結(jié)構(gòu)。表現(xiàn)即指css樣式表，通過css可以是頁面的結(jié)構(gòu)標(biāo)簽更具美感。行為是指頁面和用戶具有一定的交互，同時頁面結(jié)構(gòu)或者表現(xiàn)發(fā)生變化，主要是有js組成。

web標(biāo)準(zhǔn)一般是將該三部分獨立分開，使其更具有模塊化。但一般產(chǎn)生行為時，就會有結(jié)構(gòu)或者表現(xiàn)的變化，也使這三者的界限并不那么清晰。

W3C對web標(biāo)準(zhǔn)提出了規(guī)范化的要求，也就是在實際編程中的一些代碼規(guī)范：包含如下幾點

1.對于結(jié)構(gòu)要求：（標(biāo)簽規(guī)范可以提高搜索引擎對頁面的抓取效率，對SEO很有幫助）

1）。標(biāo)簽字母要小寫

2）。標(biāo)簽要閉合

3）。標(biāo)簽不允許隨意嵌套

2.對于css和js來說

1）。盡量使用外鏈css樣式表和js腳本。是結(jié)構(gòu)、表現(xiàn)和行為分為三塊，符合規(guī)范。同時提高頁面渲染速度，提高用戶的體驗。

2）。樣式盡量少用行間樣式表，使結(jié)構(gòu)與表現(xiàn)分離，標(biāo)簽的id和class等屬性命名要做到見文知義，標(biāo)簽越少，加載越快，用戶體驗提高，代碼維護(hù)簡單，便于改版

3）。不需要變動頁面內(nèi)容，便可提供打印版本而不需要復(fù)制內(nèi)容，提高網(wǎng)站易用性。

1. xhtml和html有什么區(qū)別？

一、其基礎(chǔ)語言不同

1、XHTML是基于可擴展標(biāo)記語言（XML）。

2、HTML是基于標(biāo)準(zhǔn)通用標(biāo)記語言（SGML）。

二、語法嚴(yán)格程度不同

1、XHTML語法比較嚴(yán)格，存在DTD定義規(guī)則。

2、HTML語法要求比較松散，這樣對網(wǎng)頁編寫者來說，比較方便。

三、可混合應(yīng)用不同

1、XHTML可以混合各種XML應(yīng)用，比如MathML、SVG。

2、HTML不能混合其它XML應(yīng)用。

四、大小寫敏感度不同

1、XHTML對大小寫敏感，標(biāo)準(zhǔn)的XHTML標(biāo)簽應(yīng)該使用小寫。

2、HTML對大小寫不敏感。

五、公布時間不同

1、XHTML是2000年W3C公布發(fā)行的。

2、HTML4.01是1999年W3C推薦標(biāo)準(zhǔn)。

1. 前端頁面有哪三層構(gòu)成，分別是什么，作用是什么？

最準(zhǔn)確的網(wǎng)頁設(shè)計思路是把網(wǎng)頁分成三個層次，即：結(jié)構(gòu)層、樣式層、行為層。

HTML：結(jié)構(gòu)層

網(wǎng)頁的結(jié)構(gòu)或內(nèi)容層是該頁面的基礎(chǔ)HTML代碼。正如房屋的框架為房屋的其他部分構(gòu)建了一個堅實的基礎(chǔ)，HTML的堅實基礎(chǔ)創(chuàng)建了一個可以在其上創(chuàng)建網(wǎng)站的平臺。

結(jié)構(gòu)層用于存儲客戶想要閱讀或查看的所有內(nèi)容。HTML結(jié)構(gòu)可以包含文本和圖像，它包括訪問者用于瀏覽網(wǎng)站的超鏈接。這是在符合標(biāo)準(zhǔn)的HTML5中編碼的，可以包括文本，圖像和多媒體（視頻，音頻等）。

網(wǎng)站內(nèi)容的每個方面都應(yīng)該在結(jié)構(gòu)層中表示。這允許關(guān)閉JavaScript的客戶或無法查看整個網(wǎng)站的CSS訪問權(quán)限的客戶（如果不是所有功能）。

CSS：樣式層

該層指示結(jié)構(gòu)化HTML文檔如何看待網(wǎng)站的訪問者，并由CSS（層疊樣式表）定義。這些文件包含有關(guān)如何在Web瀏覽器中顯示文檔的樣式說明。樣式層通常包括基于屏幕大小和設(shè)備更改站點顯示的媒體查詢。

網(wǎng)站的所有視覺樣式都應(yīng)位于外部樣式表中。您可以使用多個樣式表，但請記住，每個CSS文件都需要HTTP請求才能獲取它，從而影響站點性能。

JavaScript：行為層

行為層使網(wǎng)站具有交互性，允許頁面響應(yīng)用戶操作或基于一組條件進(jìn)行更改。JavaScript是行為層最常用的語言，但CGI和PHP也經(jīng)常被使用。

當(dāng)開發(fā)人員引用行為層時，大多數(shù)都是指在Web瀏覽器中直接激活的層。您可以使用此圖層直接與DOM（文檔對象模型）進(jìn)行交互。在內(nèi)容層中編寫有效的HTML對于行為層中的DOM交互非常重要。在構(gòu)建行為層時，應(yīng)該像使用CSS一樣使用外部腳本文件來優(yōu)化速度和性能。