img 图片标签

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>图片标签</title></head><body><img src="2.gif" alt="这是一个大松鼠" width="100px" height="500px" /></body>
</html>

1. 说明

使用 img 标签来引入一个外部图片
img 标签也是一个自结束标签

2. 属性

src:设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述

1.搜索引擎可以通过 alt 属性来识别不同的图片
2.如果不写 alt 属性，则搜索引擎不会对 img 中的图片进行收录
width:可以用来修改图片的宽度,一般使用 px 作为单位
height:可以用来修改图片高度

1.宽度和高度如果只设置一个，另一个也会等比例调整大小
2.如果两个值同时指定则按照你指定的值来设置
3.一般开发中除了自适应的页面，不建议设置 width 和 height

<img src="1.gif" alt="这是一个大松鼠" width="100px" height="500px" />

3. 补充

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box1 {width: 200px;height: 200px;background-image: url(img/3.png);background-repeat: no-repeat;}.box2 {width: 200px;height: 200px;background-image: url(img/4.png);background-repeat: no-repeat;}</style></head><body style="background-color: #bfa;"><div class="box1"></div><div class="box2"></div><img src="img/3.png" /><!-- 在body标签的最后引入外部的JS文件 --><!-- 以下代码只会在IE6中执行，其他浏览器中无效 --><!--[if IE 6]><scripttype="text/javascript"src="js/DD_belatedPNG_0.0.8a-min.js"></script><script type="text/javascript">Dd_belatedPNG.fix("*");</script><![endif]--></body>
</html>

1. png24 图片问题

在 IE6 中，对图片格式 png24 的支持度不高
如果使用的图片格式是 png24，则会导致透明效果无法正常显示

2. 解决方法：

可以使用 png8 来代替 png24，即可解决问题，
- 但是使用 png8 代替 png24 以后，图片的清晰度会有所下降
使用 JavaScript 来解决该问题，需要向页面中引入一个外部的 JavaScript 文件
- 然后再写一下简单的代码，来处理该问题

<!-- 以下代码只会在IE6中执行，其他浏览器中无效 -->
<!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script><script type="text/javascript">Dd_belatedPNG.fix("*");</script>
<![endif]-->

HTML-img图片标签相关推荐

web前段学习day_01:HTML（学习如何搭建页面结构和内容）：文本标签、列表标签、图片标签、超链接、表格、表单表单、分区标签、实体引用
学习如何构造页面结构和内容安装HBuilderX 一.HTML 创建第一个HTML页面写完html后如何测试写在body中的常见标签有哪些? 注释快捷键 Ctrl+Shift+/ 1.文本相关标 ...
图片标签|| 列表标签||链接标签||div和span|| 语义化标签
图片标签 img:展示图片 * 属性: * src:指定图片的位置相对路径 * 以.开头的路径 ...
读取CSV内容，根据不同的图片标签放到指定文件夹
读取csv文件内容,根据不同的图片标签到指定文件夹. 原本的数据是这样的然后根据CSV文件的内容进行读取,根据不同的label将图片放到指定的label 文件夹里 import pandas as ...
前端(一)——HTML之基本标签、图片标签、超链接、锚链接
文章目录 1. 定义 2. 发展史及优势 2.1 发展史 2.2 优势 3. W3C标准 4. HTML的基本结构 5. 网站的基本标签 5.1 标题标签 5.2 段落标签 5.3 水平线标签 5.4 ...
html图片标签和语义化标签和音频
图片标签 <img src="图片地址" alt="当图片找不到时提示的文字" title="当鼠标放图片上面时提示的文字" widh ...
HTML基础(part4)--常用标签之图片标签
鄙人的学习笔记. 段落标签<p> 段落标签语法 <p> 包裹段落的内容 </p> 备注:p标签之间不会相互共用一行.会独占一行或者多行的空间. 举个例子代码: & ...
使用JavaScript正则表达式解析markdown里的图片标签
需求:开发一个JavaScript函数,输入为markdown格式语法的图片标签: 输出是三个返回值: image31.png 31 https://upload-images.jianshu.io/ ...
[JavaWeb-HTML]HTML标签_图片标签
图片标签: * img:展示图片* 属性:* src:指定图片的位置* 代码:<img src="image/jingxuan_2.jpg ...
微信小程序开发实战基础一、页面跳转，底部导航栏，分享，加载图片标签，列表
1.页面跳转 wx.navigateTo({ url: "../four/four" })--可返回 wx.redirectTo({ url: "../four/four ...
html 图片行内剧中,HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)...
一.转义字符由特殊字符包裹的文本会当做标签去解析对应不换行空格对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响. < ...

HTML-img图片标签

文章目录

img 图片标签

1. 说明

2. 属性

3. 补充

1. png24 图片问题

2. 解决方法：

HTML-img图片标签相关推荐

最新文章

热门文章