<a> 标签及其属性的使用

定义:

<a> 标签定义超链接,用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性,它指定链接的目标。

特点:

在所有浏览器中,链接的默认外观如下:

未被访问的链接带有下划线而且是蓝色的

已被访问的链接带有下划线而且是紫色的

活动链接带有下划线而且是红色的

(css去除下划线可以使用text-decoration:none,

改变a标签里的文字颜色可以设置color:black。)

  a {

            text-decoration: none;

            color: black;

        }

(1)herf属性

用于指定超链接目标的 URL。

如果 href 属性没有被指定链接,<a> 标签将不是一个链接。

 

注意:如果没有使用 href 属性,则不能使用 hreflang、media、rel、target 以及 type 属性。

提示:通常在当前浏览器窗口中显示被链接页面,除非规定了其他 target。

2target属性:

规定在何处打开目标 URL。仅在 href 属性存在时使用。

元素最重要的属性是 href 属性,它指示链接的目标。

a标签的跳转方式有五种: 写法为

_blank表示跳到新页面打开,打开一个新窗口

_self表示当前页面打开链接

_parent表示在父集框架中打开

_top表示在整个窗口中打开

framename表示在指定的框架中打开

(3)下载图片

download 属性定义了下载链接的地址。

href 属性必须在 <a> 标签中指定。

属性同样可以指定下载文件的名称。文件名称没有限定值,浏览器会自动在文件名称末尾添加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)。

<a class="example1" href="images/flower.png" download="images/flower.png">

        <img src="images/flower.png" alt="flower">

    </a>

4锚点:

设置herf=#id名称,将跳转至id名称那个段落

<style>

        a {

            text-decoration: none;

            color: black;

        }

    </style>

</head>

<body>

    <a class="example1" href="images/flower.png" download="images/flower.png">

        <img src="images/flower.png" alt="flower">

    </a>

    <a href="#flower">跳到最后一段文字</a>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p>送你一朵小红花</p>

    <p id="flower">送你一朵小红花</p>

  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="expires" content="0"> <meta http-equiv="refresh" content="60"> <meta name="keywords" content="王勃,唐代,诗人"> <meta name="robots" content="index,follow"> <title>王勃及其名诗</title> </head> <body> <header> <h1>王勃及其名诗</h1> <nav> <ul> <li><a href="#introduction">简介</a></li> <li><a href="#poems">代表作</a></li> <li><a href="#conclusion">结论</a></li> </ul> </nav> </header> <section id="introduction"> <h2>简介</h2> <p>王勃(650年-676年),字子安,唐代初期著名的文学家和政治家。其诗歌以豪放派为主,代表作有《滕王阁序》、《秋风词》等。</p> <blockquote> <p>凌波不过横塘路,但目送,芳尘去。锦瑟华年谁与度?月桥花院,琐窗朱户,只有春知处。</p> <footer> <cite>《秋风词》</cite> </footer> </blockquote> </section> <section id="poems"> <h2>代表作</h2> <article> <h3>《滕王阁序》</h3> <p>始建于唐太宗贞观元年(627年),是一座历史悠久的楼阁,位于江苏扬州市广陵区瘦西湖畔。</p> <img src="tengwangge.jpg" alt="滕王阁" usemap="#tengwangge-map"> <map name="tengwangge-map"> <area shape="rect" coords="0,0,100,100" href="https://baike.baidu.com/item/%E6%BB%95%E7%8E%8B%E9%98%81" target="_blank" alt="滕王阁百度百科"> </map> </article> <article> <h3>《秋风词》</h3> <audio src="qiu_feng_ci.mp3" controls>您的浏览器不支持 HTML5 音频元素。</audio> <video src="qiu_feng_ci.mp4" controls>您的浏览器不支持 HTML5 视频元素。</video> <ol> <li>凌波不过横塘路</li> <li>但目送,芳尘去</li> <li>锦瑟华年谁与度</li> <li>月桥花院,琐窗朱户</li> <li>只有春知处</li> </ol> </article> </section> <section id="conclusion"> <h2>结论</h2> <table> <thead> <tr> <th>作品</th> <th>类型</th> <th>评价</th> </tr> </thead> <tbody> <tr> <td>《滕王阁序》</td> <td>散文</td> <td>被誉为“千古文章”,是中国文学史上的经典之作。</td> </tr> <tr> <td>《秋风词》</td> <td>词</td> <td>王勃的词作中,这首《秋风词》被人们传颂最为广泛。</td> </tr> </tbody> </table> <form action="#" method="post" target="_blank" enctype="multipart/form-data"> <fieldset> <legend>留言板</legend> <label for="name">姓名:</label> <input type="text" id="name" name="name" required placeholder="请输入您的姓名"><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required placeholder="请输入您的邮箱"><br> <label for="message">留言:</label> <textarea id="message" name="message" rows="4" cols="40" required placeholder="请输入您的留言"></textarea><br> <input type="submit" value="提交"> </fieldset> </form> <button onclick="alert('感谢您的阅读!')">点个赞吧</button> <canvas id="myCanvas" width="300" height="150"> 您的浏览器不支持 HTML5 画布元素。 </canvas> <style> #myCanvas { border: 1px solid black; } </style> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); </script> <address> 联系我们:北京市海淀区中关村大街1号<br> 电话:010-12345678<br> <a href="mailto:wangbo@example.com">wangbo@example.com</a> </address> <footer> <p>版权所有 © 2021 王勃</p> </footer> </section> </body> </html>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值