第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%的人还看了以下文章

  • vue学习v-on:click绑定HTML的单击事件

    v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…

    2020年6月14日
    8.1K0
  • 第8课:如何做各种超链接?

    在这一课,你将学习如何在网页之间做超链接。 如何做超链接? 做链接只需一个元素<a>和一个属性href就行了。下面是一个例子,它是一个指向www.125jz.com的链接: 例1: <a href=”http://www.125jz.com/”>指向www.125jz.com的链接</a> 该例在浏览器中将显示如下: 指向…

    2018年1月20日
    9.7K0
  • Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

    css多栏自适应布局一般使用position属性布局,或者用float属性布局,也可以使用display属性。 position适合首页布局,因为首页内容往往可以完全控制。float适合模板布局,模板中填充的内容无法控制。 相关阅读:左侧固定,右侧自适应布局的两种实现方法 1、浮动实现 原理:左侧定宽浮动,右侧使用margin-left,且不要定宽,容器尺寸…

    2021年11月29日
    11.6K0
  • 第15课:最后提示

    祝贺!你已经进入最后一课了! 我已经学到全部知识了? 如果你已经学完以上教程,恭喜你,你已经学到了很多关于HTML的知识,并且完全有能力创建自己的网站!不过,你所学到的只是基础知识,还有许多内容需要掌握。但是你已经为进一步学习打下了坚实的基础。 在最后这一课中,我们将给予一些最后提示: 首先,在HTML文档中,应保持正确的顺序与结构。令你的HTML文档具有良…

    2018年1月18日
    8.2K0
  • 36个漂亮的CSS3动态按钮,纯CSS制作无图片

    36个漂亮的纯CSS制作的动态按钮。

    2020年2月2日
    11.5K0
  • PS图片转页面CSS+HTML的步骤

    标准的网页制作流程是:拿到网站美工制作的psd效果图后,网页设计师再把PS制作的图片转html页面。

    网页制作 2020年2月12日
    9.7K0

发表回复

登录后才能评论