【html学习笔记11】-图片

2023-08-24 本文已影响0人兔小小

图片可以改善网页的设计和外观。

语法：

<img src="url" alt="alternatetext">

从技术上讲，<img>图像不会插入到网页中;图片链接到网络。<img>标签仅包含属性，不包含结束标记。<img>标签有两个必需项

src - 指定映像的路径
alt - 指定图像的替换文本

例如

<img src="pic_trulli.jpg" alt="Italian Trulli">

src 属性

src属性指定图像的路径（URL）。当网页加载时，它在浏览器从 Web 服务器获取图像时将其插入页面。因此，请确保图像实际上保持在相关的位置可以链接到网页，否则访问者将获得一个破碎的链接图标。如果浏览器找不到图像，则会显示alt链接的图标和文本。

alt 属性

alt属性为图像提供替换文本，如果用户由于某些原因无法查看它（由于连接速度慢，src中的错误属性等）。例子见上一张图片。

图片尺寸 - 宽度和高度

可以使用style属性指定宽度和图像的高度。

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

也可以使用属性：width和height

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

建议使用style属性。它可以防止样式表更改图片大小：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

另一个文件夹中的图片

如果图片位于子文件夹中，则必须包含该文件夹src属性中的名称：

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

其他服务器/网站上的图

某些网站指向另一台服务器上的图片。若要指向另一台服务器上的图片，src属性必须指定绝对网址路径：

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

(外部图片可能涉及版权的问题)

动画图像

HTML 允许动画 GIF：

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

图像作为链接

要将图片用作链接，请将<img>标签放在<a>标签内：

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

图片浮动

使用 CSS float属性让图像浮动到文本的右侧或左侧：

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

图像映射

好玩的东西，详细查看：图像映射 (w3schools.com)

图像映射背后的想法是，您应该能够执行不同的操作取决于您在图像中单击的位置。要创建图像映射，您需要一个图像，以及一些描述可点击区域的HTML代码。

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

网页背景图片

可以为几乎任何 HTML 元素指定背景图像。若要在 HTML 元素上添加背景图像，使用 HTML 属性和 CSS 属性：style background-image

<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<p>A background image for a p element:</p>

<p style="background-image: url('img_girl.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>

</body>
</html>

还可以在元素中指定背景图像，在以下部分中：<style>和<head>

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url('img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>

</body>
</html>

页面上的背景图片

<style> body { background-image: url('img_girl.jpg'); } </style>

背景重复

如果背景图像小于元素，图像将重复，水平和垂直，直到到达元素的末尾：

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

若要避免背景图像重复自身，请设置属性。background-repeatno-repeat

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

背景封面

如果希望背景图像覆盖整个元素，可以将属性设置为background-size cover.此外，若要确保始终覆盖整个元素，请将该属性设置为background-attachment fixed:

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

这样，背景图像将覆盖整个元素，没有拉伸（图像将保持其原始比例）：

背景拉伸

如果希望背景图像拉伸以适合整个元素，则可以将属性background-size设置为：100% 。尝试调整浏览器窗口的大小，将看到图像将拉伸，但始终覆盖整个元素。

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

HTML <picture> 元素

HTML 元素允许您显示不同的图片不同的设备或屏幕尺寸。

HTML 元素<picture>提供 web 开发人员在以下方面具有更大的灵活性，指定图像资源。元素包含一个或更多元素，

每个元素<picture>都引用通过<source> srcset属性链接到不同的图像。这样浏览器就可以选择最好的图像来适应当前视图设备。

每个元素都有一个属性，<source>media用于定义图像何时为最合适。

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

变换显示的分辨率会发现不同图片的显示。

注意：始终将一个元素指定为该元素的最后一个子元素。该元素由不支持该元素的浏览器使用，或者如果没有匹配的标记<img> ＜picture＞＜img＞＜picture> ＜source＞

使用场景：

如果屏幕或设备较小，则无需加载大型图像文件。浏览器将使用具有匹配属性值<source>的第一个元素，并忽略以下任何元素。
某些浏览器或设备可能不支持所有图像格式。通过使用<picture>元素，可以添加所有图像格式，浏览器将使用它识别的第一种格式，并忽略任何的剩余元素。

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>