HTML自学手册-基础篇2-元宇宙之家

HTML自学手册-目录

HTML 可以将文档分割为若干段落

HTML 段落

段落是通过 <p> 标签定义的

<p>这是一个段落 </p>
<p>这是另一个段落</p>

标签	描述
<p>	定义一个段落
<br>	插入单个折行（换行）

不要忘记结束标签

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法，，忘记使用结束标签会产生意想不到的结果和错误

注意: 在未来的 HTML 版本中，不允许省略结束标签

即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

<p>这是一个段落
<p>这是另一个段落

HTML 折行

<br /> 元素是一个空的 HTML 元素，由于关闭标签没有任何意义，因此它没有结束标签

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：

<p>这个<br>段落<br>演示了分行的效果</p>

HTML 输出- 使用提醒

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格；（这个例子演示了一些 HTML 格式化方面的问题）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学元宇宙 （liboven.cn）</title>
</head>

<body>

<h1>春晓</h1>

<p>
    春眠不觉晓，
      处处闻啼鸟。
        夜来风雨声，
          花落知多少。
</p>

<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）</p>

</body>

</html>

点击尝试

复制代码，点击 “尝试一下” 按钮，粘贴到 HTML运行测试工具查看实例！

【技术笔记-1】区分一下： <br>, <br/> 以及 <br />（带有空格）

<br> 是 HTML 写法；
是 XHTML1.1 的写法, 也是 XML 写法。<br/> 是 XHTML 为兼容 HTML 的写法,也是 XML 写法；HTML5 因为兼容 XHTML，所以三种写法都可以使用；

早期发布的 HTML 规范当中，<br> 与 <img> 等元素是不用封闭自身的，但是这种元素造成了 HTML 规范的不严谨，于是在之后发布的 XHTML 语言中，参考了更为严谨的 XML 规范，在这些不用自身封闭的元素后加 / 来表示自行封闭，在逻辑上来讲等同于<br>….</br>（但是没有 </br> 这种写法），这样一来保证了较少的代码量，二来保证了规范的严谨

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息；

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

HTML <title> 元素

<title> 标签定义了不同文档的标题；

<title> 在 HTML/XHTML 文档中是必需的；

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://liboven.cn/images/" target="_blank">
</head>

HTML <link> 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <style> 元素

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

HTML <meta> 元素

meta标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

HTML <script> 元素

HTML head 元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

【技术笔记-1】HTML<title>元素

HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片；

显示时，要将<link>标签放入<head>里。

举例：

<!doctype HTML>
<html>
<head>
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
</head>
<body>
……
……
……
</body>
</html>

点击尝试

复制代码，点击 “尝试一下” 按钮，粘贴到 HTML运行测试工具查看实例！

【技术笔记-2】head 标签和 header 标签的不同

head 标签用于定义文档头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

如：

<html>
  <head>
     <title>文档标题</title>
  </head>
</html>

header 标签用于定义文档的页眉（介绍信息）。

如：

<html>
  <body>
    <header>
        <p>段落</p>
        <h1>一级标题</h1>
    </header>
  </body>
</html>

注意千万不要弄混。

HTML 文本格式化

加粗文本

斜体文本

电脑自动输出

这是_下标和^上标

文本格式化实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head> 
<body>

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

</body>
</html>

点击尝试

复制代码，点击 “尝试一下” 按钮，粘贴到 HTML运行测试工具查看实例！

HTML 格式化标签

HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）

	通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用；然而，这些标签的含义是不同的： <b> 与<i> 定义粗体或斜体文本； <strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示；现今所有主要浏览器都能渲染各种效果的字体；不过，未来浏览器可能会支持更好的渲染效果；

在线实例

此例演示如何在一个 HTML 文件中对文本进行格式化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学元宇宙 （liboven.cn）</title>
</head>

<body>

<b>这个文本是加粗的</b>

<br />

<strong>这个文本是加粗的</strong>

<br />

<big>这个文本字体放大</big>

<br />

<em>这个文本是斜体的</em>

<br />

<i>这个文本是斜体的</i>

<br />

<small>这个文本是缩小的</small>

<br />

这个文本包含
<sub>下标</sub>

<br />

这个文本包含
<sup>上标</sup>

</body>
</html>

此例演示如何使用 pre 标签对空行和空格进行控制

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head>
<body>

<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

</body>
</html>

此例演示不同的”计算机输出”标签的显示效果

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head>
<body>

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />

<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

</body>
</html>

此例演示如何在 HTML 文件中写地址

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head>
<body>

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

点击尝试

复制代码，点击 “尝试一下” 按钮，粘贴到 HTML运行测试工具查看实例！

此例演示如何实现缩写或首字母缩写

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head>
<body>

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

<p>仅对于 IE 5 中的 acronym 元素有效。</p>

<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

</body>
</html>

此例演示如何改变文字的方向

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head> 
<body>

<p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  

</body>
</html>

此例演示如何实现长短不一的引用语

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head>
<body>

