HTML、CSS面試題

1、寫出你知道的一些常用的塊元素和行內元素

塊元素：div，p，h1~h6，ul，li，ol，dl，dt，dd

行內元素：span，em，a，b，img，input，strong

2、請寫出display屬性的值

3、可以讓元素隱藏且保留的屬性是什麼？

visitility：hidden；隱藏後仍佔位置

4、請寫出透明度相容低版本IE的寫法

opacity：0.8；filter：alpha(opacity=80);

5、請寫出3種定位方法，並說明一下對他們的理解

position：inherit  繼續父級的屬性

6、請寫出兩種或兩種以上清除浮動的方法

.clearfix{zoom:1}

7、請問css中最高優先順序寫法是什麼？

！important

8、a標籤如何開啟連結？

_partent 父視窗

9、a標籤如何去掉下劃線

text-decoration：none；

10、請寫出你所知道的css選擇器

：first-line

11、一個寬為100px的盒子如何實現上下水平都居中

12、請問標準盒子模型與怪異盒子模型的寬度是如何計算的？

怪異模式是部分瀏覽器在支援W3C的標準的同時還保留了原來的解析模式，主要表現在IE核心的瀏覽器。

13、文字與圖片垂直居中對齊的屬性與值是什麼？

 vertical-align：middle；

js/jq面試題

1、請寫出用id獲取元素的方法

getElementById

2、請寫出獲取元素屬性值的方法

getAttribute獲取屬性值的方法

3、請說明$.ajax中url、data、type、dataType、async、cache、success、error分別代表什麼？

error：請求失敗後的回撥函式

5、請問i會輸出什麼？

<script type="text/javascript">
for (var i = 0; i<6; i++) {
    setTimeout(function(){
        console.log(i);
    },1000)
}
</script>

答案是：6；//輸出的是i的長度

6、寫一個簡單的選項卡效果

<div class="anli-con" id="anlicon">
	<div class="anli" id="anli">
		<a href="#" class="active">選項一</a>
		<a href="#">選項二</a>
		<a href="#">選項三</a>
	</div>
	<p style="display:block;">你是傻逼一你是傻逼一你是傻逼一你是傻逼一你是傻逼一你是傻逼一你是傻逼一</p>
	<p>你是傻逼二你是傻逼二你是傻逼二你是傻逼二你是傻逼二你是傻逼二你是傻逼二你是傻逼二你是傻逼二</p>
	<p>你是傻逼三你是傻逼三你是傻逼三你是傻逼三你是傻逼三你是傻逼三你是傻逼三你是傻逼三你是傻逼三</p>
</div>

$(function(){
    $(".anli a").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
        $(this).parent("div").siblings("p").hide();
        $(this).parent("div").siblings("p").eq($(this).index()).show();
    })
})

var oDiv=document.getElementById('anlicon');
var oAnli=document.getElementById("anli");
var aA=oAnli.getElementsByTagName("a");
var aP=oDiv.getElementsByTagName("p");
for(var i=0;i<aA.length;i++){
 aA[i].index=i;
 aA.onclick=function(){
  for(var i=0;i<aA.length;i++){
    aA[i].className="active";
    aP[i].style.display="none";
  }
  this.ClassName="active";
  aP[this.index].style.display="block";
 }
}

8、請說一下你對ajax同步和非同步的理解

當用戶填寫完一條資訊後，該資訊會自動向伺服器提交，然後伺服器響應客戶端，在此過程中，使用者依然在填寫表格的資訊，即向伺服器請求多次，節省了使用者的時間，提高了使用者的體驗。

9、一個按鈕點選一次字型變紅色，在點選字型變藍色，點選來回切換，如何實現？

<input type="button" value="點我點我" id="btn">
<div>字型變色</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#btn").toggle(function(){
			$(this).next().css("color","red");
		},function(){
			$(this).next().css("color","blue");
		})
	})
</script>

10、jqueryDOM操作

wrap();unwrap();wrapAll();wrapInner()

11、做個分頁的效果，你需要後臺介面給你提供哪些必要資料，實現效果的思路是什麼？

12、說一下你對&&與｜｜的理解

｜｜邏輯或運算子  當運算子有一邊為true時，整個結果都返回為true。

13、這裡有兩個表單元素，需要你手動post提交

$.post("http://10.10.10.10:8080/login.active",????,function(){},'json')

問號位置需要提交的資料引數該如何寫（寫出兩種或兩種以上的方法）

<form id="form1">
<input type="text" name="username" id="username">
<input type="password" name="password" id="pwd">
</form>