HTML属性

课后整理 2021-1-7

HTML元素包含的属性众多,这里仅就公共属性进行分析。公共属性大致可分为基本属性、语言属性、键盘属性、内容属性和延伸属性等类型。

基本属性

基本属性主要包括下面三个,这三个基本属性为大部分元素所拥有:

class                                                                       定义类规则或样式规则
id                                                                          定义元素的唯一标识
style                                                                       定义元素的样式声明

但是下面这些元素不拥有基本属性:

html、head                                                             文档和头部基本结构
title                                                                        网页标题
base                                                                       网页基准信息
meta                                                                      网页元信息
param                                                                    元素参数信息
script、style                                                           网页的脚本和样式

这些元素一般位于文档头部区域,用来标识网页元信息。

语言属性

语言属性主要用来定义元素的语言类型,包括两个属性:

lang                                                                定义元素的语言代码或编码
dir                                                                  定义文本的方向,包括ltr和rtl取值,分别表示从左向右和从右向左

下面这些元素不拥有语言语义属性:

frameset、frame、iframe                                  网页框架结构
br                                                                   换行标识
hr                                                                   结构装饰线
base                                                                网页基准信息
param                                                             元素参数信息
script                                                              网页的脚本

【示例】分别为网页代码定义了中文简体的语言,字符对齐方式为从左到右的方式。第二行代码为body定义了美式英语。

<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" xml:lang="zh-CN"> 
<body id="myid" lang="en-us">

键盘属性

键盘属性定义元素的键盘访问方法,包括两个属性:

accesskey                                                  定义访问某元素的键盘快捷键
tabindex                                                   定义元素的Tab键索引编号

使用accesskey属性可以使用快捷键(Alt+字母)访问指定URL,但是浏览器不能很好地支持,在IE中仅激活超链接,需要配合Enter键确定,而在FF中没有反应。

【示例】 在导航菜单中经常设置快捷键。

<a href="http://www.mysite.cn/"  accesskey="a">按住Alt键,单击A键可以链接到mysite首页</a>

tabindex属性用来定义元素的Tab键访问顺序,可以使用Tab键遍历页面中的所有链接和表单元素。遍历时会按照tabindex的大小决定顺序,当遍历到某个链接时,按Enter键即可打开链接页面。例如:

<a href="#" tabindex="1">Tab 1</a>
<a href="#" tabindex="3">Tab 3</a>
<a href="#" tabindex="2">Tab 2</a>

内容属性

内容属性定义元素包含内容的附加信息,这些信息对于元素来说具有重要补充作用,避免元素本身包含信息不全而被误解。内容语义包括五个属性:

alt                                                                          定义元素的替换文本
title                                                                        定义元素的提示文本
longdesc                                                                 定义元素包含内容的大段描述信息
cite                                                                        定义元素包含内容的引用信息
datetime                                                                 定义元素包含内容的日期和时间

alt和title是两个常用的属性,分别定义元素的替换文本提示文本,但是很多设计师习惯于混用这两个属性,没有刻意去区分它们的语义性。实际上,除了IE浏览器,其他标准浏览器都不会支持它们的混用,但是由于IE浏览器的纵容,才导致了很多设计师误以为alt属性就是设置提示文本的。

<a href="URL" title="提示文本">超链接</a>
<img src="URL" alt="替换文本" title="提示文本" />

替换文本(Alternate Text)并不是用来做提示的(Tool Tip),或者更加确切地说,它并不是为图像提供额外说明信息的。相反title属性才负责为元素提供额外说明信息。

当图像无法显示时,必须准备替换的文本来替换无法显示的图像,这对于图像和图像热点是必须的,因此alt属性只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性用来替换提交按钮的图片。

【示例】下面示例为图像域对象定义alt属性。

<input type="image" src="URL" alt="替换文本" />.

为什么要设置替换文本呢?这主要是因为浏览器被禁止显示、不支持或无法下载图像时,通过替换文本给那些不能看到图像的浏览者提供文本说明,这是一个很重要的预防和补救措施。另外,还应该考虑到网页对于视觉障碍者,或者使用其他用户代理,如屏幕阅读器、打印机等代理设备的影响。当然,从语义角度考虑,替换文本应该提供图像的简明信息,并保证在上下文中有意义,而对于那些修饰性的图片可以使用空值(alt="")。

title属性为元素提供提示性的参考信息,这些信息是一些额外的说明,具有非本质性,因此该属性也不是一个必须设置的属性。当鼠标指针移到元素上面时,即可看到这些提示信息。但是title属性不能够用在下面元素上:

html、head                                                                    文档和头部基本结构
title                                                                               网页标题
base、basefont                                                               网页基准信息
meta                                                                             网页元信息
param                                                                           元素参数信息
script                                                                            网页的脚本和样式

相对而言,title属性可以比alt属性设置更长的文本,不过有些浏览器可能会限制提示文本的长度,但是不管怎么规定,提示文本一定要简明、扼要,并用在恰当的地方,而不是所有元素身上都定义一个提示文本,那样就显得画蛇添足了。提示文本一般多用在超链接上,特别是对图标按钮必须提供提示性说明信息,否则用户就会不明白这些图标按钮的作用。

如果要为元素定义更长的描述信息,则应该使用longdesc属性。longdesc属性可以用来提供链接到一个包含图片描述信息的单独页面或者长段描述信息。其用法如下:

<img src="URL" alt="人物照" title="张三于2018-5-1中国馆留念" longdesc="这是张三于2018年5月1日在中国馆前的留影,当时天很热,穿着短裤,手里拿着矿泉水,到处都是云集于此的观众,场面热闹非凡" />

<img src="UTL" alt="替换文本" longdesc="详细描述图像的网页.html" />

这种方法意味着从当前页面链接到另一个页面,由此可能会造成理解上的困难。另外浏览器对于longdesc属性的支持也不一致,因此应该避免使用。如果感觉对图片的长描述信息很有用,那么不妨考虑把这些信息简单地显示在同一个文档里,而不是链接到其他页面或者藏起来,这样能够保证每个人都可以阅读。

cite一般用来定义引用信息的URL。例如,下面一段文字引自http://www.mysite.cn/csslayout/ index.htm,所以可以这样来设置:

<blockquote  cite="http://www.mysite.cn/csslayout/index.htm">
    <p>CSS的精髓是布局,而不是样式,布局是需要缜密的结构分析和设计</p>
</blockquote>

datetime属性定义包含文本的时间,这个时间表示信息的发布时间,也可能是更新时间,例如:

<ins datetime="2018-5-1 8:0:0">2018年上海外滩</ins>