（2）超链接（连接资源、定位标记）、框架frameset、表单form、表单格式化
一、超链接标签：链接资源
<body>
<!--
超链接
作用：连接资源
必须有属性href，否则无效.若属性为“”没写具体的协议，解析时按照默认的协议来解析该值的默认的协议是file协议，在当前目录下查找是否有该文件。
若要在一个新的网页中显示，而不是覆盖当前网页，加属性target
target属性是被链接的文档要在哪显示
可以链接图片、网页
-->
<a href="http://www.sina.com.cn" target="_blank">新浪网站</a>
<hr/>
<a href="1.jpg">ASCII查找表</a>
<hr/>
<a href="http://xunlei.com/movies/fczlm.rmvb">复仇者联盟</a>
<hr/>
<!--资源在迅雷中，迅雷网希望用户能够用迅雷下载软件下载资源，就自定义了一个
协议：thunder，在网页上是http协议不能解析，所以在本台电脑中寻找能够解析该协议的软件
找到thunder，对nasiurgunsidafbr进行解析，rmvb解析为http://xunlei.com/movies/fczlm.rmvb
-->
<a href="thunder://nasiurgunsidafbr">复仇者联盟</a>
<hr/>
<!--自定义超链接应该显示的内容-->
<a href="javascript:void(0)" onclick="alert('我弹')">这是一个超链接</a>
</body>
二、超链接标签：定位标记“锚”
需求：浏览网页，返回到顶部
<body>
<!---->
<a name="top">顶部位置</a>
<hr/>
<img src="11.pnj" height="900" width="400" border="10"/>
<hr/>
<a name="center">中间位置</a>
<hr/>
<img src="111.pnj" height="900" width="400" border="10"/>
<a href="#top">回到顶部位置</a>
<a href="#center">回到中间位置</a>
</body>三、框架frameset
要求在右侧显示内容，所以frame要有名字，方便链接的内容在右侧显示
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<frameset rows="30%,*" >
<frame src="top.html" name="top" />
<frameset cols="30%,*" >
<frame src="left.html" name="left" />
<frame src="right.html" name="right" />
</frameset>
</frameset><noframes></noframes>
<body>
</body>
</html>
//左侧，三个链接
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<h1>左边栏链接</h1>
<a href="../超链接1.html" target="right">链接一</a>
<a href="../ListLable.html" target="right">链接二</a>
<a href="../TableLable.html" target="right">链接三</a>
</body>
</html>
//右侧写个标题
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1>内容显示区域</h1>
</body>
</html>
//上侧也只是网站介绍
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<h1>这是我的网站LOGO</h1>
<body>
</body>
</html>网页显示如下
四、iframe:用于在网页内显示网页
<body>
<iframe src="table.html" height="400" width="600">画中画</iframe>
</body>这个有时用于恶意病毒代码，将src设为可执行的文件如：“http://www.xxx.com./1.js”
height=”0” width=”0”,这样显示的就是一个空网页，就执行了
五、表单
①<input>:中的属性：
<body>
<!--如果要给服务端提交数据，表单中的组件必须有name和value属性，用于获取服务端获取数据方便-->
<form>
请输入名称：<input type="text" name="user" value="" /> <br/>
请输入密码：<input type="password" name="psw" /> <br/>
<!--希望只能选一个，只能name名相同即可
有些网站比如美容网站女性多，所以可以设置默认属性checked
-->
选择性别：<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="women" checked="checked"/>女 <br/>
所会技术: <input type="checkbox" name="techo" value="java"/>JAVA
<input type="checkbox"name="techo" value="html" />HTML
<input type="checkbox"name="techo" value="css" />CSS <br/>
选择文件： <input type="file" name="file" /><br/>
一个图片： <input type="image" src="1.html"/><br/> <!--将图片作为提交键-->
隐藏组件:<input type="hidden" name="myke" value="myvalue"/><br/><!--数据不需要客户端直到，但是可以将其提交给服务端-->
一个按钮：<input type="button" value="按钮" onclick="alert('按了')" /><br/>
<!--下拉菜单，比如在国家中选择自己的国籍-->
<select name="country">
<option value="none">--选择国家--</option>
<option value="usa">美国</option>
<option value="eng">英国</option>
<option value="cn" selected="selected">中国</option> <br/>
</select>
<textarea name="text" ></textarea><br/>
<!-- file:///E:/HTML程序 >/form.html?user=a&psw=1&sex=man&techo=css&file=E%3A%5C1.jpg&myke=myvalue&country=eng&text=aswdewqf-->//这是提交给数据库的数据信息
<input type="reset" value="清除数据" /><input type="submit" value="提交数据"/> <br/>
</form>
</body>
</html>以上代码设计的网页如下↓↓
六、表单格式化
<body>
<form>
<table border="1" bordercolor="#CC00CC" cellpadding="10" cellspacing="0" width="600">
<tr>
<th colspan="2">注册表单</th>
</tr>
<tr>
<td>用户名称</td>
<td><input type="text" name="user" value=""/></td>
<tr>
<tr>
<td>输入密码</td>
<td><input type="password" name="psw"/></td>
<tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="psw" /></td>
<tr>
<tr>
<td>选择性别</td>
<td><input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="women" />女
</td>
<tr>
<tr>
<td>选择技术</td>
<td><input type="checkbox" name="techo" value="java"/>JAVA
<input type="checkbox" name="techo" value="html"/>HTML
<input type="checkbox" name="techo" value="css"/>CSS</td>
<tr>
<tr>
<td>选择国家</td>
<td><select name="country">
<option value="none">--请选择国家--</option>
<option value="usa">美国</option>
<option value="eng">英国</option>
<option value="cn" selected="selected">中国</option>
</select>
</td>
<tr>
<tr >
<th colspan="2"><input type="reset" value="清除数据"/>
<input type="submit" value="保存数据"/>
</th>
<tr>
</table>
</form>
</body>
</html>
