第7课:属性


第7课:属性
许多元素都可以设置属性。

属性是什么?
也许你还记得,HTML通过标签告诉浏览器如何展示网页(比如<br />告诉浏览器显示一个换行)。你可以为某些元素附加一些信息,这些附加信息被称为属性(attribute)。

例1:


<h2 style="background-color:#ff0000;">我跟HTML的友谊</h2>


属性应写在元素的首标签上。具体写法是:属性名称(attribute name)后紧跟一个等号(“=”),后面写上用双引号括起来的属性值(attribute value)。对于style属性的值,可以用分号(“;”)来分隔多个样式指令。这个后面会介绍。

这里涉及什么知识点?
属性有许多,我们首先学习的是style属性,它用于为网页设定样式,比如设置背景颜色等。

例2:


<html>
 
  <head>
  </head>

  <body style="background-color:#ff0000;">
  </body>

</html>


该例将在浏览器中显示一个全是红色的页面——自己动手试试看。稍后我们会详细讲解颜色设置的原理。

注意,一些元素和属性的名称采用的是美式拼写,比如color(而不是colour)。请留意本教程中元素与属性名称的拼写,千万不要写错——否则浏览器将无法理解你的代码。而且,别忘了用双引号把属性值(attribute value)括起来。

为什么上面那个页面全是红的?
在上例中,我们将网页的背景颜色设置为“#ff0000”,这个十六进制代码(HEX)代表红色。每个颜色都有其对应的十六进制代码。下面是一些例子:

白色: #ffffff
黑色: #000000
红色: #ff0000
兰色: #0000ff
绿色: #00ff00
黄色: #ffff00

十六进制代码由“#”打头,后面跟六位数字或字母。由于这样的十六进制代码太多,不便记住哪个代码对应哪个特定颜色。为此,我们为最常用的216个颜色制作了一张表,供大家参阅:216个网页安全颜色表<见文章底部>。

除此以外,对于一些最常用的颜色(比如白色、黑色、红色、兰色、绿色及黄色等),你还可以使用它们的英语名称。

例3:


<body style="background-color: red;">


关于颜色就讲这么多了。让我们继续学习属性。

哪些元素可以使用属性?
不同元素使用不同的属性。

有些元素(比如body等)被添加属性的机会比较大,而有些元素(比如br等)则较小、甚至不会被添加属性。

HTML里有很多元素,同样也有很多属性。有些属性仅用于个别元素,有些属性可用于很多元素。反之亦然:有些元素只能使用个别属性,有些元素可以使用较多的属性。

听起来这也许很令人困惑,不过一旦你熟悉了各个属性,就会感到很简单,并觉得它们很有用处。

本教程将介绍大多数重要属性。

一个元素包括哪些部分?
一般来说,一个元素包括一个首标签(start tag)、零或多个属性(attribute)、一些内容和一个尾标签(end tag)。就这么简单, 参见下图。

 

附件:216个网页安全颜色表

 

216 Web Safe Colour Chart
FFFFFF FFCCFF FF99FF FF66FF FF33FF FF00FF
FFFFCC FFCCCC FF99CC FF66CC FF33CC FF00CC
FFFF99 FFCC99 FF9999 FF6699 FF3399 FF0099
FFFF66 FFCC66 FF9966 FF6666 FF3366 FF0066
FFFF33 FFCC33 FF9933 FF6633 FF3333 FF0033
FFFF00 FFCC00 FF9900 FF6600 FF3300 FF0000
CCFFFF CCCCFF CC99FF CC66FF CC33FF CC00FF
CCFFCC CCCCCC CC99CC CC66CC CC33CC CC00CC
CCFF99 CCCC99 CC9999 CC6699 CC3399 CC0099
CCFF66 CCCC66 CC9966 CC6666 CC3366 CC0066
CCFF33 CCCC33 CC9933 CC6633 CC3333 CC0033
CCFF00 CCCC00 CC9900 CC6600 CC3300 CC0000
99FFFF 99CCFF 9999FF 9966FF 9933FF 9900FF
99FFCC 99CCCC 9999CC 9966CC 9933CC 9900CC
99FF99 99CC99 999999 996699 993399 990099
99FF66 99CC66 999966 996666 993366 990066
99FF33 99CC33 999933 996633 993333 990033
99FF00 99CC00 999900 996600 993300 990000
66FFFF 66CCFF 6699FF 6666FF 6633FF 6600FF
66FFCC 66CCCC 6699CC 6666CC 6633CC 6600CC
66FF99 66CC99 669999 666699 663399 660099
66FF66 66CC66 669966 666666 663366 660066
66FF33 66CC33 669933 666633 663333 660033
66FF00 66CC00 669900 666600 663300 660000
33FFFF 33CCFF 3399FF 3366FF 3333FF 3300FF
33FFCC 33CCCC 3399CC 3366CC 3333CC 3300CC
33FF99 33CC99 339999 336699 333399 330099
33FF66 33CC66 339966 336666 333366 330066
33FF33 33CC33 339933 336633 333333 330033
33FF00 33CC00 339900 336600 333300 330000
00FFFF 00CCFF 0099FF 0066FF 0033FF 0000FF
00FFCC 00CCCC 0099CC 0066CC 0033CC 0000CC
00FF99 00CC99 009999 006699 003399 000099
00ff66 00cc66 009966 006666 003366 000066
00FF33 00CC33 009933 006633 003333 000033
00FF00 00CC00 009900 006600 003300 000000

 

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3