首页 > > 网页制作 > css >

超链接标签、链接地址、锚文本及图片标签

2020-02-29 16:01:59来源：博客园阅读 ()

超链接标签、链接地址、锚文本及图片标签

链接a标签写法:<a href="链接地址" title="" target="_blank">文本</a>如何新建浏览器窗口打开?添加target="_blank"属性,锚文本写法:<a name="br">1</a> <a href="#br">68点击跳转1</a>或者也可以这样写:<a id="br">1</a><a href="#br">68点击跳转1</a>,除此之外，默认的<a href="#">点击返回顶部</a>img图片插入写法<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

点击<a>标签可以链接跳转到其他页面，通常写法<a href="链接地址" title="" target="_blank">文本</a>,其中title=""属性的作用:鼠标滑过链接文字时会显示这个属性的文本内容,只要为文本加入a标签后,文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色）通过css样式可以修改:（a{color:#000});除此之外，<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开怎么办?<a href="目标网址" target="_blank">click here!</a>默认当前窗口打开,把 target="_blank"修改为target="_shelf"(至于a锚文本写法,阅读:HTML基础标签图片文本超链接列表表格介绍)

<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件,写法: <a href="mailto:yy@imooc.com ? cc=xiaoming@imooc.com & bcc=xiaoyu@imooc.com & subject=主题 & body =邮件内容">发送</a>我们还可以利用mailto做许多其它事情.注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔.拓展展示代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>使用mailto在网页中链接Email地址</title>
 7 </head>
 8 <body>
 9     <!-- 邮箱地址/浏览器会自动调用默认的客户端电子邮件程序，并在收件人框中自动填上收件人地址 -->
10     <a href="mailto:yyimooc.com">发送1</a>
11     <!-- 抽送地址/在收件人地址后用cc=地址，可以填写抄送地址 -->
12     <a href="mailto:yy.com?cc=imooc@qq.com">发送2</a>
13     <!-- 密件配送地址/在收件人地址后用bcc=地址，可以填写密件配送地址 -->
14     <a href="mailto:yy@imooc.com?bcc=pp@imooc.com">发送3</a>
15     <!-- 多个收件人、抄送、密件抄送人/用分号隔开多个收件人的地址，可以实现发送给多个收件人的功能 -->
16     <a href="mailto:yy@imooc.com;pp@imooc.com">发送4</a>
17     <!-- 邮件主题/用subject=添加邮件主题 -->
18     <a href="mailto:yy@imooc.com?subject=发送电子邮件">发送5</a>
19     <!-- 邮件内容/用body=添加邮件的内容 -->
20     <a href="mailto:yy@imooc.com?body=hello world">发送6</a>
21 </body>
22 </html>

<img>标签,为网页插入图片:<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">,其中src标识图像的位置;alt:指定图像的描述性文本,当图像不可见时（下载不成功时）,可看到该属性指定的文本;title提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)图像可以是gif,png,jpeg格式

原文链接:https://www.cnblogs.com/dhnblog/p/12384461.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有