1、請列舉7種以上常用的HTML標籤，說明其語義。
1)div標籤，是一個塊元素，就像一個大盒子，可以放各式各樣的東西；
2)p標籤，也是一個塊元素，它通常用來放一段話的….；
3)h1,h2,h3,…h6標籤，也是塊元素，常用來放標題；
4)span標籤，是一個行內元素，常用來處理一段話中的某幾個字元；
5)img標籤，用來載入圖片的標籤；
6)table標籤，用來建立表格的標籤；
7)br標籤，用來換行的標籤；
8)hr標籤，用來表示分行線的標籤；
9)a 一個點選跳轉的標籤；
10)ul 一個用來做列表的標籤。
2、請說明下面各種情況的執行結果，並註明產生對應結果的理由。
function doSomething() {
alert(this);
}
① element.onclick = doSomething，點選element元素後。
② element.onclick = function() {doSomething()}， 點選element元素後。
③ 直接執行doSomething()。**

1)彈出element object,通過函式賦值方式，this直接指向element物件；
2)彈出window object,this是寫在doSomething這個函式裡面的，而這種方式的事件繫結寫法並沒有將element物件傳遞給this，而在預設情況下this 指向window；
3)彈出window object，沒有繫結物件的情況下this預設指向window。

3、請用JavaScript語言實現 sort 排序函式，要求：sort([5, 100, 6, 3, -12]) // 返回 [-12, 3, 5, 6, 100]。
如果你有多種解法，請闡述各種解法的思路及優缺點。（僅需用程式碼實現一種解法，其它解法用文字闡述思路即可）

var arr=[5,100,6,3,-12];
var result=arr.sort(function(a,b) {
    return a-b;
});
console.log(result);

4、請根據下面的HTML和CSS程式碼，畫出佈局示意圖

<div id="page">
    <div class="main">
        <div class="sub"></div>
    </div>
    <div class="nav"></div>
</div>
<style
 
 type="text/css">
    #page { width: 520px; }
    .nav  { width: 200px; float: right; }
    .main { width: 200px; float: left; padding-left: 110px; }    
    .sub  { width: 100px; float: left; margin: 10px 0 10px -100px; }    
    .main { border: 1px solid #000; }
    .nav, .sub { border: 1px dashed #000; height: 300px; }    
    .sub { height: 280px; }
</style>

5、閱讀以下JavaScript程式碼：

if (window.addEventListener) {
       var addListener = function(el, type, listener, useCapture) {
           el.addEventListener(type, listener, useCapture);
       };
   } else if (document.all) {
       addListener = function(el, type, listener) {
           el.attachEvent("on" + type, function() {
               listener.apply(el);
           });
       };
   }

請闡述 a) 程式碼的功能; b) 程式碼的優點和缺點; c) listener.apply(el) 在此處的作用; d) 如果有可改進之處，請給出改進後的程式碼，並說明理由。
a) 功能：事件註冊
b) 優點：跨瀏覽器，特性探測，效能優化。缺點：document.all
c) 作用：使得IE中listener的this 為 el，與其它瀏覽器一致
d) 改進：document.all改成window.attachEvent; useCapture的預設
6、請編寫一個JavaScript 函式toRGB，它的作用是轉換CSS中常用的顏色編碼。 要求：

alert(toRGB("#0000FF"));          // 輸出 rgb(0, 0, 255)
alert(toRGB("invalid"));          // 輸出 invalid
alert(toRGB("#G00"));              // 輸出 #G00

function toRGB(color) {
    var str="";
    var result=[];
    var reg=/^#[0-9a-zA-Z]{3}$/;
    if(color=="invalid") {return "invalid";}
    if(reg.test(color)) {return color;}
    else {
        for(vari=1;i<=6;i=i+2){
            str=color.sub(i,2);
            var ss=str.parseInt(str,16);
            result.push(ss);
        }
    }
    return result;
}
console.log(toRGB("#0000ff")); // 輸出 rgb(0, 0, 255)
console.log(toRGB("invalid"));// 輸出 invalid
console.log(toRGB("#G00")); // 輸出 #G00

7、嘗試實現註釋部分的Javascript程式碼，可在其他任何地方新增更多程式碼（如不能實現，說明一下不能實現的原因）：

var Obj = function(msg){
    this.msg = msg;
    this.shout = function(){
        alert(this.msg);
    }  
    this.waitAndShout = function(){
        //隔五秒鐘後執行上面的shout方法
        setTimeout(function () {
            var self=this;
            return function() {
                self.shout();
            }
        }.call(this),5000);
    }
}

8、請編寫一個JavaScript函式，它的作用是校驗輸入的字串是否是一個有效的電子郵件地址。要求： a) 使用正則表示式。 b) 如果有效返回true ，反之為false。

