HTML前端入门归纳——控件

　　本人一直在从事.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常用的几种控件这里就介绍完毕了，近期将进行样式方面的归纳，敬请期待。