（2）超链接（连接资源、定位标记）、框架frameset、表单form、表单格式化

最新推荐文章于 2021-07-08 10:16:55 发布

FixedStarHaHa

最新推荐文章于 2021-07-08 10:16:55 发布

阅读量479

点赞数 1

分类专栏： java基础 HTML 文章标签：表单框架标签

本文链接：https://blog.csdn.net/jiangshangchunjiezi/article/details/76422636

版权

java基础同时被 2 个专栏收录

113 篇文章 2 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

一、超链接标签：链接资源

<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>