function mail(email) {
    var reg=/^\w+([\.-_]?\w+)*@\w+([\.-_]?\w+)*(\.\w{2,3})+$/;
    var tag=reg.test(email);
    if(tag) {
        return true;
    }else {
        return false;
    }
}
mail("[email protected]");

9、請分別列出HTML、JavaScript、CSS、Java、PHP、Python的註釋程式碼形式。

  <!--html註釋--
//javascript註釋
/*
*javascript多行註釋
*/

/*css註釋*/

//java註釋

/*
*java多行註釋      
*/

//php單行註釋            #php單行註釋
/*
*php多行註釋
*/

 #Python單行註釋     

 '''
 Python多行註釋
 '''

10、根據下圖，編寫HTML結構。要求：遵循xHTML 1.0規範且符合Web語義。

<div id="nav">
        <div class="img"><a href="#"><img src="image/imgs.jpg" alt="聯想IdeaPad"></a></div>
        <div class="discript"><span>聯想IdeaPad U130 紅色至尊 高性價比</span></div>
        <div class="money"><em>￥ 8888.00</em></div>
    </div>

11、請編寫一段JavaScript指令碼生成下面這段DOM結構。要求：使用標準的DOM方法或屬性。

<div id=”example”>  
    <p class=”slogan”>京東商城</p>
</div>

indow.onload=init;
    function init() {
        var div=document.createElement("div");
        div.id="example";
        var p=document.createElement("p");
        p.className="slogan";
        p.innerHTML="京東商城";
        div.appendChild(p);
        document.body.appendChild(div);
    }

12、請用CSS定義p標籤，要求實現以下效果: 字型顏色在IE6下為黑色(#000000)；IE7下為紅色(#ff0000)；而其他瀏覽器下為綠色(#00ff00)。

    p{color:#0f0;*color:#f00;_color:#000;}
    ie6 *html p{color:#000;}
    ie7 *+html p{color:#f00;}

13、請簡化以下的CSS程式碼，並給出簡單的說明。

div.container {
    width: 500px;
    background-image: url(/img/sprite.png);
        background-repeat: no-repeat;
        background-position: 0px -78px;
}
div.container ul#news-list, div.container ul#news-list li {
    margin: 0px;
    padding: 0px;
}
div.container ul#news-list li {
    padding-left: 20px;
    background-image: url(/img/sprite.png);
        background-repeat: no-repeat;
        background-position: -120px 0px;
}
a {
    font-size: 14px;
        font-weight：bold；
    line-height: 150%;
    color: #000000;
}

簡化

div.container {
    width: 500px;
    background: url(/img/sprite.png) no-repeat 0px -78px;
}
#news-list,#news-list li {
    margin: 0px;
    padding: 0px;
}
#news-list li {
    padding-left: 20px;
    background-image: url(/img/sprite.png) no-repeat -120px 0px;
}
a {
    font-size: 14px;
    font-weight：bold；
    line-height: 150%;
    color: #000;
}

14、請編寫一個通用的事件註冊函式（請看下面的程式碼）。

function addEvent(element, type, handler)
{
    // 在此輸入你的程式碼，實現預定功能
}

function addEvent(element,type,handler) {
    // 在此輸入你的程式碼，實現預定功能
    if(element.addEventListener) {//存在的是DOM2級方法
        element.addEventListener(type,handler,false);
    }else if(element.attachEvent) {//存在的是IE的方法
        element.attachEvent("on"+type,handler);
    }else {//存在的是DOM0級方法
        element["on"+type]=handler;
    }
}

15、請給JavaScript的String 原生物件新增一個名為trim 的原型方法，用於擷取空白字元。要求

alert(" taobao".trim());     // 輸出 "taobao"
alert(" taobao ".trim());    // 輸出 "taobao"

String.prototype.trim = function() {          
    return this.replace(/^\s+$/g, "");     
};
console.log(" taobao".trim()); // 輸出 "taobao"
console.log(" taobao ".trim()); // 輸出 "taobao"

16、請編寫一個JavaScript函式 parseQueryString，它的用途是把URL引數解析為一個物件，如：

var url = “http://www.taobao.com/index.php?key0=0&key1=1&key2=2.....”
var obj = parseQueryString(url);
alert(obj.key0)  // 輸出0

function parseQueryString(url) {
    var result=[];
    var arr=url.split("?")[1].split("&");
    var len=arr.length;
    for(var i=0;i<len;i++) {
        var arr1=arr[i].split("=");
        result[arr1[0]]=arr1[1];
    }
    return result;
}
var url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2&key3=3&key4=5";
var obj = parseQueryString(url);
console.log(obj.key0);//輸出0

