html的<a>标签,表单,内嵌框架

2018/04/23 17:11
阅读数 27
 

一.  <a>标签

0. 用图片当链接,就是把图片当成链接文字即可
<a href="http://www.baidu.com/" title="跳转到百度">
  <img src='images/pic.jpg" alt="苹果"/>
</a>

  

 
1. <a href="#">新闻标题</a>
这里的#表示缺省值,会使链接跳到页面顶部,如果写成href="" ,效果一样
如果想点链接啥都不做,需要写成<a href="javascript:;">缺省值</a>
 
 
2. 链接时打开一个新网页,使用target属性,默认为target="_self",修改为如下
<a href=" http://www.baidu.com/" title="跳转到百度" target="_blank">百度</a>
 
说明:
target属性规定了在何处打开超链接的文档。 _blank使浏览器总在一个新打开、未命名的窗口中载入目标文档。
 
 
3. 页面内定义滚动跳转,使用id属性
 
例如有三个标题1,2,3,需求是想点击链接名到指定标题位置
 
<a href="#mao1">标题1</a>
<a href="#mao2">标题2</a>
<a href="#mao3">标题3</a>
 
 
<h3 id="mao1">标题1</h3>
........
<h3 id="mao2">标题2</h3>
........
<h3 id="mao3">标题3</h3>

  

 
 
 
 

二. 表单

 
1.  input为text类型时,也可以预先写入值
<form action="form_action.asp" method="get">
name: <input type="text" name="username" value="George" /><br />
password: <input type="text" name="pwd" value="Bush" /><br />
<input type="submit" value="Submit form" />
</form>
 
注意:action的值为提交地址
 
 
2. 互斥单选框,需要加上name属性,并且值要相同,否则两个都能选
<label>性别:</label>
<input type="radio" name="gender" value="0" />男
<input type="radio" name="gender" value="1" />女

  

 
 
3. checkbox为多选框,name也要定义为一样的
<label>爱好:</label>
<input type="checkbox" name="like" value="game" />游戏
<input type="checkbox" name="like" value="shopping" />购物
<input type="checkbox" name="like" value="study" />学习

  

 
 
4. 提交,重置表单项
 
<input type="submit" name="" value="提交">
 
<!-- input类型为reset定义重置按钮 -->
<input type="reset" name="" value="重置">

  

value属性的定义和用法
value 属性为 input 元素设定值,对于不同的输入类型,value 属性的用法也不同:
  • type="button", "reset", "submit" - 定义按钮上的显示的文本
  • type="text", "password", "hidden" - 定义输入字段的初始值
  • type="checkbox", "radio", "image" - 定义与输入相关联的值
注意:
<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
value 属性无法与 <input type="file"> 一同使用。
 
 
 
 
 
5.  select定义下拉框
<label>籍贯:</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>

  

 
6.  input类型为file定义上传照片或文件等资源
 
<label>照片:</label>
<input type="file" name="person_pic">

  

效果如下

 

 
 
7.  定义多行文本,如果想精确控制能输入多少字,需要css
<label>个人描述:</label>
<textarea name="about"></textarea>

  

 
8. label标签中的for属性,使值等于input中的id属性,提高用户体验,点击字就可选上选项
<label>性别:</label>
<input type="radio" name="gender" value="0" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="1" id="female"><label for="female">女</label>

  

 
说明:value值的作用
1). 如果form的提交方式为get,提交的时候,name和value的值会被显现在地址栏中,用于数据量小且非敏感信息,如下
 
2). 对于密码等敏感信息及数据量较大时,需要使用post方法,它用http协议报文进行提交
 
 
 
 

三. 内嵌框架,就是在一个网页中会单独有一个窗口显示其他网页

<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no">
</iframe>

  

说明:
width, height用于定义窗口大小
frameborder用于设置边框
scrolling用于设置滚动条
 
 
用途:
1)可内嵌多个框架来合成页面
<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no">
</iframe>
<iframe src="001列表.html width="900" height="500" frameborder="0" scrolling="no">
</iframe>

  

 
2)进行页面内跳转
<a href="http://www.baidu.com" target="myframe">百度网</a>
<a href="http://www.itcast.cn" target="myframe">传智播客</a>
<a href="http://www.qq.com" target="myframe">腾讯网</a>
<br />
<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no" name="myframe">
</iframe>

  

 
说明:
1. 实现要点是所有<a>标签的target属性值要和<iframe>标签的name属性值相同
2. 实现效果是,页面初始显示百度的内嵌窗口,点击腾讯网链接会在内嵌窗口显示腾讯网,效果如下
 

 

 
 
 
 
 
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
在线直播报名
返回顶部
顶部