用HTML添加图像

作者: Christy White
创建日期: 4 可能 2021
更新日期: 1 七月 2024
Anonim
【网页设计 2020】教程|HTML Image 图片编码
视频: 【网页设计 2020】教程|HTML Image 图片编码

内容

将图像添加到您的网站或社交网络配置文件是一种修饰网页的绝佳方法。 HTML(超文本标记语言)具有许多用于创建网页的功能,但是幸运的是,您需要添加图像的代码并不是很困难。

方法1(共1):用HTML插入图像

  1. 将您的图片上传到免费的托管网站,例如Photobucket或TinyPic,该网站允许进行热链接。 热链接允许将图像直接链接到网站服务器;一些提供商已禁止这样做,因为热链接会占用其带宽并占用其服务器上的空间。
    • 如果您有付费的托管帐户,则将图像直接上传到放置您的网站的服务器。这总是比免费站点更可靠,并且根本不需要昂贵。
  2. 在文本编辑器中打开一个新文档(例如,记事本/记事本)或在您的网站/个人资料中打开页面,您可以在其中直接更改HTML代码。
  3. 从开始 img 标签。img 标签为空,表示不需要结束标签。但是,对于XHTML验证,您仍然可以在其前面放置一个空格和一个斜杠 比...更棒 符号。
    • img />
  4. 有许多可用的属性,但是只有一个是必需的:src。那就是图像的位置/地址或URL。
    • img src =“图片的网址” />
  5. 接下来,你必须 alt 添加属性。 如果图像无法加载,则显示备用文本。这也是使用屏幕阅读器的视障人士的服务。
    • 如果将光标悬停在图像上,此文本也会显示为工具提示,但这仅在Internet Explorer中是这种情况。适用于所有浏览器的解决方案(Firefox 等。)是它 标题 除了使用的属性 alt。 (如果您不希望图像具有工具提示,则可以省略后者。)

举个例子:img src =“图片的网址” alt =“以防万一” title =“工具提示” />


  1. 现在,您可以使用 高度宽度 属性,并指定像素或百分比。 请注意,以这种方式调整大小只会更改视图的大小,而不会更改图像本身的大小。为了缩短图像的加载时间,最好使用照片编辑软件或在线服务(例如PicResize.com)预先调整它们的大小,尤其是对于大图像。
    • img src =“图片的网址” alt =“以防万一” title =“工具提示” height =“ 50%” width =“ 50%” />
    • img src =“图片的网址” alt =“以防万一” title =“工具提示” height =“ 25px” width =“ 50px” />

尖端

  • 这些属性的值以像素为单位,或者以百分比形式显示,范围是1-100%。
  • 可以使用各种格式设置属性(例如顶部,底部,中间,右侧,左侧等)将图像放置在网页上的任何位置。
  • hspace属性用于在图像的左侧和右侧插入水平空间,而vspace属性用于在图像和其他对象的顶部和底部留出空间。
  • 不要沉迷于图像。看起来很凌乱而且不专业。
  • GIF图像适合徽标或卡通,但此文件类型不太适合照片和其他具有多种颜色的图像。
    • GIF图像仅支持8位颜色,图像最多支持256种颜色。因此,可以预料的是,16位或24位彩色插图或照片的再现效果将不佳。
    • GIF图像还支持透明度。一点点透明是可能的,这意味着可以使一种颜色透明。
    • GIF图像还支持隔行扫描,这意味着站点访问者将在完全加载图像之前了解图像的外观。
    • GIF格式还支持动画。
  • 确保URL指明了图像的文件格式(.webp .gif等)。

警示语

  • 不要热链接!