HTML属性的概念和使用
通过前面的学习,我们已经对 HTML 标签有了简单的认识,知道可以在标签中可以添加一些属性,这些属性包含了标签的额外信息,例如:
href 属性可以为 <a> 标签提供链接地址;
src 属性可以为 <img> 标签提供图像的路径;
style 属性可以为几乎所有标签定义 CSS 样式。
本节我们就来讲解一下 HTML 标签属性的概念和用法。
什么是属性
属性可以为 HTML 标签提供一些额外信息,或者对 HTML 标签进行修饰。属性需要添加在开始标签中,语法格式为:
attr="value"
attr 表示属性名,value 表示属性值。属性值必须使用双引号" "
或者单引号' '
包围。注意,虽然双引号和单引号都可以包围属性值,但是为了规范和专业,请尽量使用双引号。
一个标签可以没有属性,也可以有一个或者多个属性。使用 HTML 属性的例子:
<p id="user-info" class="color-red">欢迎 <font color="red" size="3">Tom</font> 来到C语言中文网,您已经使用本站 3 年了,这是您第 12 次登录。<p>
<div class="clearfloat">
<p class="left">这里显示 Tom 的账号信息</p>
<p class="right">这里显示 Tom 的个性签名</p>
</div>
专用属性
HTML 属性有很多,大体可以分为两类:
有些属性适用于大部分或者所有 HTML 标签,我们将这些属性称为通用属性;
有些属性只适用于一个或者几个特定的 HTML 标签,我们将这些属性称为专用属性。
HTML 中的 <img> 标签就有 src 和 alt 两个专用属性,<a> 标签也有 href 和 target 两个专用属性,如下例所示:
<img src="./logo.png" alt="C语言中文网Logo" width="100" height="50">
<a href="http://c.biancheng网站站点" rel="nofollow" />
图1:HTML 自定义属性演示
通用属性介绍
HTML 标签中有一些通用的属性,如 id、title、class、style 等,这些通用属性可以在大多数 HTML 标签中使用,下面来简单介绍一下它们的用法。1) id
id 属性用来赋予某个标签的名称(标识符),当我们使用 CSS 或者 JavaScript 来操作这个标签时,就可以通过 id 属性来找到这个标签。为标签定义 id 属性可以给我们提供很多便利,比如:
如果标签中带有 id 属性作为标识符,通过 id 属性可以很方便的定位到该标签;
如果 HTML 文档中包含多个同名的标签,利用 id 属性的性,可以很方便的区分它们。
注意:在一个 HTML 文档中 id 属性的值必须是的。
示例代码如下所示:<input type="text" id="username" />
<div id="content">C语言中文网</div>
<p id="url">http://c.biancheng网站站点" rel="nofollow" />
<div class="className1 className2 className3"></div>
<p class="content">C语言中文网</p>
<div class="content">http://c.biancheng网站站点" rel="nofollow" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
</head>
<body>
<a href="http://c.biancheng网站站点" rel="nofollow" />
图2:HTML title 属性演示