链接元素

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>

批改老师：

天蓬老师

批改状态：合格

老师批语：写得不错

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML 基础之链接元素

2020-04-04 08:53:24

链接元素

1、<a> 元素的定义和用法

2、<a> 元素跳转的目标

3、<a> 元素实例

1、`<a>` 元素的定义和用法

2、`<a>` 元素跳转的目标

3、`<a>` 元素实例