链接在现代网页设计中发挥着不可或缺的作用。HTML中，href属性在anchor标签中扮演着关键角色，使得用户可以轻松地跳转到其他页面或特定部分。在本文中，我们将探讨href属性的基本使用方法以及一些高级技巧，帮助您提升网站用户体验。

1. 基本使用方法

HTML中，anchor标签用于创建超链接，其基本结构如下：

<a href="链接地址">链接文本</a>

其中，href属性指定了跳转的目标地址，而链接文本则是用户在页面上看到的可点击的文本。

2. 绝对路径与相对路径

绝对路径和相对路径是href属性中常见的两种取值类型。

• 绝对路径：完整的URL地址，包括协议（如http://或https://）、域名和页面路径。例如：https://www.example.com/page.html
• 相对路径：相对于当前页面的路径，省略了协议和域名。例如，假设当前页面为https://www.example.com/home.html，则可以使用/about.html指向https://www.example.com/about.html。

3. 外部链接与内部链接

外部链接指向不同域名的页面，而内部链接则是指向同一域名内的页面或部分。在创建链接时，确保使用正确的协议（如http://或https://）以避免链接无法正常跳转。

4. 使用target属性

通过使用target属性，您可以控制超链接的打开方式。常见的取值有：

• _self：在当前窗口或标签页中打开链接。
• _blank：在新窗口或新标签页中打开链接。
• _parent：在上一级窗口或框架中打开链接。
• _top：清除当前窗口的内容，然后在新的顶级窗口中打开链接。

5. 使用rel属性

rel属性用于在超链接中添加关联信息，如：

• nofollow：告诉搜索引擎不要按常规方式索引和跟踪链接。
• target="_blank" rel="noopener noreferrer"：同时使用target属性的_blank值和rel属性，可以禁止在新窗口中打开链接的JavaScript代码访问原始页面的窗口对象。

6. 访问性和 SEO 优化

为了提升网站的访问性和 SEO 排名，请确保链接文本清晰、描述性，避免使用过于短的单词（如 "点击这里"）。此外，使用有意义的 URL 以便搜索引擎更好地理解您的网页内容。

7. 使用CSS美化链接

通过CSS，您可以对超链接进行样式定义，使其与网站设计相一致。例如，更改链接的颜色、字体、下划线等。

掌握href属性的使用方法和技巧，您可以创建更加易于导航且访问性较好的网站。在提升用户体验的同时，还能够为搜索引擎提供更多关于网页内容的信息，从而提高网站的 SEO 排名。

置字符编码

属性：http-equiv 值：Content-Type 内容：text/html; charset=utf-8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

设置有效期

设置网页的有效期之后, 过期网页将无法脱机浏览, 只有重新登录并连接该网页才可以再次浏览。

属性：http-equiv 值：expires 内容：Sun,1 Dec 2012 12:00:00 GMT

<meta http-equiv="Expires" content="Sun,1 Dec 2012 12:00:00 GMT" />
<meta http-equiv="Expires" content="<?php gmdate('D, d M Y H:i:s',time()+3600).' GMT'; ?>" />

设置禁止缓存

网页制作者希望随时都能查看到最新的网页内容，则可以设置禁止页面缓存

属性：http-equiv 值：cache-control 内容：no-cache

<meta http-equiv="cache-control" content="no-cache" />

设置自动刷新

设置页面自动刷新，以实现信息的自动实时显示(秒)

属性：http-equiv 值：refresh 内容：5

<meta http-equiv="Refresh" content="5" />

设置自动跳转

属性：http-equiv 值：refresh 内容：5;url=http://www.xxx.com/

<meta http-equiv="Refresh" content="5;URL=http://www.xxx.com/" />

设置网页关键词

属性：name 值：keywords 内容：油漆，涂料，涂料行业，汽车涂料

<meta name="keywords" content="油漆，涂料，涂料行业，汽车涂料" />

设置搜索限制

属性：name 值：robots 内容：All

All 表示能搜索当前网页与其链接的网页，系统默认设置

Index 表示能搜素当前页面

Nofollow 表示不能搜素与当前网页链接的网页

Noindex 表示不能搜素当前网页

None 表示不能搜索当前网页与其链接的网页

<meta name="robots" content="All" />

设置网页说明

属性：name 值：description 内容：中国油漆网--您的油漆专家

<meta name="description" content="中国油漆网--您的油漆专家" />

设置网页的作者

属性: name 值: author 内容: LAMP Brother UI Team

<meta name="author" content="LAMP Brother UI Team" />

设置网页的版权

属性: name 值: copyright 内容: 2012-2014 EDU.

<meta name="copyright" content="2012-2014 EDU." />

设置移动网站

<meta http-equiv="mobile-agent" content="format=html5;url=http://www.xxxxxx.com/mobile/">

<base> 标签

base 元素可规定页面中所有链接的基准 URL。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。

这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

<base href="文件路径" target="目标窗口"/>

必需的属性

href URL 规定页面中所有链接的基准 URL。

target _blank 在何处打开页面中所有的链接。可通过在每个链接中使用 target 属性来覆盖此属性。

_parent

_self

_top

_blank 在一个新的未命名的窗口载入文档

_self 在相同的框架或窗口中载入目标文档

_parent 把文档载入父窗口或包含了超链接引用的框架的框架集

_top 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架

实例:

<base target="_blank"/>

可以将该页面的所有<a>链接的默认属性设置为_blank

<base href="http://www.xxxxxx.com" />

在网页出现的相对链接"test.html"将对应htp://www.xxxxxx.com/test.html的页面

<basefont face="" size="" color=""/>

face属性可以用于设置文字的名称,可以是宋体、隶书、楷体等;

size属性用于设置字号的大小(单位:字号),从 1 到 7 的数字,或h1-h6。浏览器默认值是 3。

color用于设置字体的颜色

div::before{
 content:"我是 before";
 color:red;
}
div::after{
 content:"我是 after";
 color:red;
}

<a href="https://www.google.com" target="_blank">google</a>

a::before{
 content: attr(href);
 color:red;
}
a::after{
 content: attr(target);
 color:green;
}

a::before{
 content: "( " attr(href) " ) < ";
 color:red;
}
a::after{
 content: " > ( " attr(target) " ) ";
 color:green;
}

div::before{
 content:url(图片网址) url(图片网址) url(图片网址);
}

最外层<q>第一层<q>第二层</q><q>第二层<q>第三层</q></q></q>

q{
 quotes: ' < ' ' > ';
}

q{
 quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}

最外层<span>第一层<span>第二层</span><span>第二层<span>第三层</span></span></span>

span{
 quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
span::before{
 content:open-quote;
 color:red;
}
span::after{
 content:close-quote;
 color:#aaa;
}