04_HTML 内联框架和超链接标签

2018-09-30 本文已影响0人秋的懵懂

时间：2018-09-29 姓名：魏文应

一、内联框架

在当前 html 引入另外一个 html 文件：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>内联框架</title>
    </head>
    <body>
        <iframe src="lesson-02.html"> </iframe>
    </body>
</html>

src="lesson-02.html" 引用了 lensson-02.html 这个文件，效果就是这样

内联框

内联框架还可以指定其它属性，如：宽度（width）和高度（height），以及名字（name）：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>内联框架</title>
    </head>
    <body>
        <iframe src="lesson-02.html" name="wwy" width="300" height="400"> </iframe>
    </body>
</html>

注意：不推荐使用内联框架，因为搜索引擎不会检索内联 .html 的内容。

二、超链接标签

使用 <a> 标签，添加超链接：

<!doctpye html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>网页超链接</title>
    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank"> 这是一个超链接，在新标签中打开。 </a> 
        <br /> <br />
        <a href="https://www.qq.com" target="_self"> 这是一个超链接，在当前标签页中打开。 </a> 
        <br /> <br />
        <a href="https://www.github.com" target="_self"> 这是一个超链接。 </a>
    </body>
</html>

显示效果如下：

超链接

点过的超链接，会变成红色。 target="_blank" 属性，使得点击时，在 新标签打开 超链接页面。target="_self" 属性，是在 当前标签页面 中打开超链接。当然，还可以在 内联框架 中打开：

<!doctpye html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>网页超链接</title>
    </head>
    <body>
        <a href="http://www.baidu.com" target="test"> 这是一个超链接，在新标签中打开。 </a> 
        <br /> <br />
        <iframe src="lesson-02.html" name="test" width="800" height="400"></iframe>
    </body>
</html>

下面通过 target="test" 关联内联框架中的 name="test" 属性，点击超链接以后的显示效果如下：

在内联框中打开超链接

三、居中显示

在结构、表现、行为中，居中显示属于表现，在 CSS 设置，所以不建议使用 HTML 进行居中说明。如果你非要在 HTML 中说明居中，可以使用 <center> 标签：

<!doctpye html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>网页超链接</title>
    </head>
    <body>
        <center>
            <a href="http://www.baidu.com" target="test"> 这是一个超链接，在新标签中打开。 </a> 
            <br /> <br />
            <iframe src="lesson-02.html" name="test" width="800" height="400"></iframe>
        </center>
    </body>
</html>

注意：不推荐使用 <center> 标签。

四、回到顶部

在网页中，我们经常点击 回到顶部 超链接，就回到了页面顶部：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title> a标签的ID属性测试 </title>
    </head>
    <body>
        <a href="#"> 回到顶部 </a>
    </body>
</html>

a 标签中，设置超链接属性 href="#" ，点击这个超链接，就可以回到顶部。当然，也可以通过设置 a 标签的 id 属性，去到页面中任意一个位置：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title> a标签的ID属性测试 </title>
    </head>
    <body>
        <a id="label"> 设置了一个位置id </a>
        <a href="#label"> 去到 id="label" 的位置 </a>
    </body>
</html>

id 属性的值，在同一个 HTML 页面中不能重复。很好理解，如果你在很多个地方设置了 id="label" ，那么 href="#label" 就不知道定位到那个位置。id 的数值只能以字母开头，比如， id="123abc" 就不行，不能以数字开头。

五、打开邮箱

类似点击 联系我们 的效果：

<a href="mailto:1001@qq.com"> 联系我们 </a>