HTML属性的定义和使用

通过前面的学习，我们已经对HTML标签有了简单的认识，知道可以在标签中可以添加一些属性，这些属性包含了标签的额外信息，例如：

（1）href 属性可以为 <a> 标签提供链接地址；

（2）src 属性可以为 <img> 标签提供图像的路径；

（3）style 属性可以为几乎所有标签定义CSS 样式。

本篇我们就来讲解一下 HTML 标签属性的定义和用法。

一、什么是属性？

属性可以为 HTML 标签提供一些附加信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为：

attr="value"

attr 表示属性名，value 表示属性值。属性值必须使用双引号" "或者单引号' '包围。

注意：虽然双引号和单引号都可以包围属性值，但是为了规范和专业，请尽量使用双引号。

一个标签可以没有属性，也可以有一个或者多个属性。

使用 HTML 属性的例子：

<p id="user-info" class="color-red">欢迎您 <font color="red" 
size="3">用户名</font> 来到C语言网，您已经使用本站3年，这是您第264次登录。<p>
<div class="clearfloat">
    <p class="left">用户名账号信息</p>
    <p class="right">用户名个性签名</p>
</div>

展示如下：

1. 专用属性

HTML 属性有很多，大体可以分为两类：

（1）有些属性适用于大部分或者所有 HTML 标签，我们将这些属性称为通用属性；

（2）有些属性只适用于一个或者几个特定的 HTML 标签，我们将这些属性称为专用属性。

HTML 中的 <img> 标签就有 src 和 alt 两个专用属性，<a> 标签也有 href 和 target 两个专用属性，如下例所示：

<img src="./logo.png" alt="C语言网Logo" width="100" height="50">

<a href="http://c.biancheng.net/" target="_blank">C语言网</a>

对代码的说明：

<img> 标签中的 src 属性用来定义图像的路径，alt 属性用来定义图像的描述信息，当图像出现异常无法正常显示时就会显示 alt 中的信息。

<a> 标签的 href 属性用来定义链接的地址，target 属性用来定义新页面在浏览器中的打开方式。

2. 自定义属性

除了自带的属性，HTML 也允许我们自定义属性，这些属性虽然可以被浏览器识别，但是并不会添加什么特殊效果，我们需要借助 CSS 和 JavaScript 处理自定义属性，为 HTML 标签添加指定样式或者行为。

二、HTML 属性

● HTML 元素可以设置属性

● 属性可以在元素中添加附加信息

● 属性一般描述于开始标签

● 属性总是以名称/值对的形式出现，比如：name="value"。

小结：HTML中的元素可以通过设置属性为HTML元素提供附加信息；属性，为属于该元素的特性。

1. 常用属性

以下为适用于大多数HTML元素的属性

（1）class

为html元素定义一个或多个类名(classname)(类名从样式文件引入)

class属性可以多用，即class="classname1 classname2 classname3 ..." (引号里面可以填入多个class属性)

（2）id

定义元素的唯一id

id属性只能单独设置，即id="myid"（只能填写一个，多个无效）

（3）style

规定元素的行内样式(inline style)

（4）title

描述了元素的额外信息(作为工具条使用)

2. HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='John "ShotGun" Nelson'

3. HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

4. HTML 属性参考手册

查看完整的HTML属性列表: HTML 标签列表。

下面列出了适用于大多数 HTML 元素的属性：