HTML 属性

时间:2019-06-08 23:19:22  来源:igfitidea点击:

大多数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元素。

  1. dir

  2. lang

  3. 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标记。

属性可选值说明
alignright, left, center水平对齐标记
valigntop, middle, bottomHTML元素中的垂直对齐标记。
bgcolor数字、十六进制、RGB值设置背景色
background图片链接地址设置背景图像
id用户自定义命名用于级联样式表的元素。
class用户自定义对用于级联样式表的元素进行分类。
width数值指定表格、图像或表格单元格的宽度。
height数值指定表格、图像或表格单元格的高度。
title用户自定义元素的“弹出”标题。

有关HTML标记和相关属性的完整列表,请参阅 HTML标记列表