zoukankan      html  css  js  c++  java
  • 5图像

    如果你刚开始建立网站,那么为网站内所有的图像创建一个文件夹是个良好的习惯。

    • 需要使用<img>元素来向页面中添加图像。这是一个空元素(即没有结束标签),<img>元素必须包含以下两个特性:
      1.src
      这个特性告诉浏览器在何处可以找到所需的图像文件。特性值通常是一个指向网站内某个图像的相对URL。
      2.alt
      这个特性对图像进行文本说明,你无法查看图像时这段说明会对图像进行描述。
      如果图像只是用来使页面更加美观(并且它没什么含义,例如一条图像分割线),那么alt特性仍然可以使用,但应使用空引号。
      3.title
      也可以在<img>元素中使用title特性来提供有关图像的附加信息。大部分浏览器在光标悬停在图像上时会以提示的方式显示title特性的内容。

    图像的宽度和高度

    你经常会看到<img>元素使用另外两个特性来指定它的大小。
    -height
    这个特性以像素为单位来指定图像的高度。
    -weight
    这个特性以像素为单位来指定图像的高度。

    图像往往比构成页面中其余HTML代码耗费更多的加载时间。所以,一种好的解决方法是事先指定图像的大小,这样浏览器就可以为正在加载的图像留出合适的空间余量,同时继续显示页面上的其余文本。
    相对于采取HTML,越来越多的人采用CSS来指定图像的大小。

    图像的衡量和分辨率

    -当你设定用于屏幕显示的图像的大小时,应该使用像素来设定图像的大小(而不要使用厘米或英寸)
    -显示在计算机屏幕上的图像由称为像素的小方块构成。屏幕的分辨率就是每英寸的屏幕上所容纳的像素数;在大多数计算机上,这个数值是可以提高或降低的。
    -如果一个屏幕的分辨率设置为640像素X480像素,然后将分辨率提高为1024像素X768像素,那么在此屏幕上显示的图像和文本将变小,这是因为屏幕在同样大小的空间内显示了更多的像素。

    图形和图形说明

    <figure>:
    图像往往带有说明,HTML5引入一个新的<figure>用来包含图像以及对图像的说明,并且这两项是相关联的。
    只要图像的说明是相同的,你就可以在<figure>元素中添加多个图像。
    <figcaption>:
    在HTML5中引入<figcaption>元素是为了让网页设计人员给图像添加说明。
    那些不理解HTML5元素的浏览器会直接忽略新元素,而只显示其中的内容。

    eg:

    <html>
        <body>
                <img src="360wallpaper.jpg" alt="很棒的一张图片" title="Good" width="600" height="450">
                <br />
                <figcaption>Everything is possible!</figcaption>
        </body>
    </html>
    
    

    效果如下图:

    小结

    • <img>元素用于向网页中添加图像。
    • 必须为<img>元素指定src特性和alt特性,src特性用来表示图像的源地址,alt特性用来描述图像的内容。
    • 应该根据图像在网页上显示的大小来保存图像,并将其保存为合适的格式。
    • 照片最好保存为JPEG格式;使用单色的插图或徽标更适合保存为GIF格式。
  • 相关阅读:
    两个栈实现一个队列,C语言实现,队列可伸缩,容纳任意数目的元素。
    创建双向链表的一个陷阱!!
    实现单链表的倒置
    《征服c指针》学习笔记-----统计文本单词数目的程序word_count
    [stm32]IAR环境 hardfault定位
    [FreeRTOS] 函数笔记
    [C语言]字符串函数大全
    [verilog]常用任务之模拟UART Rxd引脚输入数据
    [git] 知识点
    [FreeRTOS] 临界区处理
  • 原文地址:https://www.cnblogs.com/Acapplella/p/13380905.html
Copyright © 2011-2022 走看看