链接元素
1、<a> 元素的定义和用法
<a> 标签定义超链接，用于从一个页面链接（跳转）到另一个页面。<a> 元素最重要的属性是 href 属性，它指示链接的目标，或者说是要跳转到的页面/链接。如果 href 属性中没有值，很多属性是不可用的，比如：download, rel, target 等。
2、<a> 元素跳转的目标
| 值 |
作用 |
| _blank |
在新窗口中打开被链接文档 |
| _self |
默认。在当前窗口中打开被链接文档 |
| _parent |
在父框架集中打开被链接文档 |
| _top |
在整个窗口中打开被链接文档 |
| framename |
在指定的框架中打开被链接文档 |
3、<a> 元素实例
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="PHP 系统学习之路之 HTML 基础，a 标签链接元素的使用实例" /> <meta name="keywords" content="PHP 学习, HTML 基础, a 标签, 链接元素" /> <link rel="canonical" href="http://127.0.0.1:5500/0403/a.html" /> <link rel="shortcut icon" href="/images/favicon.jpg" /> <title>链接元素|PHP 系统学习之路之 HTML 基础</title> <style> /****************************************** * 主体内容 ******************************************/ main { display: flex; align-items: center; justify-content: center; align-self: center; min-height: 600px; } /****************************************** * 链接元素 ******************************************/ /* 链接元素样式 */ a.link { display: inherit; color: #666; padding: 8px 20px; border: 1px solid #eee; text-decoration: none; -moz-transition: ease-in-out 0.5s; -webkit-transition: ease-in-out 0.5s; -o-transition: ease-in-out 0.5s; -ms-transition: ease-in-out 0.5s; transition: ease-in-out 0.5s; } /* 链接元素鼠标经过样式 */ a.link:hover { background-color: #ff0000; border-color: #ff0000; color: #ffffff; } </style> </head> <body> <!-- 主体内容 --> <main> <!-- 链接元素 --> <a href="https://salongweb.com" title="链接到萨龙网络" class="link" target="_blank" >链接元素</a > <!-- 链接元素 end --> </main> <!-- 主体内容 end --> </body></html>
