【HTML/CSS/JavaScript】HTML图片（3）

阿斯卡码

已于 2024-01-26 20:37:01 修改

阅读量97

点赞数

分类专栏：课程作业文章标签： html html5 css

于 2021-10-05 13:26:34 首次发布

本文链接：https://blog.csdn.net/qq_52384627/article/details/120612667

版权

课程作业专栏收录该内容

33 篇文章 3 订阅

订阅专栏

1.img

属性	值	描述
alt	text	指定图像的替代文本。
src	URL	指定显示图像的 URL。
width	px(pixels)、%	设置图像的宽度（像素或百分比）。
height	px(pixels)、%	定义图像的高度（像素或百分比）。
border	px	图片边框
align	水平、垂直	设置图片对其方式
hspace	px	图片水平间距
vspace	px	图片垂直间距
ismap	URL	将图像定义为服务器端图像映射。
longdesc	URL	指定包含长的图像描述文档的 URL。
usemap	URL	将图像定义为客户器端图像映射。

align相关

top
middle
bottom
left
center
right

2.area和map在img中的作用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>

<img src="../../10.360浏览器/0106315710bccd32f8758c9bf0ddcd.jpg@1280w_1l_2o_100sh.jpg" alt="alt加载错误" title="title游戏图标" width="300" usemap="#热区映射" >
<map name="热区映射">
  <area shape="rect" coords="143,3,298,143" href="https://blog.csdn.net/" target="_blank">
  <area shape="circle" coords="224,240,61" href="https://blog.csdn.net/mochu7777777/article/details/120576924?utm_medium=distribute.pc_feed.none-task-blog-hot-7.nonecase&depth_1-utm_source=distribute.pc_feed.none-task-blog-hot-7.nonecase" target="_blank">
</map>
</body>
</html>

3.figure和 figcaption的用处（不熟悉）

1.figure 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素代表一段独立的内容, 经常与说明 figcaption 元素配合使用, 并且作为一个独立的引用单元。
2.figcaption标签为 figure 元素定义标题。
figcaption 元素应该被置于 figure 元素的第一个或最后一个子元素的位置

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<body>
    <figure>
       <img src="../img/logo.png"  alt="鱼C-Logo" />
       <figcaption>鱼C工作室，让自学编程变得妙不可言｡◕‿◕｡</figcaption>
    </figure>
</body>
</html>

4.picture（不熟悉）

picture标签为其内部特定的 img 元素提供多样的 source 元素。

picture 元素是一个容器（尚处于实验阶段），浏览器会根据当前页面（即图片所在的盒子的容器）的布局以及当前浏览的设备（比如普通的屏幕和高清屏幕）去从中选择最合适的资源。

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<body>
    <picture>
        <source srcset="fishc-logo-wide.png" media="(min-width: 600px)">
        <img src="../img/logo.png"  alt="鱼C-Logo" />
    </picture>
</body>
</html>

阿斯卡码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【HTML/CSS/JavaScript】HTML图片（3）

1.img属性值描述alttext指定图像的替代文本。srcURL指定显示图像的 URL。widthpx(pixels)、%设置图像的宽度（像素或百分比）。heightpx(pixels)、%定义图像的高度（像素或百分比）。borderpx图片边框align水平、垂直设置图片对其方式hspacepx图片水平间距vspacepx图片垂直间距ismapURL将图像定义为服务器端图像映射。longde
复制链接

扫一扫