时间：2023-07-06 01:18:01 | 来源：网站运营
时间：2023-07-06 01:18:01 来源：网站运营
在HTML文档中插入图片：上期文章：
在线咨询
<img>，且必须添加src（source）属性，用来插入链接以指向图片，达到插入图片的效果。例如，我链接了位于同一文件夹的示例.jpg这张图片：<img src="示例.jpg" />注意：上面的这个例子中，<img>标签没有内容，因此也可以写成<img src="示例.jpg"></img>，甚至可以忽略尾标签，写成<img src="示例.jpg>，一般来说也不会有问题，因为HTML文档在编写代码时执行的是很宽松的规范，且HTML文档本身的容错能力就非常强大，即使是一个千疮百孔的HTML文档，大多数浏览器都能正常显示，比如下面这个：<!doCtypE html><htMl><BodY>这是一个很糟糕的HTML文档，不过大多数浏览器都会正常显示这句话。当然，作为一个合格的前端工程师，还是要按照W3C发布的HTML推荐标准写代码，因为这样能提高可读性，让所有浏览器正确地理解代码。在不与上述条件冲突的情况下，要力求代码更加简洁，化繁为简，避免浪费用户的带宽，自己看着也更舒服，后期维护也节省时间。像<br>等没有内容的标签，根据XHTML的规定，这种标签也必须按照正确的方法结束。虽然HTML没有XHTML严格，但强烈建议仍然按照XHTML的规定编写代码。例如，上面插入图片的例子还可以写成：<img src="示例.jpg />在结尾打上斜杠「/」，然后打上右尖括号「>」，建议打完标签字母/属性值后隔一个空格再打斜杠。 另外，你还可以写完整的路径：<img src="D:/pictures/示例.jpg" />在之后的文章中，我会详细讲解文件路径的用法。你甚至可以链接到网络上的图片，下面的例子中，我链接到了W3School上的一张图片：<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />alt（替代文本）属性，屏幕阅读器会读出alt的属性值，同时当由于网络质量、指向的文件不存在或文件损坏等因素无法加载图片时，就会显示此属性值，屏幕阅读器也会读出这张图片的替代文本，就像下面这样：alt属性即可：<img src="http://www.w3school.com.cn/i/w3scool_logo_white.gif" alt="来自W3School的图片" />快去试试吧。width属性和height属性，当然也可以用CSS设定：<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8" /> <title>用不同的方法设定图片的大小</title> <style> #ex { width:100; height:100; } </style></head><body> <h1>用不同的方法设定图片的大小</h1> <p>下面是用设定元素的属性来达到效果：</p> <img src="https://www.w3school.com.cn/i/eg_mouse.jpg" width="200" height="200" /> <p>下面是用CSS来达到此效果：</p> <img src="https://www.w3school.com.cn/i/eg_mouse.jpg" id="ex" /> <p>强烈建议使用CSS来达到设定图片大小的效果，因为CSS易于管理和维护。</p></body></html>效果如下图：关键词：图片
