HTML中的href属性：掌握超链接技巧，提升网站用户体验

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

基本使用方法

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

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

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

绝对路径与相对路径

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

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

外部链接与内部链接

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

使用target属性

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

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

使用rel属性

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

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

访问性和 SEO 优化

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

使用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 表示不能搜索当前网页与其链接的网页

设置网页说明

属性：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用于设置字体的颜色

TML<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>
<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="tom">

每30秒钟刷新当前页面:

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

HTML <script> 元素

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!"：

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

HTML<noscript> 标签

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

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

<script>
document.write("Hello World!")
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。</p>
 
</body>
</html>

JavaScript事件响应:

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

<h1>我的第一个 JavaScript </h1>

<p id="demo">
JavaScript 可以触发事件，就像按钮点击。</p>

<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">点我</button>

</body>
</html>

HTML 脚本标签

标签	描述
<script>	定义了客户端脚本
<noscript>	定义了不支持脚本浏览器输出的文本

HTML链接

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title> 
</head>
<body>
<p><a href="//www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>

HTML head 元素

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