zoukankan      html  css  js  c++  java
  • 2014年度辛星html教程夏季版第四节

       我们前面也涉及了HTML中的一些东西,接下来我们要涉及到图像了,如果没有图像,即使文字的样式再多,再复杂,终归还是单调的,我们就需要用图片来给我们的网页增加更多的表现形式。

    ***************图片******************

    1.我们用<img>标签来给我们的HTML文件导入一个图片,它是一个空标签,即它只包含属性,而且它没有相应的闭合标签,即它不用成对出现。

    2.它的src属性应用于指定源属性地址,它可以是绝对路径,也可以是相对路径,还可以是一个网址,即一个URL,比如我们要引入的图片是百度的一张图片,那么可以写如下代码:

    <img src="http://f.hiphotos.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=e8f89e86b0fb43160e12722841cd2d46/ca1349540923dd5483db5925d309b3de9d8248d7.jpg">

    3.当然上述代码有点长,主要是百度的地址比较长,这张图片,如果大家好奇,可以到自己的浏览器运行一下。

    4.img标签还可以包括alt属性,它是当图片无法载入的时候用来显示的。

    5.img标签还有一个width属性用于设置显示图像的宽度,用height属性来设置显示图片的高度。

    6.如果一个标签有多个属性,那么需要用空格进行分开,并且属性的值需要用双引号引起来,以明确表示它的属性。

    7.示例代码:

    <img src="xinxing.gif" alt="辛星" width="300" height="400" />

    ****************路径问题**************

    1.会想到我初学HTML的一些经历,在这里提醒大家一下关于路径的问题吧,img标签的src属性可以用绝对路径,也可以用相对路径。

    2.比如我们编写的html和图片在同一目录下,且图片叫x.gif,那么就可以写代码为:<img src = "x.gif" />

    ****************小结**************

    1.本节课我们介绍了HTML中关于图片的一些知识,希望大家可以理解。

    2.但是真正的项目中,添加合适的图片却往往是一件比较费时费力的事情,我们往往要进行各种各样的切图,这些后面再说。

  • 相关阅读:
    Linux的常用目录学习笔记
    htm,html,xhtml,xml,xsl,dhtml,shtm和shtml的区分
    js中迭代元素特性与DOM中的DocumentFragment类型 笔记
    查找算法--线性结构的查找方法
    有关rand(),srand()产生随机数学习总结
    nodejs版本管理工具nvm使用说明
    解决微信端公众号网页获取短信验证码ajax重复调用两次的问题
    判断安卓苹果ipad,iphone,微信
    css的对号错号,也就是勾和叉
    flex的一些方法注释或者叫flex笔记
  • 原文地址:https://www.cnblogs.com/xinxing/p/3857548.html
Copyright © 2011-2022 走看看