[TOC]

0x00 前言简述

本章主要介绍超链接、以及框架等相关元素的介绍实践。

超链接相关元素:

• <a> : 定义锚。
• <link> : 定义文档与外部资源的关系 HTML新标签，在【2.HTML根部头部主体标签元素介绍】中有介绍，此处不做多余介绍。
• <nav> : 定义导航链接。在【4.HTML样式布局区块标签元素介绍】中有介绍，此处不做多余介绍。

框架相关元素:

• <iframe> ：定义内联框架。
• <frame> : 定义框架集的窗口或框架。HTML5 中不支持。
• <frameset> : 定义框架集。HTML5 中不支持。
• <noframes> : 定义针对不支持框架的用户的替代内容。HTML5 中不支持。

其他相关元素

• <marquee> : HTML5 中不支持。

0x01 超链接标签元素

a 标签

描述: 该标签定义超链接，用于从一张页面链接到另一张页面，其最重要的属性是 href 属性，它指示链接的目标。

属性:

• href: 指向的页面的 URL。
• target: 规定在何处打开链接文档(_blank/_parent/_self/_top/framename)。
• type: 规定被链接文档的的 MIME 类型, 例如 text/html、images/png
• hreflang: 指定被链接文档的语言, 例如 zh。
• media: 规定被链接文档是为何种媒介/设备优化的，与CSS中media 运算符、设备、值相同，例如 “screen and (min-width:500px)”。
• download: 属性规定该超链接目标可被下载。
• ping: 规定以空格分隔的 URL 列表，当点击链接时，浏览器将发送带有正文 ping 的 post 请求（在后台）
• rel: 该属性改变锚内容的外观、或者自动构建文档浏览菜单，其他工具也可以使用这些属性来构建特殊的链接集合、目录和索引，但是只有极少数浏览器才会利用这些属性来改变链接的外观，其值可以为（stylesheet、start、next、prev、contents、nofollow）等。
• referrerpolicy: 规定当用户单击超链接时要发送哪些引荐来源信息

  no-referrer: 不发送引荐来源信息
  no-referrer-when-downgrade: 如果协议安全级别保持不变或更高（HTTP 到 HTTP、HTTPS 到 HTTPS、HTTP 到 HTTPS 可以），则发送源、路径和查询字符串,不发送任何安全级别较低的内容（HTTPS 到 HTTP 不行）。
  origin: 发送文档的来源（协议、主机和端口）。
  origin-when-cross-origin: 为跨域请求发送文档的来源。为同源请求发送来源、路径和查询字符串。
  same-origin: 为同源请求发送引用者。不为跨域请求发送引用者。
  strict-origin-when-cross-origin: 如果协议安全级别保持不变或更高（HTTP 到 HTTP、HTTPS 到 HTTPS 和 HTTP 到 HTTPS 都可以），则发送来源。
  unsafe-url: 发送来源、路径和查询字符串（不考虑安全性）。

温馨提示: 在所有浏览器中，链接的默认外观是未被访问的链接带有下划线而且是蓝色的,已被访问的链接带有下划线而且是紫色的,活动链接带有下划线而且是红色的。

示例1

<!-- 1.HTML 链接是通过 <a> 标签进行定义的 -->
<a href="https://blog.weiyigeek.top">This is a link jump WeiyiGeek.top</a>

<!-- 2.演示如何使用图像作为链接href属性 -->
<a href="/example/weiyigeek.html"> 
  <!--可以塞相对路径与绝对路径-->
  <img border="0" src="/i/weiyigeek.gif" />
</a>

<!-- 3.演示如何使用链接跳转至文档的另一个部分-name属性 -->
<p><a href="#show">查看 Chapter 4</a></p> 
<!--跳转到指定的name名称中用#假name值(注意区分大小写)，进行跳转-->
<p>锚（显示在页面上的文本）</p>
<h2><a name="show">Chapter 4</a></h2>  <!--name属性-->
<p>欢迎访问唯一极客个人学习博客</p>
备注: 后续也可通过 https://blog.weiyigeek.top/index.html#show 进行调转访问。

