第7课:HTML标签的属性

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

属性是什么?

HTML通过标签告诉浏览器如何展示网页(比如告诉浏览器显示一个换行)。你可以为某些元素附加一些信息,这些附加信息被称为属性(attribute)。
例1:

<h2 style="background-color: #ff0000;">上125jz.com学网页制作</h2>

属性应写在元素的首标签上。具体写法是:属性名称(attribute name)后紧跟一个等号(“=”),后面写上用双引号括起来的属性值(attribute value)。上例是设置2级标题的背景颜色为红色,显示效果如下:

上125jz.com学网页制作

属性有许多,我们首先学习的是style属性,它用于为网页设定样式,比如设置背景颜色等。
例2:

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

该例将在浏览器中显示一个背景颜色为红色的页面——自己动手试试看。稍后我们会详细讲解颜色设置的原理。
别忘了用双引号把属性值(attribute value)括起来。 为什么上面那个页面全是红的? 在上例中,我们将网页的背景颜色设置为“#ff0000”,这个十六进制代码(HEX)代表红色。每个颜色都有其对应的十六进制代码。下面是一些例子:

颜色 颜色名和RGB
黑色 Black=#000000
红色 Red=#ff0000
蓝色 Blue=#0000ff
白色 White=#ffffff
黄色 Yellow=ffff00
绿色 Green=#00ff00
海蓝色 Aqua=#00ffff

十六进制代码由“#”打头,后面跟六位数字或字母。除此以外,对于一些最常用的颜色(比如白色、黑色、红色、兰色、绿色及黄色等),你还可以使用它们的英语名称。
例3:

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

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

哪些元素可以使用属性?

HTML里有很多元素,同样也有很多属性。有些属性仅用于个别元素,有些属性可用于很多元素。反之亦然:有些元素只能使用个别属性,有些元素可以使用较多的属性。
听起来这也许很令人困惑,不过一旦你熟悉了各个属性,就会感到很简单,并觉得它们很有用处。
一个元素包括哪些部分?
一般来说,一个元素包括一个首标签(start tag)、零或多个属性(attribute)、一些内容和一个尾标签(end tag)。就这么简单, 参见下图。 一个元素

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/489.html

(2)
江山如画的头像江山如画管理团队
第8课:如何做各种超链接?
上一篇 2018年1月20日 下午2:05
第6课:学习更多HTML元素
下一篇 2018年1月20日 下午3:16

99%的人还看了以下文章

  • 网页中的框架(详解)

    所谓框架便是网页画面分成几个框窗,同时取得多个 URL。 一、制作框架页面的步骤: 1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接,在子框架中设定链接。 注意:框架页面是不含标签的 二、基本语法 <frameset> <frame src=”url”> <noframes&g…

    2020年4月11日
    15.6K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    8.0K0
  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    6.8K0
  • 手把手,永哥教你学会css sprite(雪碧图)技术

    css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。 css sprite优点: 有效减少网站的http请求数量,加…

    2018年2月20日
    14.2K0
  • CSS制作三行二列居中布局,高度自适应

    本实例要制作三行二列网页布局,这是网页制作中最常见的布局方式,如何使整个页面内容居中,如何使高度适应内容自动伸缩,是本实例中的难点。 <html> <head> <style type="text/css"> body{ background:#999; text-align:center; color…

    2018年7月29日
    7.4K0
  • CSS的浮动及清除浮动的5种方法

    css属性float:left/right/none 左浮动/右浮动/不浮动(默认),文章介绍了清除浮动的5种方法,并指出其实现原理、优缺点和使用建议。

    2019年11月5日
    7.2K0

发表回复

登录后才能评论