[TOC]
# 案例1:路径编写
![](https://img.kancloud.cn/a9/7b/a97b4c78cf23b0923456200a4fb36b86_438x514.png)
![](https://img.kancloud.cn/03/a9/03a9edf782634758897513d23036e48b_1237x299.png)
# 案例2:超链接到百度
```
<a href="" target="" title="" name="" >链接文本</a>
```
![](https://img.kancloud.cn/e2/aa/e2aa373e0e200994f9ae5f8eee73f97d_555x377.gif)
# 案例3:在新标签页中打开百度
![](https://img.kancloud.cn/00/6c/006cb1ba2e0021d4c49bf4d2c287ad62_806x465.gif)
## 发送邮件
```
<a href="mailto:lanquanxiang@gmail.com">联系我们</a>
```
## 脚本链接
```
<a href="javascript:fun()">执行脚本</a>
```
# 案例4:链接到特定行
![](https://img.kancloud.cn/0b/45/0b45683e674945b9c1b521e2ab0127ed_294x233.gif)
```
<a name="a92"><p>这是第92行</p>
<a href="#a92">链接到92行</a>
```
或
`<p id="a92">这是第92行</p>`
# 案例5:在网页中添加图片
```
<img src="" width="" height="" title="" alt=""/>
```
1. 正常链接图片
2. 宽50px
3. 高300px
4. 宽50px、高300px
5. 图片悬停提示
6. 图片加载失败提示
![](https://img.kancloud.cn/6b/41/6b4129b4c8820a5b29dd11e80f6a1470_774x319.png)
> 图片加载失败的时候可能需要手动停止浏览器加载资源
## 试一试
> 1. 使用绝对路径链接图片
> 2. 使用路径链接图片
> 3. 使用相对服务器路径链接图片
- 目录
- 1课程介绍
- 2HTML
- 2.1概述
- 2.2常用标签
- 2.3列表标记
- 2.4超链接与图
- 2.5表格
- 2.6表单
- 2.7frameset
- 3CSS
- 3.1样式表
- 3.2选择器
- 3.3样式
- 3.4浮动和定位
- 3.5布局案例
- 3.6CSS3
- 3.7选修
- 4JavaScript
- 4.1JavaScript基础
- 4.2JavaScript变量及函数
- 4.3JavaScript常见对象及操作
- 4.4JavaScript操作DOM&BOM
- 4.5JavaScript事件响应
- 5Ajax
- 5.1Ajax基础
- 5.2Ajax&XML
- 5.3Ajax&JSON
- 6HTML5
- 6.1新标签及媒体
- 6.2Canvas绘图
- 7jQuery
- 7.1jQuery&DOM
- 7.2jQuery&Ajax
- 7.3jQuery动画