<!-- 4.定义如何打开中展示一个页面 -->
<p>target 属性设置为 "_blank"，该链接会在新窗口中打开</p>
<p>target 属性设置为 "_self"，默认。在相同的框架中打开被链接文档</p>
<p>target 属性设置为 "_parent"，在父框架集中打开被链接文档</p>
<p>target 属性设置为 "_top"，在整个窗口中打开被链接文档</p>
<a href="https://blog.weiyigeek.top/index.html#show" target="_blank">Visit blog.weiyigeek.top!</a>

<!-- 5.使用a标签创建电子邮件链接: -->
<a href="mailto:master@weiyigeek.top?subject=Hello%20WeiyiGeek！">发送邮件</a></p>
<a href="mailto:master@weiyigeek.top?cc=one@weiyigeek.top&bcc=two@weiyigeek.top&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！有抄送，有标题，有内容</a></p>
<p>注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了, 首个邮箱后是?拼接</p>

<!-- 6.使用rel属性指定了noreferrer后，浏览器在请求该标签指定的地址时就不再发送Referer。 -->
<a herf="https://blog.weiyigeek.top" rel="noreferrer nofollow"> 因为通过Referer可能会泄露一些铭感信息，已搜索引擎不跟踪 </a>

<!-- 7.使用down属性设置一个值来规定下载文件的名称，浏览器将自动检测正确的文件扩展名并添加到文件(.img, .pdf, .txt, .html等等) -->
<a href="/images/weiyigeek.jpg" download="logo">

<!-- 8.当用户点击 weiyigeek.top/html 链接时，通知 weiyigeek.top/trackpings -->
<a href="https://weiyigeek.top/html" ping="https://weiyigeek.top/trackpings">唯一极客个人主页</a>

示例2. 打开新窗口，被指向的超链接使得创建高效的浏览工具变得很容易。
例如，target="view_window"一个简单的内容文档的列表，可以将文档重定向到一个单独的窗口，通过单击窗口中的一个连接，可使另一个窗口的内容发生变化。–>

<h3>View_window Demo</h3>
<ul>
  <li><a href="pref.html" target="view_window">Preface</a></li>   
  <li><a href="chap1.html" target="view_window">Chapter 1</a></li>
  <li><a href="chap2.html" target="view_window">Chapter 2</a></li>
  <li><a href="chap3.html" target="view_window">Chapter 3</a></li>
</ul>

weiyigeek.top-target属性为view_window效果图

实现效果: 当用户第一次选择内容列表中的某个链接时，浏览器将打开一个新的窗口，将它标记为 “view_window”，然后在其中显示希望显示的文档内容。如果用户从这个内容列表中选择另一个链接，且这个 “view_window” 仍处于打开状态，浏览器就会再次将选定的文档载入那个窗口，取代刚才的那些文档。

示例3. 在框架中打开窗口，此时不用打开一个完整的浏览器窗口，使用 target 更通常的方法是在一个 <frameset> 显示中将超链接内容定向到一个或者多个框架中。
可以将这个内容列表放入一个带有两个框架的文档的其中一个框架中，并用这个相邻的框架来显示选定的文档：

<!-- demo.html -->
<frameset cols="100,*">
  <iframe src="toc.html">
  <!-- 利用name属性进行框架页面显示 -->
  <iframe src="pref.html" name="view_iframe"> 
</frameset> 

<!-- toc.html -->
当浏览器最初显示这两个框架的时候，左边这个框架包含目录，右边这个框架包含前言，这是 "toc.html" 的源代码。
<h3>View_frame Demo</h3>
<ul>
  <li><a href="pref.html" target="view_iframe">Preface</a></li>
  <li><a href="chap1.html" target="view_iframe">Chapter 1</a></li>
  <li><a href="chap2.html" target="view_iframe">Chapter 2</a></li>
  <li><a href="chap3.html" target="view_iframe">Chapter 3</a></li>
</ul>

---

0x02 框架标签元素

iframe 标签

描述: HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录 (session history)和DOM 树。
包含嵌入内容的浏览上下文称为父级浏览上下文, 顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。
简单的说: 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