<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

</body>
</html>

此例演示如何标记删除文本和插入文本

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body>
</html>

HTML 文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML “计算机输出” 标签

标签	描述
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

HTML 引文, 引用, 及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目。

【技术笔记-1】文本显示为单行，超过部分隐藏并使用省略号，实例:

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

使用 display:-webkit-box; 让文本显示为多行(只有-webkit内核才有作用)，实例:

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
width:100px;

点击尝试

复制代码，点击 “尝试一下” 按钮，粘贴到 HTML运行测试工具查看实例！

【技术笔记-2】关于 <b> 和 <strong>

在显示上，这两个标签都可是加粗文本，呢么为什么会有两个功能”相同”的标签呢？而且好像 strong 并非个例；

首先，这两个并非完全相同。比如，如果使用网页阅读器阅读网页（盲人使用），strong 会重读，b 则不会；
其次，从起源上来说，strong 是为了在未来建设语义网而诞生的；应该知道的是，html 是负责显示的标记，不能表示语义；也就是说，浏览器知道这个标签如何显示，而不知道标签所标记的内容应该是什么含义；而 strong 在语义上走出了第一步；

【技术笔记-3】<em> 、<i>、<dfn>

1、<em> 把文本定义为强调的内容

<em> 标签告诉浏览器把其中的文本表示为强调的内容；对于所有浏览器来说，这意味着要把这段文字用斜体来显示；

尽管现在 <em> 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义，将来的某一天，浏览器也可能会使用其他的特殊效果来显示强调的文本；如果你只想使用斜体字来显示文本的话，请使用 <i> 标签；除此之外，文档中还可以包括用来改变文本显示的级联样式定义；

2、<i>显示斜体文本效果

<i> 标签和基于内容的样式标签 <em> 类似；它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示；如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式；

3、<dfn>定义一个定义项目

<dfn> 标签可标记那些对特殊术语或短语的定义。

现在流行的浏览器通常用斜体来显示 <dfn> 中的文本；将来，<dfn> 还可能有助于创建文档的索引或术语表；

与其他许多基于内容的样式和物理样式标签一样，<dfn> 标签尽量少用为妙；

也就是说它们要实现的目的不同，但都用同样的表现方式，就是斜体；

【技术笔记-4】关于<abbr>和<acronym>

都是表示缩略词的标签
不同点：
abbr：表示全词的缩写；
acronym：表示标记一个首字母缩写；

PS:其实看起来的效果都一样，只是内在表达的不一样而已，所以看不出什么区别，重点是现在acronym已经淘汰不用了，所以尽量改用abbr就好

【技术笔记-5】HTML 要素中的 b、em、strong 有什么区别？

应该说，在默认的 HTML 样式表定义中，b 和 strong 的样式一样，为 { font-weight: bolder } 而 em 的默认样式为 { font-style: italic }，与 i 相同；

在 HTML 4 中，em 表示 emphasized text，strong 表示 strong emphasized text，故 strong 的强度要更强；而在 HTML 5 中，strong 的定义改成了 important text；当然 emphasized 和 strong emphasized 乃至 important 之间怎么界定很模糊，关键是在自己编写 HTML 代码的时候保持使用上一致；b 和 i 仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」；

【技术笔记-6】所有标签缩写的全称：

<b>—bold

<em>—emphasize

<i>—italic

<sub>—subscript

<sup>—superscript

<ins>—insert

<del>—delete

<kbd>—keyboard

<bdo>—Bi-Directional Override

<q>—quote

<dfn>—define

HTML 超链接

HTML 使用超级链接与网络上的另一个文档相连；几乎可以在所有的网页中找到链接；点击链接可以从一张页面跳转到另一张页面

HTML使用标签 <a>来设置超文本链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分；

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手；

在标签<a> 中使用了href属性来描述链接的地址；

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线；
访问过的链接显示为紫色并带有下划线；
点击链接时，链接显示为红色并带有下划线；

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

HTML 链接语法

链接的 HTML 代码很简单，它类似这样：

<a href="url">链接文本</a>

href 属性描述了链接的目；

实例

<a href="https://liboven.cn">自学元宇宙 （liboven.cn）</a>

上面这行代码显示为：自学元宇宙（liboven.cn）

点击这个超链接会把用户带到元宇宙之家的首页；

提示: “链接文本” 不必一定是文本，图片或其他 HTML 元素都可以成为链接；

HTML 链接 – target 属性

使用 target 属性，你可以定义被链接的文档在何处显示;

下面的这行会在新窗口打开文档：

<a href="https://liboven.cn" target="_blank" rel="noopener noreferrer">自学元宇宙 （liboven.cn）</a>

点击尝试

复制代码，点击 “尝试一下” 按钮，粘贴到 HTML运行测试工具查看实例！

HTML 链接- id 属性

