第 3 章 初探HTML

第 3 章 初探HTML

开发人员多少都知道一点HTML。近年来它的身影随处可见,即便是那些从不需要写HTML代码的人,也很可能见过一些。为了让读者打好基础,本章将回头介绍HTML的基本知识——就从HTML的目标及其工作原理讲起吧。我会解释一些HTML中的基本术语,并且介绍一些几乎所有网页都要用到的核心元素。

顾名思义,HTML是一种标记语言。其标记以应用于文档内容(例如文本)的元素为其存在形式。在后面的各节中,我会解释各种HTML元素的区别,以及使用各种属性配置这些元素的方法,并且介绍一组可用于所有HTML元素的全局属性。表3-1概括了本章内容。

表3-1 本章内容概要

问题

解决方案

代码清单

标记文档内容

使用HTML元素

3-1~3-5

细调浏览器处理HTML元素的方式

把一个或多个属性应用到元素上

3-6~3-10

声明文档包含的是HTML内容

使用DOCTYPEhtml元素

3-11

描述文档

使用head元素,其中包含一个或多个元数据元素(其说明见第7章)

3-12

在HTML文档中添加内容

使用body元素,其中包含文本内容和其他HTML元素

3-13

定义用于选择某个元素的快捷键

使用全局属性accesskey

3-14

对元素进行分类,以便统一其样式或用程序查找该元素

使用全局属性class

3-15~3-17

使元素的内容可被编辑

使用全局属性contenteditable

3-18

为元素添加快捷菜单

使用全局属性contextmenu(目前尚无支持这个属性的浏览器)

指定元素内容的布局方向

使用全局属性dir

3-19

声明元素可拖动

使用全局属性draggable(HTML5中的拖放功能详见第37章)

声明可将其他元素拖放到某个元素上

使用全局属性dropzone(HTML5中的拖放功能详见第37章)

表示某个元素及其内容毋需关注

使用全局属性hidden

3-20

为元素分配一个独一无二的标识符,以便对其应用样式或用程序选择该元素

使用全局属性id

3-21

声明元素内容所用语言

使用全局属性lang

3-22

声明是否应检查元素内容的拼写错误

使用全局属性spellcheck

3-23

直接定义元素的样式

使用全局属性style

3-24

指定HTML文档中元素的Tab键次序

使用全局属性tabindex

3-25

为元素提供额外信息(通常显示为工具提示)

使用全局属性title

3-26

3.1 使用元素

代码清单3-1是一个应用于文本内容的HTML元素的简例。

代码清单3-1 HTML元素示例

I like <code> apples</code> and oranges.

这里用粗体标明元素。该元素分为三部分。其中有两部分称为标签(tag):开始标签<code>和结束标签</code>。夹在两个标签之间的是元素的内容(本例中为单词apples)。两个标签连同它们之间的内容构成code元素。其结构剖析见图3-1。

图3-1 HTML元素剖析

元素是一种用来向浏览器说明文档内容的工具。其效果体现在内容之上。不同的元素有不同的确切含义。例如,前述code元素代表的是计算机代码片段。

提示 元素名不区分大小写。<CODE><code>甚至<CoDe>都会被浏览器视为code元素的开始标签。一般来说,应该认定某种大小写格式并且贯彻始终。近年来更常见的风格是全部使用小写。本书采用的就是这种格式。

HTML定义了各种各样的元素,它们在HTML文档中起着各不相同的作用。code元素是语义元素的一个例子。语义元素可以用来说明内容的含义以及内容的不同部分之间的关系。第8章还会对此做进一步说明。下面的图3-2显示了code元素的效果。

图3-2 code元素在浏览器中的显示效果

注意,浏览器不会显示元素的标签,它的任务是解读HTML文档,然后向用户呈现一个体现了HTML元素作用的视图。

将内容与呈现分开

有些HTML元素会对呈现形式产生影响。浏览器遇到这种元素时,会改变向用户呈现文档内容的方式。code元素就是一例。浏览器遇到该元素时,会用等宽字体显示元素的内容,这可以从图3-2中看出来。

用HTML元素控制内容呈现形式的做法如今受到强烈反对。现在的观点是应该用HTML元素说明文档内容的结构和含义,用CSS(第4章将会介绍)控制内容呈现给用户的形式。

会影响呈现形式的那些元素通常产生于HTML的早期版本,当时将内容与其呈现形式分开这个理念尚未像如今一样得以严格实施。这些元素在浏览器中呈现时有默认的呈现样式(例如code元素通常使用等宽字体),不过可以用CSS改变其默认样式。第4章会谈到这个问题。

