Dotcpp  >  编程教程  >  HTML语法  >  HTML属性的定义和使用

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>

展示如下:

HTML标签


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 元素的属性:

属性描述
class为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id定义元素的唯一id
style规定元素的行内样式(inline style)
style描述了元素的额外信息 (作为工具条使用)



本文固定URL:https://www.dotcpp.com/course/1102

Dotcpp在线编译      (登录可减少运行等待时间)