超链接标签
超链接描述
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