3.1.1 了解本章用到的元素

为了让读者对HTML有个初步的认识,我需要用到一些后面各章中才会讲到的元素。表3-2列出了这些元素及其简要说明,还有其全面说明所在的章编号。

表3-2 元素摘要

元素

说明

所在章

a

生成超链接

8

body

表示HTML文档的内容

7

button

生成用以提交表单的按钮

12

code

表示计算机代码片段

8

DOCTYPE

表示HTML文档的开始

7

head

表示HTML文档的头部区域

7

hr

表示主题的改变

9

html

表示文档的HTML部分

7

input

表示用户输入的数据

8

label

生成另一元素的说明标签1

12

p

表示段落

9

style

定义CSS样式

7

table

表示用表格组织的数据

11

td

表示表格单元格

11

textarea

生成用于获取用户输入数据的多行文本框

14

th

生成表头单元格

11

title

表示HTML文档的标题

7

tr

表示表格行

11

1labeltag都是标签的意思。为示区别,本书在提到label时,一律译为“说明标签”。——译者注

3.1.2 使用空元素

元素的开始和结束标签之间并非一定要有内容。没有内容的元素称为空元素。代码清单3-2所示就是一例。

代码清单3-2 空HTML元素

I like <code></code> apples and oranges.

有些元素为空时没有意义(code就是其中之一),即便如此,它也是有效的HTML代码。

3.1.3 使用自闭合标签

空元素可以更简洁地只用一个标签表示。如代码清单3-3所示。

代码清单3-3 只用一个标签表示空元素

I like <code/> apples and oranges.

此例将开始标签和结束标签合二为一。通常用来表示结束标签开始的斜杠符号(/)在此被放到标签的末尾。代码清单3-2和代码清单3-3中的元素等价,但只用一个标签的表示法更为简洁。

3.1.4 使用虚元素

有些元素只能使用一个标签表示,在其中放置任何内容都不符合HTML规范。这类元素称为虚元素(void element),hr就是这样一个元素。它是一种组织性元素(第9章将介绍一些其他的这类元素),用来表示内容中段落级别的终止。虚元素有两种表示法。第一种只使用开始标签,如代码清单3-4所示。

代码清单3-4 用单个开始标签表示虚元素

I like apples and oranges.
<hr>
Today was warm and sunny.

浏览器知道hr是虚元素,所以不会等待其结束标签出现。第二种表示法在此基础上加了一个斜杠符号,其形式与空元素一致,如代码清单3-5所示。

代码清单3-5 用空元素结构表示虚元素

I like apples and oranges.
<hr />
Today was warm and sunny.

我更喜欢这种表示法,并且会在本书中采用。顺便提一句,hr元素也是一个具有呈现形式含义的元素,它会显示为一条横线(这也是其名称的由来)。在图3-3中可以看到hr元素的默认表现形式。

图3-3 hr元素的默认表现形式

用不用非强制使用的开始和结束标签

许多HTML5元素在某些条件下可以省略其中一个标签。例如,html元素(第7章将会讲到)的结束标签在此情况下就可以省略:“该元素后面没有紧跟着一条注释,且该元素包含着一个非空或者其开始标签未曾省略的body元素”。这段引文出自一份正式的HTML5规范文档。你不妨读读这些规范(可从w3c.org获得),但是要注意:它们都是以这样一种“活泼”的风格写就。

标记语言能有这种灵活性挺棒,不过这也会把人弄糊涂,而且会给维护工作带来麻烦。HTML文档并非只由浏览器处理,你的同事和未来的你(在以后回头修整和升级自己的应用程序时)也会阅读它们。浏览器也许能明白某个标签为什么会被省略,但你的同事未必能轻松看出来,就算你自己以后回头修改代码也是如此。出于这个原因,本书不会详述前面所说的那些特殊规定,除非有必要破例(届时会有解释),否则书中的元素都会有开始和结束标签。

3.2 使用元素属性

元素可以用属性(attribute)进行配置。代码清单3-6所示为应用到a元素上的一个属性。这个元素用来生成超链接。点击超链接就会加载另一个HTML文档。

代码清单3-6 使用元素属性

I like <a href="/apples.html">apples</a> and oranges.

属性只能用在开始标签或单个标签上,不能用于结束标签。如图3-4所示,属性具有名称和值两部分。

