HTML超链接标签
学习目标
超链接介绍
HTML 链接是通过标签 <a></a> 来定义的。HTML 使用超级链接与网络上的另一个文档相连。
超链接语法
超链接的语法：
<a href="" target=""> 文本或图像 </a>
属性的作用如下
| 属性 | 作用 |
|---|---|
| href | 跳转目标 |
| target | 目标窗口的弹出方式 _self表示默认值 _blank表示新窗口 |
超链接的使用方法
超链接使用herf属性访问百度，并以新窗口的模式打开，表明超链接上下链接关系。
<!DOCTYPE html>
<html>
<head>
<title>a超链接</title>
<meta charset="utf-8">
</head>
<body>
<!--网址的跳转-->
<a href="https://www.baidu.com/">点击去百度</a>
<!--窗口的打开方式-->
<a href="https://www.baidu.com/" target="_blank">点击去百度</a>
</body>
</html>
超链接name属性，和id属性效果的演示（注：HTML5不再支持）。
<!DOCTYPE html>
<html>
<head>
<title>a超链接</title>
<meta charset="utf-8">
</head>
<body>
<a name="top"></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/><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/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#top">回到顶部</a>
</body>
</html>
超链接分类
- 外部链接: 例如
<a href="https://www.baidu.com">百度</a>。 - 内部链接:网站内部页面之间的相互链接直接链接内部页面名称即可，例如
< a href="index.html"> 首页 </a >。 - 空链接: 如果当时没有确定链接目标时，
< a href="#"> 首页 </a >。 - 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
- 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
课程总结
绝对路径和相对路径
学习目标
绝对路径
**绝对路径：**是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，“D:\web\img\logo.gif”
或者完整的网络地址img.meituan.net/phoenix/d68…
相对路径
**相对路径：**以引用文件所在位置为参考基础，而建立出的目录路径。
这里简单来说，HTML页面相对于 HTML 页面的位置
| 相对路径 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | ./或省略./ | 文件位于同一级，<a href="login.html"></a> |
| 下一级路径 | / | 文件位于下一级，<a href="html/login.html"></a> |
| 上一级路径 | ../ | 文件位于上一级，<a href="../login.html"></a> |
| 上上级路径 | ../../ | 文件位于上上级，<a href="../../login.html"></a> |
课程总结
HTML图像标签
学习目标
HTML 图像标签介绍
img 元素向网页中嵌入一幅图像，注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
图像标签的语法
图像标签的语法：
<img src="./img.jpg" alt="Logo" width="300px" height="300px" title="logo">
- src属性：规定显示图像的 URL也就是路径地址。
- alt属性：规定图像的替代文本在图像不能加载的时候替代的文字。
- width属性：设置图像的宽度。
- height属性：设置图像的高度。
- title属性：鼠标移动到图片上的提示信息。
图像标签的使用方法
在网页中引入logo并设置宽度高度和替换文字。
<!DOCTYPE html>
<html>
<head>
<title>图像标签</title>
<meta charset="utf-8">
</head>
<body>
<img src="./img.jpg" alt="Logo" width="200px" height="100px">
</body>
</html>
src和href的区别
- src需要等待图片加载完成，在继续加载其他内容。
- href可以一边加载文件，一边加载其他内容。
注：面试易考点。
div标签包裹img标签多出3px问题
在我们使用div标签包裹img标签的时候，在图片的底部就会多出3px。 原因：img元素会默认添加空白符 解决办法：
1.设置div{ font-size: 0}
2.设置img{ display: block}或者{ display: table}
3.设置img{ vertical-align:top;}
推荐第二种方法，让img对象成为块级元素。
