前端学习（HTML）--图片标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--
使用img标签来引入外部图片，img标签是一个自结束标签
img元素属于替换元素，介于块和行内元素之间，具有两种元素之间
属性：
src属性指定的是外部图片的途径（路径规则和超链接一样）

alt属性是对图片的描述，这个描述默认情况下不会显示，有些浏览器图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

width图片的宽度（单位是像素）
height图片的高度（单位是像素）
-宽度和高度中如果只修改了一个，则另一个会等比例缩放

注意：
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）

图片的格式：
jpeg（jpg）
-支持的颜色比较丰富，不支持透明效果，不支持动图
-一般用来显示照片
gif
-支持的颜色比较少，支持简单透明，支持动图
-颜色单一的图片，动图
png
-支持的颜色丰富，支持复杂透明，不支持动图
-颜色丰富，复杂透明图片（专为网页而生）
webp
-这种格式是谷歌新推出的的专门用来表示网页中的图片的一种格式
-它具备其他图片格式的所有优点，而且文件还特别小
-缺点：兼容性不好

base64
-将图片使用base64进行编码，这样我们可以将图片转换为字符，通过字符的形式来引入图片
-一般都是一些需要和网页一起加载的图片才会使用base64

效果一样，用小的
效果不一样，用效果好的
-->

前端学习（HTML）--图片标签相关推荐

前端学习(一) body标签(下)
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签列表标签分为三种. 1 ...
前端学习01-04格式标签
格式标签 标签是段落标签 这是第一段 这是第二段 <br ...
【前端学习笔记—canvas标签和使用canvas画哆啦A梦案例】
目录 canvas 1. canvas是H5新增标签 2.使用canvas画出矩形 (1)第一步,要新建画布 (2)第二步,要创建一支画笔 (3)第三步,用canvas画出矩形 3. 如何使用canv ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
Web前端学习（千锋）
Web前端学习一 . 选择器标签选择器群组选择器(分组选择器) 通配选择器层次选择器属性选择器伪类选择器结构性伪类选择器二 . css继承三 . css优先级四 . css盒子模型 ...
【前端学习】前端学习第二天:图片标签、音频标签及视频标签的用法说明
一.图片标签在介绍图片标签之前,首先可以了解一下图片的格式. 1.jpeg(jpg):支持的颜色比较丰富,不支持透明效果,不支持动图: 2.gif:支持的颜色比较少,支持简单透明,支持动图: 3.p ...
前端学习--常用标签及属性（超链接a标签与img图片标签）
常用标签 1.超链接标签a <a href="链接地址" target="xx">xx</a> a标签最重要的属性是 href 属性,它 ...
前端(一)——HTML之基本标签、图片标签、超链接、锚链接
文章目录 1. 定义 2. 发展史及优势 2.1 发展史 2.2 优势 3. W3C标准 4. HTML的基本结构 5. 网站的基本标签 5.1 标题标签 5.2 段落标签 5.3 水平线标签 5.4 ...
前端--HTML，常用标签学习
文章目录一.HTML 1. 概述 2.入门案例 3.使用HBuilder 二.常用标签 1.概述 2. 常用标签 3.表格标签 4.表单标签form 5,无法提交的问题 6.练习表单标签一.HTM ...

前端学习（HTML）--图片标签

前端学习（HTML）--图片标签相关推荐

最新文章

热门文章