图3-4 为HTML元素添加属性

有一些全局属性可用于所有HTML元素,本章稍后将有介绍。除了这些全局属性,元素还有用来提供其特有配置信息的专有属性。href属性就限于a元素,它配置的是超链接的目的URL。a元素定义了一批专有属性,它们会在第8章中得到说明。

提示 上面的示例中使用双引号界定属性值(形如"属性值"),不过也可以用单引号(形如'属性值')。如果属性值本身含有引号,那么两种引号都要用到(形如"'含引号的'属性值",或'"含引号的"属性值')。

3.2.1 一个元素应用多个属性

一个元素可以应用多个属性,这些属性间以一个或几个空格分隔即可。代码清单3-7即为一例。

代码清单3-7 为一个元素设置多个属性

I like <a class="link" href="/apples.html" id="firstlink">apples</a> and oranges.

这些属性的顺序未作要求,全局属性和元素专有属性可随意交错。上面的代码清单就是这样做的,其中classid是全局属性(本章稍后会讲到这些属性)。

3.2.2 使用布尔属性

有些属性属于布尔属性,这种属性不需要设定一个值,只需将属性名添加到元素中即可,如代码清单3-8所示。

代码清单3-8 布尔属性

Enter your name: <input disabled>

此例中的布尔属性是disabled,元素中只添加了该属性的名称。input元素为用户在HTML表单(在第12章中讲述)中输入数据提供了一种手段。添加disabled属性可以阻止用户输入数据。布尔属性有一点小古怪,它以本来存在而不是用户为其设定的值对元素进行配置。上例中并未这样设置disabled="true",仅仅是添加了disabled这个词而已。为布尔属性指定一个空字符串("")或属性名称字符串作为其值也有同样的效果,如代码清单3-9所示。

代码清单3-9 为布尔属性指定空字符串值

Enter your name: <input disabled="">
Enter your name: <input disabled="disabled">

3.2.3 使用自定义属性

用户可自定义属性,这种属性必须以data-开头。代码清单3-10演示了这种属性的用法。

代码清单3-10 对元素应用自定义属性

Enter your name: <input disabled="true" data-creator="adam" data-purpose="collection">

这种属性的恰当名称是作者定义属性,有时也称扩展属性。不过我更喜欢使用自定义属性这个常见得多的名称。

自定义属性是对HTML4中“浏览器应当忽略不认识的属性”这种广泛应用的技巧的正式规定。在这类属性名称之前添加前缀data-是为了避免与HTML的未来版本中可能增加的属性名冲突。自定义属性与CSS(在第4章介绍)和JavaScript(在第5章介绍)结合起来很有用。

3.3 创建HTML文档

元素和属性不会孤立存在,它们是用来标记HTML文档内容的。要创建一个HTML文档,最简单的方法是创建一个文本文件,并将其文件扩展名设置成为这类文件规定的.html。这个文件可以直接从磁盘载入浏览器,也可以从Web服务器载入(在本书中,我一般都要使用Web服务器。我的Web服务器名为titan,这个名字经常出现在书中屏幕截图的浏览器窗口中)。

浏览器和用户代理

在本章(及本书大部分章节)中,HTML文档都是针对浏览器创建的。这样看待HTML文档较为省事,而且HTML文档最常见的使用方式也是用浏览器查看。但是还有其他情况需要考虑。用于处理HTML文档的各种软件有一个共同的名称叫做用户代理(user agent)。浏览器是最流行的用户代理,但不是唯一的一种。

非浏览器类用户代理现在还很少,以后可能会多起来。在HTML5中更加强调将内容与呈现形式分开,正是因为认识到HTML内容并不总是会被显示给用户看。本书尽管说的还是浏览器(因为这是最重要、最强势的一类用户代理),但是最好还是记住:你的HTML文档有可能会给别的一些软件处理。

HTML文档具有特定的结构,最起码要有一些关键性的元素。本书绝大多数示例均为完整的HTML文档,这样读者很快就能轻松看出元素的应用方式和效果。为了给你一个初步印象,在此我要先带你看一个基本的HTML文档。代码清单中所有的HTML元素都会在后面各章得到详细讲解,本章提供了它们的相关参照信息。

HTML与XHTML的对比

尽管本书讲的是HTML,但我要是不提一下XHTML(在HTML前面加了一个X)的话,那就太不负责了。符合HTML语法的文档不一定符合XML语法,因此用标准的XML解析程序处理HTML文档可能会遇到麻烦。

