本人一直在從事.net的開發，介面都是採用的WPF，近期花了一個多月進行HTML前端的學習，在這裡呢進行學習總結和歸納。
　　本系列將主要分為4個模組：

　　　　控制元件

　　　　樣式

　　　　佈局

　　　　JavaScript

　　根據多年WPF的開發經驗，介面就是控制元件及樣式與佈局的組合，再加上程式碼來控制互動邏輯，本期先對HTML常用的控制元件進行歸納。

　　div : 區塊

1   <div class="***"> 
2   </div>

　　div的概念與WPF中的Border類似，一般作為一個區域性控制元件的容器，可通過css來設定它的各個屬性，比如寬、高、背景色

1 div {
2     height: 160px;  
3     width:200px;
4     background-color: #fff;
5 }

　　通過上面的css即可得到如下結果

　　我們也可以將div的背景色改為圖片，只需在css中加如下一句即可

　　　　　　background-image:url(圖片路徑);
　　　　　　background-repeat:no-repeat; 注：如果不加這句圖片會通過重複來進行填充

　　因為div經常被當作區域性控制元件的容器，所以我們可以在它的內部新增其他控制元件，

1 <div>
2       <p>叫爸爸</p>
3 </div>

　　input : 使用者輸入區

　　該控制元件可以通過設定type屬性來實現多種使用者互動，主要的用法如下：　　　　　　

　　　　　　<input type="***" value="***" name="***"/>

　　常用的幾種type效果如下所示：

　　有關input的更多資訊，建議參考另外一篇部落格，他會給你更全面的講解：HTML input

　　select : 選擇框

 　　select通常需要與選項option一起出現，例如

1 <select>
2   <option value ="volvo">Volvo</option>
3   <option value ="saab">Saab</option>
4   <option value="opel">Opel</option>
5   <option value="audi">Audi</option>
6 </select>

　　生成的效果圖如下：

　　通過在select外巢狀一個div，再新增一個css樣式，即可得到一個相對美觀的選擇框。

 1 div{
 2   background: url('https://raw.githubusercontent.com/ourjs/static/gh-pages/2015/arrow.png') right center no-repeat;
 3   /* the width and the height of your image */
 4   width: 100px;
 5   height: 30px;
 6   overflow: hidden;
 7   border: solid 1px #ccc;
 8 }
 9 
10  select {
11     -webkit-appearance: none;
12     -moz-appearance: none;
13     appearance: none;
14     background: transparent;
15     border: none;
16     padding-left: 10px;
17     width: 120px;
18     height: 100%;
19   }

 　　img ：圖片

　　　　　　<img src="url" alt="some_text">

　　例如：

　　　　<img src="https://gss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3611826739,2799706291&fm=173&app=49&f=JPEG?w=218&h=146&s=50F111C4BEE9241596FD489703004087" alt="美國國務卿" />

 　　ul : 列表

　　ul通常會與li列表項一起出現，例如：

1 <ul>
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ul>

　　如果給它加上一點樣式，就能得到一個不一樣的列表

 1 ul
 2 {
 3     list-style-type:none;
 4     padding:0px;
 5     margin:0px;
 6 }
 7 ul li
 8 {
 9     background-image:url(sqpurple.gif);
10     background-repeat:no-repeat;
11     background-position:0px 5px; 
12     padding-left:14px;
13 }

　　table : 表格

　　table通常需要與表格行tr/表格頭內容th/表格行內容td一起使用，例如如下示例

 1 <table border="1">
 2   <tr>
 3     <th>Month</th>
 4     <th>Savings</th>
 5   </tr>
 6   <tr>
 7     <td>January</td>
 8     <td>$100</td>
 9   </tr>
10 </table>

 　　HTML常用的幾種控制元件這裡就介紹完畢了，近期將進行樣式方面的歸納，敬請期待。

&n