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",修改为如下

说明：

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