为了解决这个问题,可以使用XHTML,它是HTML的XML序列化形式(这就是说,以符合XML规范的方式来表达文档的内容以及HTML元素和属性,以便XML解析程序处理)。此外,也可以创建既是有效HTML文档也是有效XML文档的多语文档(polyglot document),不过这要求使用HTML语法的一个子集。本书不讲XHTML,想了解更多XHTML方面的信息的读者可以参阅这个网址:http://wiki.whatwg.org/wiki/HTML_vs._XHTML

3.3.1 外层结构

HTML文档的外层结构由两个元素确定:DOCTYPEhtml,如代码清单3-11所示。

代码清单3-11 HTML文档的外层结构

<!DOCTYPE HTML>
<html>
    <!-- elements go here -->
</html>

上例中的DOCTYPE元素让浏览器明白其处理的是HTML文档。这是用布尔属性HTML表达的:

<!DOCTYPE HTML>

紧跟着DOCTYPE元素的是html元素的开始标签。它告诉浏览器:自此直到html结束标签,所有元素内容都应作为HTML处理。用了DOCTYPE元素之后又接着使用html元素看起来可能有点奇怪,其实早在HTML标准小荷才露尖尖角的时候,具有同等地位的还有一些别的标记语言,文档中可能会混合使用多种标记语言。

如今HTML已成为占绝对优势的标记语言,即使在文档中省略DOCTYPEhtml元素,绝大多数浏览器仍会假定自己处理的是HTML文档。不过这并不意味着不必再用这两个元素。这是因为它们有着重要的用途,而且依赖浏览器的默认行为模式就像轻信陌生人一样不靠谱——多数情况下事情很顺利,可是冷不防就会出大漏子。关于DOCTYPEhtml元素详见第7章。

3.3.2 元数据

HTML文档的元数据部分可以用来向浏览器提供文档的一些信息。元数据包含在head元素内部,如代码清单3-12所示。

代码清单3-12 在HTML文档中添加head元素

<!DOCTYPE HTML>
<html>
    <head>
        <!-- metadata goes here -->
        <title>Example</title>
    </head>
</html>

这个清单中的元数据少到不能再少,只有title元素一项。按说HTML文档中都应该包含title元素,但是没有的话浏览器通常也不会在意。大多数浏览器把title元素的内容显示在其窗口的标题栏上或用来显示文档的标签页2的标签位置上。第7章会详细说明head元素和title元素,以及可以放在head元素中的所有其他元数据元素。

2IE中称为选项卡。——译者注

提示 代码清单3-12也演示了HTML文档中注释的写法。注释以标签<!--开头,以-->结尾。浏览器会忽略这两个标签之间的一切内容。

除了可包含用于说明HTML文档的元素,head元素还能用来规定文档与外部资源(如CSS样式表)的关系,定义内嵌CSS样式,放置和载入脚本程序。第7章将会示范所有这些用途。

3.3.3 内容

文档的第三部分是文档内容,这也是最后一个部分,放在body元素之中,如代码清单3-13所示。

代码清单3-13 在HTML文档中添加body元素

<!DOCTYPE HTML>
<html>
    <head>
        <!-- metadata goes here -->
        <title>Example</title>
    </head>
    <body>
        <!-- content and elements go here -->
        I like <code>apples</code> and oranges.
    </body>
</html>

body元素告诉浏览器该向用户显示文档的哪个部分。自然,本书大部分篇幅都花在那些需要放在body元素之中的东西上面。把body元素加进来后,HTML文档的基本框架业已成型,本书大部分例子都要用到这个框架。

3.3.4 父元素、子元素、后代元素和兄弟元素

HTML文档中元素之间有明确的关系。包含另一个元素的元素是被包含元素的父元素。在代码清单3-13中,body元素是code元素的父元素,这是因为code元素位于body元素的开始标签和结束标签之间。反过来说,code元素是body元素的子元素。一个元素可以拥有多个子元素,但只能有一个父元素。

包含在其他元素中的元素也可以包含别的元素。从代码清单3-13中也可以看到:html元素包含着body元素,而后者又包含着code元素。body元素和code元素都是html元素的后代元素,但是二者中只有body元素才是html元素的子元素。子元素是关系最近的后代元素。具有同一个父元素的几个元素互为兄弟元素。在代码清单3-13中,head元素和body元素就是兄弟,这是因为它们都是html元素的子元素。

