新人必看的前臺網站開發【超全總結】

經常會用到那幾種瀏覽器進行測試？

IE，FireFox，Chrome，Opera，Safari，Opera。

行內元素和塊級元素的區別？以及它們的兼容性使用？

（1）-行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。

-塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。

（2）兼容性：display:inline-block;*display:inline;*zoom:1;

網頁清除浮動有哪些方式？

（1）父級div定義height。

（2）結尾處加空div標簽clear:both。

（3）父級div定義overflow:auto。

（4）父級div定義overflow:hidden。

（5）父級div定義偽類:after和zoom。

（6）父級div定義display:table。

（7）父級div也浮動，需要定義寬度。

（8）結尾處加br標簽clear:both。

box-sizing經常用的的屬性有哪些？分別有什么作用？

（1）box-sizing: content-box|border-box|inherit;

（2）border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

（3）content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。

網頁前都要有的Doctype有什么作用？它的標準模式與兼容模式各有什么區別?

（1） 告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。

（2）標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

HTML5 為什么只需要寫 ？

HTML5不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）。

頁面載入樣式時，使用@import和link有什么區別？

（1）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題。

（2）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;

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

.xhtml和html有什么區別？

html是一種基本的web網頁設計語言，xhtml是基于xml的標記語言

區別：

xhtml元素必須被正確的嵌套

xhtml元素必須被關閉

標簽名必須使用小寫

xhtml必須擁有根元素

（附：xml拓展）什么是xml？

xml(extensible markup language)可拓展標記語言，是對超文本標記語言的補充。它是一種用來傳輸和存儲數據的標準，一種獨立于軟件和硬件的信息傳輸工具。一種不同設備之間通訊協議。

src與href的區別？

（1） src（source）指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔中，如js腳本，img圖片和iframe等元素。

當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，類似于將所指向資源嵌入當前標簽內。

（2） href（hypertext reference/超文本引用）指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加那么瀏覽器會識別該文檔為css文件，就會并行下載資源并且不會停止對當前文檔的處理。這也就是為什么建議使用link方式加載css而不是使用@import方式。

頁面大量圖片，如何優化加載，如何優化用戶體驗？

（1）圖片懶加載。在頁面的未可視區域添加一個滾動事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優先加載。

（2）如果為幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和后一張優先下載。

（3）如果圖片為css圖片，可以使用CSSsprite，SVGsprite等技術。

（4）如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。

（5）如果圖片展示區域小于圖片的真實大小，應在服務器端根據業務需要先進行圖片壓縮，圖片壓縮后大小與展示一致。

分享題目：新人必看的前臺網站開發【超全總結】
轉載源于：http://m.kartarina.com/news/225809.html

成都網站建設公司_創新互聯，為您提供軟件開發、網站維護、網站排名、網站制作、關鍵詞優化、標簽優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