属性:

• allow: 用于为<iframe>指定其特征策略.
• allowfullscreen : 设置为true时，可以通过调用 <iframe> 的 requestFullscreen() 方法激活全屏模式。
• allowpaymentrequest : 设置为true时，跨域的 <iframe> 就可以调用 Payment Request API。
• name: 用于定位嵌入的浏览上下文的名称,在 <a> 标签与 <form> 标签的 target 属性值，以及 <input> 标签和 <button> 标签的 formtarget 属性值 。
• height : 以 CSS 像素格式，或像素格式，或百分比格式指定 frame 的高度。默认值是150。
• width: 以 CSS 像素格式，或以像素格式，或以百分比格式指定的 frame 的宽度。默认值是300。
• src: 被嵌套的页面的 URL 地址。
• srcdoc: 该属性是一段 HTML 代码，这些代码会被渲染到 iframe 中。
• importance 实验性: 表示 <iframe> 的 src 属性指定的资源的加载优先级（auto、high、low）。

• referrerpolicy : 表示在获取 iframe 资源时如何发送 referrer 首部：

  no-referrer: 不发送 Referer 首部。
  no-referrer-when-downgrade (default): 向不受 TLS (HTTPS) 保护的 origin 发送请求时，不发送 Referer 首部。
  origin: referrer 首部中仅包含来源页面的源。换言之，仅包含来源页面的 scheme, host, 以及 port (en-US)。
  origin-when-cross-origin: 发起跨域请求时，仅在 referrer 中包含来源页面的源。发起同源请求时，仍然会在 referrer 中包含来源页面在服务器上的路径信息。
  same-origin: 对于 same origin（同源）请求，发送 referrer 首部，否则不发送。
  strict-origin: 仅当被请求页面和来源页面具有相同的协议安全等级时才发送 referrer 首部（比如从采用 HTTPS 协议的页面请求另一个采用 HTTPS 协议的页面）。如果被请求页面的协议安全等级较低，则不会发送 referrer 首部（比如从采用 HTTPS 协议的页面请求采用 HTTP 协议的页面）。
  strict-origin-when-cross-origin: 当发起同源请求时，在 referrer 首部中包含完整的 URL。当被请求页面与来源页面不同源但是有相同协议安全等级时（比如 HTTPS→HTTPS），在 referrer 首部中仅包含来源页面的源。当被请求页面的协议安全等级较低时（比如 HTTPS→HTTP），不发送 referrer 首部。
  unsafe-url: 始终在 referrer 首部中包含源以及路径（但不包括 fragment，密码，或用户名）。这个值是不安全的, 因为这样做会暴露受 TLS 保护的资源的源和路径信息。

• sandbox : 该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。

  allow-downloads-without-user-activation 实验性: 允许在没有征求用户同意的情况下下载文件。
  allow-forms: 允许嵌入的浏览上下文提交表单。如果没有使用该关键字，则无法提交表单。
  allow-modals: 允许嵌入的浏览上下文打开模态窗口。
  allow-orientation-lock: 允许嵌入的浏览上下文锁定屏幕方向（译者注：比如智能手机、平板电脑的水平朝向或垂直朝向）。
  allow-pointer-lock: 允许嵌入的浏览上下文使用 Pointer Lock API.
  allow-popups: 允许弹窗 (例如 window.open, target=”_blank”, showModalDialog)。如果没有使用该关键字，相应的功能将自动被禁用。
  allow-popups-to-escape-sandbox: 允许沙箱化的文档打开新窗口，并且新窗口不会继承沙箱标记。例如，安全地沙箱化一个广告页面，而不会在广告链接到的新页面中启用相同的限制条件。
  allow-presentation: 允许嵌入的浏览上下文开始一个 presentation session (en-US)。
  allow-same-origin: 如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 same-origin policy 同源检查失败。
  allow-scripts: 允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。
  allow-storage-access-by-user-activation 实验性: 允许嵌入的浏览上下文通过 Storage Access API (en-US) 使用父级浏览上下文的存储功能。
  allow-top-navigation: 允许嵌入的浏览上下文导航（加载）内容到顶级的浏览上下文。
  allow-top-navigation-by-user-activation: 允许嵌入的浏览上下文在经过用户允许后导航（加载）内容到顶级的浏览上下文。