元素间关系的重要性在HTML中随处可见。一个元素能以什么样的元素为父元素或子元素是有限制的,这些限制通过元素类型表现出来(下一节将讨论这个问题)。即将在第4章讲述的CSS中元素间的关系也很重要,圈定应用样式的元素的方法之一就要借助元素的父子关系。最后,本书第四部分中介绍的文档对象模型(DOM)也会涉及通过搜索文档树查找文档中某个元素,而文档树正是元素之间关系的一种表述。在HTML世界里,从后代中辨认兄弟是一种重要能力。

3.3.5 了解元素类型

HTML5规范将元素分为三大类:元数据元素(metadata element)、流元素(flow element)和短语元素(phrasing element)。

元数据元素用来构建HTML文档的基本结构,以及就如何处理文档向浏览器提供信息和指示。其说明见第7章。

另外两种元素略有不同,它们的用途是确定一个元素合法的父元素和子元素范围。短语元素是HTML的基本成分。第8章会介绍最常用的短语元素。流元素是短语元素的超集。这就是说,所有短语元素都是流元素,但并非所有流元素都是短语元素。

有些元素无法归入上述三种类型,这些元素要么没有什么特别的含义,要么只能用在一些非常有限的情况下。li元素就是受限元素的一个例子。它表示列表项,只能有三种父元素:ol(表示有序列表)、ul(表示无序列表)和menu(表示菜单)。该元素详见第9章。从第6章开始的所有元素说明都包含了元素所属类型的信息。

3.4 使用HTML实体

从本章的例子中可以看到,HTML文档中有些字符具有特殊含义——最明显的是<>这两个字符。有时需要在文档内容中用到这些字符,但不想让它们被当做HTML处理。为此应该使用HTML实体(entity)。实体是浏览器用来替代特殊字符的一种代码。表3-3列出了一些常用实体。

表3-3 常用HTML实体

字符

实体名称

实体编号

<

&lt;

&#60;

>

&gt;

&#62;

&

&amp;

&#38;

&euro;

&#8364;

&pound;

&#163;

§

&sect;

&#167;

©

&copy;

&#169;

®

&reg;

&#174;

&trade;

&#8482;

每个特殊字符都有一个实体编号,可以用来在文档内容中代表该字符。例如,字符“&”的实体编号是&#38;。特别常用的特殊字符还有对应的实体名称。例如,对于浏览器来说,&#38;&amp;是一回事。

3.5 HTML5全局属性

本章前面讲过如何用属性配置元素。每种元素都能规定自己的属性,这种属性称为局部属性(local attribute)。第6章在开始详细介绍各种元素的时候,将会列出它们具有的所有局部属性并且示范用法。每一个局部属性都可以用来控制元素独有行为的某个方面。

属性还有另一种类型:全局属性(global attribute)。它们用来配置所有元素共有的行为。全局属性可以用在任何一个元素身上,不过这不一定会带来有意义或有用的行为改变。下面将会介绍所有全局属性并示范其用法。有些全局属性涉及本书后面才会详细讲到的更宏大的HTML特性。对于它们这里会提供相关章节的参照信息。

3.5.1 accesskey属性

使用accesskey属性可以设定一个或几个用来选择页面上的元素的快捷键。代码清单3-14是一个在简单表单中使用这个属性的例子。表单是第12章到第14章的主题,可以在读过那几章之后再来看看这个例子。

代码清单3-14 使用accesskey属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
       <form>
            Name: <input type="text" name="name" accesskey="n"/>
            <p/>
            Password: <input type="password" name="password" accesskey="p"/>
            <p/>
            <input type="submit" value="Log In" accesskey="s"/>
       </form>
    </body>
</html>

此例为三个input元素添加了accesskey属性(input元素的说明见第12章和第13章)。其目的是让网页或网站的熟客可以使用快捷键访问经常用到的元素。用来触发accesskey机制的按键组合因平台而异,在Windows系统上是同时按下Alt键和accesskey属性值对应的键。图3-5展示了accesskey属性的效果。用户可以按Alt+n将键盘焦点转移到第一个input元素,在此输入姓名。接下来按Alt+p将焦点转到第二个input元素,在此输入密码。然后按Alt+s,这等于按下Log In按钮以提交表单。

图3-5 accesskey属性的效果

3.5.2 class属性

class属性用来将元素归类。这样做通常是为了能够找出文档中的某一类元素或为某一类元素应用CSS样式。代码清单3-15示范了如何使用class属性。

