正文

前端学习 -- image标签和meta标签

IP云
IP云V管理员/3 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Image标签

使用img标签来向网页中引入一个外部图片，
img标签也是一个自结束标签
属性：

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

搜索引擎可以通过 alt属性来识别不同的图片
如果不写alt属性，则搜索引擎不会对img中的图片进行收录

  1. width：可以用来修改图片的宽度,一般使用px作为单位
  2. height ：可以用来修改图片的高度，一般使用px作为单位

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

例如： 

<!doctype html>

<html>

<head>

<meta charset="utf-8"/>

<title>图片标签</title>

</head>

<body>

<!--

            使用img标签来向网页中引入一个外部图片，

                img标签也是一个自结束标签

            属性：

                src：设置一个外部图片的路径

                alt：可以用来设置在图片不能显示时，对图片的描述

                        搜索引擎可以通过alt属性来识别不同的图片

                        如果不写alt属性，则搜索引擎不会对img中的图片进行收录

                width：可以用来修改图片的宽度,一般使用px作为单位

                height    ：可以用来修改图片的高度，一般使用px作为单位

                宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小

                    如果两个值同时指定则按照你指定的值来设置

                一般开发中除了自适应的页面，不建议设置width和height

        -->

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

</body>

</html>

效果：

图片路径

src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径。
相对路径：
相对路径指相对于当前资源所在目录的位置
<img src=" abc/bcd/2.gif " alt="这是一个大松鼠"/>

可以使用 ../来返回一级目录 ,返回几级目录就写几个../
<img src="../../img/2.gif" alt="这是一个大松鼠"/>

图片的格式
  1. JPEG(JPG)

- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
- 一般使用JPEG来保存照片等颜色丰富的图片

2. GIF
- GIF支持的颜色少，只支持简单的透明，支持动态图
- 图片颜色单一或者是动态图时可以使用gif

3. PNG
- PNG支持的颜色多，并且支持复杂的透明
- 可以用来显示颜色复杂的透明的图片

图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的

代码例子： 

<html>

<head>

<meta charset="utf-8">

<title>img标签使用</title>

</head>

<body>

<img src ="" "demo/微信截图_20170227231827.png" alt="" "微信截图"></img>

</body>

</html>

图片放的位置：

效果：

如上，图片，html切换位置

meta标签
  1. 用来设置网页的元数据，比如网页使用的字符集,<meta charset="utf-8" />;
  2. 设置网页的关键字,<meta name="keywords" content="关键字,关键字,关键字,关键字"/>;
  3. 设置网页的描述,<meta name="description" content="网页的描述"/>;
  4. 请求的重定向,<meta http-equiv="refresh" content="秒数;url=地址"  />。

例如： 

<html>

<head>

<meta charset="utf-8">

<title>meta标签使用</title>

<meta name="description" content="发布H5,js相关前段信息"/>

<!--实现页面重定向-->

<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>

</head>

<body>

</body>

</html>

相关阅读

目录[+]