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

 

一.  <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. 实现效果是，页面初始显示百度的内嵌窗口，点击腾讯网链接会在内嵌窗口显示腾讯网，效果如下