代码清单3-15 使用class属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <a class="class1 class2" href="http://apress.com">Apress web site</a>
        <p/>
        <a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
    </body>
</html>

一个元素可以被归入多个类别,为此在class属性值中提供多个用空格分隔的类名即可。类名可以随便取,不过最好取点具有实际含义的,文档中拥有许多元素类别时尤其如此。class属性本身没有任何作用。图3-6是上面的示例在浏览器中的显示结果,从中看到的只是几个超链接。

图3-6 两个应用了class属性的元素

class属性的一种利用方式是设计CSS样式时以所定义的一个或多个类作为应用目标。代码清单3-16即是一例。

代码清单3-16 定义依靠类起作用的样式

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            .class2 {
                background-color:grey;
                color:white;
                padding:5px;
                margin:2px;
            }
            .class1 {
                font-size:x-large;
            }
        </style>
    </head>
    <body>
        <a class="class1 class2" href="http://apress.com">Apress web site</a>
        <p/>
        <a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
    </body>
</html>

此例用style元素定义了两条样式,第一条用于属于class2类的元素,第二条用于属于class1类的元素。

style元素的说明见第7章。第4章会介绍样式以及将其应用到元素上的各种方式。

将这个HTML文档载入浏览器,所定义的样式会被应用到相关元素上,其效果如图3-7所示。用类来确定样式应用对象的好处在于不用对涉及的元素一一重复同样的样式设置。

图3-7 借助class属性应用样式

脚本程序也可以利用class属性。代码清单3-17就是这样一个例子。

代码清单3-17 在脚本中使用class属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <a class="class1 class2" href="http://apress.com">Apress web site</a>
        <p/>
        <a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
        <script type="text/javascript">
            var elems = document.getElementsByClassName("otherclass");
            for (i = 0; i < elems.length; i++) {
                var x = elems[i];
                x.style.border = "thin solid black";
                x.style.backgroundColor = "white";
                x.style.color = "black";
            }
        </script>
    </body>
</html>

此例中的脚本程序找出所有属于otherclass类的元素并对其设置了一些样式。script元素在第7章介绍。第19章到第24章介绍各种样式属性。第26章介绍如何查找文档中的元素。前述脚本的效果见图3-8。

图3-8 在脚本中使用class属性

3.5.3 contenteditable属性

contenteditable是HTML5中新增加的属性,其用途是让用户能够修改页面上的内容。代码清单3-18是一个简单的例子。

代码清单3-18 使用contenteditable属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <p contenteditable="true">It is raining right now</p>
    </body>
</html>

此例把contenteditable属性用在一个p元素(在第9章介绍)身上。该属性值设置为true时用户可以编辑元素内容,设置为false时则禁止编辑。如果未设定其值,那么元素会从父元素处继承该属性的值。这个属性的效果如图3-9所示。用户单击那段文字后即可开始编辑其内容。

图3-9 用contenteditable属性启用编辑功能

3.5.4 contextmenu属性

contextmenu属性用来为元素设定快捷菜单。这种菜单会在受到触发的时候(例如,Windows用户用鼠标右击时)弹出来。在撰写本书的时候,尚无支持这个属性的浏览器。

3.5.5 dir属性

dir属性用来规定元素中文字的方向。其有效值有两个:ltr(用于从左到右的文字)和rtl(用于从右到左的文字)。在代码清单3-19中这两个值都用上了。

代码清单3-19 使用dir属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <p dir="rtl">This is right-to-left</p>
        <p dir="ltr">This is left-to-right</p>
    </body>
</html>

其效果如图3-10所示。

图3-10 从右到左的文字和从左到右的文字

3.5.6 draggable属性

draggable属性是HTML5支持拖放操作的方式之一,用来表示元素是否可被拖放。拖放操作的详细说明见第37章。

3.5.7 dropzone属性

dropzone属性是HTML5支持拖放操作的方式之一,与上述draggable属性搭配使用。二者的介绍都放到第37章。

3.5.8 hidden属性

hidden是个布尔属性,表示相关元素当前毋需关注。浏览器对它的处理方式是隐藏相关元素。代码清单3-20展示了hidden属性的效果。

代码清单3-20 使用hidden属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <script>
            var toggleHidden = function() {
                var elem = document.getElementById("toggle");
                if (elem.hasAttribute("hidden")) {
                    elem.removeAttribute("hidden");
                } else {
                    elem.setAttribute("hidden", "hidden");
                }
            }
        </script>
    </head>
    <body>
        <button onclick="toggleHidden()">Toggle</button>
        <table>
            <tr><th>Name</th><th>City</th></tr>
            <tr><td>Adam Freeman</td><td>London</td></tr>
            <tr id="toggle" hidden><td>Joe Smith</td><td>New York</td></tr>
            <tr><td>Anne Jones</td><td>Paris</td></tr>
        </table>
    </body>
