本人一直在从事.net的开发,界面都是采用的WPF,近期花了一个多月进行HTML前端的学习,在这里呢进行学习总结和归纳。
  本系列将主要分为4个模块:

    控件

    样式

    布局

    JavaScript

  根据多年WPF的开发经验,界面就是控件及样式与布局的组合,再加上代码来控制交互逻辑,本期先对HTML常用的控件进行归纳。

  div : 区块

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

  div的概念与WPF中的Border类似,一般作为一个局部控件的容器,可通过css来设置它的各个属性,比如宽、高、背景色

 div {
height: 160px;
width:200px;
background-color: #fff;
}

  通过上面的css即可得到如下结果

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

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

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

 <div>
<p>叫爸爸</p>
</div>

  

  input : 用户输入区

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

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

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

  有关input的更多信息,建议参考另外一篇博客,他会给你更全面的讲解:HTML input

  

  select : 选择框

  select通常需要与选项option一起出现,例如

 <select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

  生成的效果图如下:

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

 div{
background: url('https://raw.githubusercontent.com/ourjs/static/gh-pages/2015/arrow.png') right center no-repeat;
/* the width and the height of your image */
width: 100px;
height: 30px;
overflow: hidden;
border: solid 1px #ccc;
} select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
padding-left: 10px;
width: 120px;
height: 100%;
}

   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列表项一起出现,例如:

 <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

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

 ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url(sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}

  

  table : 表格

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

 <table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

  

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

HTML前端入门归纳——控件的更多相关文章

  1. DevExpress XtraReports 入门六 控件以程序方式创建一个 交叉表 报表

    原文:DevExpress XtraReports 入门六 控件以程序方式创建一个 交叉表 报表 本文只是为了帮助初次接触或是需要DevExpress XtraReports报表的人群使用的,为了帮助 ...

  2. Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView、TTreeViewItem

    Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView.TTreeViewItem TScrollBox -> TCustomTreeView -> ...

  3. Delphi XE2 之 FireMonkey 入门(43) - 控件基础: TStringGrid、TGrid

    Delphi XE2 之 FireMonkey 入门(43) - 控件基础: TStringGrid.TGrid TStringGrid.TGrid 都是从 TCustomGrid 继承; 区别有:1 ...

  4. Delphi XE2 之 FireMonkey 入门(42) - 控件基础: TComboBox、TComboEdit

    Delphi XE2 之 FireMonkey 入门(42) - 控件基础: TComboBox.TComboEdit TListBox 有两个兄弟 TComboListBox.TComboEditL ...

  5. Delphi XE2 之 FireMonkey 入门(41) - 控件基础: TListBox

    Delphi XE2 之 FireMonkey 入门(41) - 控件基础: TListBox TScrollBox -> TCustomListBox -> TListBox; 其元素项 ...

  6. Delphi XE2 之 FireMonkey 入门(40) - 控件基础: TMemo

    Delphi XE2 之 FireMonkey 入门(40) - 控件基础: TMemo 值得注意的变化: 1.其父类 TScrollBox 的许多特性也很有用处, 如:   Memo1.UseSma ...

  7. Delphi XE2 之 FireMonkey 入门(39) - 控件基础: TScrollBox、TVertScrollBox、TFramedScrollBox、TFramedVertScrollBox

    Delphi XE2 之 FireMonkey 入门(39) - 控件基础: TScrollBox.TVertScrollBox.TFramedScrollBox.TFramedVertScrollB ...

  8. Delphi XE2 之 FireMonkey 入门(38) - 控件基础: TPopupMenu、TMenuItem、TMenuBar、TMainMenu

    Delphi XE2 之 FireMonkey 入门(38) - 控件基础: TPopupMenu.TMenuItem.TMenuBar.TMainMenu 相关控件: TMenuBar.TPopup ...

  9. Delphi XE2 之 FireMonkey 入门(37) - 控件基础: TControl 概览

    Delphi XE2 之 FireMonkey 入门(37) - 控件基础: TControl 概览 { TControl } public   constructor Create(...); ov ...

随机推荐

  1. SVN设置删除权限

    svn是很多企业和个人用的版本控制软件,非常方便.通用的权限控制在auth文件中,但是缺点是权限较大,w的权限一旦赋予,相应用户都可以有删除svn文件的权限,但是如果不赋予w权限,又没办法commit ...

  2. python基础教程_学习笔记11:魔法方法、属性和迭代器

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/signjing/article/details/31417309 魔法方法.属性和迭代器 在pyth ...

  3. ABAP HTTP POST

    1.HTTP DATA: lo_http_client TYPE REF TO if_http_client, lv_service TYPE string, lv_result TYPE strin ...

  4. Linux下监视GPU、CPU的使用情况

    1.在运行Tensorflow等程序时会使用到NVIDIA的GPU,所以在程序运行时需要监控GPU的运行情况 使用 nvidia-smi 命令 ,显示如下: nvidia-smi 显示解读: GPU: ...

  5. chunkhash笔记

    假设有main1.main2两个入口文件,main引入chunk1.chunk2,main2引入chunk1 改变chunk2 main1的chunkhash改变,main2不发生改变 main再引入 ...

  6. 系统常用VC++运行时下载地址

    Microsoft Visual C++ 2005 Microsoft Visual C++ 2005 Redistributable Package (x86)  https://www.micro ...

  7. BZOJ 3410 [Usaco2009 Dec]Selfish Grazing 自私的食草者:贪心【最多线段覆盖】

    题目链接:http://begin.lydsy.com/JudgeOnline/problem.php?id=1324 题意: 给你n个区间,问你最多能选择多少个区间使得它们不相互覆盖. 题解: RQ ...

  8. Jmeter-线程日志查看

    jstack可以定位到线程堆栈,根据堆栈信息我们可以定位到具体代码,所以它在JVM性能调优中使用得非常多. 1.  压测时,使用top命令查看哪个java进行占用了较多的CPU资源: 上图中可以看出p ...

  9. c ++ auto 的使用

    该文转自:https://www.cnblogs.com/KunLunSu/p/7861330.html C++98 auto 早在C++98标准中就存在了auto关键字,那时的auto用于声明变量为 ...

  10. MongoDB 分片的原理、搭建、应用 !

    MongoDB 分片的原理.搭建.应用   一.概念: 分片(sharding)是指将数据库拆分,将其分散在不同的机器上的过程.将数据分散到不同的机器上,不需要功能强大的服务器就可以存储更多的数据和处 ...