[前端求職必看]前端開發面試題與答案精選_HTML
天蓬老师
天蓬老师 2017-11-13 13:01:44
0
0
1249

HTML

Doctype作用? 嚴格模式與混雜模式如何區分?它們有何意義?

(1)、<!DOCTYPE> 聲明位於文件中的最前面,處於 <html> 標籤之前。告知瀏覽器的解析器,
     用什麼文件類型 規格來解析這個文件。

(2)、嚴格模式的排版和 JS 運作模式是  以此瀏覽器支援的最高標準運作。

(3)、在混雜模式中,頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止網站無法運作。

(4)、DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。

行內元素有哪些?塊級元素有哪些?空(void)元素有那些?

(1)CSS規格規定,每個元素都有display屬性,確定該元素的類型,每個元素都有預設的display值,
 例如div預設display屬性值為“block” ,成為“區塊級”元素;
 span預設display屬性值為“inline”,是“行內”元素。

(2)行內元素有:a b span img input select strong(強調的語氣)
區塊級元素有:div ul ol li dl dt dd h1 h2 h3 h4…p  

(3)知名的空元素:
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是:
< area> <base> <col> <command> <embed> <keygen> <param> <command> <embed> <keygen> <param> <source> <track>; import 的差別是?

(1)link屬於XHTML標籤,而@import是CSS提供的;

#(2)頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被載入完再載入;


(3)import只在IE5以上才能識別,而link是XHTML標籤,無相容問題;

(4)link方式的樣式的權重高於@import的權重.



瀏覽器的核心分別是什麼?

* IE瀏覽器的核心Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera核心原為Presto,現為Blink;

常見相容性問題?

* png24位元的圖片在iE6瀏覽器上出現背景,解決方案是做成PNG8.

* 瀏覽器預設的margin和padding不同。解是加一個全域的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:區塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大。

 浮動ie產生的雙倍距離#box{ float:left; width:10px; margin:0 0 0 10px;}

# 這種情況之下IE會產生20px的距離,解決方案是在float的標籤樣式控制中加入-_display:inline;將其轉換為行內屬性。 (_這個符號只有ie6會辨識)

 漸進辨識的方式,從總體中逐漸排除局部。

 首先,巧妙的使用「\9」這個標記,將IE遊覽器從所有情況中分離出來。
 接著,再次使用「 」將IE8和IE7、IE6分離開來,這樣IE8已經獨立識別。

 css
     .bb{
      background-color:#f1ee18;/*所有辨識*/
     .background-color:#00deff\9; 識別/*IE6、7、   .background-color:#00deff\9; 識別/*IE6、7、88 */
      background-color:#a200ff;/*IE6、7辨識*/
     _background-color:#1e0bd1;/*IE6辨識*/
     }
IE#可以使用取得常規屬性的方法來取得自訂屬性,
  也可以使用getAttribute()取得自訂屬性;
  Firefox下,只能使用getAttribute()取得自訂屬性.
  解決方法:統一透過getAttribute()取得自訂屬性.

* IE下,even物件有x,y屬性,但是沒有pageX,pageY屬性;
 Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性.

* 解決方法:(條件註解)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

* Chrome 中文介面下預設會將小於12px 的文字強制依照12px 顯示,
 可透過加入CSS 屬性-webkit-text-size-adjust: none; 解決.

#超連結訪問後hover樣式就不出現了被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a :hover {} a:active {}

html5有哪些新特性、移除了那些元素?如何處理HTML5新標籤的瀏覽器相容問題?如何區分 HTML 和 HTML5?

* HTML5 現在已經不是 SGML 的子集,主要是關於圖像,位置,存儲,多任務等功能的增加。

* 繪畫canvas  
 用於媒介回放的video 和audio 元素
 本地離線存儲localStorage 長期存儲數據,瀏覽器關閉後數據不丟失;
 sessionStorage 的數據在瀏覽器關閉後自動刪除

 語意化更好的內容元素,例如article、footer、header、nav、section
 表單控件,calendar、date、time、email、url、search  
#  新的技術webworker, websockt, Geolocation

* 移除的元素

純表現的元素:basefont,big,center,font, s,strike,tt,u;

對可用性產生負面影響的元素:frame,frameset,noframes;

支援HTML5新標籤:

* IE8/IE7/IE6支援透過document.createElement方法產生的標籤,
 可以利用這項特性讓這些瀏覽器支援HTML5新標籤,

 瀏覽器支援新標籤後,還需要新增標籤預設的樣式:

* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
  <!--[if lt IE 9]>
  <script> src="http://html5shim.googlecode.com/svn/trunk/html5 .js"</script>
  <![endif]-->
如何區分: DOCTYPE宣告\新增的結構元素\功能元素

#語意化的理解?

用正確的標籤做正確的事!
html語意化就是讓頁面的內容結構化,便於對瀏覽器、搜尋引擎解析;
在沒有樣式CCS情況下也以一種文件格式顯示,而且是容易閱讀的。
搜尋引擎的爬蟲依賴標記來確定上下文和各個關鍵字的權重,利於 SEO。
讓閱讀原始程式碼的人對網站更容易將網站分塊,以便於閱讀維護理解。

HTML5的離線儲存?

localStorage    長期儲存數據,瀏覽器關閉後資料不遺失;
sessionStorage  資料在瀏覽器關閉後自動刪除。

(寫)描述一段語意的html程式碼吧。

(HTML5中新增加的許多標籤(如:<article>、<nav>、<header>和<footer>等)
是基於語意化設計原則)  
   < div id="header">
   < h1>標題< /h1>
   < h2>專注Web/gt;lt; /h2>
divh;

#iframe有那些缺點?

*iframe會阻塞主頁面的Onload事件;

*iframe和主頁共用連線池,而瀏覽器對相同網域的連線有限制,所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是透過javascript
動態為iframe新增src屬性值,這樣可以繞過以上兩個問題。

請描述 cookies,sessionStorage 和 localStorage 的差別?

cookie在瀏覽器和伺服器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大;
sessionStorage和localStorage有更多豐富易用的接口;
sessionStorage和localStorage各自獨立的存儲空間;


#
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回覆(0)
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板