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>

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

HTML&CSS基础-html的图片标签的更多相关文章

  1. HTML&CSS基础-html常用的标签

    HTML&CSS基础-html常用的标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  2. CSS基础第一篇:图片插入<img>,文本空格

    好家伙,这波是被迫回归基础 <img src="" alt=""> img代表"图像",它是图像在页面上显示.src代表&quo ...

  3. 【css基础】html图片右上角加上删除按钮

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 0009 CSS基础选择器（ 标签、类、id、通配符）

    typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用 ...

  5. 2020年12月-第02阶段-前端基础-CSS基础选择器

    CSS选择器(重点) 理解 能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的 ...

  6. CSS基础语法（一）

    目录 CSS基础语法(一) 一.CSS简介 1.CSS语法规范 2.CSS代码风格 二.CSS基础选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器 5.总结 三.CSS字体属性 ...

  7. Form标签+Css基础

      一.Form表单标签 <form action="" method=""></form>    表单就是用来将用户的信息提交到服务器 ...

  8. HTML常用标签与CSS基础知识

    一.HTML页面结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  9. htm基础知识，css的链入以及标签分类。

    <!DocTYPE>  DOC--Document 文档  TYPE  类型  文档类型 告诉浏览器这是什么文件 单标签: meta  设置   charset  设置编码 双标签: 开始 ...

随机推荐

  1. testng失败自动重试

    使用的监听类有:IRetryAnalyzer.TestListenerAdapter.IAnnotationTransformer public class Retry implements IRet ...

  2. JAVA中生成指定位数随机数的方法总结

    JAVA中生成指定位数随机数的方法很多,下面列举几种比较常用的方法. 方法一.通过Math类 public static String getRandom1(int len) { int rs = ( ...

  3. 手撕面试官系列(十一)：BAT面试必备之常问85题

    JVM专题 (面试题+答案领取方式见侧边栏)  Java 类加载过程? 描述一下 JVM 加载 Class 文件的原理机制? Java 内存分配. GC 是什么? 为什么要有 GC? 简述 Java ...

  4. c++项目经验分享

    1.C++的const比C语言#define更好的原因? 首先,它能够明确指定类型,有类型检查功能. 其次,可以使用C++的作用域规则将定义限制在特定的函数[常函数]或文件中. 第三,可以将const ...

  5. ZLC众利币系统APP开发

    开发版本:APP 开发语言:php,java,.net 下面我们来看一下tp5 分页具体怎么用: 一, 分页简洁版 简洁分页仅仅只有上下页的分页输出,可以使用下面的简洁分页代码: // 查询状态为1的 ...

  6. python之数据解构和算法进阶

    1.解压赋值多个变量 采用解构的方法.可迭代对象才可以,变量数量与元素个数要一一对应,或者采用*万能接收. 2.解压可迭代对象赋值多个变量 如果一个可迭代对象的元素个数超过变量个数时,会抛出一个 Va ...

  7. RabbitMq 概述

    RabbitMQ是实现了高级消息队列协议(Advanced Message Queueing Protocol , AMQP)的开源消息代理软件(亦称面向消息的中间件). 1.AMQP协议 Rocke ...

  8. SpringBootServletInitializer报错

    1. 现象 从Springboot 1.5.1.RELEASE 升级到Springboot 2.1.2.RELEASE 后SpringBootServletInitializer报错. 2.解决方法 ...

  9. .NET 使用 ILMerge 合并多个程序集，避免引入额外的依赖

    原文:.NET 使用 ILMerge 合并多个程序集,避免引入额外的依赖 我们有多种工具可以将程序集合并成为一个.打包成一个程序集可以避免分发程序的时候带上一堆依赖而出问题. ILMerge 可以用来 ...

  10. .NET Core随笔把数据库数据查出来转JSON并输出

    直接创建WEB项目即可: public class Startup { //startup.cs是站点启动时具体做了哪些事情,主要是开启了一个mvc服务. public Startup(IConfig ...