HTML图片

html图片

<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。

<img src="data:images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

  • 绝对地址：相对于磁盘的位置去定位文件的地址
  • 相对地址：相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

  • “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

  • “ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset='utf-8' />

         <title>这是段落标签</title>

     </head>

     <body>

         <!-- 这是p标签 开始-->

         <p>本手册由飘零雾雨编写。版权所有者为飘零雾雨。

                 您可以免费的使用、分发本手册。但未经飘零</p>

         <p>雾雨的授权许可不得擅自进行篡改、反编译，及将其全部或部分用于商业用途。

            本手册受著作权法和国际公约的保护，</p><p>作者保留对本手册及本声明的最终修改权。

            本手册的部分内容参考了苏沈小雨版的CSS2.0手册及World Wide Web Consortium (W3C)公开的网络文档。</p>

         <!--这是p标签 结束-->

         <!-- 这是 em... 有意思的标签 开始-->

         <em>表示语气的强调词,使字体倾斜</em>

         <i>表示专业词汇,字体也倾斜了 跟em没有很大的区别</i>

         <b>表示文档中的关键字或产品名 字体加粗不倾斜</b>

         <strong>表示非常重要的内容 字体加粗了</strong>

         <strong><del>原价:998元  del删除线</del></strong>

         <strong>现价:98元 </strong>

         H<sub>2</sub>o

         10<sup>2</sup>=100

         <pre>

         原样输出

         12+2

         =12

         </pre>

         <center>

             <p>本手册由飘零雾雨编写。版权所有者为飘零雾雨。

                 您可以免费的使用、分发本手册。但未经飘零</p><p>雾雨的授权许可不得擅自进行篡改、反编译，及将其全部或部分用于商业用途。

             本手册受著作权法和国际公约的保护，作者保留对本手册及本声明的最终修改权。

             本手册的部分内容参考了苏沈小雨版的CSS2.0手册及World Wide Web Consortium (W3C)公开的网络文档。</p>

         </center>

         <button>提交</button>

         <marquee direction='right'>流动的标题 up 往上流动 down 往下流动 right 往右流动 默认是往左</marquee>

         <!--这是em 有意思的标签 结束-->

         <!--这是img 标签 开始-->

         <img src='../HTML+CSS-01/imgs/23.jpg' alt='这是一张破坏了的图片' />

         <img src='../HTML+CSS-01/imgs/30.jpg' alt='魅力的画面' title='鼠标放在图片上显示'>

         <!--这是img 标签 结束-->

     </body>

 </html>

HTML图片的更多相关文章

  1. webp图片实践之路

    最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...

  2. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  3. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  4. Markdown 图片助手-MarkdownPicPicker

    title: Markdown 图片助手 v0.1 toc: true comments: true date: 2016-06-04 16:40:06 tags: [Python, Markdown ...

  5. 图片访问实时处理的实现(nodejs和php)

    我在访问时光网.网易云音乐等网站时,发现将它们页面中的一些图片URL修改一下就可以得到不同尺寸的图片,于是思考了其实现方案,我的思路是:URL Rewrite + 实时处理 + 缓存,对用户请求的UR ...

  6. nodejs进阶(4)—读取图片到页面

    我们先实现从指定路径读取图片然后输出到页面的功能. 先准备一张图片imgs/dog.jpg. file.js里面继续添加readImg方法,在这里注意读写的时候都需要声明'binary'.(file. ...

  7. C#给PDF文档添加文本和图片页眉

    页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...

  8. 【Machine Learning】KNN算法虹膜图片识别

    K-近邻算法虹膜图片识别实战 作者:白宁超 2017年1月3日18:26:33 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  9. Web性能优化：图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  10. HTML中上传与读取图片或文件（input file）----在路上（25）

    input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...

随机推荐

  1. hdu 6298 Maximum Multiple（规律）

    hdu6298 Maximum Multiple 题目传送门 题意: 给你一个整数n,从中找出可以被n整除的三个数x,y,z: 要求x+y+z=n,且x*y*z最大. 思路: 开始一看T到1e6,n也 ...

  2. 并行开发 1.Parallel

    原文:8天玩转并行开发——第一天 Parallel的使用 随着多核时代的到来,并行开发越来越展示出它的强大威力,像我们这样的码农再也不用过多的关注底层线程的实现和手工控制, 要了解并行开发,需要先了解 ...

  3. Python人工智能识别文字内容（OCR）

    环境准备 安装pytesseract和PIL 安装这两个包可以借助pip命令行安装 pip install PIL pip install pytesseract 安装识别引擎tesseract-oc ...

  4. 在vCenter上创建新用户 （适用版本6.0）

  5. day20 python异常处理 try except

    day20 python   一.异常处理     1.什么是异常, 常见异常有:         逻辑错误 ''' name Traceback (most recent call last):   ...

  6. vue内置组件——transition简单原理图文详解

    基本概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡 ...

  7. 谷歌开发人员在现代Web浏览器中发现严重跨域漏洞

    Google谷歌研究人员在现代网络浏览器中发现了一个严重漏洞,该漏洞可能允许您访问的网站从您登录同一浏览器的其他网站窃取您的在线帐户的敏感内容. 由Google谷歌Chrome的开发者支持者Jake发 ...

  8. Ubuntu16.04安装x11VNC远程桌面

    1. 安装x11vnc sudo apt-get install x11vnc 2. 设置密码 x11vnc -storepasswd 3. 修改配置文件 sudu vim /lib/systemd/ ...

  9. JavaWeb(五)：MVC案例

    MVC是Model-View-Controller的简称,即模型-视图-控制器.MVC是一种设计模式,它把应用程序分成三个核心模块:模型.视图.控制器,它们各自处理自己的任务.模型是应用程序的主体部分 ...

  10. 【优化】MySQL千万级大表优化解决方案

    问题概述 使用阿里云rds for MySQL数据库(就是MySQL5.6版本),有个用户上网记录表6个月的数据量近2000万,保留最近一年的数据量达到4000万,查询速度极慢,日常卡死.严重影响业务 ...