</html>

这个例子的复杂程度有点超标。文档中有一个table元素,它包含的一个tr元素(代表表格中的一行)设置了hidden属性。文档中还有一个button元素,按下它所代表的按钮将会调用定义在script元素中的JavaScript函数toggleHidden。这段脚本程序的作用是:如果那个tr元素的hidden属性存在就将其删除,否则就添加该属性。现在没必要寻思其中原委。第11章会介绍tabletrthtd元素。script元素和事件的介绍分别安排在第7章和第30章。

这里将这些东西烩作一锅是为了演示hidden属性的作用。图3-11显示了按下Toggle按钮的结果。

图3-11 删除和添加hidden属性的效果

hidden属性应用到一个元素之后,浏览器干脆不去显示该元素,仿佛HTML文档中没有这个元素。所以上面的例子中所显示的表格的行数比实际的要少(应用了hidden属性时)。

3.5.9 id属性

id属性用来给元素分配一个唯一的标识符。这种标识符通常用来将样式应用到元素上或在JavaScript程序中用来选择元素。代码清单3-21示范了如何根据id属性值应用样式。

代码清单3-21 使用id属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <style>
        #w3clink {
            background:grey;
            color:white;
            padding:5px;
            border: thin solid  black;
        }
    </style>
    <body>
        <a href="http://apress.com">Apress web site</a>
        <p/>
        <a id="w3clink" href="http://w3c.org">W3C web site</a>
    </body>
</html>

为了根据id属性值应用样式,需要在定义样式时使用一个以#号开头后接id属性值的选择器(selector)。CSS选择器的详细说明见第17章和第18章。第19章到第24章介绍了各种可以使用的样式。上例中样式应用的效果如图3-12所示。

图3-12 根据元素的id属性值应用样式

提示 id属性还可以用来导航到文档中的特定位置。倘若有个名为example.html的文档中包含一个id属性值为myelement的元素,那么使用example.html#myelement这个URL即可直接导航至该元素。该URL的末尾部分(#加上元素id值)称为URL片段标识符(fragment identifier)。

3.5.10 lang属性

lang属性用于说明元素内容使用的语言。代码清单3-22示范了其用法。

代码清单3-22 使用lang属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <p lang="en">Hello - how are you?</p>
        <p lang="fr">Bonjour - comment êtes-vous?</p>
        <p lang="es">Hola -  cómo estás?</p>
    </body>
</html>

lang属性值必须使用有效的ISO语言代码。关于如何声明语言的全面说明可参阅这个网址:http://tools.ietf.org/html/bcp47。不过要注意,语言是个复杂的技术性问题。

使用lang属性的目的是让浏览器调整其表达元素内容的方式。比如说,改变使用的引号,在使用了文字朗读器(或别的残障辅助技术)的情况下正确发音。

lang属性还可以用来选择指定语言的内容,以便只显示用户所选语言的内容或对其应用样式。

3.5.11 spellcheck属性

spellcheck属性用来表明浏览器是否应该对元素的内容进行拼写检查。这个属性只有用在用户可以编辑的元素上时才有意义。代码清单3-23就是一例,例中的textarea元素的介绍见 第14章。

代码清单3-23 使用spellcheck属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <textarea spellcheck="true">This is some mispelled text</textarea>
    </body>
</html>

spellcheck属性可以接受的值有两个:true(启用拼写检查)和false(禁用拼写检查)。至于拼写检查的实现方式则因浏览器而异。图3-13所示为谷歌的Chrome的处理方式,即键入时检查拼写。其他浏览器则需要用户发出检查拼写的指示。

图3-13 Chrome中的拼写检查

警告 目前大多数流行浏览器中的拼写检查都会忽略前面介绍过的lang属性。它们的拼写检查基于用户所用操作系统中的语言设置或浏览器的语言设置。

3.5.12 style属性

style属性用来直接在元素身上定义CSS样式(这是在style元素或外部样式表中定义样式之外的一种选择)。代码清单3-24示范了其用法。

代码清单3-24 使用style属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <a href="http://apress.com" style="background: grey; color:white; padding:10px">
            Visit the Apress site
        </a>
    </body>
