时间: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>