Html5-入门第一篇-认识基础控件

ok，今天记录一下html中最基础的几个控件。听说过html的人就可以绕行了~

<hr/>  分隔符，就是横贯左右的一大条线，可以设置它的样式，如粗细，颜色，虚实线等。

下面举个栗子~

<hr style=" height:2px;border:none;border-top:2px dotted #185598;" />

height:2px;是hr的高度

border:none;是没有边框

border-top:2px dotted #185598;是设置横线的样式

dotted  虚线  #185598  颜色

<br/> 换行符，一个br 就是一个 “下一行”

<input/> 这个标签可以表现为不同的样式，它通过type这个标签属性来设置它的样式，如：<input type="submit" value="保存">  表现出来的就是一个保存的按钮

性别<input type="radio" name="1"checked="checked"/>男<input type="radio" name="1"/>女  这个表现出来是两个单选按钮，并且是一组。如何判断这两个input是一组的呢，是通过它的name属性，如果name的值一致，那么它俩就是同一组单选按钮，就产生了耦合的联系。type="checkbox" 则代表的是多选按钮

<select>

<option></option>

<option></option>

</select>这是一组选项卡控件，一个select标签中携带多个option标签共同组成一组选项卡。 如果想设置某个option是默认被选中的状态，那么在option加一个属性 selected = "selected"  即 <option selected = "selected">这里默认选中</option>

<textarea>  一个可以无限输入文字的标签控件

表格： 

<table width="500"border="1"height="300"cellspacing="0">

--------------------------------下 面-是-第-一-行----------------------------------------------------------
<tr>
<td rowspan="4" > <font color="#0000aa">总体信息</font></td>
<td colspan="2"> <font color ="red" size="20" >用户注册</font></td>
</tr>
-----------------------------------下 面-是-第-二-行-------------------------------------------------------
<tr>
<td>用户名：</td>
<td ><input type="text" value="输入用户名"/></td>
</tr>
--------------------------------------下 面-是-第-三-行-----------------------------------------------------
<tr>
<td>密码：</td>
<td ><input type="text"/></td>
</tr>

----------------------------------------下 面-是-第-四-行-------------------------------------------------
<tr>
<td colspan="2" align="center"> <input type="submit"value="提交" />  <input type="submit" value="重置"/></td>
</tr>

-------------------------------------O--V--E--R------------------------------------------------------------

</table>

效果图是这样的：

主要展示的table跨行跨列的操作（总体信息纵向合并4个单元格rowspan="4"）用户注册横向合并两个单元格（colspan="2"）

上面需要注意的点，主要是：

rowspan  意思是跨行合并（纵向合并）   colspan 是跨列合并（横向合并）单元格 

<font>标签用于对字体 大小，颜色值等的设置。

<a href="../book2.html"><img src="../images/cat.gif" alt="如果网络不好，图片显示不出来，我就出来啦（解释性图片）" title="鼠标放在图片上这个属性值就显示了"></a>

上面是一个a标签和一个img标签。a标签用于跳转链接  img标签可以设置显示一个图片。具体属性在上面的事例中已经说明。

值得注意的一个地方 在本事例中，src="../images/cat.gif"指向的地址是 该html文件所在目录的父目录（../）下的 images文件夹（images/）下的 cat.gif文件。