下载PDF文件
下载PDF文件
在网站或社交网站的个人资料页中添加图片是美化网页的绝佳方式。要实现这一操作，你需要借助于添加图片的超链接代码。编写代码插入图片并不是很困难，这也成为了网页开发新手必学的第一堂课。
步骤
-
上传图片。 有很多免费的图片寄存服务网站，如Picasa网络相册、Imgur网站、Flickr相册或相桶网站等等。仔细阅读这些网站的相关条款。有些服务器会削减你的图片质量。有些网站在遇到很多人浏览你的图片时，会因为它占用过多的主机宽带，而撤下你的照片。
- 有些博客网站允许你使用博客管理工具来上传你的照片。
- 如果你有付费的网络主机，可以使用FTP服务将照片上传到自己的网络站点。推荐您创建一个“图片”路径来方便整理、留存你的文件。 [1] X 研究来源
- 如果你想要使用其它网站上的照片，请先询问该网站的创建者，在获得授权后方可使用。如果创建者同意的话，先下载图片，然后再上传到图片寄存网站。
-
打开需要添加图片的网页文档。
- 如果你想要在论坛中插入一张图片，可以在帖子中直接输入。许多论坛并没有使用HTML来编辑网页，而是使用一种自定义的系统来进行编写。如果方法不适用，请向其它论坛高手寻求帮助。
-
以img标签来开头。 在网页的主体部分（即HTML的<body>部分）找到你想要插入图片的位置。在这里写下<img>标签。这是一个空标签，创建的是被引用图像的占位空间。同时在HTML中，<img> 标签是没有结束标签的。您需要将插入的图片放在两个尖括号之中。
- <img>
-
找到图片的URL地址。 访问存放图片的网页。右键点击图片（Mac电脑中自动点选），然后选择“复制图片网址”。你也可以点击“查看图片”，来在新标签页中单独浏览图片。然后再复制地址栏里的URL地址。
- 如果你将图片上传到自己网站的图片目录下，可以通过 /images/ 此处是你的文件名 网址来直接链接到图片。如果这个方法没有效果，很可能是因为图片位于其它文件夹路径中。你可以将它先移动到根目录，再进行查找。
-
将URL地址放到“src”属性中。 正如你所知道的那样，HTML属性通过标签来修饰元素，为HTML 元素提供附加信息。 src 属性是“来源”的缩写，会告诉浏览器去哪里能查找到图片。写下src=" "，将图片的URL地址粘贴到引号之中。例如：
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg">
-
添加“alt”属性。 从技术层面讲，你的HTML文件已经具备了显示图片的所有元素了。不过，最好添加上 alt 属性。这会在图片加载失败时以文字形式来显示图片内容。更重要的是，这能帮助搜索引擎了解图片内容，并让屏幕阅读器向视力受损的盲人访客描述图片的内容。 [2] X 研究来源 按照上述例子，将引号内容的文本更改为：
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="my dog eating a tangerine（我的狗狗在吃橘子）">
- 如果图片的内容并不重要，可以不在“alt”属性中添加任何文本。如alt=""。 [3] X 研究来源
-
保存更改。 将HTML文件保存到你的网站。访问你刚刚编辑好的页面，如果你已经打开了网页，请再次刷新一下。此时你应该能看到添加的图片了。如果图片大小不合适或你不满意图片效果，可以按照第二部分的方法进行调整。广告
-
更改图片大小。 如果想要达到最好的显示效果，请使用免费的编辑软件来调整图片大小。调整后再上传新版本图片。也可以使用HTML代码设置 宽度 和 高度 ，来让浏览器缩小或扩大图片。不过这会导致各个浏览器显示效果不一致，有时还会导致显示错误。 [4] X 研究来源 如果你想快速调整图片，可以使用以下格式：
-
添加提示信息。 标题 属性可用于为图片添加额外的评论和信息。例如，你可以在这里指明图片的作者。在大多数情况下，当访客将光标悬停在图片上时，就会显示标题文本内容。
- <img src="http://example.com/example.png" title="Photograph by J. Godfrey（作者：戈弗雷）">
-
创建为链接。 如果想要将图片创建为一个链接，可以将图片标签插入 <a></a> 超链接标签中。例如：
- <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>
广告
小提示
- 确保图片的URL地址中包含图片文件的格式（如.jpg、.gif等等）。
- 在电脑上保留图片的备份文件，以防万一。
- GIF图片很适合作为商标或动画出现，而JPEG图片适合作为复杂图像的格式，如产品摄影 等。
- 在大多数情况下，最好一直使用.gif、.jpeg、.jpg或.png等文件格式。 [7] X 研究来源 其它格式可能无法在所有浏览器中都正确显示出来。
广告
警告
- 不要将超链接引向他人的网站。这样做会占用他人网站的带宽，而且也无法为其带来访客。除此以外，带有超链接的图片会因链接网址的失效而消失。如果网站主机看到了你的超链接，他甚至可以更改你网站上显示的图片。 [8] X 研究来源
广告
参考
- ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
- ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
- ↑ http://www.htmlcodetutorial.com/images/_IMG_WIDTH.html
- ↑ http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
- ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
- ↑ http://www.webweaver.nu/html-tips/hotlinking.shtml
广告
