6.1  将图像作为Web页面的前景元素

　　使用img元素，就可以在Web页面中添加图像。img是image的缩写。只需在img元素中添加src（source的缩写）属性，并为该属性设置相应的值，就可以将图像显示在Web页面上。

 <img src="photo.jpg">  <!-- img是空元素，因此无对应的结束标记 -->

　　src属性的值应该包含文件的正确路径名和位置。

　　如果想使用的图像与当前HTML页面不在同一个文件夹中，那么需要告诉浏览器图像位于哪一个文件夹中。例如，如果图像位于比当前HTML页面所在目录高一级的文件夹中，则应该使用src=“../photo.jpg”，其中../告诉浏览器在查找图像文件之前，先上移一层目录。

　　如果想引用另一个Web站点中的图片，首先必须获得该图像所有者的许可，然后可以使用src=“www.websitename.com/images/photo.jpg”这样的方式来引用该图片，器中URL就是其它网站上图像的完整名称。

6.1.1  指定图像的高度和宽度

　　在Web页面中添加几张图片后，你可能会注意到在浏览器显示页面之前，页面中的图像有时会导致浏览器等待数秒的时间。这是因为浏览器不知道图像的尺寸，实际上某些浏览器在显示Web页面之前将一直等待，直到所有图像都下载完毕。

　　因此，通过img标记中的height和width属性，告诉浏览器图片的尺寸，就可以帮助浏览器加快显示Web页面的速度。

 <img src="photo.jpg" width="391px" height="274px">

　　还可以使用height和width属性改变图像在页面上显示的尺寸。浏览器将根据新指定的尺寸来重新绘制该图像。W3C并不建议这样做——因为这可能会拖慢Web页面的显示速度，还可能导致图像丧失正确的长宽比。按照在Web页面中需要的尺寸来创建图像，这样做才是最好的。

6.1.2  为图像提供替换文本和标题

　　使用<img>标记中的alt属性，可以为图像设置一个替换文本。

　　alt属性的值是一段文本，它将显示在一个代替图片位置的方框之中，当浏览器无法找到该图像，或者将浏览器设置为不显示图像时，将显示该方框以代替图像。

 <img src="art-turtle" height="600" width="412" alt="drawing of a turtle">

　　除了alt属性之外，在<img>标记中添加title属性也是一个好主意。在浏览器无法加载图像的情形时，在靠近鼠标指针的提示方框中要显示重要的信息。此外，title属性不仅可以添加到<img>标记之中，还可以添加到链接和其它页面元素之中。title属性的作为是为用户提供一个快速提示，简单地解释页面元素的内容。

6.1.3  将图像链接到Web站点上的其它内容
　　可以使用文本短语作为链接的标签，以便让用户单击链接。还可以使用图像作为链接的标签，它既可以带一个文本标签，也可以不带任何文本标签。

　　要将整幅图片作为链接，只需在<img>左右添加<a>和</a>即可。

 <a href="www.baidu.com"><img src="art-turtle" height="600" width="412" alt="drawing of a turtle" title="Drawing of a turtle"></a>

6.1.4  添加图片标题
　　在HTML5之前，并没有一个简单的办法可以通过语义方式为实际的图像定义一个图片标题。幸运的是，在HTML5中可以使用figure元素和figcaption元素来实现。

 <figure>

 <img src="fabric-banner.jpg" alt="Fabric banner">

 <figcaption>

 Fabric banner handmade by the women of Nueva Imagen

 </figcaption>

 </figure>

　　除了图像之外，还可以使用figure和figcaption元素为其它元素定义关联的标题。假如创建了一个提供参考信息表，并想将其放在一个较大的文本块中。可以将该表或其它图表放在一个figure元素中，然后该figure元素添加一个figcaption元素以定义一个解释该图表的标题。

6.2  为前景图片定义样式

6.2.1  图像边框

　　在新的HTML规范中，W3C取消了img中的border属性，建议使用样式表来调整边框的显示，样式表对边框提供了更多的控制能力。

　　与边框有关的样式表属性：

  • border-style：用于设置边框的线条风格，默认值为none（无边框），所以没有指定border-style值时，边框不显示。
  • border-width：控制边框的宽度，既可以单独设置边框的每一条边的宽度（border-left-width、border-right-width等），也可以一次设置四条边的宽度（border-width）。
  • border-color：可以指定1~4个值，用于控制边框的颜色。当指定两个值时，第一个值上下，第二值左右；当指定三个值时，第一个值上，第二个值左右，第三个值下；当指定四个值时，上下左右。
  • border-radius：可以指定1~4个值，用于控制边框4个角的圆角效果。要为图像的边框创建圆角效果，只需将border-radius属性设置为一个大于0的值即可。

