在页面中，属于图像的标记并不太多，但在页面布局时，功能却非常强大，如图片和图片热点的功能，既丰富了页面的内容，又使内容的布局更加形象和生动，此外，svg标记的引入，使用户通过编写代码制作高分辨率图形的想法成为可能。
技能目标
通过本小节的学习，掌握img>标记的基本使用方法，理解该标记两个必添属性的运用场景和实现方法，可以在页面中通过添加该元素实现图片的展示。
语法格式
img src=’目标/源文件’ alt=’无法显示图片时的替代文本’ />
格式说明
img标记可以向页面中添加一幅图片，通过标记的“src”属性指定图片的来源地址，“alt”属性指定在图片无法显示时，标记区域所显示的文字内容。
案例演示
接下来通过一个简单的案例来演示这个标签使用的方式，需求：使用img>标记加载一幅图片，根据上述功能，新建一个名称为h5_1.html在页面中加入代码。
<!doctype html>
html>
head>
meta charset=“utf-8”>
title>无标题文档
/head>
body>
img width=“150px”
height=“150px”
src=“images/h5.png”
alt=“这是h5图标” />
/body>
/html>
页面文件h5_1.html在chrome浏览器执行后：
案例实践
新建一个页面，添加一个img>标签，通过该标签在页面中显示一张图片，并添加宽度和高度属性及“alt”属性，观察这些属性各种实现的功能。
扩展知识
在页面中，img>标记拥有多个基本的属性，如Id、Name、Class等，但从本质上来讲，页面中并没有通过img>标记嵌入图片，而只是创建了图片占位符的空间，通过图片的物理链接来显示这张图片。
技能目标
掌握figure>标记的使用方法，并理解该标记的应用场景，能够使用该标记制作出包含图片和文字效果的页面。
语法格式
figure />
格式说明
figure标记定义单独包裹图像流内容，此外，在该标记内，还可以通过添加figcaption>标记声明包裹内容的主题信息。
需求：使用figure>标记包裹一个img>标记，通过img>标记加载一幅图片，并添加图片的标题，根据上述功能，新建一个名称为h5_2.html在页面中加入的代码。
<!doctype html>
html>
head>
meta charset=“utf-8”>
title>无标题文档
/head>
body>
figure>
figcaption>图片标题/figcaption>
img src=“images/h5.png”
alt=“无图片时的提示文本”
width=“150px”
height=“150px” />
/figure>
/body>
/html>
页面文件h5_2.html在chrome浏览器执行后
案例实践
新建一个页面，通过figure>标记包括多张图片，并在该标签中添加figcaption>标记，实现图文并茂的页面效果。
扩展知识
figure>是HTML5新增的、专用于包裹图片流的标记，使用它比使用div>包裹图片流更优化，体现在搜索引擎中爬虫的的查找，使用figure>标记更容易被查找到包裹的图片流。
技能目标
掌握map>图像热点标记的基本使用方法，理解map>包裹的area>子标记的运用技巧，能结合img>标记，制作出一个带图像热点效果的页面。
语法格式
map>
area>/area>
/map>
格式说明
实现图像的热点链接，先向map>标记添加“id”属性，用于img>标记中的“usemap”属性对应值，实现两个标记间的绑定；此外，area>标记必须被包裹在map>标记内，通过该元素定义链接时的位置区域，该标记可以是添加多个，实现图片中多个热点的链接。
案例演示
需求：通过map>标记，实现图片中，各个不同区域热点的点击链接效果，根据上述功能，新建一个名称为h5_3.html在页面中加入。
<!doctype html>
html>
head>
meta charset=“utf-8”>
title>无标题文档
/head>
body>
figure>
figcaption>图像热点标记/figcaption>
img src=“images/ex1.png”
alt=“这是一幅方向图片”
usemap=“hotmap” />
/figure>
map id=“hotmap” name=“hotmap”>
area shape=“rect”
coords=“30,50,70,90”
href =“a.html” />
area shape=“rect”
coords=“100,50,140,90”
href =“b.html” />
/map>
/body>
/html>
页面文件h5_3.html在chrome浏览器执行后
案例实践
新建一个页面，在页面中添加一幅中国地图的图片，并在图片中借助map>标记，实现按省份设置图像热点区域的效果。
扩展知识
map>标记中包含了一个非常重要的area>标记，当该标记的“shape”属性值为“rect”时，它的“coords”为对角线的坐标；当该标记的“shape”属性值为“circ”时，它的“coords”为圆心的坐标和半径的值。
更多内容请添加微信：madongweikai，或扫描下方二维码添加
图像标记及属性码动未来教案篇
猜你喜欢
转载自blog.csdn.net/share_tiger/article/details/82886600
今日推荐
周排行