Web前端筆試題

時間 2019-11-09

標籤 web 前端筆試欄目 HTML 简体版

原文原文鏈接

1.網頁常常用到的圖片格式有幾種，它們之間有什麼不一樣點和用途？javascript

jpg是一種有損圖片壓縮格式，支持的顏色數量不少，適用於保存顏色較多且比較複雜的攝影圖片或寫實圖像，且生成的文件體積較小；php

jpg格式是一種大小與質量相平衡的壓縮圖片格式。通俗一點講，就是：高的壓縮比=低的圖片質量=小的文件大小。反之，低的壓縮比=高的圖片質量=大的文件大小。因爲jpg文件沒法保持100％的原始圖像的像素數據，因此它不被認爲是一種無損圖像格式。 css

注：jpg,jpeg這兩種格式實際上是同樣的。 html

用途：因爲這種極其敏感的平衡特性，jpg很是適合被應用在那些容許輕微失真的像素色彩豐富的圖片（照片）場合。反之，JPEG格式圖片並不適合作簡單色彩（色調少）的圖片，好比LOGO，各類小圖標（ICONS）。前端

gif
Gif是一種無損圖片壓縮格式，最大支持256種顏色，支持透明，可保存動畫，適用於保存顏色較簡單的卡通圖像；java

它是爲使圖片可以應用在在線（online）應用程序上所特別開發的圖片格式。Gif，有時也被成爲「Giff」，是一種無損，8位圖片格式。「無損」是指100%的保持原始圖片的像素數據信息。專業名詞「8位」是指，所能表現的顏色深度——一個8位圖像僅最多隻能支持256種不一樣顏色（一個多餘256種顏色的圖片若用gif圖片保存會出現失真）。算法

用途：因爲8位顏色深度的限制，Gif不適合應用於各類色彩過於豐富的照片存儲場合。但它卻很是適合應用在如下場合： chrome

* Logo：小圖標（Icon）、用於佈局的圖片（例如某個佈局角落，邊框等等）以及僅包含不超過256種色彩的簡單，小型圖片場合等。瀏覽器

透明特性：GIF支持基本的透明特性，這意味着你可以使圖片的某些像素「不可見」。在其被放置到網頁中時，咱們就能夠看到經過這些不可見區域看到此圖片後面的背景顏色（圖片）。此特性很是有用：若是你須要將某個gif圖片的內容置於全部圖片的上層，你能夠將其設置爲透明。框架

壓縮特性： GIF格式採用LZW算法進行壓縮，此算法是Unisys申請的一項專利。在好久好久以前，若是你想使用GIF格式，那麼就意味着你須要向Unisys付費申請專利許可。不過值得高興的是，此項專利技術已於2003年6月20日過時，咱們如今能夠免費的使用GIF了！

隔行掃描：GIF同時也支持隔行掃描。隔行掃描可以令圖片在瀏覽器中更快的加載和顯示。此特性對於那些慢網速的瀏覽者來講尤爲實用。

動畫GIF：一個動態的GIF文件，是由若干幀圖片所聯結而成的動態圖片。在顯示時，這些動態幀被反覆的繪製讀取出來從而造成了簡單的動畫效果。合理的運用GIF動畫可以爲網頁增添動靜結合的效果，而過分的使用則會使網頁雜亂無章。

png
Png是一種壓縮算法優於gif的無損圖片壓縮格式，能在保證最不失真的狀況下儘量壓縮圖像文件的大小，支持圖像透明，不支持動畫，只要不是須要動畫效果的顏色較簡單的圖片，優先採用png格式輸出。

PNG，讀「ping」，初始時被做爲GIF的免費替代格式所開發，採用公共專利壓縮算法。PNG格式也是一種無損壓縮，但與GIF格式不一樣的是，PNG同時支持8位和24位的圖像。

8位PNG圖像：一個8位PNG圖片，支持透明背景且像素顏色不能超過256種。除了壓縮算法不一樣以外，此8位PNG格式與GIF格式極其類似；

用途：8位PNG圖片的用途與GIF格式基本相同，

* Logo：小圖標（Icon）、用於佈局的圖片（例如某個佈局角落，邊框等等）以及僅包含不超過256種色彩的簡單，小型圖片場合等等

24位PNG圖像：24位PNG，支持160萬種不一樣的像素顏色且支持Alpha透明效果，這就意味着，不管透明度設置爲多少，PNG圖片均可以與背景很好的融合在一塊兒。

