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文件。