8.18图片热点,网页划区,表单,(1文本输入2.按钮3.选择输入)下拉列表框

图片热点:

 在图片上的一个区域,可以做出超链接,直接点击图片就可以完成跳转的效果。

  实例:

<img src="狗狗。jpg” usemap="anbei"(再插入图片的地方写上usemap后随便起一个迷城即可)title=“这是一条狗!” />

<map name="anbei "(可以引用此图片)

<area shape="rect"(形状为矩形,是指要插入连接到地方形状是矩形)coords="88,59,203,196"(矩形的位置,即对角线坐标)href="http://www.baidu.com"(链接地址)

</map>

网页划区:

 在一个网页里,规划处一个区域用来展示里一个网页的内容

<table width='200" border="1">

<tr>

<td>

<iframe sic="http://www.baidu.com" width="260" height="200"frameborder="1">  </iframe>

</td>

</tr>   </table>(先新建一个区域,table,然后设置链接,高度,宽度,边框粗细等属性)

表单

<form></form>

文本输入:

1.文本框  <input type="text" placeholder="请输入账号”/>

密码框  <input type="password" placeholder="请输入密码”/>

 required="required"必填的意思

例:<body background="12345.jpg">
<form>
账号:<input type="text" style="width:200px; height:60px;" placeholder="请输入账号" required="required" /><br />
密码:<input type="password" placeholder="请输入密码" /><br />
<input type="email" /> </form>

 文本域:<texttarea  cols="35"(字符多少)rows="5"(几行高)> </texttarea> 例如qq对话框等

2.按钮

 提交按钮<input type="submit" disabied="disabied"  value="提交” /> 点击后转到form内的提交服务器的地址,具有打包提交上传的作用。

重置按钮 <input type="reset" disabied="disabied" value="重置" />  点击后具有恢复默认值的作用。

普通按钮 <input type="button" value="登入" />

图片按钮  <input type="image  sre="图片的地址” 也可以设置图片的大小  width=“90”/>

 

例:<input type="submit" value="提交" /><input type="reset" disabled="disabled" /><br />
<input type="button" value="登陆" /><input type="image" src="a006.jpg" width="90" /><br />

3.选择输入

单选按钮组 <input type="radio"  name="sex" />男  (这里必须要写name值)

复选框组 <input type="checkbox" />百事可乐

文件上传 <input type="file" />

例:

<input type="checkbox" checked="checked" disabled="disabled" />可口可乐<br />
<input type="checkbox" />百事可乐<br />
<input type="checkbox" />芬达<br />
<br />
<input type="file" /><br />

下拉列表框

<select size="1"时 ,为菜单,只显示一个>1时,为列表  multiple为可选

<option>可口可乐</option>

<option>百事可乐</option>

</select>

例:<select size="1">
<option>可口可乐</option>
<option>百事可乐</option>
<option>芬达</option>
</select>
 </form>
</body>
</html>

 

posted @ 2016-08-19 10:42  琢磨先生  阅读(207)  评论(0编辑  收藏  举报
AmazingCounters.com