對PNG的支持：因爲PNG格式的普遍使用和開發者更加劇視網頁的WEB標準，不一樣瀏覽器對PNG的支持就顯得至關重要了。不過，幸運的是，目前市場上主流的瀏覽器對PNG格式都有很好的支持，這包括：IE*, Firefox, Safari, Opera, and Konqueror。

*但不幸的是，IE6及IE6如下的瀏覽器對PNG透明背景的支持並很差。不過咱們仍能夠經過其餘方法來解決這個問題，詳情請查看如何在IE6中正常顯示透明PNG。

2.請畫出盒子模型

3.前端MVC是什麼意思？

前端MVC：主要仍是將頁面的代碼分層，頁面顯示HTML（V） + 事件控制（C）+數據模型 +（M），其中C和M都是JS。

4.在table標籤中，tr指什麼？，td指什麼？
tr指表格中的一行，td指表格中的單元格。

5.讓一個div層水平居中於瀏覽器窗口中，最簡單的實現方法是？

margin:auto 0 或者 text-aligh:center

6.怎樣讓一個200*200的div垂直居中於瀏覽器中？

<style type="text/css">

<!--

div {

position:absolute;

top:50%;

left:50%;

margin:-100px 0 0 -100px;

width:200px;

height:200px;

border:1px solid pink;

-->   </style>

<div>讓層垂直居中於瀏覽器窗口</div>



   解決的思路是這樣的：首們須要position:absolute;絕對定位。而層的定位點，使用外補丁margin負值的方法。負值的大小爲層自身寬度高度除以2。如：一個層寬度是400，高度是300。使用絕對定位距離上部與左部都設置成50%。而margin-top的值爲－150。margin-left的值爲－200。這樣咱們就實現了層垂直居中於瀏覽器的樣式編寫。

 7.網頁中的中文文字小於多少像素就會開始影響識別？

      12像素

 8.設置一個連接在新窗口打開的方法是？

      爲連接添加」target=」_blank」屬性

 9.CSS選擇符有哪些哪些屬性能夠繼承，style、!important、class、id 以及tag哪一個優先級高？

id和class優先級高，class 可繼承，僞類a標籤、列表ul、li 、dl、dd、dt 可繼承

優先級就近原則，樣式定義最近者爲準

載入樣式以最後載入的定位爲準

優先級爲：!important > [ id > class > tag ]

Important 比內聯優先級高

10.CSS中的id選擇器和class選擇器，哪一個定義的級別高？這兩者的區別是什麼？

id選擇器的級別高。

W3C標準這樣規定的，其一：在同一個頁面內，不容許有相同名字的id對象出現，可是容許相同名字的class。其二：當頁面中用到js或者要動態調用對象的時候，要用到id控制頁面，總共有四種方式：行內方式、內嵌方式、連接方式、導入方式，經過這四種方式就能夠實現CSS對HTML頁面樣式的控制，若是要讓這些樣式對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就須要用到CSS選擇器，HTML頁面中的元素就是經過CSS選擇器進行控制的。

11.CSS中，你習慣的命名規則是什麼？

使用駝峯法命名規則，另外使用CSS 類和ID的經常使用命名，以下：

12.CSS的position屬性能夠設置爲哪些值，這些值分別表明什麼意思，區別是什麼？

    absolute 	
    生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
    fixed 	
    生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

   relative 	
   生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。  
    static 	
    默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

    inherit 
    規定應該從父元素繼承 position 屬性的值。通常一般用絕對定位absolute。

 13.用CSS實現，爲一個100*100的div層添加邊框爲2px的黑色虛線邊框和3px的矩形圓角，背景是一張名爲image.jpg的圖片。

 14.用CSS3如何給一個div添加陰影

    box-shadow:  投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;

 15.怎麼才能讓層顯示在flash之上呢？

    給FLASH設置透明param value=transparent 或者param value=opaque

 16.｛clear:both｝是什麼意思，有什麼做用？

    清除當前定義的元素左右浮動
    諸如：
    clear:left;   //清除左浮動
    clear:right;  //清除右浮動
    clear:both;  //清除左右兩邊浮動

 17.用div設計一個寬度爲800px的四行三列的網頁（頭部，Banner廣告，身體，底部；身體部分爲三列），要求居中顯示。Header和Banner爲通欄。

 18.當float和margin同時使用時，IE6的雙倍邊距bug如何解決？

先看css代碼:
div {
float:left;
        margin-left:10px;
        width:420px;
        height:150px;
        border:1px solid red
        }

這樣設置左邊距設置爲10px，但IE6.0解釋爲20px，解決辦法就是是加上display:inline
代碼

div {
    float:left;
        margin-left:10px;
        display:inline;
        width:420px;
        height:150px;
        border:1px solid red
        }

display:inline

display:inline的做用是設置對象作爲行內元素顯示，

inline是內聯對象的默認值（ps:內聯對象就是不自動產生換行的元素，好比span）

而咱們通常用的div是塊級元素，默認display屬性是block,

但將div的display設置爲inline的話，則多個div能夠象span同樣顯示在一行了。

 19.你作的頁面在哪些瀏覽器測試過？這些瀏覽器的內核分別是什麼？常常遇到的瀏覽器的兼容性問題有哪些？解決方法是什麼？

IE內核瀏覽器：360，傲遊，搜狗，世界之窗，騰訊TT
     非IE內核瀏覽器：firefox opera safari chrome
     1.就是ie6雙倍邊距的問題，在使用了float的狀況下，不論是向左仍是向右都會出現雙倍，最簡單的解決方法就是用display:inline;加到css裏面去。
     2.文字自己的大小不兼容。一樣是font-size:14px的宋體文字，在不一樣瀏覽器下佔的空間是不同的，ie下實際佔高16px，下留白3px，ff下實際佔高17px，上留白1px，下留白3px，opera下就更不同了。解決方案：給文字設定 line-height 。確保全部文字都有默認的 line-height 值。這點很重要，在高度上咱們不能容忍1px 的差別。
     3. ff下容器高度限定，即容器定義了height以後，容器邊框的外形就肯定了，不會被內容撐大，而ie下是會被內容撐大，高度限定失效。因此不要輕易給容器定義height。
     4. 還討論內容撐破容器問題，橫向上的。若是float 容器未定義寬度，ff下內容會盡量撐開容器寬度，ie下則會優先考慮內容折行。故，內容可能撐破的浮動容器須要定義width。
     5. 浮動的清除，ff下不清除浮動是不行的。
     6. mirrormargin bug，當外層元素內有float元素時，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px。padding也會出現相似問題，都是ie6下的特產，該類bug 出現的狀況較爲複雜，遠不僅這一種出現條件，還沒系統整理。解決方案：外層元素設定border 或設定float。
     7. 吞吃現象，限於篇幅，我就不展開了。仍是ie6，上下兩個div，上面的div設置背景，卻發現下面沒有設置背景的div 也有了背景，這就是吞吃現象。對應上面的背景吞吃現象，還有滾動下邊框缺失的現象。解決方案：使用zoom:1。這個zoom好象是專門爲解決ie6 bug而生的。
     8. 註釋也能產生bug~~~「多出來的一隻豬。」這是前人總結這個bug使用的文案，ie6的這個bug 下，你們會在頁面看到豬字出現兩遍，重複的內容量因註釋的多少而變。解決方案：用「 picRotate start

 20.請說出幾個你知道的響應式前端開發框架。

Twitter Bootstrap

21.請列舉HTML的行內元素、塊元素以及空元素

   內聯元素(inline element)通常都是基於語義級(semantic)的基本元素。內聯元素只能容納文本或者其餘內聯元素，常見內聯元素"a"。

    塊元素(block element)和內聯元素(inline element)都是html規範中的概念。塊元素和內聯元素的基本差別是塊元素通常都重新行開始。而當加入了css控制之後，塊元素和內聯元素的這種屬性差別就不成爲差別了。好比，咱們徹底能夠把內聯元素cite加上display:block這樣的屬性，讓他也有每次都重新行開始的屬性。
塊元素(block element)
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 經常使用塊級容易，也是css layout的主要標籤
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
* noscript - ）可選腳本內容（對於不支持script的瀏覽器顯示此內容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

內聯元素(inline element)
* a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計算機代碼(在引用源碼的時候須要)
* dfn - 定義字段
* em - 強調
* font - 字體設定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標籤
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義範例計算機代碼
* select - 項目選擇
* small - 小字體文本
* span - 經常使用內聯容器，定義文本內區塊
* strike - 中劃線
* strong - 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變量

22.CSS加載方式：link和@import有何區別？

區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。

區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。

區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

23.js延遲加載的方式什麼？

<script type=」text/javascript」 src=」" id=」my」></script>
<script type=」text/javascript」>
  setTimeout(「document.getElementById(‘my').src='include/php100.php'; 「,3000);//延時3秒
</script>

24.域名劫持是怎麼發生的，有什麼危害？