一、HTML + CSS部分
1. 請說明 HTML 文檔中 DTD 的意義和作用（酷訊）
DTD，文檔類型定義，是一種保證 html 文檔格式正確的有效方法，在解析網頁時，瀏覽器將使用 DTD 來檢查頁面的有效性（是否符合規范，元素和標簽使用是否正確）並且采取相應的措施。同時它還會影響瀏覽器的渲染模式（工作模式）。
2. 准確的指出以下代碼的顯示結果（酷訊）
<style>
a{
position:relative;
height:200px;
width:500px;
border:solid 1px #000;
background:#FFF;
}
#b,#c{position:absolute; width:250px; height:90px;}
#b{top:30px; left:50px; background:#FF0000; z-index:1;}
#c{bottom:30px; right:50px; background:#0000FF;}
</style>
<div class="a">
<div id="b"></div>
<div id="c"></div>
</div>
顯示效果
3. 指出以下代碼的顯示結果（酷訊）
<table border=1 width=500 style="text-align:center;">
<tr>
<td rowspan=2 width=50% height=50>a</td>
<td width=50% eight=25>d</td>
</tr>
<tr><td width=50% height=25>b</td></tr>
<tr height=25><td colspan=2>c</td></tr>
</table>
顯示效果
4. 如何產生帶有數字列表符號的列表？（ ）
A. <ul>
B. <dl>
C. <ol>
D. <list>
答案：C
5. 如何顯示沒有下划線的超鏈接？（）
A. a {text-decoration:none}
B. a {text-decoration:no underline}
C. a {underline:none}
D. a {decoration:no underline}
答案：A
6. 以下一段 XHTML 代碼片段，它不符合 W3C 規范，請問出現了幾處錯誤？
<div id="newsmore">
<ul>
<li><img src="0967_ohmyrabbit.jpg"></li>
<li>印度總理辛格訪華專題</li>
<li>
<ul id="newsmore">
<li>專訪辛格：早日解決邊界問題是戰略目標</li>
<li>辛格稱北京奧運將為印度舉辦賽事提供靈感</li>
<li>印度總理辛格訪華參觀北京奧運場館建設</li>
</ul>
</li>
</ul>
</div>
有兩處，div 和 ul 有一個相同的 id 屬性 newsmore，img 標簽沒有關閉。
7. 請描述出兩點以上 XHTML 和 HTML 最顯著的區別
(1).XHTML 必須強制指定文檔類型 DocType，HTML 不需要
(2).XHTML 所有標簽必須閉合，HTML 比較隨意
(3).XHTML 嚴格區分大小寫，所有標簽的元素和屬性的名字都必須使用小寫
(4).XHTML 要求所有的標記都必須要有一個相應的結束標記
(5).XHTML 規定所有屬性都必須有一個值，沒有值的就重復本身
8. 請問，div 和 span,p 標簽三者間的區別(YG)
從語義化的角度來講:div和span標簽對於它們包含的元素是沒有意義的,所以div 和 span 一般是用來布局。;而p標簽則是一個語義化標簽，表示一個段落。
從顯示的角度來講：span 是內聯的，用在一小塊的內聯 HTML 中，前后不斷行；div 元
素是塊級的，等同於其前后有斷行；p 元素是塊級的，前后斷行，而且還要再隔一行，相當
於斷兩行。
9. CSS 中 class 和 id 的區別(YG)
id：每個頁 ID 是唯一的不能重復。
class：可以設置多個 class 為同一個值。
10. 請列舉幾個 meta 元素(YG)
<meta name="keywords" content=""> //向搜索引擎說明你的網頁的關鍵詞
<meta name="description" content=""> //告訴搜索引擎你的站點的主要內容
<meta name="author" content="你的姓名"> //告訴搜索引擎你的站點的制作的作者
<meta http-equiv="Content-Type" content="text/html";charset=utf-8"> //指定字符集
<meta http-equiv="refresh" content="n;url="> //定時讓網頁在指定的時間 n 內跳轉
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> //可以用於設定網頁的到期時間，一旦過期則必須到服務器上重新調用。需要注意的是必須使用 GMT 時間格式
<meta http-equiv="pragma" content="no-cache"> //禁用緩存
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT"> //cookie 設定，如果網頁過期，存盤的 cookie 將被刪除。需要注意的也是必須使用 GMT 時間格式
11. 怪異模式和 XHTML 模式下 IE 的寬的區別(YG)
所謂的標准模式是指，瀏覽器按 W3C 標准解析執行代碼；怪異模式則是使用瀏覽器自己的方式解析執行代碼，因為不同瀏覽器解析執行的方式不一樣，所以我們稱之為怪異模式。
瀏覽器解析時到底使用標准模式還是怪異模式，與你網頁中的 DTD 聲明直接相關，DTD聲明定義了標准文檔的類型（標准模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略 DTD 聲明,將使網頁進入怪異模式(quirks mode)。
在 XHTML 模式下，聲明一個元素的寬度，僅僅指的是在 css 中設置的 width，而在怪異模式下，元素的寬度包括 width 和 padding。
12. 實現框架的標簽，使用舉例(YG)
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
13. 請寫出以下 html 標簽的含義：input form script style table b img （小米）
<input /> 標簽用於搜集用戶信息。根據不同的 type 屬性值，輸入字段擁有很多種形式。
輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。
<form> 標簽用於為用戶輸入創建 HTML 表單。表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。
<script> 標簽用於定義客戶端腳本，比如 JavaScript。script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件。
<style> 標簽用於為 HTML 文檔定義樣式信息。
<table> 標簽定義 HTML 表格。簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
<b>呈現粗體文本效果。
<img /> 元素向網頁中嵌入一幅圖像。
14. 用 css、html 編寫一個兩列布局的網頁，右側固定寬度 200px，左側自適應 （小米）
方案 1：
HTML 結構：
<div id="wrap">
<div id="content">自適應區</div>
<div id="sidebar" style="width:200px;">固定寬度區</div>
</div>
<div id="footer">后面的一個DIV，以確保前面的定位不會導致后面的變形</div>
CSS 樣式：
<style type="text/css">
#content,#sidebar,#footer{border: 1px solid #ccc;height: 100px;}
#wrap{display: table;width:100%;}
#content{display: table-cell;}
#sidebar{display: table-cell;}
</style>
方案 2：
HTML 結構：
<div id="wrap">
<div id="content" style="height:140px;">
<div id="contentb">自適應區</div>
</div>
<div id="sidebar" style="height:240px;">固定寬度區</div>
</div>
<div id="footer">后面的一個DIV，以確保前面的定位不會導致后面的變形</div>
CSS 樣式：
<style type="text/css">
#wrap{*zoom:1;position: relative;}
#sidebar{width: 200px;float: right;border: 1px solid #ccc;}
#content{margin-left: -210px;float: left;width: 100%;}
#contentb{margin-left: 210px;border: 1px solid #ccc;}
#footer{border: 1px solid #ccc;margin-top: 10px;clear: both;}
</style>
這種方案，兼容性好，但是會產生額外的標簽。