下载掌阅APP，畅读海量书库
立即打开
HTML元素包含的属性众多，在某种情况下，属性的语义还不能清楚地表述，但是可以大致分为核心语义、语言语义、键盘语义、内容语义和延伸语义等类型。
提示：
HTML元素的部分属性属于修饰性属性，在标准设计中是不建议使用的。
核心语义属性（Core Attributes）主要包括下面3个，这3个基本属性为大部分元素所拥有。
class：Class（类）。定义类规则或样式规则。
id：IDentity（身份）。定义元素的唯一标识。
style：Style（样式）。定义元素的样式声明。
但是下面这些元素不拥有核心语义属性。
html、head：文档和头部基本结构。
title：网页标题。
base：网页基准信息。
meta：网页元信息。
param：元素参数信息。
script、style：网页的脚本和样式。
这些元素一般位于文档头部区域，用来传递网页元信息。
语言语义属性（Language Attributes）主要用来定义元素的语言类型，包括两个属性。
lang：Language（语言）。定义元素的语言代码或编码。
dir：Direction（方向）。定义文本方向，包括ltr和rtl取值，分别表示从左向右和从右向左。
下面这些元素不拥有语言语义属性。
frameset、frame、iframe：网页框架结构。
br：换行标识。
hr：结构装饰线。
base：网页基准信息。
param：元素参数信息。
script：网页的脚本。
【示例】 下面分别为网页代码定义了中文简体的语言，字符对齐方式为从左到右的方式。第二行代码为body定义了美式英语。
<html dir="ltr" xml:lang="zh-CN"><body id="myid" lang="en-us">
键盘语义属性（Keyboard Attributes）定义元素的键盘访问方法，包括两个属性。
accesskey：Access Key（访问键）。定义访问某元素的键盘快捷键。
tabindex：Tab Index（Tab键索引）。定义元素的Tab键索引编号。
使用accesskey属性可以使用快捷键（Alt+字母）访问指定URL，但是浏览器不能很好地支持，在IE中仅激活超链接，需要配合Enter键确定。
【示例1】 一般在导航菜单中经常设置快捷键。
tabindex属性用来定义元素的Tab键访问顺序，可以使用Tab键遍历页面中的所有链接和表单元素。遍历时会按照tabindex的大小决定顺序，当遍历到某个链接时，按Enter键即可打开链接页面。
【示例2】 下面的示例是在文档中插入3个超链接，并分别定义tabindex属性，这样可以通过Tab键快速切换超链接。
<a href="../Text/chapter3.xhtml#" tabindex="1">Tab 1</a><a href="../Text/chapter3.xhtml#" tabindex="3">Tab 3</a><a href="../Text/chapter3.xhtml#" tabindex="2">Tab 2</a>
内容语义属性（Content Attributes）定义元素包含内容的附加信息，这些信息对于元素来说具有重要补充作用，避免元素本身包含信息不全而被误解。内容语义包括5个属性。
alt：Alternate Text（替换文本）。定义元素的替换文本。
title：Title（标题）。定义元素的提示文本。
longdesc：Long Describe（长文描述）。定义元素包含内容的大段描述信息。
cite：Cite（引用）。定义元素包含内容的引用信息。
datetime：Date and Time（日期和时间）。定义元素包含内容的日期和时间。
下面讲解它们的基本用法。
alt和title是两个常用的属性，分别定义元素的替换文本和提示文本，但是很多设计师习惯于混用这两个属性，没有刻意去区分它们的语义性。实际上，除了IE浏览器，其他标准浏览器都不会支持它们的混用，但是由于IE浏览器的纵容，才导致了很多误以为alt属性就是设置提示文本的。
【示例1】 下面的示例分别在超链接和图像中定义title属性。
<a href="URL" title="提示文本">超链接</a><img src="URL" alt="替换文本" title="提示文本" />
替换文本（Alternate Text）并不是用来做提示的（Tool Tip），或者更加确切地说，它并不是为图像提供额外说明信息的。相反，title属性才负责为元素提供额外说明信息。
当图像无法显示时，必须准备替换的文本来替换无法显示的图像，这对于图像和图像热点是必需的，因此alt属性只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性用来替换提交按钮的图片。
【示例2】 下面的示例是在图像按钮域中定义alt属性
<input type="image" src="URL" alt="替换文本" />
当浏览器被禁止显示、不支持或无法下载图像时，通过替换文本给那些不能看到图像的浏览者提供文本说明，这是一个很重要的预防和补救措施。另外，还应该考虑到网页对于视觉障碍者，或者使用其他用户代理，如屏幕阅读器、打印机等代理设备的影响。
从语义角度考虑，替换文本应该提供图像的简明信息，并保证在上下文中有意义，而对于那些修饰性的图片可以使用空值（alt=""）。
title属性为元素提供提示性的参考信息，这些信息是一些额外的说明，具有非本质性，因此该属性也不是一个必须设置的属性。当鼠标指针移到元素上面时，即可看到这些提示信息。但是title属性不能够用在下面元素上。
html、head：文档和头部基本结构。
title：网页标题。
base、basefont：网页基准信息。
meta：网页元信息。
param：元素参数信息。
script：网页的脚本和样式。
相对而言，title属性可以比alt属性设置更长的文本，不过有些浏览器可能会限制提示文本的长度，因此提示文本一定要简明、扼要，并用在恰当的地方，而不是所有元素都定义一个提示文本，那样就显得画蛇添足了。提示文本一般多用在超链接上，特别是对图标按钮必须提供提示性说明信息，否则用户就会不明白这些图标按钮的作用。
如果要为元素定义更长的描述信息，则应该使用longdesc属性。longdesc属性可以用来提供链接到一个包含图片描述信息的单独页面或者长段描述信息。
【示例3】 下面的示例是使用longdesc属性定义图像的描述信息。
<img src="URL" alt="人物照" title="张三于2014-5-1中国馆留念" longdesc="这是张三于2014年5月1日在中国馆前的留影，当时天很热，穿着短裤，手里拿着矿泉水，到处都是云集于此的世博会开幕式观众，场面热闹非凡" />
或
<img src="UTL" alt="替换文本" longdesc="详细描述图像的网页.xhtml" />
这种方法意味着从当前页面链接到另一个页面，由此可能会造成理解上的困难。另外，浏览器对于longdesc属性的支持也不一致，因此应该避免使用。如果感觉对图片的长描述信息很有用，那么不妨考虑把这些信息简单地显示在同一个文档中，而不是链接到其他页面或者隐藏起来，这样能够保证每个人都可以阅读。
cite一般用来定义引用信息的URL。
【示例4】 下面一段文字引自http://www.mysite.cn/csslayout/ index.htm，所以可以这样来设置：
datetime属性定义包含文本的时间，这个时间表示信息的发布时间，也可能是更新时间。
【示例5】 下面的代码是使用datetime属性为<ins>标签定义发布时间。
<ins datetime="2014-5-1 8:0:0">2014年上海</ins>
其他语义属性（Other Attributes）定义元素的相关信息，当然这类属性也很多。这里仅列举两个比较实用的属性。
rel：Relationship（关联）。定义当前页面与其他页面的关系。
rev：Reverse Link（反向链接）。定义其他页面与当前页面之间的链接关系。
提及rel属性，很多人把它当作target的替代属性，实际上，它们是不同性质的属性，rel和rev属性相对应，它们的语义比较如下。
rel表示从源文档到目标文档的关系。
rev表示从目标文档到源文档的关系。
这里的源文档可以理解为超链接所在的当前文档，而目标文档也就是这个超链接将要打开的文档。通俗地说，rel属性和rev属性定义文档之间的链接关系，而并非是与超链接中所设置浏览器如何显示目标文档的target属性。
rel属性和rev属性定义了源文档和目标文档的关系，说明如下。
appendix：链接到文档的附录页。
alternate：链接到一个备选的源。
bookmark：链接到一个书签。
chapter：从当前文档链接到一个章节。
contents：链接到当前文档的内容目录。
copyright：链接到当前文档的版权或隐私页面。
glossary：链接到当前文档术语表。
index：链接到当前文档的索引。
next：链接到集合中的下一个文档。
prev：链接到集合中的前一个文档。
section：链接到文档列表中的一个小节。
start：链接到当前文档的第一页。
subsection：链接到当前文档列表中的子小节。
head：链接到集合中的顶级文档。
toc：链接到集合的目录。
parent：链接到源上面的文档。
child：链接到源下面的文档。
【示例】 本示例链接到同一个文件夹中前一个文档，这样当搜索引擎检索到rel="prev"信息之后，就知道当前文档与所链接的目标文档是平等关系，且处于相同的文件夹中。
<a href="4-3.xhtml" rel="prev">链接到集合中的前一个文档</a>
其他关系与此类似，可以根据需要确定当前文档与目标文档之间的位置关系，并进行准确定义，以方便浏览器对于信息的来源进行准确判断。