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

  • HTML5网页中如何嵌入音频,视频?

    《HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。 本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3、Wav 和 Ogg 格式的音频,代码示例: <audio controls>…

    2019年11月23日
    5.7K0
  • CSS进阶,4个案例入门,学会LESS使用

    Less 简介 什么是LESSCSS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。 Less语言特性 LESS的变量 变量允许我们单独定义一系列通用的样式…

    2019年7月17日
    4.7K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    5.7K0
  • jquery全选和反选功能代码,兼容所有浏览器

    <!doctype html> <html> <head> <meta charset=”utf-8″> <title>jquery全选和反选功能代码,兼容所有浏览器|www.125jz.com</title> <script type=”text/javascript” src=…

    2019年11月1日
    5.5K0
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    18.4K0
  • HTML5的视频播放控制技术

    介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。

    2019年10月15日
    11.8K0

发表回复

登录后才能评论