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

  • js实现两个页面表单传值并接收

    网页制作时,需要两个页面之间传值,通过JS就可轻松实现。 js 实现两个页面表单传值并接收源码 A页面: <input type=”text” id=”txt”> <input type=”button” value=”测试” onclick=”test()”/> <SCRIPT LANGUAGE=”JavaScript”&gt…

    2019年7月10日
    5.7K0
  • CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after,我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…

    2019年1月5日 网页制作
    10.6K0
  • 如何制作图片按钮,并为图片按钮添加提交表单和重置表单功能

    网页中有表单,表单的默认按钮样式不是很好看,很多人为了美观使用图片做按钮。 今天中国网页设计给大家分享在网页制作中怎么制作图片按钮,并为图片按钮添加提交表单和重置表单功能。 一、图片按钮的制作方法 1、<input type=”image” /> 定义图像形式的提交按钮。 <input type=”image” sr…

    2018年9月30日
    11.0K0
  • 第5课:到目前为止学到了些什么?

    上一课我们已经学习了这些: <html> <head><title></title></head> <body> </body> </html> 网页标题(title)写在head(头部)里:<title>网页标题写在这里</title>。…

    2018年1月20日
    8.2K0
  • 导航特效:jquery实现当前(活动)菜单样式变化

    用户点击导航或菜单上不同的栏目,被选中的导航栏目会变换样式,出现图片或背景颜色的变化,用于标识是否是当前栏目或活动选项。 本教程使用jquery实现导航菜单当前(活动)菜单样式变化,导航菜单模式用的是背景颜色,你可以换成背景图片以符合建站需要。 当前(活动)菜单样式变化实现原理 在html代码中给首页(默认选中)加上class名cur <a href=…

    2018年2月8日
    7.6K0
  • CSS 实现水平、垂直居中布局代码大全

    CSS实现水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置width:fit-content并且配合margin .parent { width: -webkit-fit-content; width: -moz-fit…

    2019年11月26日
    17.6K0

发表回复

登录后才能评论