　　样式表为设置边框的各个属性提供了强大的功能，既可以将边框的4条边作为一个整体进行设置，也可以分别对每一条边进行设置。要单独设置某一条边，只需简单地在边框属性中添加该边的名称即可（top、right、bottom或者left）。

 .headsot{

 border-style:double;

 border-left-style:none;

 border-right-style:none;

 border-width:10px;

 border-left-width:0px;

 border-right-width:0px;

 border-color:#c00;

 }

6.2.2  浮动
　　当在一个文本块中添加图像时，有时希望改变图像的对齐方式，使图像不再简单地显示在文本的上面或下面，而是浮动在文本流之中。即采用CSS的float属性，并将其值设置为left或right即可。

　　（1）浮动文本中的图片

　　float属性的作用是告诉浏览器，将被浮动元素放在最靠近的指定浏览器边缘的位置，然后浮动其余的页面内容。换句话说，内容将自动地沿着设置了左浮动（left-floated）图片的右侧进行流动，或者沿着设置了右浮动（right-floated）图片的左侧进行流动。float属性可能的取值包括：left、right和none。

 <img src="photo.jpg" style="float:left;">

　　（2）清除浮动

　　有时会遇到这种情况，即实际上需要停止或清除浮动。假如想将较长的文本拆分为两个段落，然后只让第一个段落包围着图像。第二个段落仍然占据整个页面的宽度。要实现这种布局，必须在第二个段落中使用clear属性来“清除浮动”。clear属性可能的取值为：left、right、both和none。

 <p style="clear:left;">Remaining paragraph of text.</p>

　　（3）浮动图片组

　　假如页面中包含很多图像，如果所有图像都具有相同尺寸，那么使用float属性可以很容易地让浏览器自动将这些图像显示在页面同一行上（in line）。

 <!DOCTYPE html>

 <html>

 <head>

     <title>test</title>

     <meta charset="utf-8">

     <style type="text/css">

         figure{

             float: left;

         }

         figure figcaption{

             text-align: center;

             font-family: '微软雅黑';

         }

     </style>

 </head>

 <body>

     <figure>

         <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px">

         <figcaption>金木</figcaption>

     </figure>

     <figure>

         <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px">

         <figcaption>金木</figcaption>

     </figure>

     <figure>

         <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px">

         <figcaption>金木</figcaption>

     </figure>

 </body>

 </html>

6.2.3  内边距和外边距

　　还可以将padding属性和margin属性应用于图像，以定义围绕着图像内边距和外边距，可以声明一条边、两条边和三条边或四条边的边距。

 <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px" style="margin: 100px;">
 <img src="f://img/test.png" title="Q版金木研" width="300px" height="300px" style="padding:  100px;">

6.2.4  居中

　　使元素左外边距和右外边距完全相等就可以实现居中的效果，前提必须是告诉浏览器将图像作为一个块级元素处理。在CSS中，块级元素将自动填充整个可用空间。因此，如果将图像设置为一个块级元素，则它的外边距将自动扩展，直到遇到浏览器窗口的边缘。

 img.centered{display:block; margin-left:auto; margin-right:auto;}

6.3  将图像作为Web页面的背景元素
　　在Web页面中图像还有另一个角色，即作为Web页面的背景图片。即在body元素的样式声明中，添加background-image属性：

 body{background-image:url("piture.jpg");}

　　在样式表中背景属性有一个巨大的好处，即可以将背景图像应用于所有的页面元素，从段落、列表到表格中的单元格，都可以采用与定义body元素背景相同的办法进行定义。

 p{background-image:url("piture.jpg");}

　　通过在页面样式表中添加background-attachment属性，可以强制背景图像保持静止。

　　当把background-attachment属性的值设置为fixed时，背景图像将保持固定状态。

　　当把background-attachment属性的值设置为scroll时，背景图像将随着页面的滚动而滚动。　　　　

