我们看到很少的HTML标记及其用法,例如标题标记< h1>,< h2>,段落标记< p> 和其他标记.到目前为止,我们以最简单的形式使用它们,但是大多数HTML标记也可以具有属性,这些属性是额外的信息.
属性用于定义HTML的特征元素并放置在元素的开始标记内.所有属性都由两部分组成; a 名称和值
名称是您要设置的属性.例如,示例中的段落< p> 元素带有一个名称为 align 的属性,您可以使用该属性指示页面上段落的对齐方式.
值是您希望设置属性值并始终放在引号内的值.以下示例显示了三个可能的align属性值: left,center 和 right .
属性名称和属性值不区分大小写.但是,万维网联盟(W3C)建议在其HTML 4推荐中使用小写属性/属性值.
<!DOCTYPE html> <html> <head> <title>Align Attribute Example</title> </head> <body> <p align = "left">This is left aligned</p> <p align = "center">This is center aligned</p> <p align = "right">This is right aligned</p> </body> </html>
这将显示以下结果 :
可以在大多数HTML元素(尽管不是全部)上使用的四个核心属性是:
Id
Title
Class
Style
HTML标记的id属性可用于唯一标识HTML页面中的任何元素。 您可能要在元素上使用id属性有两个主要原因:
如果元素带有id属性作为唯一标识符,则可以仅识别该元素及其内容。
如果在网页(或样式表)中有两个具有相同名称的元素,则可以使用id属性来区分具有相同名称的元素。
我们将在单独的教程中讨论样式表。 现在,让我们使用id属性来区分两个段落元素,如下所示。
示例
<p id = "html">This para explains what is HTML</p> <p id = "css">This para explains what is Cascading Style Sheet</p>
title属性为元素提供建议的标题。 它们对title属性的语法类似于对id属性的解释:
该属性的行为将取决于承载该属性的元素,尽管当光标移到该元素上方或加载该元素时,该属性通常显示为工具提示。
示例
<!DOCTYPE html> <html> <head> <title>The title Attribute Example</title> </head> <body> <h3 title = "Hello HTML!">Titled Heading Tag Example</h3> </body> </html>
现在尝试将光标移到"标题标题示例"上,您会看到您在代码中使用的任何标题都将作为光标的提示出现。
class属性用于将元素与样式表相关联,并指定元素的类。 当您学习级联样式表(CSS)时,您将学到更多关于class属性的用法。 所以现在您可以避免它。
该属性的值也可以是类名称的用空格分隔的列表。 例如:
class = "className1 className2 className3"
样式属性允许您在元素内指定级联样式表(CSS)规则。
<!DOCTYPE html> <html> <head> <title>The style Attribute</title> </head> <body> <p style = "font-family:arial; color:#FF0000;">Some text...</p> </body> </html>
目前,我们还没有学习CSS,因此让我们继续进行,不要为CSS烦恼。 在这里,您需要了解什么是HTML属性以及在格式化内容时如何使用它们。
有三个国际化属性,它们可用于大多数(尽管不是全部)XHTML元素。
dir
lang
xml:lang
dir属性使您可以向浏览器指示文本应沿哪个方向流动。 dir属性可以采用两个值之一,如下表所示:
Value | Meaning |
---|---|
ltr | Left to right (the default value) |
rtl | Right to left (for languages such as Hebrew or Arabic that are read right to left) |
示例
<!DOCTYPE html> <html dir = "rtl"> <head> <title>Display Directions</title> </head> <body> This is how IE 5 renders right-to-left directed text. </body> </html>
在<html>标记中使用dir属性时,它确定如何在整个文档中显示文本。 在另一个标签中使用时,它仅控制该标签内容的文本方向。
lang属性允许您指示文档中使用的主要语言,但是此属性保留在HTML中只是为了与HTML的早期版本向后兼容。 在新的XHTML文档中,此属性已由xml:lang属性代替。
lang属性的值是ISO-639标准的两个字符的语言代码。 检查HTML语言代码:ISO 639以获取语言代码的完整列表。
示例
<!DOCTYPE html> <html lang = "en"> <head> <title>English Language Page</title> </head> <body> This page is using English Language </body> </html>
xml:lang 属性是 lang 属性的XHTML替换. xml:lang 属性的值应为ISO-639国家/地区代码,如上一节所述.
以下是一些其他属性的表格,这些属性可以与许多HTML标记一起使用.
属性 | 选项 | 功能 |
---|---|---|
align | 右,左,center | 水平对齐标签 |
valign | top,middle,bottom | 垂直对齐HTML元素中的标记. |
bgcolor | 数字,十六进制,RGB值 | 在元素后面放置背景颜色 |
background | URL | 在元素后面放置背景图像 |
id | 用户定义 | 命名一个用于层叠样式表的元素. |
class | 用户定义 | 对用于层叠样式表的元素进行分类. |
width | 数值 | 指定表格,图像或表格单元格的宽度. |
height | 数值 | 指定表格,图像或表格单元格的高度. |
title | 用户定义 | 元素的"弹出"标题. |
我们将看到相关示例,因为我们将继续研究其他HTML标记.有关HTML标记和相关属性的完整列表,请参阅 HTML标记列表.