小夥伴們大家好啊！今天浙江優就業的小U老師為大家帶來了WEB的面試題呢~~
1、CSS 選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算? CSS3新增偽類有哪些?
a.id選擇器( # myid)
b.類選擇器(.myclassname)
c.標籤選擇器(div, h1, p)
d.相鄰選擇器(h1 + p)
e.子選擇器(ul > li)
f.後代選擇器(li a)
g.通配符選擇器(*)
h.屬性選擇器(a[rel = "external"])
i.偽類選擇器(a: hover, li: nth - child)
可繼承的樣式：
font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：
border padding margin width height
優先級
優先級就近原則，同權重情況下樣式定義最近者為準，載入樣式以最後載入的定位為準;
優先級為:
!important > id > class > tag
important 比 內聯優先級高
CSS3新增偽類舉例
p:first-of-type 選擇屬於其父元素的首個
元素的每個
元素。
p:last-of-type 選擇屬於其父元素的最後
元素的每個
元素。
p:only-of-type 選擇屬於其父元素唯一的
元素的每個
元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個
元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個
元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中。
2、cellpadding與cellspacing有何區別?
cellpadding：代表單元格邊框到內容之間的距離(留白)
cellspacing：cellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數值是數字，表示單元格間隙所佔的像素點數。
3、display與visibility有何異同?
display可以有很多值，visibility只有兩個常用值：visible、hidden。
當display為none、visibility為hidden時都會隱藏元素。但display會隱藏掉元素空間，visibility會保留元素空間。
4、table-layout、border-collapse有何用途?
①table-layout：設置表格是否自動調整寬高
②border-collapse：表格與單元格及單元格間的邊框是否融合在一起。
5、get和post的區別?
GET：一般用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符
POST：一般用於修改服務器上的資源，對所發送的信息沒有限制。
GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。
然而，在以下情況中，請使用 POST 請求：
①無法使用緩存文件(更新服務器上的文件或數據庫)向服務器發送大量數據(POST 沒有數據量限制)。
②發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠。
6、xhtml和html有什麼區別
①HTML是一種基本的WEB網頁設計語言,XHTML是一個基於XML的置標語言
②最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。
7、清除浮動的幾種方式，各自的優缺點
(1)父級div定義height。
(2)結尾處加空div標籤clear:both。
(3)父級div定義偽類:after和zoom。
(4)父級div定義overflow:hidden。
(5)父級div定義overflow:auto。
(6)父級div也浮動，需要定義寬度。
(7)父級div定義display:table。
(8)結尾處加br標籤clear:both。
比較好的是第3種方式，好多網站都這麼用。
8、Doctype作用?標準模式與兼容模式各有什麼區別?
①告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
②標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
注意點：
HTML5 只需要寫不需要對DTD進行引用，因為HTML5不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為(讓瀏覽器按照它們應該的方式來運行)。
而HTML4.01基於SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型。
9、iframe有哪些缺點?
①iframe會阻塞主頁面的事件，搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
②iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過java動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
10、如何實現瀏覽器內多個標籤頁之間的通信?
①通過WebSocket、SharedWorker來實現;
②也可以調用localstorge、cookies等本地存儲方式。
localstorge另一個瀏覽上下文(另一個標籤頁)裡被添加、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面信息通信。
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常。
11、CSS引入的方式有哪些? link和@import的區別是?
CSS引入的方式包括內聯 內嵌 外鏈 導入
link和@import的區別是 ：
①link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的，只能用於加載CSS;
②頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
③import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;
④後者優先級更高
12、你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?介紹一下你對瀏覽器內核的理解
Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opera(blink)
對內核的理解：
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
②JS引擎：解析和執行java來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。
13、解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量。
適用於以下情況：
①靜態圖片，不隨用戶信息的變化而變化
②小圖片，圖片容量比較小
③加載量比較大
14、如何在頁面上實現一個圓形的可點擊區域?
①map+area或者svg
②border-radius
③純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標座標等等
閱讀更多 浙江優就業 的文章