</html>

第5章会对CSS作更多说明。第19章到第24章将介绍各种可用的样式选项。

3.5.13 tabindex属性

HTML页面上的键盘焦点可以通过按Tab键在各元素之间切换。用tabindex属性可以改变默认的转移顺序。代码清单3-25示范了其用法。

代码清单3-25 使用tabindex属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <form>
            <label>Name: <input type="text" name="name" tabindex="1"/></label>
            <p/>
            <label>City: <input type="text" name="city" tabindex="-1"/></label>
            </p>
            <label>Country: <input type="text" name="country" tabindex="2"/></label>
            </p>
            <input type="submit" tabindex="3"/>
        </form>
    </body>
</html>

tabindex值为1的元素会第一个被选中。用户按一下Tab键后,tabindex值为2的那个元素会被选中,依次类推。tabindex设置为-1的元素不会在用户按下Tab键后被选中。上面示例中的tabindex设置的效果是:在按Tab键的过程中,键盘焦点从第一个input元素转到第三个,然后又转到Submit按钮,如图3-14所示。

图3-14 用tabindex属性控制焦点转移顺序

3.5.14 title属性

title属性提供了元素的额外信息。浏览器通常用这些东西显示工具提示。代码清单3-26示范了该属性的用法。

代码清单3-26 使用title属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <a title="Apress Publishing" href="http://apress.com">Visit the Apress site</a>
    </body>
</html>

图3-15显示了Chrome使用这个属性值的方式。

图3-15 显示为工具提示的title属性值

3.6 有用的HTML工具

跟HTML打交道时我认为有帮助的工具有两种。第一种是一款优秀的HTML编辑软件。它应该能够将无效元素和属性突出显示出来,保证你不会犯低级错误。我在第2章曾经提到自己比较喜欢Komodo Edit。不过既然有那么多编辑器可供选择,你肯定可以找到一款适合自己的(请确认它支持HTML5)。

另一种工具是大多数浏览器菜单中都有的“查看源代码”。查看文档源代码是验证自己的工作和跟别人学习新技术的重要方式。

3.7 小结

本章跑马观花地介绍了HTML文档的结构和特性,示范了如何用HTML元素标记内容以创建一个HTML文档。读者可以了解到如何使用属性配置浏览器处理元素的方式,以及局部和全局属性的差别。本章还逐一介绍了所有全局属性,并且简要说明了用以标记HTML文档的基本元素和结构。

目录

  • 版权声明
  • 致谢
  • 第一部分 开篇
  • 第 1 章 HTML5背景知识
  • 第 2 章 准备工作
  • 第 3 章 初探HTML
  • 第 4 章 初探CSS
  • 第 5 章 初探JavaScript
  • 第二部分 HTML元素
  • 第 6 章 HTML5元素背景知识
  • 第 7 章 创建HTML文档
  • 第 8 章 标记文字
  • 第 9 章 组织内容
  • 第 10 章 文档分节
  • 第 11 章 表格元素
  • 第 12 章 表单
  • 第 13 章 定制input元素
  • 第 14 章 其他表单元素及输入验证
  • 第 15 章 嵌入内容
  • 第三部分 CSS
  • 第 16 章 理解CSS
  • 第 17 章 使用CSS选择器(第Ⅰ部分)
  • 第 18 章 使用CSS选择器(第Ⅱ部分)
  • 第 19 章 使用边框和背景
  • 第 20 章 使用盒模型
  • 第 21 章 创建布局
  • 第 22 章 设置文本样式
  • 第 23 章 过渡、动画和变换
  • 第 24 章 其他CSS属性和特性
  • 第四部分 使用DOM
  • 第 25 章 理解DOM
  • 第 26 章 使用Document对象
  • 第 27 章 使用Window对象
  • 第 28 章 使用DOM元素
  • 第 29 章 为DOM元素设置样式
  • 第 30 章 使用事件
  • 第 31 章 使用元素专属对象
  • 第五部分 高级功能
  • 第 32 章 使用Ajax(第Ⅰ部分)
  • 第 33 章 使用Ajax(第Ⅱ部分)
  • 第 34 章 使用多媒体
  • 第 35 章 使用canvas元素(第Ⅰ部分)
  • 第 36 章 使用canvas元素(第Ⅱ部分)
  • 第 37 章 使用拖放
  • 第 38 章 使用地理定位
  • 第 39 章 使用Web存储
  • 第 40 章 创建离线Web应用程序