img元素位于Figure元素中

html5 推荐方式

<figure>
    <img src="img/02/HTML5_sticker.png" alt="html5 sticker" width="600">
    <figcaption>html5 is coming</figcaption>
</figure>

绝对地址与相对地址

<!-- 绝对地址 -->
<img src="file:///E:/zptcsoft.github.io/ppt/img/09/url.png" alt="">
<img src="http://zptc.github.io/ppt/img/09/url.png" alt="">
<img src="//zptc.github.io/ppt/img/09/url.png" alt=""> 

<!-- 相对地址 -->
<img src="img/09/url.png" alt="">
<img src="./img/09/url.png" alt="">

<!-- 资源地址相对地址、绝对地址均可。
     可以使用http协议、https协议，但不能采用file协议。 
     建议采用省略协议的方式
        <img src="//zptc.github.io/ppt/img/09/url.png" alt="">     
-->

HTML链接

演讲者：前端开发课程组

内容提纲

普通连接
页内连接
热区链接

元素概述

链接元素 a

类型	取值
分类	流内容-Flow content 短句内容-Phrasing content 交互内容-Interactive content 可感知内容-Palpable content
元素上下文	短句内容
内容模型	透明，不能有交互内容的子元素
属性	全局属性 href属性 - 链接地址,建议省略协议 target属性 - 链接打开方式 download属性 - 链接用于下载 rel属性 - 链接对象和链接所在文档之间的关系 hreflang属性 - 链接资源所用语言 type属性- 被链接文档的的 MIME 类型

普通链接

<!-- 普通链接，建议url采用无协议方式 -->
<a href="//github.com/zptcsoft/zptcsoft.github.io/">zptcsoft</a>
<!-- 普通链接，url中使用参数传递 -->
<a href="//www.baidu.com/s?wd=html5">百度搜索html5</a>
<a href="//wenku.baidu.com/search?word=html5">百度文库搜索html5</a>
<!-- 普通链接，url中使用页内锚记 -->
<a href="//baike.baidu.com/view/951383.htm#2">html5百科</a>
<!-- 给图片添加链接 -->
<a href="//www.baidu.com/s?wd=logo"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt=""></a>

<!-- 邮件链接（使用邮件客户端），href属性使用mailto: -->
<a href="mailto:20338808@qq.com?subject=Hello%20again">给miracaly打个招呼</a>

zptcsoft 百度搜索html5 百度文库搜索html5 html5百科给miracaly打个招呼

target属性

取值	含义
_blank	在新窗口打开链接
_self	默认取值，链接所在文件相同位置打开链接
_parent	在父窗口打开链接
_blank	清除所有框架，在整个浏览器中打开链接
框架名	在相应的框架中打开链接

target属性示例

<!-- 不设置target，链接所在文件相同位置打开链接 -->
<a href="//www.baidu.com/s?wd=BestAce">BestAce</a> 
<!-- target="_self"，链接所在文件相同位置打开链接 -->
<a href="//www.baidu.com/s?wd=BestAce" target="_self">BestAce</a> 
<!-- target="_blank"，新窗口中打开链接 -->
<a href="//www.baidu.com/s?wd=BestAce" target="_blank">BestAce</a>
<!-- target="_parent"，链接所在文件的父元素中打开链接 -->
<a href="//www.baidu.com/s?wd=BestAce" target="_parent">BestAce</a>
<!-- target="_top"，链接所在文件的顶端窗口(也即整个浏览器窗口)中打开链接 -->
<a href="//www.baidu.com/s?wd=BestAce" target="_top">BestAce</a>

实例文件 target打开方式详细情况

链接到非网页文件

<!-- 链接到图片 -->
<a href="//www.baidu.com/img/baidu_jgylogo3.gif" target="_blank">image</a>
<!-- 链接到pdf -->
<a href="//zptcsoft.github.io/pdf/samp.pdf" target="_blank">pdf</a>
<!-- 链接到txt -->
<a href="/img/10/hello.txt" target="_blank">txt</a>

<!-- 链接到doc -->
<a href="/img/10/samp.doc" target="_blank">doc</a>
<!-- 链接到wav -->
<a href="/img/10/samp.wav" target="_blank">wav</a>
<!-- 链接到rar -->
<a href="/img/10/samp.rar" target="_blank">rar</a>

image pdf txt doc wav rar

download属性

<!-- 链接到图片 -->
<a href="//www.baidu.com/img/baidu_jgylogo3.gif" download="true">image</a>
<!-- 链接到pdf -->
<a href="//zptcsoft.github.io/pdf/samp.pdf" download="true">pdf</a>
<!-- 链接到txt -->
<a href="/img/10/hello.txt"  download="true">txt</a>

image pdf txt

页内链接

实现一个网页内部的链接，例如目录等。

实现步骤

<!-- 1. 定义目标锚记 -->
<a id="top"></a>
<!-- 2. 定义跳转链接 -->
<a href="#top">回顶部</a>

案例演示

热区链接

在图片的不同区域设置链接

map元素

类型	取值
分类	流内容-Flow content 短句内容-Phrasing content 可感知内容-Palpable content
元素上下文	期望出现短句内容的地方
内容模型	透明
属性	全局属性 name属性 - 图像地图名称，以便img的usemap属性调用

area 元素

类型	取值
分类	流内容-Flow content 短句内容-Phrasing content
元素上下文	map或者template
内容模型	空，空元素，没有结束标签
属性	全局属性 shape属性 - 热区形状 coords属性 - 定义热区形状的坐标 href属性 - 链接地址,建议省略协议 target属性 - 链接打开方式 download属性 - 链接用于下载 rel属性 - 链接对象和链接所在文档之间的关系 hreflang属性 - 链接资源所用语言 type属性- 被链接文档的的 MIME 类型

热区链接语法

<!-- 语法格式 -->
<img src ="图像文件地址" usemap ="#映射图像名称">

<map name="映射图像名称">
    <!-- rect, (x1,y1)、(x2,y2)分别为左上角和右下角坐标 -->
    <area shape="rect" coords="x1,y1,x2,y2" href="链接地址" alt="">
    <!-- circle, (x,y)为圆心坐标，r为半径 -->
    <area shape="circle" coords="x,y,r" href="链接地址" alt="">
    <!-- poly,  (x1,y1)、(x2,y2)、(x3,y3)……分别为顶点坐标  --> 
    <area shape="poly" coords="x1,y1,x2,y2,x3,y3,……" href="" alt="">
</map>

热区链接示例

<!-- 使用案例 -->
<img src="/img/10/pic.png" usemap="#myMap">
<map name="myMap">
    <area shape="rect" coords="50,50,100,100"> <!-- the hole in the red box -->
    <area shape="rect" coords="25,25,125,125" href="//www.baidu.com/s?wd=red">
    <area shape="circle" coords="200,75,50" href="//www.baidu.com/s?wd=green">
    <area shape="poly" coords="325,25,262,125,388,125" href="//www.baidu.com/s?wd=blue" >
    <area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" 
    href="//www.baidu.com/s?wd=yellow">
</map>

img元素位于Figure元素中

绝对地址与相对地址

HTML链接

演讲者：前端开发课程组

内容提纲

元素概述

链接元素 a

普通链接

target属性

target属性示例

链接到非网页文件

download属性

页内链接

实现步骤

案例演示

热区链接

map元素

area 元素

热区链接语法

热区链接示例

前端开发

旨为前端开发工程师的前端开发基础课程