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. 关于linux-centos7 安装完成git后npm突然无法使用问题处理

    报错: 解决方法: 查看一下nodejs是否安装,如果没有安装的话安装完成就能解决了

  2. Netty源码分析第8章(高性能工具类FastThreadLocal和Recycler)---->第3节: recycler的使用和创建

    Netty源码分析第八章: 高性能工具类FastThreadLocal和Recycler 第三节: recycler的使用和创建   这一小节开始学习recycler相关的知识, recycler是n ...

  3. Flink架构分析之资源分配

    Task Slot     Flink中每个真正执行任务的TaskManager都是一个JVM进程,其在多线程环境中执行一个或者多个子任务.为了控制一个JVM同时能运行的任务数量,flink引入了ta ...

  4. Cocos2dx源码赏析(1)之启动流程与主循环

    Cocos2dx源码赏析(1)之启动流程与主循环 我们知道Cocos2dx是一款开源的跨平台游戏引擎,而学习开源项目一个较实用的办法就是读源码.所谓,"源码之前,了无秘密".而笔者 ...

  5. mv命令详解

    基础命令学习目录首页 原文链接:https://www.cnblogs.com/piaozhe116/p/6084214.html mv命令是move的缩写,可以用来移动文件或者将文件改名(move ...

  6. SecureCRT SSH连接一直提示密码错误

    这是解决方法:  http://www.linuxidc.com/Linux/2016-09/134925.htm

  7. AbstractFactory(PeopleSkin)

    使用抽象工厂模式,完成下述产品等级结构: 实现 UML类图 public class BlackFactory implements MWFactory{ public Man produceMan( ...

  8. Hibernate 与 mybatis 区别

    JAVA面试中问及HIBERNATE与 MYBATIS的对比,在这里做一下总结   我是一名java开发人员,hibernate以及mybatis都有过学习,在java面试中也被提及问道过,在项目实践 ...

  9. DPDK flow_filtering 源码阅读

    代码部分 main.c /*- * BSD LICENSE * * Copyright 2017 Mellanox. * * Redistribution and use in source and ...

  10. Virtualbox+Ubuntu安装,VERR_VMX_MSR_ALL_VMX_DISABLED解决

    学习链接:基于VirtualBox虚拟机安装Ubuntu图文教程--娄老师 启动虚拟机遇到的问题:BIOS中VT-x在所有CPU模式下被禁用(VERR_VMX_MSR_ALL_VMX_DISABLED ...