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

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

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

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

二.HTML源代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <title>尹正杰的网页</title>
  6.     <head>
  7.  
  8.     <body>
  9.         <h1>我的博客地址:<font color="red" size="7">https://www.cnblogs.com/yinzhengjie/</font></H1>
  10.  
  11.         <!--
  12.             使用img标签来向网络中引入一个外部图片。img标签也是一个自结束标签。
  13.             属性:
  14.                 src:
  15.                     设置一个外部图片的路径。目前我们所要使用的路径全都是相对路径。
  16.                     相对路径:
  17.                         相对路径指相当于当前资源所在目录的位置
  18.  
  19.                 alt:
  20.                     可以设置图片不能显示时，对图片的描述;
  21.                     搜索引擎可以通过alt属性来识别不同的图片;
  22.                     如果不写alt属性，则搜索引擎不会对img中的图片进行收录
  23.                 width:
  24.                     可以用来修改图片的宽度,一般使用px(像素)作为单位
  25.                 height:
  26.                     可以用来修改图片的高度,一般使用px(像素)作为单位
  27.  
  28.                 温馨提示:
  29.                     宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小;
  30.                     如果两个值同时指定则按照你指定的值来设置
  31.                     一般开发中除了自适应的页面，不建议设置width和height。
  32.  
  33.             图片的格式:
  34.                 JPEG(JPG):
  35.                     JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
  36.                     一般使用JPEG来保存照片等颜色丰富的图片。
  37.                 GIF:
  38.                     GIF支持的颜色少，只支持简单的透明，支持动态图。
  39.                     图片颜色单一或者动态图可以使用gif
  40.                 PNG:
  41.                     PNG支持的颜色多，并且支持复杂的透明
  42.                     可以用来显示颜色复杂的透明的图片。
  43.  
  44.             图片的使用原则：
  45.                 效果不一致，使用效果好的
  46.                 效果一致，使用小的
  47.         -->
  48.         <img src="./01.jpg" alt="火影忍者" width="800px" height = "700px"/>
  49.  
  50.     </body>
  51. </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. [转]解决 gem install 安装失败

    链接地址:https://blog.csdn.net/weixin_42414461/article/details/85337465

  2. 从原生Android 跳转到hbuilder项目

    原文地址:https://blog.csdn.net/pentablet/article/details/80277157 前段时间做项目,需要把别人做的hbuilder项目,添加到自己的app中,找 ...

  3. 【视频开发】Gstreamer框架中使用gst-launch进行流媒体播放

    Gstreamer框架中使用gst-launch进行流媒体播放 Gstreamer是一套开源的流媒体框架,用其也可以进行流媒体开发,Gstreamer是基于glib库编写的,需要将多个不同功能的元件( ...

  4. DevOps-ISC,CSS,Prometheus,Ansible ,Terraform,zabbix

    https://www.terraform.io/ Terraform Use Infrastructure as Code to provision and manage any cloud, in ...

  5. vmware 虚拟机中有时获取不到IP地址

    转载: https://blog.csdn.net/valecalida/article/details/80683518 解决方法:打开vmware,然后找到编辑 然后点击虚拟网络编辑器 此时应该先 ...

  6. HTML5自定义select标签样式的方法

    HTML5自定义select标签样式的方法 -webkit-appearance: none; 这个东西可以隐藏箭头 不过手机端就直接 设置透明度为0就行了(如果这种做法比前面个要麻烦点 毕竟还要对他 ...

  7. [转帖]如何查看windows某个目录下所有文件/文件夹的大小？

    如何查看windows某个目录下所有文件/文件夹的大小? https://www.cnblogs.com/gered/p/10208281.html 挺好的工具 linux 上面 我就是使用 du - ...

  8. CentOS 使用 prename修改文件名大小写的方法

    1. CentOS和ubuntu的rename的命令是不一样的. CentOS的rename 使用的是c语言版本的 而ubuntu的rename使用的是 perl的版本,意味着很多ubuntu上面的扩 ...

  9. [转帖]教你如何破解IC卡的校验值

    教你如何破解IC卡的校验值   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin ...

  10. 对JavaEE的简单理解

    本文是在学习软件工程与J2EE课程时的学习笔记,旨在从大体的概念上了解Java EE的一些主要组件在Web应用中的作用. 上图精炼的描述了MVC模型以及Java EE的部分组件如何分布在一个Web应用 ...