zoukankan      html  css  js  c++  java
  • HTML(7)图像、背景和颜色

    一、HTML图像<img>

      1.<img>标签和它的src属性

      在 HTML 中,图像由 <img> 标签定义。<img> 是一个空标签,意思是说,它只包含属性,并且没有闭合标签(而是直接以“/>”结尾)。要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。定义图像的语法是:<img src="url" />,URL 指存储图像的位置。浏览器将图像显示在文档中图像标签出现的地方。

    <!--只指定了src属性的img-->
     <img src="images/1499417200939140562.jpg" />

      2.<img>标签的其它属性

      alt 属性:用来为图像定义一串预备的可替换的文本,当图片无法显示时,就会显示alt属性所定义的文本,在图片正常显示时,鼠标放上去也会有悬浮提示,比如“点击查看大图”。为页面上的图像都加上替换文本属性(alt)是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。而且,现在XHTML1.0标准已经强制使用alt属性。在<img>标签没有alt属性时,在VS中会有如下提示。

      

      title属性:用来显示当鼠标放到图片上时显示的文字,是对图片的解释说明性文字。比如现在很多网站浏览图片时的“点击跳转到下一页”。

      alt属性和title属性的区别:<img>标签的alt属性是在图片因浏览器兼容、加载失败或地址出错等原因而不显示时为浏览用户所做的代替语言,其性质为该图片的代替;而img标签的title属性,是表达该图片的一些额外信息,其性质为一种备注或者注释,鼠标过去时显示该段文字。

    关于alt属性和title属性区更多参见:http://www.seowhy.com/bbs/thread-1801728-1-1.html

      border属性:指定边框,border="0"不显示边框。

      width(宽度)和height(高度)属性:指定图片的显示大小,如果不指定则是图片的原始大小。最好指定width、height,哪怕是原始尺寸大小,因为如果不指定大小,图片会不占页面位置,图片下载后才调整大小,会造成页面布局很乱。如果指定了width、height哪怕图片没有加载完成,也会先把位置占上。

    1         <img src="images/1499417200939140562.jpg" />
    2         <!--指定alt属性的图片-->
    3         <img src="images/1499417200939140562.jpg" alt="一幅漂亮的图片" />
    4         <!--指定title属性的图片-->
    5         <img src="images/1499417200939140562.jpg" alt="一幅漂亮的图片" title="哈哈" />
    6         <!--设置宽度和高度的图片-->
    7         <img src="images/xxxx.gif" title="img" alt="img" width="454" height="340" />

      3.<img>作为超链接

      <img>作为超链接(即图像超链接),就是将<img>标签作为<a></a>标签的链接对象。注意:在<img>作为超链接对象时,IE浏览器会自动为<img>加上一条蓝色的边框(border="1"),这在很多时候都不是我们想要的,可以通过设置border="0"来取消边框。

    1            <!--图片超链接,将img标签作为超链接的对象即可-->
    2             <a href="../HTML超链接.html" title="HTML超链接语法">
    3                 <img src="http://www.cnblogs.com/图片/m.jpg" border="0" alt="图片链接" />
    4             </a>

    参考:http://www.w3school.com.cn/html/html_images.asp

    二、HTML背景

      1.背景颜色(Bgcolor)

      背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

    1 <body bgcolor="#000000">  <!--十六进制颜色值-->
    2 <body bgcolor="rgb(0,0,0)">  <!--rgb颜色值-->
    3 <body bgcolor="black">  <!--颜色名称-->

      2.背景(Background)

      背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。注意:为了加快网页的显示速度,提高网站的友好性,背景图像大小不应该超过10k.

    1 <body background="clouds.gif"> <!--相对URL-->
    2 <body background="http://www.w3school.com.cn/clouds.gif">  <!--绝对URL-->

      附注:在新的标准当中,HTML元素的背景颜色(bgcolor)和背景图像(background)属性已经被废弃,而是用css设置元素的背景颜色和背景图片。

      参考自:http://www.w3school.com.cn/html/html_backgrounds.asp

    三、颜色(Color)

      1.颜色

      颜色(Color)由红色(Red)、绿色(Green)、蓝色(Blue)混合而成。

      颜色值:颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

      每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。如黑色的颜色名为black,十六进制表示为#000000,rgb值为rgb(0,0,0)。

      

      2.颜色名

      仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua(浅绿色), black(黑色), blue(蓝色), fuchsia(紫红色), gray(灰色), green(绿色), lime(绿黄色), maroon(褐红色), navy(深蓝色), olive(橄榄色), purple(紫色), red(红色), silver(银色), teal(青色), white(白色), yellow(黄色)。如果需要使用其它的颜色,需要使用十六进制的颜色值。

      3.Web安全色

      数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。

      4.216 跨平台色

      最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。

      更多参见:http://www.w3school.com.cn/html/html_colors.asp

  • 相关阅读:
    《Microsoft Sql server 2008 Internals》读书笔记第十一章DBCC Internals(2)
    《Microsoft Sql server 2008 Internals》读书笔记第十一章DBCC Internals(9)
    《Microsoft Sql server 2008 Internals》读书笔记第九章Plan Caching and Recompilation(10)
    CKEditor在asp.net环境下的使用一例
    《Microsoft Sql server 2008 Internals》读书笔记第五章Table(7)
    《Microsoft Sql server 2008 Internals》读书笔记第九章Plan Caching and Recompilation(11)
    千万数据的连续ID表,快速读取其中指定的某1000条数据?
    javascript中的float运算精度
    .Net与Java的互操作(.NET StockTrader微软官方示例应用程序)
    《Microsoft Sql server 2008 Internals》读书笔记第十一章DBCC Internals(6)
  • 原文地址:https://www.cnblogs.com/sunyunh/p/2623293.html
Copyright © 2011-2022 走看看