示例:

<!-- 1.此示例将位于 https://weiyigeek.top 的页面嵌入到 iframe 中。 -->
<iframe
  src="https://weiyigeek.top"
  title="WeiyiGeek 个人主页"
  width="400"
  height="300">
</iframe>

<!-- 2.移除边框和关闭滚动条-frameboder属性 -->
<ul>
  <li><a href="https://weiyigeek.top" target="iframe_a">点击访问首页</a></li>
  <li><a href="https://blog.weiyigeek.top" target="iframe_a">点击访问博客</a></li>
</ul>
<iframe name="iframe_a" src="#"  width="500" height="300" frameborder="0"> <p>您的浏览器不支持  iframe 标签</p>
</iframe>

<!-- 3.因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架的name属性指定，所以在点击链接时页面会显示在 iframe框架中。 -->
<h6>使用iframe来显示目标链接页面</h6>
<span data-wiz-span="data-wiz-span" style="color: rgb(0, 0, 0);">
  <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
  <p><a href="http://www.weiyigeek.top" target="iframe_a">weiyigeek.top</a></p>
</span>

扩展:
描述: 如果指定了空字符串（sandbox=””），该属性对呈现在iframe框架中的内容启用一些额外的限制条件。
该属性的值既可以是一个空字符串（将会启用所有的限制），也可以是用空格分隔的一系列指定的字符串，通过sandbox属性提升iFrame的安全性，sandbox属性可以防止不信任的Web页面执行某些操作。

HTML 5规范的编辑Ian Hickson谈到了sandbox的好处，它可以防止如下操作：

• 访问父页面的DOM（从技术角度来说，这是因为相对于父页面iframe已经成为不同的源了）
• 执行脚本
• 通过脚本嵌入自己的表单或是操纵表单
• 对cookie、本地存储或本地SQL数据库的读写

<!-- 1.启用一系列额外限制，但允许表单提交。 -->
<iframe src="demo_iframe_sandbox_form.html" sandbox="allow-forms">
  <p>您的浏览器不支持 iframes.</p>
</iframe>

<!-- 2.启用一系列额外限制，但允许javascript交互，表单提交 -->
<!-- 属性值可以以空格,来分隔启用一起的限制 -->
<iframe src="demo_iframe_sandbox.html" sandbox="allow-scripts allow-forms">
  <p>您的浏览器不支持 iframes.</p>
</iframe>

<!-- 3.如果浏览器支持 srcdoc 属性，且指定了 srcdoc 属性，它将覆盖在 src 属性中规定的内容 -->
<iframe srcdoc="<b>Hello world!</b>" src="demo-iframe_srcdoc.htm">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

weiyigeek.top-iframe标签执行结果图

frameset 标签 - 已弃用

描述: frameset 元素可定义一个框架集,它被用来组织多个窗口（框架），每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行,注意该标签一般不能和body标签一起使用。
温馨提示: 您必须使用 cols 或 rows 属性。

示例:

<!-- 1.三个frame元素分别横向占据百分之25%/50%/25% -->
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>

<!-- 2.三个frame元素分别纵向x占据百分之25%/50%/25% -->
<frameset rows="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>

weiyigeek.top-frameset执行结果图

frame 标签 - 已弃用

描述: 该标签定义 frameset 中的一个特定的窗口（框架），frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。

温馨提示: 如果您希望验证包含框架的页面，请确保 doctype 被设置为 “Frameset DTD”，阅读更多有关 DOCTYPE 的内容。

<!-- 1.定义了放置在每个框架中的 HTML 文档-src属性 -->
<frameset cols="25%,75%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>

<!-- 2.您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签，不过，如果您需要为不支持框架的浏览器添加一个 <noframes> 标签，请务必将此标签放置在 <body></body> 标签中！ -->
<frameset cols="25%,50%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <noframes>
  <body>您的浏览器无法处理框架！</body>
  </noframes>
