HTML前端入门归纳——控件

古城微笑少年丶 2021-09-19 11:28 307阅读 0赞

本人一直在从事.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即可得到如下结果

![621961-20190518103737403-62700482.png][]

我们也可以将div的背景色改为图片，只需在css中加如下一句即可

background-image:url(图片路径);  
　　　　　　background-repeat:no-repeat; 注：如果不加这句图片会通过重复来进行填充

![621961-20190518104235112-1781770089.png][]

因为div经常被当作局部控件的容器，所以我们可以在它的内部添加其他控件，

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

![621961-20190518104405183-1980518147.png][]

**input : 用户输入区**

该控件可以通过设置type属性来实现多种用户交互，主要的用法如下：

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

常用的几种type效果如下所示：

![621961-20190518104737893-1184040656.png][]

有关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>

生成的效果图如下：

![621961-20190518105405794-1191030121.png][]

通过在select外嵌套一个div，再添加一个css样式，即可得到一个相对美观的选择框。

![复制代码][copycode.gif]

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   }

![复制代码][copycode.gif]

![621961-20190518105624812-1242417882.png][]

** 　　img ：图片**

例如：

![621961-20190518105747821-673941396.png][]

ul : 列表

ul通常会与li列表项一起出现，例如：

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

![621961-20190518110004340-1707345181.png][]

如果给它加上一点样式，就能得到一个不一样的列表

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

![621961-20190518110114112-1079404006.png][]

table : 表格

table通常需要与表格行tr/表格头内容th/表格行内容td一起使用，例如如下示例

![复制代码][copycode.gif]

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>

![复制代码][copycode.gif]

![621961-20190518110408493-1800842986.png][]

如果你对编程感兴趣或者想往编程方向发展，可以关注微信公众号**【筑梦编程】**，大家一起交流讨论！小编也会每天定时更新既有趣又有用的编程知识！

HTML常用的几种控件这里就介绍完毕了，近期将进行样式方面的归纳，敬请期待。

[621961-20190518103737403-62700482.png]: /images/20210812/90693f9b986b469c86fc7afc6f2365d5.png
[621961-20190518104235112-1781770089.png]: /images/20210812/ea9816b53db34b55be05799d74f26af8.png
[621961-20190518104405183-1980518147.png]: /images/20210812/69025c4a82b04799991da5da837e5408.png
[621961-20190518104737893-1184040656.png]: /images/20210812/c058c095170240f5ac75dc4b50d77d76.png
[HTML input]: http://www.w3school.com.cn/tags/tag_input.asp
[621961-20190518105405794-1191030121.png]: /images/20210812/4d876885830b466ba5ff72a1634479fa.png
[copycode.gif]: /images/20210812/37c12d3920b34e53aa8afc6426026830.png
[621961-20190518105624812-1242417882.png]: /images/20210812/2b0875c03a9a48878633d63cb849c26e.png
[621961-20190518105747821-673941396.png]: /images/20210812/6ec99ba48e5240e1b05235104d653f10.png
[621961-20190518110004340-1707345181.png]: /images/20210812/0b42932574c74c2a90c2be01932b1d1e.png
[621961-20190518110114112-1079404006.png]: /images/20210812/21f96cdbfa41459aa96d0cf6df388319.png
[621961-20190518110408493-1800842986.png]: /images/20210812/7641efe6634a4080a6d92b61b29bb6ef.png