金山前端面試題

時間  2019-11-19
標籤 金山 端面 試題 简体版
原文   原文鏈接

1.說說你對Doctype的理解javascript

DOCTYPE標籤是一種標準通用標記語言的文檔類型聲明，它的目的是要告訴標準通用標記語言解析器，它應該使用什麼樣的文檔類型定義（DTD）來解析文檔。css

2.web產品開發的流程html

只有每一個開發人員都按照一個共同的規範去設計、溝通、開發、測試、部署，才能保證整個開發團隊協調一致的工做，從而提升開發工做效率，提高工程項目質量。前端

1、 項目的角色劃分java

若是不包括前、後期的市場推廣和產品銷售人員，開發團隊通常能夠劃分爲項目負責人、程序員、美工三個角色。jquery

2、 開發工具的選取程序員

3、 項目開發流程web

 

 

3.說說你對盒子模型的理解chrome

內容(content)、填充(padding)、邊框(border)、邊界(margin)。瀏覽器

4.前端頁面有哪三層構成，分別是什麼？做用是什麼？

分紅：結構層、表示層、行爲層。

結構層（structural layer）
由 HTML 或 XHTML之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P標籤表達了這樣一種語義：「這是一個文本段。」

表示層（presentation layer）
由 CSS 負責建立。 CSS對「如何顯示有關內容」的問題作出了回答。

行爲層（behaviorlayer）
負責回答「內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM主宰的領域。

5.行內元素有哪些？塊級元素有哪些？他們如何相互轉化？

區別能夠去找  「html文檔流」相關的資料去學習，最主要的區別就是元素是佔據一行仍是擠在一行

轉換的方式是用css的display屬性

display:block;    /*轉換爲塊級*/
display:inline;    /*轉換爲行內*/

還有一種是
display:inline-block;    /* 其實仍未行內元素，可是能夠設置width及height屬性等*/

7.CSS的引入方式有哪些?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>引入CSS的四種方式</title>

<style type="text/css">

/*h2{ color:white;background-color:blue;}*/

/*要想使網頁內的CSS生效，必須註釋下一行代碼*/

@import "import.css";

</style>

<link href="alone.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<h1 style="color:white; background-color:yellow">標籤內的CSS</h1>

<h2>網頁內的CSS</h2>

<h3>link引用的CSS文件</h3>

<h4>import引用的CSS文件</h4>

<p>link引用和import引用區別是：link是html加載前就引用，而import是html加載後才引用。舉例，採用impor引用，會先顯示無樣式的頁面，而後再把樣式放進去。若是用JavaScript動態引用CSS，得使用link引用方式纔可實現。</p>

 

</body>

</html>

8.請用CSS來定義<p>標籤，要求實現如下效果：字體顏色再IE6下爲黑色，IE7下爲紅色，IE8下爲綠色，其餘瀏覽器下爲黃色。

