无涯教程-HTML - 属性

97 阅读5分钟

无涯教程很少看到HTML标签及其用法,例如标题标签<h1>,<h2>,段落标签<p>和其他标签。 到目前为止以最简单的形式使用它们,但是大多数HTML标签也可以具有属性,这些属性是额外的信息。

属性用于定义HTML元素的特征,并放置在元素的开始标签内。所有属性都由两部分组成-名称(name)和值(value)

  • name   - 是您要设置的属性, 例如,示例中的段落<p>元素带有一个名称为align的属性,您可以使用该属性指示页面上段落的对齐方式。

  • value   - 是您想要设置属性的值。下面的示例显示align属性的三个可能值:左(left),居中(center)和右(right)。

属性名称和属性值不区分大小写。

<!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 属性

可以在大多数HTML元素(尽管不是全部)上使用的四个核心属性是-

  • id        -  定义元素的唯一id
  • title    -   描述了元素的额外信息
  • class   -  为html元素定义一个或多个类名(classname)
  • Style   -  规定元素的行内样式(inline style)

Id 属性

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 属性为元素提供了标题。它们的 title 属性语法类似于 id 属性的解释-

该属性的行为将取决于承载该属性的元素,尽管当光标移到该元素上方或加载该元素时,该属性通常显示为工具提示。

<!DOCTYPE html>
<html>

<head> <title>Title Attribute Example</title> </head>

<body> <h3 title="Hello HTML!">Titled Heading Tag Example</h3> </body>

</html>

这将产生以下输出-

现在尝试将光标移到“Titled Heading Tag Example”上,您将看到title提示信息。

Class 属性

class 属性用于将元素与样式表相关联,并指定元素的类,当您学习级联样式表(CSS)时,您将学到更多关于class属性的用法。

该属性的值也可以是类名称的用空格分隔的列表。如-

class="className1 className2 className3"

Style 属性

样式属性允许您在元素内指定级联样式表(CSS)规则。

<!DOCTYPE html>
<html>

<head> <title>样式属性</title> </head>

<body> <p style="font-family:arial; color:#FF0000;">Some text...</p> </body>

</html>

这将产生以下输出-

目前,无涯教程还没有学习CSS,因此继续进行,不要为CSS烦恼。在这里,您需要了解什么是HTML属性以及在格式化内容时如何使用它们。

国际化属性

有三个国际化属性,它们可用于大多数(尽管不是全部)XHTML元素。

  • dir
  • lang
  • xml:lang

HTML Dir 属性

dir 属性使您可以向浏览器指示文本应沿的方向流动。 dir属性可以采用两个值之一,如下表所示:

含义
ltr 从左到右(默认值)
rtl 从右到左(对于希伯来语或阿拉伯语等从右到左阅读的语言)
<!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 属性

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 属性

xml:lang 属性是 lang 属性的XHTML替代。如上一节所述, xml:lang 属性的值应为ISO-639国家/地区代码。

通用属性

这是一些其他属性的表,这些属性可以很容易地与许多HTML标签一起使用。

属性 选项 函数
align right,left,center 水平对齐标签
valign top,middle,bottom 在HTML元素内垂直对齐标签。
bgcolor numeric,十六进制,RGB值 在元素后面放置background color
background URL 在元素后面放置背景图片
id 用户定义 命名用于级联样式表的元素。
class 用户定义 对要与级联样式表一起使用的元素进行分类。
width 数值 指定表格,图像或表格单元格的宽度。
height 数值 指定表格,图像或表格单元格的高度。
title 用户定义 元素弹出的标题。

在继续研究其他HTML标签时,无涯教程将看到相关示例。有关HTML标签和相关属性的完整列表,请检查对HTML标签列表的引用。

参考链接

www.learnfk.com/html/html-a…