XHTML表单-超链接篇

最新推荐文章于 2023-06-04 20:08:42 发布

陌听

最新推荐文章于 2023-06-04 20:08:42 发布

阅读量498

点赞数

分类专栏： XHTML 文章标签： xhtml 表单前端

本文链接：https://blog.csdn.net/she_rryn/article/details/47113435

版权

XHTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、超链接与目录

1、目标：

target="_blank" (打开新页面)
target=“_srlf” (本页面跳转)
target=“_parent” (跳转为父页面)
target=“_top” (跳转我最上层页面)

2、目录快捷键：

以一个反斜杠（/）开头的目录表示该目录为根目录的一个子目录
以一个点加一个反斜杠（./）开头的目录表示该目录为当前目录（当前页面所在的目录的一个子目录）
以两个点加一个反斜杠（../）开头的目录表示该目录为当前目录的父目录

<html>  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
<h1>喵是个听话的乖猫</h1>  
<a href="../小猫猫">点击进入father</a>  
<a href="小小猫.html">点击进入小小猫</a>  
<a href="./小小猫.html">点击进入小小猫</a>  
<a href="/grandfather/猫猫.html">点击进入猫猫</a>  
<a href="../../猫猫.html">点击进入猫猫</a>  
</body>  
</html>

son为小小猫 father为小猫猫 grandfather为猫猫

二、快捷键

accesskey属性可以给超链接设置一个快捷键，tabindex属性可以设置页面上超链接的tab次序。

<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
    <a name="my">第一章</a>  
    <a href="#" tabindex="2">tab的第二次</a>  
  
    <a href="parent.html#my">跳转第一章</a>  
    <a href="#" accesskey="a">执行跳转</a>  
    <a href="#" tabindex="1">tab的第一次</a>  
    <br/><br/><br/><br/><br/><br/><br/>  
</body>  
</html>

三、在网页中插入其他网页

iframe:可以在一个HTML网页中嵌入另一个HTML网页

<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
<a href="1.html"  <span style="color:#ff0000;">target="main"</span>></a>  
<iframe  width=500 height=200 scrolling="auto" farmeboder=1<span style="color:#ff0000;"> name=main</span>></inframe  
</body>  
</html>

其中：

src指调用的外部网页文件的路径
width、height：内部框架区域的宽度与高度
scrolling：设置滚动条。no不出现滚动条，auto自动出现滚动条
frameBorder：区域边框的宽度，可选值为0或1
name:框架的名字

四、 块级函数与内嵌元素

不同之处：块级函数定义的元素是换行的，而内嵌元素定义的文本是不换行的。

常见的块级元素：div、列表元素（dl、UI、ol）、form、h1-h6、p、tableblockquote、fieldest、hr、pre等

内嵌元素：span、a、img、label、iframe、object、所有的表单输入元素等

五、HTML表单

1、http get协议：将数据与实际URL文本附加在一起，将数据传递带目标，get的方式是不安全的，能传输的数据量较小

2、http post协议：将数据在http数据流中的编码发送，post的方式是较为安全的，能传输的数据量较大

3、id:表单名称的唯一标识号

4、隐藏字段

功能：跟踪表单有关的信息时，可以使用隐藏字段

隐藏表单不可见
一般有初始值
收集上一表单提交数据
所填数据与隐藏数据一并提交

5、文件的上传控件

设置属性，方便在表单中使用：

指定<form>的enctype属性为"form/multipart"
将method属性设置为post，而不是get

格式：<form id="myForm" method="post" > <input type="file" id="resume">

注：浏览器会自动在文件上传控件旁边加上一个浏览按钮，让用户可以选择本地硬盘上的一个文件

6、fieldlegnd和legend元素

field元素被用作表表单元素的一个容器，它在包含的元素的周围显示一个细边框的盒子。legend元素放在field元素内部，在盒子上加上一个标题

<html>  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
<form id="myForm" action="#" method="post">  
    <fieldset>  
            <legend>性别</legend>  
                <p>  
            <input type="radio"  name="gender" id="male" value="male">男</input><br/>  
            <input type="radio" name="gender" id="female" value="female">女</input>  
        </p>  
    </fieldset>  
</form>  
</body>  
</html>