好东西不私藏,大家一起分享!爱站云 用心做
广告位 后台主题配置管理

网站首页 爱站云资源网 技术教程 正文

第7课:属性

梦哥 2019-03-14 技术教程 0 评论

许多元素都可以设置属性。

属性是什么?

也许你还记得,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


< 爱站云SEO >
本站所有文章,未经允许一律不允许转载,违者后果自负
本站为SEO教学博客,学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站部分文章存在于网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:207385345  官方QQ群:333914614


猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
搜索
标签列表
关于我们
本人提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
联系我们:给我发QQ消息  加入QQ群
爱站云安全认证