17、根據下圖，編寫HTML結構。要求：符合xHTML 1.0規範

<table border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr><th>國家</th><th>網站名</th><th>URL</th><th>Alexa排名</th></tr>
        </thead>
        <tbody>
            <tr><td>中國</td><td>淘寶名</td><td>www.taobao.com</td><td>38</td></tr>
            <tr ><td rowspan="2">美國</td><td>Ebay</td><td>www.ebay.com</td><td>22</td></tr>
            <tr ><td>Amazon</td><td>www.amazon.com</td><td>27</td></tr>
        </tbody>    
        <tfoot>
            <tr align="right"><td colspan="4">Alexa.com</td></tr>
        </tfoot>    
    </table>

18、請指出下面程式碼中不符合xHTML 1.0規範的地方，說明理由，並寫出改善後的程式碼：

<h1><p>小明的表白</p></h1>
<dl>
        <dt><p><div>小明說：</div></p></dt>
        <dd>”淘寶網，<i>天天上</i>。”</dd>
        <dd><b>”淘我喜歡！” </b></dd>
</dl>

改為：

<h1><span>小明的表白</span></h1>
<dl>
<dt><span>小明說：</span></dt>
<dd>”淘寶網，<em>天天上</em>。”</dd>
<dd><strong>”淘我喜歡！”</strong></dd>
</dl>

說明：
1)h1元素包含p元素，理由：h1元素不能包含其他塊級元素；
2)dt元素包含p元素和div元素，理由：dt元素內不能包含其他塊級元素；
3)p元素包含div元素，理由：p元素內不能包含其他塊級元素；
4)i元素，理由：i表樣式斜體，不符合語義化；
5)b元素，理由：b表樣式粗體，不符合語義化。

var htmlString =
    "<div class=”container”>" + "<ul id=”news-list”>";
for (var i = 0; i < NEWS.length; i++) {
    htmlString += "<li><a href=”"
        + NEWS[i].LINK + ">"
        + NEWS[i].TITLE + "</a></li>";
}
htmlString += "</ul></div>";

改為：

var htmlString=[];
htmlString.push("<div class=”container”>" + "<ul id=”news-list”>");
var len=NEWS.length;
for(var i=0;i<len;i++) {
    var new=NEWS[i];
    htmlString.push("<li><a href=" + new.LINK + ">"+ new.TITLE + "</a></li>");
}
htmlString=htmlString.join("");

21、請給Array本地物件增加一個原型方法，它用於刪除陣列條目中重複的條目(可能有多個)，返回值是一個包含被刪除的重複條目的新陣列。

Array.prototype.method=function() {
    var result=[];
    len=this.length;
    for(var i=0;i<len;i++) {
        for(var j=i+1;j<len;) {
            if(this[i]===this[j]) {
                result.push(this.splice(j,1)[0]);
            }else {
                j++;
            }
        }
    }
    return result;
}
console.log(['a','b','c','e','c','a'].method());

22、請根據下面的描述，用JSON語法編寫一個物件: “小明今年22歲，來自杭州。興趣是看電影和旅遊。他有兩個姐姐，一個叫小芬，今年25歲，職業是護士。還有一個叫小芳，今年23歲，是一名小學老師。”

var person={"name":"小明",
            "age":"22",
            "from":"杭州",
            "interest":"["電影","旅遊"]",
            "sister":[
                {"name":"小芬","age":"25","job":"護士"},
                {"name":"小芳","age":"23","job":"小學教師"}
            ]
        };

22、請改善以下HTML程式碼，使其符合xHTML 1.0規範

<A id='go-home' href='http://www.taobao.com'   
    onClick='doSomething();'>  
    <IMG src="http://www.taobao.com/logo.png">  
</A>

改為：

<a id='go-home' href='http://www.taobao.com'   
    onclick='doSomething();'>  
    <img src='http://www.taobao.com/logo.png'/>  
</a>

說明：
1)標籤小寫（包括onclick）；
2)屬性名要是用引號（單雙引號不限）;
3)必須閉合標籤。
23、根據下圖，編寫HTML結構。要求：遵循xHTML 1.0規範且符合Web語義。

<form >
        <dl>
            <dt>您的基本資訊</dt>
            <dd>姓名：<input type="text"></dd>
            <dd>性別：<select name="sex">
                        <option value="1" selected="selected" >男性</option>
                        <option value="2">女性</option>
                </select></dd>
            <dt>設定密碼</dt>
            <dd>密碼：<input type="password"></dd>
            <dd>再輸一遍：<input type="password"></dd>
        </dl>
        <input type="button" value="確定">
        <input type="button" value="取消">
    </form>