18禁网站免费,成年人黄色视频网站,熟妇高潮一区二区在线播放,国产精品高潮呻吟AV

學(xué)習(xí)啦 > 創(chuàng)業(yè)指南 > 職場(chǎng) > 面試題 > 最新的搜狐前端面試題目整理

最新的搜狐前端面試題目整理

時(shí)間: 如英753 分享

最新的搜狐前端面試題目整理

  回答面試題目在搜狐前端求職者的求職面試過(guò)程中發(fā)揮著重要的作用。今天學(xué)習(xí)啦小編要與大家分享的是搜狐前端面試題,希望對(duì)大家的學(xué)習(xí)有幫助!

  搜狐前端面試題:HTML部分

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

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

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

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

  (4)、DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。

  2、行內(nèi)元素有哪些?塊級(jí)元素有哪些?

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

  (2)行內(nèi)元素有:a b span img input select strong(強(qiáng)調(diào)的語(yǔ)氣) 塊級(jí)元素有:div ulol li dl dtdd h1 h2 h3 h4…p

  3、link 和@import 的區(qū)別是?

  (1)link屬于XHTML標(biāo)簽,而@import是CSS提供的;

  (2)頁(yè)面被加載的時(shí),link會(huì)同時(shí)被加載,而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;

  (3)import只在IE5以上才能識(shí)別,而link是XHTML標(biāo)簽,無(wú)兼容問(wèn)題;

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

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

  IE瀏覽器的內(nèi)核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera內(nèi)核原為Presto,現(xiàn)為Blink;

  5、HTML5有哪些新特性?如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題?如何區(qū)分 HTML 和 HTML5?

  HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集,主要是關(guān)于圖像,位置,存儲(chǔ),多任務(wù)等功能的增加。

  繪畫(huà) canvas 用于媒介回放的 video 和 audio 元素 本地離線(xiàn)存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失; sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除 語(yǔ)意化更好的內(nèi)容元素,比如 article、footer、header、nav、section 表單控件,calendar、date、time、email、url、search 新的技術(shù)webworker, websockt, Geolocation

  6、對(duì)語(yǔ)義化如何理解?

  用正確的標(biāo)簽做正確的事情!

  HTML語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化,便于對(duì)瀏覽器、搜索引擎解析;在沒(méi)有樣式CCS情況下也以一種文檔格式顯示,并且是容易閱讀的。搜索引擎的爬蟲(chóng)依賴(lài)于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重,利于 SEO。使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊,便于閱讀維護(hù)理解。

  7、HTML5的離線(xiàn)儲(chǔ)存有幾種方式?

  localStorage長(zhǎng)期存儲(chǔ)數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。

  8、iframe有那些缺點(diǎn)?

  iframe會(huì)阻塞主頁(yè)面的Onload事件;

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

  9、請(qǐng)描述一下 cookies,sessionStorage和localStorage的區(qū)別?

  cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。sessionStorage和localStorage不會(huì)sessionStorage和localStorage的存儲(chǔ)空間更大;sessionStorage和

  localStorage有更多豐富易用的接口;sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間;

  搜狐前端面試題:CSS部分

  1、CSS 選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算? CSS3新增偽類(lèi)有那些?

  1.id選擇器( # myid) 2.類(lèi)選擇器(.myclassname) 3.標(biāo)簽選擇器(div, h1, p) 4.相鄰選擇器(h1 + p) 5.子選擇器(ul< li) 6.后代選擇器(li a) 7.通配符選擇器( * ) 8.屬性選擇器(a[rel = "external"]) 9.偽類(lèi)選擇器(a: hover, li: nth - child) 可繼承的樣式: font-size font-family color, UL LI DL DD DT; 不可繼承的樣式:border padding margin width height ; 優(yōu)先級(jí)就近原則,同權(quán)重情況下樣式定義最近者為準(zhǔn);

  載入樣式以最后載入的定位為準(zhǔn);

  優(yōu)先級(jí)為:

  !important > id > class > tag important 比內(nèi)聯(lián)優(yōu)先級(jí)高

  2、CSS3新增偽類(lèi)舉例:

  p:first-of-type選擇屬于其父元素的首個(gè)元素的每個(gè)元素。

  p:last-of-type 選擇屬于其父元素的最后元素的每個(gè)元素。 p:only-of-type 選擇屬于其父元素唯一的元素的每個(gè)元素。 p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)元素。 p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)元素。 :enabled :disabled 控制表單控件的禁用態(tài)。 :checked單選框或復(fù)選框被選中。

  3、如何居中div?如何居中一個(gè)浮動(dòng)元素? 給div設(shè)置一個(gè)寬度,然后添加margin:0 auto屬性

  div{ width:200px; margin:0 auto; }居中一個(gè)浮動(dòng)元素

  確定容器的寬高寬500 高 300 的層 設(shè)置層的外邊距 .div

  { Width:500px ; height:300px;//高度可以不設(shè) Margin: -150px 0 0 -250px; position:relative;相對(duì)定位 background-color:pink;//方便看效果 left:50%; top:50%;}

  列出display的值,說(shuō)明他們的作用。position的值, relative和absolute定位原點(diǎn)是?

  1.block 象塊類(lèi)型元素一樣顯示。 none 缺省值。象行內(nèi)元素類(lèi)型一樣顯示。 inline-block 象行內(nèi)元素一樣顯示,但其內(nèi)容象塊類(lèi)型元素一樣顯示。 list-item 象塊類(lèi)型元素一樣顯示,并添加樣式列表標(biāo)記。

  2. absolute 生成絕對(duì)定位的元素,相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。

  fixed (老IE不支持) 生成絕對(duì)定位的元素,相對(duì)于瀏覽器窗口進(jìn)行定位。

  relative 生成相對(duì)定位的元素,相對(duì)于其正常位置進(jìn)行定位。

  static 默認(rèn)值。沒(méi)有定位,元素出現(xiàn)在正常的流中 *(忽略 top, bottom, left, right z-index 聲明)。

  inherit 規(guī)定從父元素繼承 position 屬性的值。

  4、為什么要初始化CSS樣式?

  因?yàn)闉g覽器的兼容問(wèn)題,不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的,如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。當(dāng)然,初始化樣式會(huì)對(duì)SEO有一定的影響,但魚(yú)和熊掌不可兼得,但力求影響最小的情況下初始化。最簡(jiǎn)單的初始化方法就是: * {padding: 0; margin: 0;} (不建議)淘寶的樣式初始化: body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea

  { font:12px/1.5tahoma, arial, /5b8b/4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var

  { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }

  5、absolute的containing block計(jì)算方式跟正常流有什么不同?

  6、position跟display、margin collapse、overflow、float這些特性相互疊加后會(huì)怎么樣?

  7、對(duì)BFC規(guī)范的理解?

  (W3C CSS 2.1 規(guī)范中的一個(gè)概念,它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用。)

  8、css定義的權(quán)重

  以下是權(quán)重的規(guī)則:標(biāo)簽的權(quán)重為1,class的權(quán)重為10,id的權(quán)重為100,以下例子是演示各種定義的權(quán)重值:/*權(quán)重為1*/div{}/*權(quán)重為

  10*/.class1{}/*權(quán)重為100*/#id1{}/*權(quán)重為100+1=101*/#id1 div{}/*權(quán)重為10+1=11*/.class1 div{}/*權(quán)重為10+10+1=21*/.class1 .class2 div{} 如果權(quán)重相同,則最后定義的樣式會(huì)起作用,但是應(yīng)該避免這種情況出現(xiàn)

  9、解釋下浮動(dòng)和它的工作原理?清除浮動(dòng)的技巧

  10、用過(guò)媒體查詢(xún),針對(duì)移動(dòng)端的布局嗎?

  11、使用 CSS 預(yù)處理器嗎?喜歡那個(gè)?

  12、CSS3有哪些新特性?

  CSS3實(shí)現(xiàn)圓角(border-radius:8px),陰影(box-shadow:10px), 對(duì)文字加特效(text-shadow、),線(xiàn)性漸變(gradient),旋轉(zhuǎn)

  (transform) transform:rotate(9deg) scale(0.85,0.90)

  translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜 增加了更多的CSS選擇器 多背景rgba

  13、經(jīng)常遇到的CSS的兼容性有哪些?原因,解決方法是什么?

  14、介紹一下CSS的盒子模型?

  (1)有兩種, IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型;IE的content部分包含了 border 和pading;

  (2)盒模型:內(nèi)容(content)、填充(padding)、邊界(margin)、邊框(border).

看過(guò)“搜狐前端面試題”的人還看了:

1.web前端工程師面試題及答案

2.2016web前端面試題

1716579