本人一直在从事.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. /etc/init.d/iptables stop

    /etc/init.d/iptables stop     systemctl stop firewalld.service   [root@bigdata-server-01 myrestserve ...

  2. SAP 第四代增强-BTE

    第四代BTE实例详解:http://blog.csdn.net/wbin9752/article/details/7954922 第三代增强(BADI实例详解) :http://blog.csdn.n ...

  3. Redis——慢查询分析

    核心知识点: 1.什么是慢查询? 2.客户端执行一条命令的步骤? 3.阈值和慢查询日志的设置? 4.慢查询日志的操作命令:slowlog get.slowlog len.slowlog reset. ...

  4. win下发现两个有用的快捷键

    调出命令行工具:win+x然后a.默认是cmd的管理员模式,可以改成powershell. 从当前目录打开命令行:shift + 鼠标右键

  5. 深入理解JVM - Java内存模型与线程 - 第十二章

    Java内存模型 主内存与工作内存 Java内存模型主要目标:定义程序中各个变量的访问规则,即在虚拟机中将变量存储到内存和从内存中取出变量这样的底层细节.此处的变量(Variable)与Java编程中 ...

  6. flash滑杆控制图片横向滚动

    flash滑杆控制图片横向滚动是一款FLASH动画图片左右滚动素材,滑杆控制滚动,效果很酷,带FLASH源文件. 下载:http://www.huiyi8.com/sc/9452.html

  7. laravel基础课程---16、数据迁移(数据库迁移是什么)

    laravel基础课程---16.数据迁移(数据库迁移是什么) 一.总结 一句话总结: 是什么:数据库迁移就像是[数据库的版本控制],可以让你的团队轻松修改并共享应用程序的数据库结构. 使用场景:解决 ...

  8. Linux下安装二进制版mysql-8.0.15

    1.添加用户## 添加用户组groupadd mysql## 添加用户,指定用户home目录useradd -g mysql mysql -d /data/mysql## 解压下载的mysql二进制包 ...

  9. CodeForces - 697F:Legen... (AC自动机+矩阵)

    Barney was hanging out with Nora for a while and now he thinks he may have feelings for her. Barney ...

  10. Python定时任务-schedule vs. Celery vs. APScheduler

    在Python开发过程中我们经常需要执行定时任务,而此类任务我们通常有如下选项: 自己造轮子 使用schedule库 使用Celery定时任务 使用APScheduler 自己造轮子实现,最大的优势就 ...