HTML - 属性介绍 首页HTMLHTML - 属性

我们很少看到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标签一起使用。

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

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

这一章你学到了什么?做个笔记,好记忆不如烂笔头! 如果觉得对您有帮助,请分享给您的朋友。

祝学习愉快! (您也可以 选中需要修改的内容->右键->进行编辑)

点我分享笔记