如何在HTML中插入图片

部分 1

部分 1 的 2:插入图片

WH.shared.addScrollLoadItem(‘846e1040d802b3b1587e0021b8d5145a’)

WH.performance.clearMarks(‘image1_rendered’); WH.performance.mark(‘image1_rendered’);{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/e1/Insert-Images-with-HTML-Step-1-Version-6.jpg/v4-460px-Insert-Images-with-HTML-Step-1-Version-6.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/e/e1/Insert-Images-with-HTML-Step-1-Version-6.jpg/v4-728px-Insert-Images-with-HTML-Step-1-Version-6.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
1
上传图片。有很多免费的图片寄存服务网站,如Picasa网络相册、Imgur网站、Flickr相册或相桶网站等等。仔细阅读这些网站的相关条款。有些服务器会削减你的图片质量。有些网站在遇到很多人浏览你的图片时,会因为它占用过多的主机宽带,而撤下你的照片。
有些博客网站允许你使用博客管理工具来上传你的照片。
如果你有付费的网络主机,可以使用FTP服务将照片上传到自己的网络站点。推荐您创建一个“图片”路径来方便整理、留存你的文件。
X
研究来源

如果你想要使用其它网站上的照片,请先询问该网站的创建者,在获得授权后方可使用。如果创建者同意的话,先下载图片,然后再上传到图片寄存网站。
WH.performance.mark(‘step1_rendered’);

WH.shared.addScrollLoadItem(‘3354e1c58ae90fa2aba65a9dbea40ecf’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/7e/Insert-Images-with-HTML-Step-2-Version-6.jpg/v4-460px-Insert-Images-with-HTML-Step-2-Version-6.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/7/7e/Insert-Images-with-HTML-Step-2-Version-6.jpg/v4-728px-Insert-Images-with-HTML-Step-2-Version-6.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
2
打开需要添加图片的网页文档。
如果你想要在论坛中插入一张图片,可以在帖子中直接输入。许多论坛并没有使用HTML来编辑网页,而是使用一种自定义的系统来进行编写。如果方法不适用,请向其它论坛高手寻求帮助。

WH.shared.addScrollLoadItem(‘1455be91b63dfa3ad9508e1c36f36f20’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/ce/Insert-Images-with-HTML-Step-3-Version-6.jpg/v4-460px-Insert-Images-with-HTML-Step-3-Version-6.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/c/ce/Insert-Images-with-HTML-Step-3-Version-6.jpg/v4-728px-Insert-Images-with-HTML-Step-3-Version-6.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
3
以img标签来开头。在网页的主体部分(即HTML的部分)找到你想要插入图片的位置。在这里写下标签。这是一个空标签,创建的是被引用图像的占位空间。同时在HTML中, 标签是没有结束标签的。您需要将插入的图片放在两个尖括号之中。

WH.shared.addScrollLoadItem(‘e1e573bb0a2d0acfd37898df10d86f68’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/f9/Insert-Images-with-HTML-Step-4-Version-6.jpg/v4-460px-Insert-Images-with-HTML-Step-4-Version-6.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/f/f9/Insert-Images-with-HTML-Step-4-Version-6.jpg/v4-728px-Insert-Images-with-HTML-Step-4-Version-6.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
4
找到图片的URL地址。访问存放图片的网页。右键点击图片(Mac电脑中自动点选),然后选择“复制图片网址”。你也可以点击“查看图片”,来在新标签页中单独浏览图片。然后再复制地址栏里的URL地址。
如果你将图片上传到自己网站的图片目录下,可以通过 /images/此处是你的文件名网址来直接链接到图片。如果这个方法没有效果,很可能是因为图片位于其它文件夹路径中。你可以将它先移动到根目录,再进行查找。

WH.shared.addScrollLoadItem(‘929adc814d66ffd8d440e358cbd8fdf4’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/dc/Insert-Images-with-HTML-Step-5-Version-5.jpg/v4-460px-Insert-Images-with-HTML-Step-5-Version-5.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/d/dc/Insert-Images-with-HTML-Step-5-Version-5.jpg/v4-728px-Insert-Images-with-HTML-Step-5-Version-5.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
5
将URL地址放到“src”属性中。正如你所知道的那样,HTML属性通过标签来修饰元素,为HTML 元素提供附加信息。src 属性是“来源”的缩写,会告诉浏览器去哪里能查找到图片。写下src=” “,将图片的URL地址粘贴到引号之中。例如:

WH.shared.addScrollLoadItem(‘795a7b41449f5d705c4c1b4494d807f9’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/55/Insert-Images-with-HTML-Step-6-Version-4.jpg/v4-460px-Insert-Images-with-HTML-Step-6-Version-4.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/5/55/Insert-Images-with-HTML-Step-6-Version-4.jpg/v4-728px-Insert-Images-with-HTML-Step-6-Version-4.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
6
添加“alt”属性。从技术层面讲,你的HTML文件已经具备了显示图片的所有元素了。不过,最好添加上alt属性。这会在图片加载失败时以文字形式来显示图片内容。更重要的是,这能帮助搜索引擎了解图片内容,并让屏幕阅读器向视力受损的盲人访客描述图片的内容。[2]
X
研究来源

按照上述例子,将引号内容的文本更改为:
my dog eating a tangerine(我的狗狗在吃橘子)
如果图片的内容并不重要,可以不在“alt”属性中添加任何文本。如alt=””。[3]
X
研究来源

WH.shared.addScrollLoadItem(‘7594044b44ed0c8d6807f62b50ff33dc’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/ad/Insert-Images-with-HTML-Step-7-Version-3.jpg/v4-460px-Insert-Images-with-HTML-Step-7-Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/a/ad/Insert-Images-with-HTML-Step-7-Version-3.jpg/v4-728px-Insert-Images-with-HTML-Step-7-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
7
保存更改。将HTML文件保存到你的网站。访问你刚刚编辑好的页面,如果你已经打开了网页,请再次刷新一下。此时你应该能看到添加的图片了。如果图片大小不合适或你不满意图片效果,可以按照第二部分的方法进行调整。

WH.ads.addBodyAd(‘method_ad_1’)
WH.ads.addBodyAd(‘mobilemethod_ad_1’)广告

部分 2

部分 2 的 2:可选的调整

WH.shared.addScrollLoadItem(‘f6a623917a3cfeb583ee2c2fb8df6cbd’)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/06/Insert-Images-with-HTML-Step-8-Version-3.jpg/v4-460px-Insert-Images-with-HTML-Step-8-Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/0/06/Insert-Images-with-HTML-Step-8-Version-3.jpg/v4-728px-Insert-Images-with-HTML-Step-8-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
1
更改图片大小。如果想要达到最好的显示效果,请使用免费的编辑软件来调整图片大小。调整后再上传新版本图片。也可以使用HTML代码设置宽度 和高度,来让浏览器缩小或扩大图片。不过这会导致各个浏览器显示效果不一致,有时还会导致显示错误。[4]
X
研究来源

如果你想快速调整图片,可以使用以下格式:

display this(显示这个) (像素数,或在HTML5中更适合移动端的“CSS 像素”)。[5]
X
研究来源

[6]
X
研究来源

或者, (网页维度百分比,或是包含图像的HTML元素的百分比)。

如果你只输入一个属性(宽度或高度),那么浏览器会保留图片的原始宽高比,并按此比例进行显示。

WH.shared.addScrollLoadItem(’35e62e8ce0ace42d059fba6f0d7c8608′)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/37/Insert-Images-with-HTML-Step-9-Version-3.jpg/v4-460px-Insert-Images-with-HTML-Step-9-Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/3/37/Insert-Images-with-HTML-Step-9-Version-3.jpg/v4-728px-Insert-Images-with-HTML-Step-9-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”

“}
2
添加提示信息。标题 属性可用于为图片添加额外的评论和信息。例如,你可以在这里指明图片的作者。在大多数情况下,当访客将光标悬停在图片上时,就会显示标题文本内容。

WH.shared.addScrollLoadItem(’90b9c51085f32c14c8da51b304b114c9′)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/38/Insert-Images-with-HTML-Part-2-Step-3.jpg/460px-Insert-Images-with-HTML-Part-2-Step-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/3/38/Insert-Images-with-HTML-Part-2-Step-3.jpg/728px-Insert-Images-with-HTML-Part-2-Step-3.jpg”,”smallWidth”:460,”smallHeight”:316,”bigWidth”:728,”bigHeight”:500,”licensing”:”

“}
3
创建为链接。如果想要将图片创建为一个链接,可以将图片标签插入 超链接标签中。例如:

WH.ads.addBodyAd(‘mobilemethod_ad_2’)广告

发表评论

您的电子邮箱地址不会被公开。