HTML _ HTML 图像

HTML 图像

<img src="https://logo.zhuanfou.com/zhuanfou-logo.png" alt="zhuanfou-logo">

运行一下

在HTML页面中插入图像可以使页面更加丰富美观。

HTML 图像元素的句法

使用<img>元素来定义HTML图像元素。HTML图像是空元素，只需要使用<img>这个起始标签即可，不需要闭合标签。

图像源文件地址通过属性src来设置。

<img src="图像的url地址">

HTML 图像元素的alt属性

alt属性是用来定义图像元素的可替换文本（alternative text），所谓的可替换文本即图片加载失败情况下所显示的文本。图片加载失败的原因不只一种，图片不存在也会导致加载失败，alt属性就是在这些图片加载失败的情况下有用。此外，alt属性也起到了对图片内容的描述作用，让搜索引擎更加理解图片的内容。

<img src="图像的url地址" alt="该图片不存在">

运行一下

设置 HTML 图像元素的大小

有两种方式设置 HTML 图像元素的大小：

通过 width 和 height 属性进行设置；（width代表宽度、 height代表长度）
以 CSS 的方式对图像的长宽进行设置。

<!-- width height 的方式设置图像长宽 -->
<img src="图像的url地址" width="98" height="36">

<hr>

<!-- 以 CSS 的方式设置图像长宽 -->
<img src="图像的url地址" style="width:98px;height:36px;">

运行一下

HTML 图像元素长宽的单位

HTML 图像元素的长宽的单位有两种：

以 px 为单位，即像素大小；
以百分比为单位。

<!-- 以 px 像素大小 为单位 -->
<img src="图像的url地址" style="width:98px;">

<hr>

<!-- 以 百分百 为单位 -->
<img src="图像的url地址" style="width:27%;">

运行一下

Map元素（HTML图像映射）

<map>标签定义的map元素是基于某个指定的图像，基于该图像而形成映射链接索引；讲白点，map元素会定义出该图像元素可供点击的区域，每个可供点击区域都是一个超链接。如下例所示。

<!-- 图像元素 -->
<img src="图像的url地址" 
     width="419" height="154" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="0,0,260,154" alt="文字部分" 
        href="https://zhuanfou.com">
  <area shape="circle" coords="338,77,75" alt="图形部分" 
        href="https://sand-box.cn">
</map>

运行一下

背景图片

CSS中的background-image特性可以用来定义元素的背景图片。

background-image:url('图像的url地址');

运行一下

picture 元素

picture元素非常灵活，有助于创建自适应网页，以兼容更多设备的屏幕大小。

在picture元素内，会存在若干source元素。每一个source元素即代表一张特定的源图片，特定的源图片会被在指定的某情况下展示，从而使图片更加适应不同大小的视窗。

picture元素内的source元素的优先级是从上往下，一旦是指定触发情况的source元素，浏览器即会显示该source元素，而之后的source元素等（包括img元素）就不会被显示了。

<h1>专否提示：变动浏览器的宽度看效果！</h1>
<picture>
  <source media="(min-width: 700px)" srcset="图像1的url地址">
  <source media="(min-width: 500px)" srcset="图像2的url地址">
  <img src="图像3的url地址" style="width:auto;">
</picture>

运行一下

HTML 图像

推广