p{color:#00ff00}
*p{color:#ff0000}
_p{color:#000000}

9.談談CSS Sprites技術

通俗點講CSS Sprite就是將多個背景圖片拼合到一個圖片上。而後在CSS裏經過position定義到該圖片上，實現多個位置的背景，一張圖片搞定

如：

.div,.current{background:url(a.gif) no-repeat}

.current{background-position:10px 10px}

好處就是瀏覽器只須要請求一次圖片就行，若是多個圖片，就要講求屢次。

缺點就是拼合的時候，比較麻煩，要有耐心，固然也是能夠利用某些工具來徹底。

10.你作的頁面在哪些瀏覽器下測試過？這些瀏覽器的內核分別是什麼？這些瀏覽器的兼容性有哪些。

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

11.談談你對SEO的理解。

搜索引擎優化（Search Engine Optimization，簡稱SEO）是一種利用搜索引擎的搜索規則來提升目的網站在有關搜索引擎內的排名的方式。因爲很多研究發現，搜索引擎的用戶每每只會留意搜索結果最前面的幾個條目，因此很多網站都但願經過各類形式來影響搜索引擎的排序。當中尤以各類依靠廣告維生的網站爲甚。所謂「針對搜索引擎做最佳化的處理」，是指爲了要讓網站更容易被搜索引擎接受。深入理解是：經過SEO這樣一套基於搜索引擎的營銷思路，爲網站提供生態式的自我營銷解決方案，讓網站在行業內佔據領先地位，從而得到品牌收益。

12.請簡單說一些你對HTML5和CSS3的瞭解狀況。

HTML 5的新特性：

1. 新的內容標籤

HTML4中的內容標籤級別相同，沒法區分各部份內容。而HTML5中的內容標籤互相獨立，級別不一樣，搜索引擎以及統計軟件等都可快速識別各部份內容。

2. 更好的表格體系

如今，你能夠拋棄JavaScript或者是PHP，只經過HTML5來定義表格。你能夠定義每一個表格單元的輸入格式，也能夠定義這個單元是不是必填的等等。

3. 音頻、視頻API

HTML5不但容許你在網頁中直接整合視頻、音頻，同時更提供了一套功能豐富的API用來控制媒體播放，而這些用來控制媒體播放的元素也都是能夠被編輯的。所以，HTML5在視頻以及音頻層面上實際已經能夠替代經常使用的flash插件了。

4. 畫布(Canvas) API

在網頁中繪製圖形一直是個大難題，咱們不得不借助flash、silverlight等插件。然而HTML5容許你直接在網頁上進行繪圖，甚至容許你與網頁生成更多的交互，例如繪製圖形、放大縮小，等等。圖例是一個用HTML5製做的小遊戲。

5. 地理(Geolocation) API

HTML5提供了地理信息的應用接口Geolocation API。經過這個API，網頁能夠經過IP，GPS等方式來得到用戶的地理信息;同時用戶也能夠選擇是否關閉這個功能。

6. 網頁存儲(Web storage) API

HTML5提供了網頁存儲的API，方便Web應用的離線使用。除此以外，新的API相對於cookie也有着高安全性，高效率，更大空間等優勢。

7. 拖拽釋放(Drag and drop) API

咱們能夠經過HTML5的Drag and drop API來完成網頁中的拖拽釋放效果，避免了以往的網頁在拖拽釋放過程當中須要不停修改元素的位置，代碼繁多的弊端。

CSS3 新特性:

1. RGBa

CSS3的RGBa新特性容許你對每一個元素進行色彩以及透明度的設置。而原來經常使用的opacity命令只能對元素及其子元素進行設置。

2. Multi-column layout

CSS3新提供的多欄佈局選擇器無需HTML佈局標籤便可生成多欄佈局，同時‘欄數’、‘欄寬’以及‘欄間距’都是能夠定義的。

3. Round corners

圓角功能多是CSS3提供的最實用的功能了。經過Border-radius，你能夠沒有任何難度的給指定的HTML元素添加圓角。而且你還能夠定義圓角的大小，以及哪一個角是圓角，哪一個角不是圓角。

4. @font-face

當網頁顯示某種用戶沒有安裝的字體時，CSS3提供的@font-face功能會自動的、默默地幫用戶從網絡上下載相應字體。從而讓設計師更加自由的發揮，而不用考慮用戶的機器是否安裝了相應字體。

　5. 其餘特性

　　此外，CSS3還給咱們帶來了漸變、防止字符串過長溢出、多重背景以及用圖片來做爲元素邊框等功能。

　　利用好CSS3，你能夠更快捷的獲得以往用不少插件才能獲得的效果。同過使用元素自己來取代大部分圖片，網頁的加載速度會獲得提高，這些本來是圖片的內容，也能夠被搜索引擎檢索到。

13.如何用JS獲取ID爲title的元素，並將其字體大小設爲16px。

方法有兩種：

一、經過jquery的方式，使用id選擇器方式獲取節點，而後獲取值

二、經過原生的dom方式，獲取id的值

示例：

第一種：
<body>
  <input type='text' id='ipt'/>
</body>
<script>
   var v = $('#ipt').val();//根據id獲取input的value值
</script>
第二種：
<body>
  <input type='text' id='ipt'/>
</body>
<script>
   var v=document.getElementById('ipt').value;//根據id獲取input的value值
</script>
<script language=javascript>
		window.onload=function(){
			var ps=document.getElementById('neirong').getElementsByTagName('span');
			for(var i=0;i<ps.length;i++){
				ps[i].style.fontSize="12px";
			}
		}
  </script>

14.jQuery獲取form表單中第二個input元素的方法。

if($("#student_table table tr td:nth-child(2)").find("input").val()=="")

{}

15.如何選中一個table中索引爲偶數的tr。

 td是列，tr是行：
<script type="text/javascript">
$(document).ready(function(){
$("table td").bind("click",function(){
var index = $(this).parent().index();
alert(index);//表示所在行的索引。若是要的是列的索引，把parent()去掉
});
});

$("#tab tr:odd") 偶數行 
</script>

16.看圖寫代碼題，須要寫CSS和JS。重要的就是一排圖片，鼠標放上去會根據鼠標位置顯示一個div，裏面是tips。

<script type="text/javascript">
    $(document).ready(function() {
          $('#show').hover(function(){
              $('#box').show();
          });
        });
</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程