HTML 超链接标签、图片标签

超链接标签


超链接描述

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

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

<a href="url">
   链接文本
</a>

<a>
  你好
</a>

<a>
大家好么?
</a>

<a>
   <img src="" alt="">
</a>

可以看到a标签里面可以是词文任意的内容,只要放进来就可以实现跳转。

超链接表现

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

超链接属性

href的超链接要写完整的url,带上http https。

在标签<a>中使用了href属性来描述链接的地址默认情况下,链接将以以下形式出现在浏览器中:

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

特别提示:后期我们会通过CSS样式修改掉这些效果

  • 超链接标签:
  • 属性描述 

超链接就是用来跳转到路径上面。herf是和a标签一起使用的,超链接一般都是使用a标签的,href只是标签a里面的一个属性。

本窗口跳转是一种方式,打开新窗口也是一种方式,打开新窗口用的更加多。

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

<body>
    <a href="http://www.aliangedu.cn/" target="_blank">访问阿良教育!</a>
    <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>

    <a name="tips">基本的注意事项 - 有用的提示</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a href="#tips">有用的提示</a>
</body>

</html>

如果a标签里面设置name属性,那么#name名称,那么相当于瞄点。

图片标签


网站中最多的元素毋庸置疑,一定是图片simg>标签定义HTML页面中的图像

<img src="" alt="" title="" width="" height="">

图片标签:<img src="图片文件路径" alt="图片提示"/>    img是单标签,不是一对的,一般只指定width宽度,避免图片拉伸。

属性:

  • src:路径(图片地址与名字)
  • alt:规定图像的替代文本
  • width:规定图像的宽度
  • height:规定图像的高度
  • title:鼠标悬停在图片上给予提示
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>image</title>
</head>

<body>
    <img src="test.jpg" alt="boat加载失败"  width="500px" height="500px" />
    <img src="https://k8s-1252881505.cos.ap-beijing.myqcloud.com/www/images/study.jpg" width="500px" height="500px"/>
</body>

</html>

图片路径详解

  • 绝对路径
  • 相对路径
  • 网络路径
  • 绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

E:\itbaizhancode\1.jpg
<img src="E:\itbaizhancode\1.jpg">

相对路径

两者相对关系,两者在同一路径下可以直接访问

  • 子级关系 /
  • 父级关系 ../
  • 同级关系 ./
 <img src="./vues/off.jpg" alt="加载失败" width="100px" title="xxx">

网络路径

具体的网络地址:http://iwenwiki.com/api/newworld/images/n1.png

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值