HTML&CSS基础-html的图片标签

　　　　　　　　　　　　　　　　HTML&CSS基础-html的图片标签

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

一.如下图所示，准备一张图片，存放路径和html文件在同一目录

 

 

二.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>尹正杰的网页</title>
    <head>
        
    <body>
        <h1>我的博客地址:<font color="red" size="7">https://www.cnblogs.com/yinzhengjie/</font></H1>
    
        <!-- 
            使用img标签来向网络中引入一个外部图片。img标签也是一个自结束标签。
            属性:
                src:
                    设置一个外部图片的路径。目前我们所要使用的路径全都是相对路径。
                    相对路径:
                        相对路径指相当于当前资源所在目录的位置
                     
                alt:
                    可以设置图片不能显示时，对图片的描述;
                    搜索引擎可以通过alt属性来识别不同的图片;
                    如果不写alt属性，则搜索引擎不会对img中的图片进行收录
                width:
                    可以用来修改图片的宽度,一般使用px(像素)作为单位
                height:
                    可以用来修改图片的高度,一般使用px(像素)作为单位
                
                温馨提示:
                    宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小;
                    如果两个值同时指定则按照你指定的值来设置
                    一般开发中除了自适应的页面，不建议设置width和height。
                
            图片的格式:
                JPEG(JPG):
                    JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
                    一般使用JPEG来保存照片等颜色丰富的图片。
                GIF:
                    GIF支持的颜色少，只支持简单的透明，支持动态图。
                    图片颜色单一或者动态图可以使用gif
                PNG:
                    PNG支持的颜色多，并且支持复杂的透明
                    可以用来显示颜色复杂的透明的图片。
                    
            图片的使用原则：
                效果不一致，使用效果好的
                效果一致，使用小的
        -->
        <img src="./01.jpg" alt="火影忍者" width="800px" height = "700px"/>
 
    </body>
</html>

 

三.浏览器打开以上代码渲染结果

 

 

posted @ 2016-12-02 18:26  尹正杰  阅读(1194)  评论(0)  编辑  收藏  举报