a元素与iframe元素

本文讨论两个较简单的元素，分别是创建链接的a元素和可以载入其它页面的iframe元素。

a元素

a元素名为锚（anchor）元素，用于创建链接资源或执行指令的可点击元素。<a>标记中，title属性设置链接的提示信息，在有鼠标的设备中，当鼠标悬停链接时会显示此信息。target属性指定打开目标的方式，默认值为_self，表示在浏览器当前窗口或当前标签中打开新的页面；如果需要使用新窗口或新标签中打开目标资源可以使用_blank属性值。

<a>标记中的href属性指定打开目标或操作，其应用方式包括：

页面地址，可以是本地或外部的网址。
需要下载的文件位置。
JavaScript代码，使用"javascript:<代码>"格式。
发送邮件，使用"mailto:<邮箱地址>"格式。点击后会打开本地默认电子邮件处理软件发送邮件。
跳转到本页面的位置，使用"#<id>"格式，会跳转到指定id的元素位置。

下面的代码，结合列表和a元素创建垂直导航。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #nav1 ul {
            margin: 0px;
            padding: 0px;
            list-style-type: none;
        }
        #nav1 ul li {
            margin-bottom: 0.5em;
        }
        #nav1 ul li a {
            display: block;
            text-decoration: none;
            width: 256px;
            text-align: center;
            height: 2em;
            line-height: 2em;
            vertical-align: middle;
            border-top-left-radius: 1em;
            border-bottom-left-radius: 1em;
            background-color: steelblue;
            color: #fafafa;
        }
    </style>
</head>
<body>
<nav id="nav1">
<ul>
    <li>
        <a target="_blank" href="http://caohuayu.com">CHY软件小屋（a）</a>
    </li>
    <li>
<a href="javascript:window.open('http://caohuayu.com','_blank');">CHY软件小屋（b）</a>
    </li>
    <li>
        <a target="_blank" href="/">测试项目主页</a>
    </li>
</ul>
</nav>
</body>
</html>

本例，前两个链接都是打开作者的个人网站，第一个直接使用网址，第二个则使用JavaScript代码打开，其中使用了window.open()方法。页面显示效果如下图所示。

垂直导航

下面的代码演示了根据id属性值跳转到本页指定位置的操作。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
            height:300px;
            width:300px;
            border:1px solid black;
            margin-top:10px;
            font-size:32px;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#div1">区域一</a></li>
        <li><a href="#div2">区域二</a></li>
        <li><a href="#div3">区域三</a></li>
        <li><a href="#div4">区域四</a></li>
        <li><a href="#div5">区域五</a></li>
    </ul>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
</body>
</html>

可以页面中点击五个链接观察跳转结果，返回页面开始可以使用键盘Ctrl+Home组合键。

iframe元素

iframe元素的主要功能就是在页面中插入其它页面，如广告等；<iframe>标记的src属性用于设置需要载入的页面地址，可以是本地地址，也可以是外部网址。

首先，在/demo目录中创建ad.html文件，并修改内容如下。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #ad1 {
            text-align:center;
            background-image:linear-gradient(to bottom right,lightyellow,red);
        }
        #ad1 h1 {
            color: yellow;
            height: 100px;
            line-height:100px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="ad1">
    <h1>庆祝六一儿童节！</h1>
</div>
</body>
</html>

接下来修改/demo/test.html文件内容如下。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <iframe src="ad.html" style="border:none;width:100%;"></iframe>
    <h1>广告测试页</h1>
</body>
</html>

浏览/demo.html页面效果如下图。

使用iframe元素