html a元素及iframe的使用

最新推荐文章于 2023-03-26 22:08:28 发布

口口

最新推荐文章于 2023-03-26 22:08:28 发布

阅读量202

点赞数

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_45595211/article/details/129123615

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<a> 元素的使用

HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该应该指明链接的意图。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

</body>
</html>

a标签效果图

href: 包含超链接指向的 URL 或 URL 片段。URL 片段是哈希标记（#）前面的名称，哈希标记指定当前文档中的内部目标位置（HTML 元素的 ID）

target ：该属性指定在何处显示链接的资源。取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义：

_self ：前页面加载，即当前的响应到同一浏览上下文。此值是默认的，如果没有指定属性的话。
_blank ：新窗口打开，即到一个新的未命名的浏览器上下文
_parent: 加载响应到当前的 HTML5 浏览上下文的父浏览上下文。如果没有 parent 框架或者浏览上下文，此选项的行为方式与 _self 相同。
top: HTML5 中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有 parent）。如果没有 parent 框架或者浏览上下文，此选项的行为方式相同_self

iframe元素的使用

HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

  <h1>哈哈哈哈</h1>
  <p>呵呵呵呵</p>

  <iframe src="http://taobao.com" width="800" height="600" frameborder="0"></iframe>
</body>
</html>

在这里插入图片描述

frameborder : 值为1（默认值）时，显示此框架的边框。值为0时移除边框。

iframe和a元素连用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="http://www.taobao.com">淘宝网</a>
  <iframe src="./04_h元素的用法.html" frameborder="1"></iframe>
</body>
</html>