Web开发——HTML基础（HTML中的图像）

1、我们如何在网页上放置图像？

　　注意：元素<img>和 <video>有时被称为替换元素。这是因为元素的内容和大小由外部资源（如图像或视频文件）定义，而不是由元素本身的内容定义。

　　例如：

1 <img src="images/dinosaur.jpg"
2      alt="The head and torso of a dinosaur skeleton;
3           it has a large head with long sharp teeth">

　　举例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Images in HTML</title>
 6     </head>
 7     <body>
 8         <h1>Images in HTML</h1>
 9 
10         <img src="dinosaur.jpg"
11         alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
12         width="400"
13         height="341"
14         title="A T-Rex on display in the Manchester University Museum">
15     </body>
16 </html>

　　输出结果：

1.1 替代文字（alt）

　　我们将看到的下一个属性是alt。它的值应该是图像的文本描述，用于无法查看/显示图像的情况。例如，我们上面的代码可以像这样修改：

1 <img src="images/dinosaur.jpg"
2      alt="The head and torso of a dinosaur skeleton;
3           it has a large head with long sharp teeth">

　　测试alt文本的最简单方法是故意拼错您的文件名。例如，如果我们的图像名称已拼写 dinosooooor.jpg，则浏览器将不显示图像，而是显示替代文字：

1.2 宽度和高度

　　可以使用width和height属性指定图像的宽度和高度。您可以通过多种方式找到图像的宽度和高度。例如，在Mac上，您可以使用Cmd+ I来显示图像文件的信息。回到我们的例子，我们可以这样做：

1 <img src="images/dinosaur.jpg"
2      alt="The head and torso of a dinosaur skeleton;
3           it has a large head with long sharp teeth"
4      width="400"
5      height="341">

　　在正常情况下，这不会对显示器产生太大影响。但是，如果没有显示图像，例如，用户刚刚导航到该页面，并且图像尚未加载，您会注意到浏览器正在为图像留出空间：

Web开发——HTML基础（HTML中的图像）

1、我们如何在网页上放置图像？

1.1 替代文字（alt）

1.2 宽度和高度

猜你喜欢