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

  • CSS的浮动及清除浮动的5种方法

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

    2019年11月5日
    7.5K0
  • JS实现开关效果,可单选和组选

    JS实现的checkbox开关效果,可单个打开开关,也可一次关闭所有或打开所有开关。 <html> <head lang="en"> <meta charset="UTF-8"> <title>JS实现开关效果,可单选和组选|www.125jz.com</title…

    2018年7月29日
    11.5K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    5.7K0
  • 纯CSS3制作的垂直手风琴效果,点击标题展开详细介绍

    纯CSS3制作的垂直手风琴效果 CSS代码: @import url(“css/font-awesome.css”); * { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; font: 16px/1 ‘O…

    2018年12月26日
    9.9K0
  • 3个超酷的CSS3图片动画特效:图片变圆角,放大,旋转

    本实例制作需要学习《CSS3 transition transform属性及实例详解》,学完后可先练习CSS3 transform:rotate()制作旋转图片 See the Pen 三个CSS3图片动画特效 by 江山如画 (@jgyzhr)on CodePen.

    2020年1月1日
    10.4K0
  • 第10课:外边距和内边距

    上一课,你学习了盒状模型。在这一课,我们将了解如何通过设置margin(外边距)和padding(内边距)这两个CSS属性来改变元素的显示。 为元素设置外边距 为元素设置内边距 为元素设置外边距 一个元素有上(top)、下(bottom)、左(left)、右(right)四个边。外边距(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…

    2020年2月25日
    9.0K0

发表回复

登录后才能评论