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>

前端学习 -- image标签和meta标签的更多相关文章

  1. jsp base标签与meta标签学习小结

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  2. h5标签基础 meta标签

    <meta>标签位于<head>标签里面,具体作用有如下: 1.设置网页编码 eg: <meta charset="utf-8"/>  ,//u ...

  3. html标签之meta标签

    1  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   ...

  4. 移动前端工作的那些事---前端制作篇之meta标签篇

    移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于head标签之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移 ...

  5. 前端制作篇之meta标签篇

    移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移动端. 附上 ...

  6. 移动前端不得不了解的HTML5 head 头标签 —— Meta 标签

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  7. html meta标签使用及属性介绍

    自学前端开始,我对meta标签接触不多,主要把精力都集中在能显示出来的标签上,比如span.button.h1等等.有时候去查看一些知名网站的源码,发现head标签里有一大摞的meta. 今天就来学习 ...

  8. html meta标签使用总结(转)

    之前学习前端中,对meta标签的了解仅仅只是这一句. <meta charset="UTF-8"> 但是打开任意的网站,其head标签内都有一列的meta标签.比如我博 ...

  9. 被忽视的META标签之特效

    在web设计中使用js可以实现很多的页面特效,然而很多人却忽视了HTML标签中META标签的强大功效,其实meta标签也可以实现很多漂亮的页面过渡效果. META标签是HTML语言HEAD区的一个辅助 ...

随机推荐

  1. Java中final与 static final 修饰的常量的区别

    喵喵开车,新手上路,多多关照.有任何错误请在评论区指出. ...........................................我是万恶的分界线( • ̀ω•́ )✧......... ...

  2. Linux重定向与管道

    程序执行时默认会打开3个流,标准输入.标准输出.标准错误. Redirection The shell interprets the symbols <,>, and >> a ...

  3. ats编译中增加透明度 选项

    在大多数情况下,如果环境支持透明度,则configure将自动启用它.对于其他环境,可能需要 配置configure 选项. --enable-posix-cap 这实现了POSIX功能,这是透明度所 ...

  4. c++ 使用this指针进行串联的函数调用

    如代码所示,在每个成员函数函数体最后返回*this.即可实现串联调用. class Time { public: Time(, , ); Time &setHour(int); Time &a ...

  5. [T-ARA][느낌 아니까][懂得那份感觉]

    歌词来源:http://music.163.com/#/song?id=27808771 作曲 : 박덕상/박현중 [作曲 : p/bag-ddeog-ssang-/p/ba-Kyeon-c/jung ...

  6. MFC常用操作

    目录: 1.文件操作 1.1.获取文件大小 2.路径操作 2.1.创建多级目录 1.文件操作 1.1.获取文件大小 // 获取文件大小 ULONGLONG size = ; // 文件大小 CFile ...

  7. jdk8 Optional使用详解

    思考: 调用一个方法得到了返回值却不能直接将返回值作为参数去调用别的方法. 原来解决方案: 我们首先要判断这个返回值是否为null,只有在非空的前提下才能将其作为其他方法的参数.这正是一些类似Guav ...

  8. 软件工程-东北师大站-第十次作业(PSP)

    1.本周PSP 2.本周进度条 3.本周累计进度图 代码累计折线图 博文字数累计折线图 4.本周PSP饼状图

  9. 《Spring1之第三次站立会议》

    <第三次站立会议> 昨天:我对自己找到的代码进行了相关的了解后,把它们在编译环境中进行了编译以及接着对代码进行逐步深入了解: 今天:我把小组成员找到的写关于登录界面的代码加到了我的项目工程 ...

  10. 1001.A+B Format (20) 解题

    代码入口(https://github.com/NSDie/object-oriented) 这题的解题思路我有两个: 第一个是两个数字相加然后判断位数,因为题目限制了范围1000000的绝对值以内嘛 ...