HTML 属性
大多数HTML标记也可以具有属性,这些属性是额外的信息位。
属性用于定义HTML元素的特征,并将其放置在元素的开始标记内。
通常由像 name="value"这样的名称/值对组成。
名称name是要设置的属性。
例如,段落<p align = "left">左对齐段落</p>
元素包含一个名为align的属性,可以使用该属性指示页面上段落的对齐方式。
值value是我们希望设置的属性值,属性值应该始终用引号括起来。
除了某些属性值,如‘id’和‘class’属性,属性名和属性值不区分大小写。
然而,万维网联盟(W3C)在他们的html4推荐中推荐小写的属性/属性值。
<p align = "left">This is left aligned</p> <p align = "center">This is center aligned</p> <p align = "right">This is right aligned</p>
单引号和双引号都可以用来引用属性值。
然而,双引号是最常见的。
在属性值本身包含双引号的情况下,必须将值包装在单引号中,例如,value='Hello "Hyman",Welcome '
HTML5中有几个属性不包含name/value对,只包含名称name。
这种属性称为布尔属性。比如 checked
, disabled
, readonly
, required
等
核心属性
可用于大多数HTML元素(尽管不是全部)的四个核心属性是:
id
, title
, class
, style
id属性
HTML标记的id属性可用于唯一标识HTML页面中的任何元素。
这使得使用CSS或JavaScript选择元素变得更容易。
元素的id在一个文档中必须是唯一的。
同一个文档中的两个元素不能用相同的“id”命名,而且每个元素只能有一个“id”。
<input type="text" id="firstName"> <div id="container">内容</div> <p id="infoText">段落</p>
title属性
title属性为元素提供建议的标题。
<h3 title = "Hello HTML!">标题</h3> <a href="images/theitroad.jpg" title="点击查看大图片"> <img src="images/theitroad-thumb.jpg" alt="图片"> </a>
当用户将鼠标移到元素上时,“title”属性的值(即标题文本)会被web浏览器显示为光标的工具提示。
class属性
与“id”属性一样,“class”属性也用于标识元素。
与' id '不同的是,' class '属性在文档中不必是唯一的。
class属性用于将元素与样式表关联,并指定元素的类。
在学习级联样式表(CSS)时,我们将了解更多关于class属性的使用的信息。
属性的值也可以是以空格分隔的类名列表。
class = "className1 className2 className3"
style样式属性
style属性允许我们在元素中指定级联样式表(CSS)规则。如颜色、字体、边框等。
<p style = "font-family:arial; color:#FF0000;">style属性设置段落文本的字体和颜色</p> <p style="color: blue;">style属性设置段落文本的颜色</p> <img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky"> 设置图片的宽度 <div style="border: 1px solid red;">设置边框</div>
我们还没有学习CSS,现在只需要了解什么是HTML属性,以及在格式化内容时如何使用它们。
国际化属性
有三个国际化属性,可用于大多数(尽管不是所有)XHTML元素。
dir
lang
xml:lang
dir属性
dir属性允许我们向浏览器指示文本应该流向的方向。
dir属性可以取两个值之一:
值 | 说明 |
---|---|
ltr | 从左到右(默认值) |
rtl | 从右向左(用于希伯来语或阿拉伯语等从右向左阅读的语言) |
<!DOCTYPE html> <html dir = "rtl"> <head> <title>设置显示方向</title> </head> <body> 将从右向左显示文本 </body> </html>
当dir属性在<html>
标记中使用时,它决定文本在整个文档中的显示方式。
当在另一个标记中使用时,它只控制该标记的内容文本方向。
lang属性
lang属性允许我们指示文档中使用的主要语言,但此属性保留在HTML中只是为了与早期版本的HTML向后兼容。在新的XHTML文档中,此属性已被xml:lang属性替换。
lang属性的值是ISO-639标准双字符语言代码。
<!DOCTYPE html> <html lang = "en"> <head> <title>英文</title> </head> <body> 这个网页将使用英文 </body> </html>
xml:lang属性
这个xml:lang属性是lang属性的XHTML替换。
通用属性
下面是一些其他属性的表,这些属性常用于许多HTML标记。
属性 | 可选值 | 说明 |
---|---|---|
align | right, left, center | 水平对齐标记 |
valign | top, middle, bottom | HTML元素中的垂直对齐标记。 |
bgcolor | 数字、十六进制、RGB值 | 设置背景色 |
background | 图片链接地址 | 设置背景图像 |
id | 用户自定义 | 命名用于级联样式表的元素。 |
class | 用户自定义 | 对用于级联样式表的元素进行分类。 |
width | 数值 | 指定表格、图像或表格单元格的宽度。 |
height | 数值 | 指定表格、图像或表格单元格的高度。 |
title | 用户自定义 | 元素的“弹出”标题。 |
有关HTML标记和相关属性的完整列表,请参阅 HTML标记列表。