　　与之类似，还可以使用background-repeat属性，告诉浏览器是否重复显示背景图像。background-repeat属性可能的取值为：

  • repeat：背景图像在水平和垂直两个方向上都重复显示；
  • repeat-x：背景图像仅在水平方向上重复显示；
  • repeat-y：背景图像仅在垂直方向上重复显示；
  • no-repeat：背景图像不重复显示。
 body{

     background-image: url("f://img/test2.jpg");

     background-repeat: no-repeat;

     background-attachment: fixed;

 }

[HTML/HTML5]6 使用图像的更多相关文章

  1. 三天学会HTML5——SVG和Canvas的使用

    在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容. 第2天将学习如何使用Canvas 和使用SV ...

  2. 网站开发中很实用的 HTML5 & jQuery 插件

    这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...

  3. HTML5和CSS3基础教程(第8版）-读书笔记(3)

    第11章 用CSS 进行布局 网站设计主要有两大类型:固定宽度和响应式. 对于固定(fixed)布局,整个页面和每一栏都有基于像素的宽度.顾名思义,无论是使用移动电话和平板电脑等较小的设备查看页面,还 ...

  4. HTML5和CSS3基础教程(第8版）-读书笔记(2)

    第7章 CSS构造模块 7.1 构造样式规则 样式表中包含了定义网页外观的规则.样式表中的每条规则都有两个主要部分:选 择 器(selector) 和 声 明 块(declaration block) ...

  5. HTML5和CSS3基础教程(第8版）-读书笔记

    第1章 网页的构造块 一个网页主要包括以下三个部分: n        文本内容(text content):在页面上让访问者了解页面内容的纯文字. n        对其他文件的引用(referen ...

  6. HTML5性能优化

    HTML5性能优化 在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟<高性能HTML5 ...

  7. [转] 《高性能HTML5》读后整理的Web性能优化内容

    读后感 先说说<高性能HTML5>这本书的读后感吧,个人觉得这本书前两章跟书的标题完全搭不上关系,或者说只能算是讲解了“高性能”这三个字,HTML5完全不见踪影.个人觉得作者应该首先把HT ...

  8. 使用 HTML5 设计辅助功能

    使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例 如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的 ...

  9. HTML5 Canvas | w3cschool菜鸟教程

    HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.. 在画布上(Canvas)画一个红色矩形,梯度矩形,彩色矩形,和一些彩色的文字. ...

随机推荐

  1. QT的信号和槽

    QObject::connect(&dummy, SIGNAL(sig()), &thread, SLOT(slot_main())); 这里slot_main()是thread类中的 ...

  2. MHA故障切换和在线手工切换原理

    一.故障切换的过程 当master_manager监控到主库mysqld服务停止后,首先对主库进行SSH登录检查(save_binary_logs -command=test),然后对mysqld服务 ...

  3. js兼容性问题总结

    JS中出现的兼容性问题的总结1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题  我们都知道js通过style不可以获取行外样式,当我们需要获取行外 ...

  4. three.js初涉略（一）

    <!-- 最近要研究一下webgl,发现了webgl中文网(http://www.hewebgl.com/article/articledir/1).边研究教程边做下记录 --> thre ...

  5. Navicat for MySQL安装之后不知道登录密码

    1,关闭你现在正在运行的mysql数据库,关闭mysql服务器. 2,关闭数据库后,运行点击开始运行,输入cmd进入命令行窗口,在这个命令行中操作进入到你数据库所在的安装路径,一般默认安装的话都会在e ...

  6. MVC的多表单

    中心思想就是在一个表单内不规定"action",在js里面用@Url.Axtion("视图层","控制器")方法来设置表单的传值. 控制器 ...

  7. 第一个python实例--监控cpu

    #第一个python实例:监控cpu #/bin/bash/env Python from __future__ import print_function from collections impo ...

  8. docker设置并运行部分命令及原文

    1.设置开机启动 If you want Docker to start at boot, you should also: $ sudo systemctl enable docker 2. 启动, ...

  9. 美国 ZIP Code 一览表

    今天给大家提供美国的Zip Code的原因是大家在注册国外的账号时,需要提供这个Zip Code,因为一般美国的服务默认是面向美国的,甚至是仅支持美国. 以下提供一些美国的zip code 列表. 邮 ...

  10. srand()以及rand()函数用法

    srand()就是给rand()提供种子seed 如果srand每次输入的数值是一样的,那么每次运行产生的随机数也是一样的, srand(n) for(10) rand()也就是说,以一个固定的数值作 ...