php面試題之一——HTML+CSS（基礎部分）

一、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>

這種方案，兼容性好，但是會產生額外的標籤。