</frameset>

<!-- 3.三份文档的框架结构，同时将他们混合置于行和列之中. -->
<frameset rows="50%,50%">
    <frame src="/example/html/frame_a.html">
    <frameset cols="25%,75%">
        <frame src="/example/html/frame_b.html">
        <frame src="/example/html/frame_c.html">
    </frameset>
</frameset>

<!-- 4.框架是可调整尺寸的，加入- noresize 属性后在框架间的边框上拖动鼠标，你会发现边框是无法移动的。 -->
<frameset cols="50%,*,25%">
  <frame src="/example/html/frame_a.html" noresize="noresize" />   //不可移动A、B之间的边框
  <frame src="/example/html/frame_b.html" />
  <frame src="/example/html/frame_c.html" />
</frameset>

<!-- 5.制作导航框架，导航框架包含一个将第二个框架作为目标的链接列表。名为 "contents.htm" 的文件包含三个链接-name属性。 -->
<frameset cols="120,*">
  <frame src="/example/html/html_contents.html">
  <!--再 html-contents文档中的a标签，设置了target="showfrane"，所有才再一个框架中显示-->
  <frame src="/example/html/frame_a.html" name="showframe">
</frameset>

<!-- 6.左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。
第二个框架显示被链接的文档，导航框架其中的链接指向目标文件中指定的节-target属性 -->
<frameset cols="180,*">
    <frame src="/example/html/content.html"> <!--可以利用a标签进行跳转-->
    <frame src="/example/html/link.html" name="showframe">
</frameset>
<!-- /example/html/content.html 原码: -->
<a href ="/example/html/link.html" target ="showframe">没有锚的链接</a><br />
<a href ="/example/html/link.html#C10" target ="showframe">带有锚的链接</a>

weiyigeek.top-frame标签执行结果图

综合示例:
代码示例: https://github.com/WeiyiGeek/DevelopLearnig/blob/main/fore-end/HTML/example/study/11.iframe.html

0x03 框架移动标签元素

marquee 标签 - 已弃用

描述: HTML marquee 元素（<marquee>） 用来插入一段滚动的文字, 你可以使用它的属性控制当文本到达容器边缘发生的事情。
属性:

• behavior : 设置文本在 marquee 元素内如何滚动。可选值有 scroll，slide 和 alternate。如果未指定值，默认值为 scroll。
• bgcolor : 通过颜色名称或十六进制值设置背景颜色。
• direction : 设置 marquee 内文本滚动的方向。可选值有 left, right, up and down。如果未指定值，默认值为 left。
• height : 以像素或百分比值设置高度。
• hspace : 设置水平边距。
• loop : 设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动。
• scrollamount : 设置每次滚动时移动的长度（以像素为单位）。默认值为 6。
• scrolldelay : 设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。请注意，除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。
• truespeed : 默认情况下，会忽略小于 60 的 scrolldelay 值。如果存在 truespeed，那些值不会被忽略。
• vspace : 以像素或百分比值设置垂直边距。
• width: 以像素或百分比值设置宽度。

事件

onbounce : 当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。
onfinish : 当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。
onstart : 当 marquee 开始滚动时触发。

示例

<!-- 1.常规示例 -->
<marquee>此文本将从右向左滚动</marquee>

<!-- 2.指定滚动方向示例 -->
<marquee direction="up">此文本将从下至上滚动</marquee>

<!-- 3.边框内移动 -->
<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate">
    此文本在边框内滚动
  </marquee>
</marquee>

实时结果输出：

请点击执行,即可显示结果!

可编辑代码:
<br> <!-- 1.常规示例 --><br> <marquee>此文本将从右向左滚动</marquee><br> <!-- 2.指定滚动方向示例 --><br> <marquee direction="up">此文本将从下至上滚动</marquee><br> <!-- 3.边框内移动 --><br> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"><br> <marquee behavior="alternate"><br> 此文本在边框内滚动<br> </marquee><br> </marquee><br>