id 属性可用于创建一个 HTML 文档书签；

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的；

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到”有用的提示部分(id=”tips”）”：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到”有用的提示部分(id=”tips”）”：

<a href="https://liboven.cn/html/html-links.html#tips">访问有用的提示部分</a>

基本的注意事项 – 有用的提示

注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href=”https://liboven.cn/html”，就会向服务器产生两次 HTTP 请求;这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”https://liboven.cn/html/

更多实例

如何使用图片链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head>
<body>

<p>创建图片链接:
<a href="http://liboven.cn/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="http://liboven.cn/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

</body>
</html>

如何使用图片链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head>
<body>

<p>创建图片链接:
<a href="http://liboven.cn/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="http://liboven.cn/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

</body>
</html>

如何使用书签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>
<a href="#C4">查看章节 4</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>

<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 6</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 7</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 8</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 9</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 10</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 11</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 12</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 13</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 14</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 15</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 16</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 17</h2>
<p>这边显示该章节的内容……</p>

</body>
</html>

点击尝试

复制代码，点击 “尝试一下” 按钮，粘贴到 HTML运行测试工具查看实例！

本例演示如何跳出框架，假如你的页面被固定在框架之内。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head>
<body>

<p>跳出框架?</p> 
<a href="http://liboven.cn/" target="_top">点击这里!</a> 

</body>
</html>

本例演示如何链接到一个邮件

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head>
<body>

<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>

<p>
<b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p>

</body>
</html>

本例演示更加复杂的邮件链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 （liboven.cn）</title> 
</head>
<body>

<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>

<p>
<b>注意:</b> 单词之间的空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p>

</body>
</html>

【技术笔记-1】关于创建电子邮件链接时如何发送邮件内容

在进行邮件内容发送时，需要使用关键字：mailto

示例如下：

<a href="mailto:liboven.cn@163.com?subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">发送邮件</a>

这样会调启系统默认的邮件程序发送给 liboven.cn@163.com，并且收件人那里已经填上了我邮箱的地址。

点击尝试

复制代码，点击 “尝试一下” 按钮，粘贴到 HTML运行测试工具查看实例！

关于创建电子邮件链接时如何进行抄送，密送.

在进行抄送时，需要使用关键字：cc

在进行密送时，需要使用关键字：bcc

示例如下：

<a href="mailto:liboven.cn@163.com?cc=someone@163.com&bcc=liboven.cn@163.com" rel="nofollow">发送邮件</a>

参数说明：

参数	描述
mailto:name@email.com	邮件接收地址
cc=name@email.com	抄送地址
bcc=name@email.com	密件抄送地址
subject=subject text	邮件主题
body=body text	邮件内容
?	第一个参数分隔符
&	其他参数分隔符

注：多个邮件地址用 ; 隔开，空格用 %20 代替

【技术笔记-2】抄送+密件抄送

抄送：

英文名称：Carbon Copy，又简称为 CC。在网络术语中，抄送就是将邮件同时发送给收信人以外的人，用户所写的邮件抄送一份给别人，对方可以看见该用户的 E-mail。同收件人地址栏一样，不可以超过 1024 个字符。一般来说，使用”抄送”服务时，多人抄送的电子邮件地址使用 ; 分隔。

密件抄送：

英文名称：Blind Carbon Copy ，又称“盲抄送”，和抄送的唯一区别就是它能够让各个收件人无法查看到这封邮件同时还发送给了哪些人。密件抄送是个很实用的功能，假如一次向成百上千位收件人发送邮件，最好采用密件抄送方式，这样一来可以保护各个收件人的地址不被其他人轻易获得，二来可以使收件人节省下收取大量抄送的 E-mail 地址的时间。

【技术笔记-3】nofollow 是 HTML 页面中 a 标签的属性值

nofollow 是 HTML 页面中 a 标签的属性值。这个标签的意义是告诉搜索引擎”不要追踪此网页上的链接或不要追踪此特定链接”；

它的出现为网站管理员提供了一种方式，即告诉搜索引擎”不要追踪此网页上的链接”或”不要追踪此特定链接”。这个标签的意义是告诉搜索引擎这个链接不是经过作者信任的，所以这个链接不是一个信任票；

【技术笔记-4】浏览器空白页地址

<a href="http://liboven.cn/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

后面最好加上：

rel="noopener noreferrer"

意思是不会打开其他的网站，因为恶意病毒可能会修改你的浏览器空白页地址

【技术笔记-5】target属性问题

target=”_blank”:在新窗口中浏览新的页面。

target=”_self”:在同一个窗口打开新的页面。

target=”_parent”:在父窗口中打开新的页面。（页面中使用框架才有用）

target=”_top” :以整个浏览器作为窗口显示新页面。（突破了页面框架的限制）

温馨提示：本文最后更新于2022-12-27 10:02:32，某些文章具有时效性，若有错误或已失效，请在下方留言或联系云小叔叔。

文章版权声明 1、本网站名称：元宇宙之家
2、本站永久网址：https://liboven.cn
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

文章版权归作者所有，未经允许请勿转载！

THE END